SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question PageHeader&horizontalNav issue: 20px at the bottom and not at the top.

    Hi

    If you cant and paste this code and take a look at the pageHeader part, you'll notice that the horizontal only lets 20px height for the pageHeader part. Actually, what I'd like to do is to have the horizontal Nav 20px height, the 20px being at the bottom of the pageHeader box.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>learning CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html {
    margin: 10px;
    padding: 10px;
    }
    body { 
    background: #fafafa;
    color: #000; 
    margin: 0px; 
    padding: 0px; font-style:normal; font-variant:normal; font-weight:normal; line-height:17pt; font-size:9pt; font-family:verdana
    }
    p {
    margin: 7px;
    }
    #container {
    background: #fff;
    position: relative;
    margin: 0px auto;
    padding: 25px;
    width: 690px;
    height: 400px; 
    border: 3px solid #000;
    }
    #pageHeader {
    height: 120px;
    margin: 0px;
    border: 2px solid #000;
    }
    #navHoz {
    height: 20px;
    margin: 0px;
    border-top: 2px solid #000;
    }
    #mainContent {
    height: 100%;
    border: 2px solid #000;
    } 
    #navVert {
    float: right;
    width: 150px;
    border-left :2px solid #000;
    height: 100%;
    }
    #footer {
    height: 80px;
    border: 2px solid #000
    }
    </style>
    </head>
    <body>
    <div id="container"> 
    <div id="pageHeader">
    <p>pageHeader</p>
    <div id="navHoz">
    <p>horizontal Nav</p>
    </div>
    	</div>
    	<br />
     
    	<div id="mainContent">
    	<div id="navVert"> 
    	<p>nav</p>
    	</div>
    	</div>
    <br />
     
    <div id="footer">
    <p>footer</p>
    	</div>
     
    </div>
    </body>
    </html>
    here are the lines in questions:
    Code:
     #pageHeader {
    height: 120px;
    margin: 0px;
    border: 2px solid #000;
    }
    #navHoz {
    height: 20px;
    margin: 0px;
    border-top: 2px solid #000;
    }
    Any help is more than welcome

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why don't you just separate them out instead of nesting them

    e.g.
    Code:
    #pageHeader {
    height: 100px;
    margin: 0px;
    border: 2px solid #000;
    border-bottom:1px solid #000;
    }
    #navHoz {
    height: 20px;
    margin: 0px;
    border-top: 1px solid #000;
    border: 2px solid #000;
    }
    html:
    Code:
      <div id="pageHeader"> 
    	<p>pageHeader</p>
    	</div> 
     <div id="navHoz"> 
    	  <p>horizontal Nav</p>
    	</div>
    You need to read through the other examples I gave you as the page still isn't displaying properly in Mozilla browsers.

    Paul

  3. #3
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much Paul... Actually I haven't updated my code yet But I will use what you showed me on the other threads. It worked perfectly.


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
  •