SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height and width and position, oh my

    I'm beginning to wonder if I'm ever gonna get this!

    I'm working on this page. If anyone can shed light on the following that would be great:

    • I want the left column (with the address) and the content area (with the gibberish and photos) to be the same height and maintain their positions in a flexible layout.


    • I also can't figure out why the nav bar stretches past the edge of the window. I don't want that horizontal scrollbar down there!


    I've been looking at 2 and 3 column layouts, but none fit what I'm trying to do exactly - I also think I don't understand them too well. Any comments about the CSS code and areas or problems that could really get me into trouble would also be appreciated.

    Thanks!
    Toni

    CSS:
    Code:
    /* CSS Document */
    body {
    	margin: 0;
    	font: 13px arial, helvetica, verdana, "trebuchet ms";
    }
    /* Header */
    #header {
    	background: #fff url(header_generic.gif) no-repeat top left;
    	height: 63px;
    }
    /* Navigation bar */
    #nav ul {
    	margin: 0;
    	padding-left: 160px;
    	background-color: #cccc99;
    	color: #184642;
    	font: 13px arial, helvetica, verdana, "trebuchet ms";
    	float: left;
    	width: 100%;
    	border: solid #cccc99 2px 0 2px 0;
    }
    
    #nav ul li {
    	display: inline;
    }
    
    #nav ul li a {
    	text-decoration: none;
    	font-weight: bold;
    	background-color: #cccc99;
    	color: #184642;
    	padding-left: 2em;
    	padding-right: 2em;
    	float: left;
    }
    #nav ul li a:hover {
    	background-color: #184642;
    	color: #cccc99;
    }
    
    #left {
    	position: absolute;
    	top: 79px;
    	width: 130px;
    	height: 735px;
    	padding: 30px 15px;
    	background-color: #cccc99;
    	color: #184642;
    	text-align: center;
    }
    
    #content {
    	margin-left: 160px;
    	padding: 20px 20px 85px 20px;
    	background-color: #f0f0e0;
    	color: #000;
    	border-bottom: solid #cccc99 1px;
    	border-right: solid #cccc99 1px;
    }
    
    #footer {
    	background-color: #fff;
    	text-align: center;
    	margin: 0 auto;
    	border: solid #fff 1px;
    }
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I also can't figure out why the nav bar stretches past the edge of the window. I don't want that horizontal scrollbar down there
    The reason you have a horizontal scrollbar is that your nav is 100% wide + 160px padding. This makes it 100%+160px which is wider than the screen.

    You need to move the padding out of the same declaration as the width and apply it to an inner element.

    Something like this might work though I haven't had time to test .

    Code:
    #nav {
    float:left;
    width:100%;
    background-color: #cccc99;
    color: #184642;
    }
    #nav ul {
     margin: 0;
     margin-left:160px;
     background-color: #cccc99;
     color: #184642;
     font: 13px arial, helvetica, verdana, "trebuchet ms"; 
     border: solid #cccc99 2px 0 2px 0;
    }
    Paul

  3. #3
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - thank you!! The explanation of WHY it wasn't working is very helpful too (as opposed to just pasting some code).

    but two questions

    - I see that background color and color are repeated in both declarations - why?

    - margin is set as 0 and margin-left is set to a value (in #nav ul) - why are these not conflicting?

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  4. #4
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TBanks
    - I see that background color and color are repeated in both declarations - why?
    No need for that, so you can remove them in the second case.
    Quote Originally Posted by TBanks
    - margin is set as 0 and margin-left is set to a value (in #nav ul) - why are these not conflicting?
    Because anything that is set again later in the stylesheet overrides what you set earlier. You could also make that rule:
    Code:
    margin: 0 0 0 160px;

  5. #5
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Yngwin!
    dare to Dream, dare to Be...
    www.eodweb.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •