html css help with repeating image please

[Galaxip]

hi, im having an issue with trying to create a repeating image after my navigation buttons and im still not getting anywhere after trying various things for 4 days now

what im trying to do is display two images after the navigation buttons, first the bike image followed by the 1 pixel wide wall image which should be repeated all the way from the bike to the right edge of the screen like the following mock-up image



I've tried many things including a <div> with a background image with background-repeat: repeat-x; I just cant seem to get it right and either end up with the wall the full page width behind the buttons and bike or below the buttons bike

I hope somebody can help me with this, ive posted the issue on a few forums and nobody seems to be able to find a solution

thanks

Ive put a copy of index.php navigation.php and style.css all with .txt extensions for easy viewing here http://lovebug.ml/help if you need to take a look
and the images are here http://lovebug.ml/images

thanks

[Galaxip]

after a bit of experimenting and some major help from pandy over at https://forums.htmlhelp.com its fixed

[Light]

I went to your site to check out your answer, and there's two issues I have with it, though you may not care.

1. Your elements don't actually line up where they should. The tail is overlaying the bike, then you compensate for that with z-index. While that works, it's just a little messy.

2. The bigger issue I have with this is that it will require upkeep. By that, I mean every time you change a word, font size, etc. on one of those navigation buttons, it's going to move and offset your bike / trail. Worse yet is, if you add or remove a navigation button. Every change is going to require you to go back in and fix the position. I'll put a screenshot of this issue below where i added just one more button to your list.



What you can do to solve all of this is just float the elements left and allow excess trail to be hidden from view. Here's an example HTML that can help that would replace your DIV with the id logo-cycle. This will allow it to resize on its own whenever you make changes to the navigation.

Code: Select all

<div style="overflow: hidden; white-space: nowrap;">    
	<img style="float: left;" src="http://lovebug.ml/images/light-cycle-red-50.png" />
	<img style="width: 100%; height: 50px;" src="http://lovebug.ml/images/light-cycle-wall-red-50.png" />
</div>

[Light]

Gonna update my example here to use the new filenames for your images in case you try it.

Code: Select all

<div style="overflow: hidden; white-space: nowrap;">    
	<img style="float: left;" src="http://lovebug.ml/images/logo-light-cycle-red-50.png" />
	<img style="width: 100%; height: 50px;" src="http://lovebug.ml/images/logo-light-cycle-wall-red-50.png" />
</div>

[Galaxip]

ah thanks for the reply, I just added a new button and got that horrible result

gonna add your changes now

thanks so much

[Galaxip]

thanks ever so much for that code, much nicer working perfectly

this is exactly what I was trying to do for 4 days but never got it to work

I think I hate css scripting even more than bash scripting now

[Light]

thanks ever so much for that code, much nicer working perfectly

this is exactly what I was trying to do for 4 days but never got it to work

I think I hate css scripting even more than bash scripting now

Glad I could help! I think once you get used to it, CSS won't be so bad. It just tends to get boring because it's time consuming.