Grow your CSS skills. Land your dream job.

CSS Roadblocks with WP Genesis Child-Theme Creation

  • # December 29, 2012 at 2:48 pm

    I’m running into 3 2 roadblacks while attempting to finish development on this concept site.

    Here’s the site thus far: [CLICK LINK](http://mud.cleartouchvisuals.com/ “Mijello Concept WP Site”). And here’s a PasteBin link to the CSS I’ve altered thus far: [PasteBin CSS](http://pastebin.com/aaj5sY9U “PasteBin CSS”).

    1) For the life of me I can’t figure out a proper way to get my drop-downs to sit nicely underneath the navigation menu _(hover over Chromatics)_. Using line-height on the parent makes the items that are on double lines bigger than they need to be. Using min-height works, but feeds down to the children which is also a no-no.
    **SOLVED**

    2) I’ve centered the main title of the site. However something still looks so very off to my eyes. Almost like it’s still a little bit more to the left than it should be. I’m trying to get it done without nudging with padding or margin, but all attempts are failing.
    **SOLVED – WAS JUST PARANOID**

    3) The same problem I’m having with the main title also applies to the newly registered menu I’ve created for the footer area. Using XScope I can see that there’s about 230-ish pixels of space on the left, and around 280-ish pixels of space on the right. It’s bugging me so bad.
    **SOLVED – DUSTIN HELPED WITH BELOW COMMENT**

    # December 29, 2012 at 9:29 pm

    I can help you with your third issue.
    Your footer **ul** width is being set to 550px, and centered. And the links inside are floating to the left. I would recommend have the **ul** and **li** elements be inline, and have the _text-align_ set to _center_. I changed some of your code. This works well:



    #footer .wrap {
    overflow: hidden;
    padding: 10px 15px;
    text-align: center;
    }

    #menu-menu-footer {
    margin: 0 auto;
    padding: 0;
    display: inline;
    }

    #menu-menu-footer li {
    padding: 0 4px 0;
    border-left: 1px solid black;
    list-style-type: none;
    font-size: 12px;
    display: inline;
    }

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

You must be logged in to reply to this topic.

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