SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict alfie.romeo's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    general layout question - borders and spacing between DIVS

    [HTML]hello

    i am just creating a basic layout top bar, nav to the left with centre content and i want to create two columns within this centre section.

    i have done something that works, basically i want two columns with a line dividing down the middle. i have achieved this by putting a 1px border on the left side of my contentright DIV. it works but i don't think it is that brilliant. i have had to manually enter the pixel width of the margins so it kind of sits in the middle and of course, if you increase the text, everything changes anyway.

    the other thing and this is just a slight tweak but how (using my technique) would you get the dividing line to be the exact height of the text? i've had a play with the margins on the divs but it hasn't made a difference. the line is just a little too long at the top and the bottom.

    if anyone has any suggestion or tips on how to improve this, it would be most appreciated. cheers.

    here is my code:

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Our track record</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    
    </script>
    <style type="text/css">
    <!--
    *{padding:0;margin:0;}
    
    p { padding: .2em 0; }
    
    html{
    	min-width:768px;
    	margin:0;
    	padding:0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	line-height: 20px;
    	color: #333333;
    }
    
    body{
    	margin:0;
    	padding:0;
    	border:0;
    
    }
    
    h1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 24px;
    	line-height: 28px;
    	color: #FF6600;
    }
    a,
    a:link {
    	color: #AABFD4;
    	font-family: Arial;
    	text-decoration: none;
    }
    
    a:visited {
    }
    
    a:hover {
    
    }
    a:focus {
    	color: #94AFC9;
    	font-weight: bolder;
    }
    
    #wrap{
    	width:768px;
    	margin:0 auto;
    	text-align:left;
    	border: 0px none;
    }
    
    #header {
    	margin-right: 0px;
    	clear: none;
    	float: right;
    	margin-top: 10px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	
    }
    
    #navigationstrip {
    	width:200px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	line-height: 24px;
    	font-weight: lighter;
    	position: absolute;
    	top: 305px;
    	
    }
    
    #navigationstrip ul {
    	display: block;
    	padding-left: 12px;
    }
    
    #navigationstrip li {
    	list-style-type: none;
    	float: left;
    	padding-right: 20px;
    	
    }
    
    #navigationstrip a {
    	font-weight: 100;
    
    }
    
    #navigationstrip a:visited {
    	font-weight: lighter;
    }	
    
    #navigationstrip a:hover {
    	font-weight: bold;
    	color: #7B9AB8;
    
    }
    #navigationstrip a:focus {
    	font-weight: bold;
    	color: #7B9AB8;
    
    }
    
    .content {
    	float: left;
    	margin-right: 75px;
    	margin-left: 216px;
    	margin-top: 30px;
    }
    
    #contentleft {
    
    	padding-top: 0px;
    	padding-bottom: 0px;
    	position: absolute;
    }
    
    #contentleft ul {
    	display: block;
    }
    
    #contentleft li {
    	list-style-type: none;
    	
    }
    
    #contentright {
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #999999;
    	padding-left: 30px;
    	float: left;
    	margin-left: 75px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    }
    
    #contentright ul {
    	display: block;
    }
    
    #contentright li {
    	list-style-type: none;
    	
    }
    
    .orangetext {
    	color: #FF6600;
    
    }
    
    -->
    </style>
    </head>
    
    <!-- start html -->
    <div id="wrap">
      <div id="header"> <img src="images/bdyn-he-5.jpg" width="768" height="285" /> 
        <!-- end header -->
      </div>
    
      <div id="navigationstrip"> 
        <ul>
          <li><a href="#">navigation 1</a></li>
          <li><a href="#">navigation 2</a></li>
          <li><a href="#">navigation 3</a></li>
          <li><a href="#">navigation 4</a></li>
          <li><a href="#">navigation 5</a></li>
          <li><a href="#">navigation 6</a></li>
        </ul>
        <!-- end navigationstrip -->
      </div>
      
      <div class="content"> 
    
        <div id="contentleft"> 
    	<ul>
          <li>number 1</li>
          <li>number 2</li>
          <li>number 3</li>
          <li>number 4</li>
          <li>number 5</li>
          <li>number 6</li>
          <li>number 7</li>
    	  </ul>
    	  
          <!-- end contentleft -->
        </div>
    
    <div id="contentright">
    <ul>
    <li>Detail 1</li>
    <li>Detail 2</li>
    <li>Detail 3</li>
    <li>Detail 4</li>
    <li>Detail 5</li>
    <li>Detail 6</li>
    <li>Detail 7</li>
    </ul>
    <!-- end contentright -->
    </div>
    
    
    <!-- end content -->
      </div>
    
    
      
    <!-- end wrap -->
      </div>
      </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm about to head out, but remove the XML encoding from the top line of your file. It'll put IE 6 into quirks mode.

  3. #3
    SitePoint Addict alfie.romeo's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks dan

    i am going to have another look at this tomorrow cause i've done a rebuild now. i don't think the spine of my CSS layout was very good so i have changed it to have the image sat at the top of the centred wrap and the navigation sat on the left with an absolute positioning etc..

    i wondered whether i should make my contentleft and contentright divs auto widths. i will give that a go tomorrow. my eyes are hurting now.

    cheers


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
  •