vertically aligning h1 and nav in header — using skeleton framework

Question

I understand that the vertical align problem has popped up over and over here. I made an account just to post this, so hopefully I can justify asking. I've searched through dozens of other posts and methods for a fix, but can't seem to get it / understand.

I'm using skeleton framework. I'm just trying to align my h1 with my nav>ul>li. Maybe this has something to do with my problem, as when I try using a fix in which a parent div has relative position and the child relative.. well it doesn't work.

Technically, I could just apply padding to the but wouldn't that be inefficient, say if I changed the font family or size of the h1, it would require me to pixel peep at my screen to see if I can pad it back into being vertically centred with the h1.

Any tips? I'm still pretty new to CSS. Thanks for your patience.

here is my html:

</head>
<body>

<div class="container">

    <header>
    <h1 class="four columns">my header</h1>
    <nav class="ten columns">
        <ul class="nav1">
            <li><a class="toggleclass" href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Elsewhere</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="worknav hidden">
            <ul class="nav2">
                <li><a href="#">Sound</a></li>
                <li><a href="#">Moving-Visuals</a></li>
                <li><a href="#">Stills</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="#">Text</a></li>
            </ul>
        </div>
    </nav>
    <p class="sixteen columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, dicta, voluptatibus, adipisci neque doloremque accusantium magni possimus aliquam totam commodi recusandae id culpa animi temporibus blanditiis nulla pariatur dolore voluptate?</p>
    </header>
</div>

Here is my CSS:

header{

    padding-top: 20px;
}

header a{
    text-decoration: none;
}

header h1{

}

nav li{
    display: inline;
    padding-right: 50px;
}


.worknav{
    display: none;
}

Thanks for any help. I've also attached an image of what I want to achieve. ( http://cl.ly/RbV7 )

Answer 1

Part of the trick to this type of question is understanding how the CSS box model works. The box model describes how margins, borders and padding work together. You can read about that here .

You'll also need to understand how text is laid out. Specifically, how font-size and line-height work together, and within the various types of CSS display options. You might try this article which gets in a bit deep about typography, but has some good information on understanding text sizing, especially the diagram on font-size and line-height.

Whatever you decide, you're going to have to adjust something in CSS any time you change the font size, and if you understand padding, that might be what you go with. If you figure out how line-height works, you could do that instead.

I've played with the jsfiddle a bit and if it's aligning the top of the H1 title with the top of the list items that you're looking for, I think I was able to get it to do that by tweaking line-height.

vertically aligning h1 and nav in header — using skeleton framework

Question

1 answers

solution1
2 2013-09-26 03:48:58

vertically aligning h1 and nav in header — using skeleton framework

Question

1 answers

solution1 2 2013-09-26 03:48:58

solution1
2 2013-09-26 03:48:58