CODEWITHSUNDEEP
htmlcss
elykl33t
elykl33t

Reputation: 997

Alignment troubles in CSS

I know my website looks pretty crappy. It's a work in progress! I have no prior HTML or CSS experience.

The specific part I am struggling with right now is how my name in the site header is not aligned with the links and images. I have tried multiple solutions regarding alignment (setting the line-height, vertical-align, etc.) but nothing is working. I just don't see why the is starting so far from the header/top of the page.

Here is the relevant CSS:

.header {
    margin: 0;
    background: #1c1c1c;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0;
    background: #101010;
}

.header h1 {
    display: inline;
    color: #ffffff;
}

.header ul {
    display: inline;
}

.header ul li {
    display: inline;
}

.header ul li a:hover {
    opacity: 0.5;
    background: none;
}

.header ul li a {
    display: inline;
    padding: 0 0.2em;
    opacity: 0.25;
}

.header ul li a:hover {
    opacity: 1;
}

.header p {
    background: #1c1c1c;
}

Here is the relevant HTML:

<div class="header">
                <h1>Kyle Parker</h1>

                <ul>
                    <li>
                        <a href="http://www.linkedin.com/pub/kyle-parker/54/16b/965/" title="My resume on Linkedin">
                            <img src="img/icon-linkedin.png" alt="LinkedIn" />
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com/KyleSparker" title="Follow me on Twitter">
                            <img src="img/icon-twitter.png" alt="Twitter" />
                        </a>
                    </li>
                </ul>
            </div>

Can anyone maybe tell me how to fix it with a little explanation? Thanks!!

Upvotes: 1

Views: 57

Answers (4)

hsubi
hsubi

Reputation: 1

I would style it slightly differently using position relative for header div. Also, giving divs for logo and links. Finally adding line-height for links so that they are centered. Here's the fiddle - http://jsfiddle.net/hsuh/zFVRb/

.header .links {
  float: left;
  line-height: 30px;
 }

Upvotes: 0

Mark
Mark

Reputation: 4883

Here you go:

http://jsfiddle.net/xFeWH/

Just add:

.header ul li a img{margin-bottom:-5px;}

Upvotes: 0

vapcguy
vapcguy

Reputation: 7545

You have position:absolute, but you also have top:0 and left:0, which go with position:fixed, not absolute. You should use position:fixed.

But when doing alignment, to me, it's far easier to do it using tables, where you can control widths, colspans, etc.

Upvotes: 0

ralph.m
ralph.m

Reputation: 14365

Try something like this: http://codepen.io/pageaffairs/pen/pkFig

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

body {margin: 0; padding: 0;}

.header {
    margin: 0;
    background: #1c1c1c;
    text-align: left;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background: #101010;
}

.header h1 {
    display: inline-block; vertical-align: middle;
    color: #ffffff;
}

.header ul {
    display: inline-block; vertical-align: middle;
}

.header ul li {
    display: inline;
}

.header ul li a:hover {
    opacity: 0.5;
    background: none;
}

.header ul li a {
    display: inline;
    padding: 0 0.2em;
    opacity: 0.25;
}

.header ul li a:hover {
    opacity: 1;
}

.header p {
    background: #1c1c1c;
}

</style>
</head>
<body>

<div class="header">
    <h1>Kyle Parker</h1>

    <ul>
        <li>
            <a href="http://www.linkedin.com/pub/kyle-parker/54/16b/965/" title="My resume on Linkedin">
                <img src="http://placehold.it/60x60" alt="LinkedIn" />
            </a>
        </li>
        <li>
            <a href="https://twitter.com/KyleSparker" title="Follow me on Twitter">
                <img src="http://placehold.it/60x60" alt="Twitter" />
            </a>
        </li>
    </ul>
</div>

</body>
</html>

Upvotes: 1

Related Questions