SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    little advice needed from someine experieced with css

    Hi all,

    I have been playing around with a template page in dreamweaver the three column fixed with header and footer. Now the problem that I cant understand is how to get the content to line up right to the top of sidebar 1 and sidebar 2. I have tried messing arou8ng with the padding etc but cant for the life of me work it out.

    any advice woiuld be appreciated.

    It actually positions fine in FF so its obviously an issue with IE

    thanks in advance
    Rob

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rob,

    What does your code look like?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its still very basic from the dreamweavber template - I have added the css and the current html. thanks for replying BTW

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="thrColFixHdr.css" rel="stylesheet" type="text/css" />
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .thrColFixHdr #sidebar1 { width: 180px; }
    .thrColFixHdr #sidebar2 { width: 190px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]--></head>
    
    <body class="thrColFixHdr">
    
    <div id="container">
      <div id="header">
        <h1>Header</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
        <div class="tester" id="tester">Content for  class "tester" id "tester" Goes Here</div>
        <p>&nbsp;</p>
        Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. 
        <!-- end #sidebar1 -->
      </div>
      <div id="sidebar2">
        <h3>Sidebar2 Content</h3>
        <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
      <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1> Main Content </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
        <h2>H2 level heading </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    	<!-- end #mainContent --></div>
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>Footer</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

    Code:
    @charset "utf-8";
    body  {
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    	font-size: 11px;
    }
    .thrColFixHdr #container { 
    	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #FFFFFF;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    } 
    .thrColFixHdr #header { 
    	background: #DDDDDD; 
    	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    } 
    .thrColFixHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    .thrColFixHdr #sidebar1 {
    	float: left; /* since this element is floated, a width must be given */
    	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	background: #EBEBEB; /* padding keeps the content of the div away from the edges */
    	padding-right: 10px;
    	padding-bottom: 15px;
    	padding-left: 20px;
    }
    .thrColFixHdr #sidebar2 {
    	float: right; /* since this element is floated, a width must be given */
    	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    	padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
    }
    .thrColFixHdr #mainContent { 
    	margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
    	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    } 
    .thrColFixHdr #footer { 
    	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    	background:#DDDDDD;
    } 
    .thrColFixHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    #content h3 {
    	font-size:100%;
    	margin: 0;
    	}#tester {
    	height: 180px;
    	width: 160px;
    }

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a lot of code. Hang on, let me see what it actually does and I'll try to come up with a cleaner version for you.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, quick question. Which column will the menu be going in?

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am hoping to add a div for the menu under the header so I can have a horizontal menu. What will be going in the right and left columns will be graphics advertising products but I just cant figure how to get them to display right at the top of these columns without there bienag a gap there. My thinking was ad divs in these columns and place the graphics in those individual div but that may not be possible becasue as I have said Im a novice with css layouts.

    thanks
    Rob

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. Ok, that helps a lot.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    You can change that to padding-top:0 if that's the look I think you're trying to acheive.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still won't help much. That layout's broken and buggy by default, and uses far too much code to achieve the effect he wants.

    I have a rewrite in progress.

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    The default padding and margins of H and P tags work on there containers

    Your code with padding on tags in containers and centering navigation
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>12345 12345 12345 1`2345 12345</title>
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	body{
    	background: #666666;
    	text-align: center;
    	color: #000000;
    	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    	font-size: .7em;
    	}
    	
    	.thrColFixHdr #container{
    	width:780px;
    	background:#FFFFFF;
    	margin:0 auto;
    	border:1px solid #000000;
    	text-align: left;
    	}
    	
    	.thrColFixHdr #header{
    	background: #DDDDDD; 
    	padding:0 10px 0 20px;
    	}
    	
    	.thrColFixHdr #header p{padding:10px 0;}
    	
    	.thrColFixHdr #sidebar1,.thrColFixHdr #sidebar2{padding-bottom:15px;background: #EBEBEB;width:180px;}
    	
    	.thrColFixHdr #sidebar1{float:left;}
    	
    	.tester{
    	padding:0 10px 15px 20px;
    	height:180px;
    	}
    	
    	.thrColFixHdr #sidebar2 {float:right;}
    	
    	.thrColFixHdr #sidebar1 p,.thrColFixHdr #sidebar2 p,.thrColFixHdr #sidebar2 h3,.thrColFixHdr #footer p{padding:0 10px 0 20px;}
    	.thrColFixHdr #sidebar2 h3{padding-top:0px;}
    	.thrColFixHdr #sidebar2 p{padding-top:15px;}
    	
    	.thrColFixHdr #mainContent{
    	overflow:auto;
    	padding: 0 10px;
    	}
    	
    	* html #mainContent{float:left;}
    	* html #mainContent p,.thrColFixHdr #footer,.thrColFixHdr #footer p{height:1&#37;;}
    	
    	.thrColFixHdr #footer{
    	clear:both;
    	background:#DDDDDD;
    	}
    	
    	.thrColFixHdr #footer p{padding-top:10px;padding-bottom:10px;min-height:1%;}
    	
    	.fltrt {
    	float: right;
    	margin-left: 8px;
    	}
    	.fltlft{
    	float:left;
    	margin-right: 8px;
    	}
    	
    	.nav{
    	padding:.7em 0;
    	text-align:center;
    	list-style:none;
    	background:#b4b4b4;
    	}
    	html .nav .y{border-left:1px solid #7e7e7e;}
    	
    	.nav li{display:inline;}
    	
    	.nav a{
    	padding:.6em 3em;
    	background:#c6c6c6;
    	border:1px solid #7e7e7e;
    	border-left:none;
    	}
    	.nav a:hover{background:#eaeaea;}
    	</style>
    </head>
    <body class="thrColFixHdr">
    
    <div id="container">
    
    <div id="header"><p>Header</p></div>
    
    <ul class="nav">
    <li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
    </ul>
    
    <div id="sidebar1">
    <div class="tester" id="tester">Content for  class "tester" id "tester" Goes Here</div>
    <p>&nbsp;</p>
    <p>
    Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. 
    </p>
    </div>
    
    <div id="sidebar2">
    
    <h3>Sidebar2 Content</h3>
    
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. 
    </p>
    <p>
    Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien.
    </p>
    
    </div>
    
    <div id="mainContent">
    
    <h1> Main Content </h1>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. 
    </p>
    
    <h2>H2 level heading </h2>
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
    </p>
    </div>
    
    <div id="footer"><p>Footer</p></div>
    
    </div>
    
    
    </body>
    </html>

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks very much for all your help everyone Ive started to grasp it slightly. My layout will probably have some errors still - I'll post my page when Ive got a bit more done on it.


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
  •