Back To Website Design Forum

CSS Absolute Positioning

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Joined: Nov 22, 2004
  • Posts: 684
  • Loc: ATL-GA
  • Status: Offline

Post November 13th, 2007, 4:47 pm

I have a problem with the logo in the top right hand corner not extending all the way to the edge of the page because the page scrolls. I still have a little more styling to do but I have it set to 0 on the right. Any suggestions? This is only the second time I have played with absolute so I am not exactly sure how to fix it.

http://www.push-here.com/

Thanks in advance.
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 13th, 2007, 4:47 pm

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 13th, 2007, 6:19 pm

I believe the problem is occuring from the padding on "#navcontainer li" and "#navcontainer a".

Because of the way the box-model works, even though you've specified a width, the padding is creating space around the elements. Your logo is positioning itself as if the page didn't have this extra space.

In my test, removing the padding from these elements also eliminated the horizontal scroll bar.

Of course, you'll want that negative space in those elements back. Unfortunately, I don't have a suggestion at the moment - I have to go read bedtime stories.
- dM
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 13th, 2007, 7:46 pm

Okay, here's my quick solution...
Code: [ Select ]
#navcontainer{}
#navcontainer ul{margin:0;padding:0;list-style-type:none;font:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
#navcontainer li{width:130px;padding:0;margin:8px 0 0 0;}
#navcontainer a{display:block;padding:3px;background-color:#444;}
  1. #navcontainer{}
  2. #navcontainer ul{margin:0;padding:0;list-style-type:none;font:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
  3. #navcontainer li{width:130px;padding:0;margin:8px 0 0 0;}
  4. #navcontainer a{display:block;padding:3px;background-color:#444;}


You won't like the mouse interaction in IE6 and I don't have a Mac to test on either.
- dM
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Joined: Nov 22, 2004
  • Posts: 684
  • Loc: ATL-GA
  • Status: Offline

Post November 14th, 2007, 6:50 am

Yup yup the li were too long. That was driving me a bit crazy. Thanks.
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 106 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.