CODEWITHSUNDEEP
csspositioning
renegadeds
renegadeds

Reputation: 99

Positioning header items using CSS only

I've been asked to change the layout of this charity website:

http://antidotemarketing.com/youthlife/

I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.

This must be done using CSS only.

So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)

One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.

Thanks everyone :)

Upvotes: 0

Views: 142

Answers (1)

Jason
Jason

Reputation: 2364

OK, I think I finally understand what you are after. Try adding the following styles:

#logo {
  position: absolute;
  top: 80px;
  z-index: 100;
}
#login #logo {
  position: relative;
}
#page {
  margin-top: 45px;
}

Upvotes: 1

Related Questions