html css help with repeating image please

Anything About Anything...
Post Reply
User avatar
Galaxip
Core Dumper
Posts: 112
Joined: Wed Aug 24, 2016 10:49 pm

html css help with repeating image please

Post by 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 Image followed by the 1 pixel wide wall image Image which should be repeated all the way from the bike to the right edge of the screen like the following mock-up image

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
Image Image Image
randomly changing stuff in your code until it works is "hacky" and "bad coding practice"
do it fast enough and its "machine learning"

User avatar
Galaxip
Core Dumper
Posts: 112
Joined: Wed Aug 24, 2016 10:49 pm

Re: html css help with repeating image please

Post by Galaxip »

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

Image
Image Image Image
randomly changing stuff in your code until it works is "hacky" and "bad coding practice"
do it fast enough and its "machine learning"

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: html css help with repeating image please

Post by 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.

Image

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>

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: html css help with repeating image please

Post by 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>

User avatar
Galaxip
Core Dumper
Posts: 112
Joined: Wed Aug 24, 2016 10:49 pm

Re: html css help with repeating image please

Post by 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
Attachments
Untitled-1.png
Image Image Image
randomly changing stuff in your code until it works is "hacky" and "bad coding practice"
do it fast enough and its "machine learning"

User avatar
Galaxip
Core Dumper
Posts: 112
Joined: Wed Aug 24, 2016 10:49 pm

Re: html css help with repeating image please

Post by 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
Attachments
Untitled-1.png
Image Image Image
randomly changing stuff in your code until it works is "hacky" and "bad coding practice"
do it fast enough and its "machine learning"

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: html css help with repeating image please

Post by Light »

Galaxip wrote:
Sun Jan 31, 2021 7:24 pm
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. :)

Post Reply