Grow your CSS skills. Land your dream job.

[Solved] Synchronizing a background w/ a list item

  • # September 13, 2013 at 12:01 pm

    I 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) ?

    http://codepen.io/anon/pen/oGguw

    # September 13, 2013 at 12:58 pm

    Here, 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 19, 2013 at 9:18 pm

    Thanks Paulie_D, it was helpful in centering up all elements and getting it to be responsive. I am still left with having to either:

    A) Not break up the rocket + fire (1024px) image, http://codepen.io/modiophile/full/uqhtB Problem with this, is that the entire image becomes hot and I can’t utilize position: relative.

    B) 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.

    # September 21, 2013 at 1:23 am

    B) 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 23, 2013 at 2:23 pm

    Thanks Paulie_D, I was able to center both elements even whilst using a media query. http://codepen.io/modiophile/full/hfaEy (The list only disappears because placeit doesn’t allow for opacity and I don’t need to mess with z-index with this image IRL)

    P.S. I don’t see a button/option to mark “Solved”

    # September 24, 2013 at 10:34 am

    Didn’t want to make a new topic for this, but I just wanted to add a sub-menu as such:

                ...<ul class="menu">
                    <li><a href="solutions.html">SOLUTIONS</a>
                        <ul class="sub-menu">
                            <li><a href="product_design.html">PRODUCT DESIGN</a></li>
                            <li><a href="consulting.html">CONSULTING</a></li>
                        </ul>
                    </li>
                    <li><a href="retail.html">RETAIL</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>...
    

    How do I make the parent list item “SOLUTIONS” conform to the size of its nested children “PRODUCT DESIGN” and “CONSULTING”?

    I didn’t set a width on any of the lists or list items and have set all list items with a display: inline-block yet the nested list is still stacking atop eachother as though space was constrained!

    http://codepen.io/modiophile/pen/ADGop

    # September 24, 2013 at 11:19 am

    How 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:21 am

    Oh ok, I thought much like whatever the contents of a div is the size of said div will conform to whatever the total size of said contents are. I don’t get why a list item would behave any differently, but apparently it does.

    # September 24, 2013 at 11:24 am

    Sorry…updated my post with example menu.

    # September 24, 2013 at 11:29 am

    Got it thanks, I see you gave the list items a width, that’s what I’m trying to avoid doing as I’m not going after buttons, but linkable text that is evenly distributed. I’ll see what I could come up with…

    FYI, with my example I first calculated the width of the computed text and figured out the remaining space which then was evenly split up as a padding % to fill out the container.

    # September 24, 2013 at 11:43 am

    Here’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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".