- This topic is empty.
-
AuthorPosts
-
September 13, 2013 at 12:01 pm #150002
modiophile
ParticipantI have a centered background .png image (#logo-fire) that I want to follow with a list item (#logo) on my menu when scaled.
It looks and works just fine at 1024px and above, but once I start scaling the window down, the background image (#logo-fire) and list item (#logo) start drifting apart. My idea was to have both of them in sync, that way the list item will always be clickable no matter the window size.
Is it possible for the background image to position itself as though its only 128px in width, but display at 1024px (w/ overflow:hidden) ?
September 13, 2013 at 12:58 pm #150011Paulie_D
MemberHere, try picking this apart…I keep it linked for reference…it does some pretty cools things…I wish it were one of mine.
http://codepen.io/wolfcry911/pen/HyLdg
Breaking your image into two parts (rocket and fire) would be useful I feel….especially at lower screen sizes where you could just not use the fire portion of it.
September 21, 2013 at 1:23 am #150830Paulie_D
MemberB) Break up the rocket (128px) + fire (1024px) and somehow get the two to move in sync? Throw a hot empty div on top of the 128px rocket and have the rocket + fire (1024px) as a background image that follows the empty div. Tried it without success.
If the rocket is always in the center of the page (barring any media queries) then the fire could be placed as a bg of the body and centered using
background-position
.The two should then follow each other.
September 24, 2013 at 11:19 am #151110Paulie_D
MemberHow do I make the parent list item “SOLUTIONS” conform to the size of its nested children “PRODUCT DESIGN” and “CONSULTING”?
There is no selector that will let you style a parent based on a child.
I would style the parent and then see what needs to be done to the children to give them the same appearance.
I keep this around for reference…it’s not exactly what you are after but it might prove useful.
http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294
September 24, 2013 at 11:24 am #151112Paulie_D
MemberSorry…updated my post with example menu.
September 24, 2013 at 11:43 am #151116Paulie_D
MemberHere’s a similar one with no set width on the list items but centered links.
I added padding to the anchor links in the top level list items but be aware that the sub menus will inherit whatever width you let the toplevel list items have.
I haven’t gone into it yet but I’m sure that could be tweaked.
http://codepen.io/Paulie-D/pen/01e9d55c13dd3770da9690f9f1eba8bf
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.