CODEWITHSUNDEEP
htmlcss
Imperative
Imperative

Reputation: 662

H3 is aligning right of center, need a fresh set of eyes

I have a potentially stupid question here.

I've got a fiddle with a block of welcome text coming up off-center. I'm usually excellent at trouble-shooting my own CSS but this is making me absolutely batty. I've stripped all of the extra margin autos and text-align centers away to make this clearer. You can actually delete the entire JS segment and set the #welcome DIV opacity back to 1 for further clarity.

http://jsfiddle.net/Imperative/29Aat/88/

Here's the relevant CSS:

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#wrap {
    zoom: 1;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}
#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
}

I'm clearly missing something really novice and really obvious but I'm too close to this thing 88 iterations in and I'm completely missing the boat.

What is cascading downwards from html, body, wrap and causing the whole #welcome block to shift right? I would have expected a lot of positions without any efforts at centering anything but a 50% shift to the right? What the frack?

Upvotes: 5

Views: 3344

Answers (4)

Imperative
Imperative

Reputation: 662

Ended up being a simple solution:

#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
    clear: both;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
    text-align: center;
}

I had to clear the float on the Welcome, at which point positioning went back to normal. At that point, adding the center back to the H3 worked as expected.

Fixed Fiddle: http://jsfiddle.net/Imperative/29Aat/102/

Upvotes: 1

Blender
Blender

Reputation: 298206

Your <nav> element can't contain <li> elements. You have to put them into a <ul>:

nav
  ul
    li
    li

As for your actual problem: your header is collapsing because it contains floating elements. Give it overflow: auto and it will resize to fit them:

header.topbar {
    overflow: auto;
    /* Get rid of this: height: 80px; */
}

Finally, center the text:

#welcome {
    text-align: center;
}

And it works: http://jsfiddle.net/29Aat/103/

Upvotes: 3

J.D.
J.D.

Reputation: 99

Without seeing the HTML, I would first wonder if the #wrap is sitting beside the #welcome, causing it to move off center?

Okay, I'm still learning this stackoverflow thing, so cut me a bit of slack on operations here please. That being said, I see now what this jsfiddle thing can do.

Looking at the html code, you never closed the wrap-div before opening the welcome-div.

That the problem you looking at? I tried closing the div tag and adding a text-align:center to the css, but now the welcome banner has disappeared.

Okay, a bit of code tinkering lead to this:

1) Close the Wrap-div tag (I'm pretty certain that I managed to put it in the right place) 2) Modify the CSS bank:

position: absolute;
opacity: 0;
top: 25%;
width:100%;
text-align:center;

Upvotes: 0

Artur K.
Artur K.

Reputation: 3309

If I understood you correctly you want the header completely in the center. But you didn't define nav width. Here's the updated fiddle:JSFiddle

Here's what I added: 

nav {
    width: 100%;
}

#welcome h3 {
    text-align: center
}

Upvotes: 2

Related Questions