SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Maryland, USA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra spacing around 3 col layout

    I started this from Paul O'Briens example in the FAQ. I have figured out most of the stuff I want, but can't seem to shake extra space around the #container.
    Here is a link to the page

    Here is the actual code.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3c.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=iso-8859-1" />
    <title>Test Page</title>
    <style type="text/css">
    /* commented backslash hack v2\*/
    html, body {
    	height:100%;
    }
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	text-align:center;
    	font-size:76%;
    }
    #container {
    	height:100%;
    	min-height:100%;
    	min-width:900px;
    	width:900px;
    	margin-left:290px;
    	margin-right:290px;
    	margin-bottom:-52px;
    	text-align:left;
    	border: thin solid #0050a0;
    }
    html>body #container {
    	height:auto;
    }
    #header {
    	background: url(/background.jpg) repeat-x;
    	color: #FFCC66;
    	height: 60px;
    	vertical-align:top;
    	font: 18px Arial, Helvetica, sans-serif;
    	padding-left:10px;
    	font-weight:bold;
    }
    #header p {
    	float:left;
    	clear:right;
    }
    * html #header {
    	height: 60px;
    }
    #rightheader {
    	background: url(/homepage_header.jpg) no-repeat;
    	float:right;
    	height: 60px;
    	width: 325px;
    	text-align:right;
    	color: #FFF;
    	font-weight: bolder;
    }
    #rightheader p {
    	margin: 0;
    	padding-right: 5px;
    	text-align:right;
    }
    #column1 {
    	position: relative;
    	width: 290px;
    	float:left;
    	margin-top:5px;
    	margin-right:5px;
    }
    #column2 {
    	position: relative;
    	margin-left:5px;
    	width:290px;
    	float:left;
    	margin-top:5px;
    	margin-right:5px;
    	margin-left:5px;
    }
    #column3 {
    	position: relative;
    	width:290px;
    	float:right;
    	margin-left:5px;
    	margin-top:5px;
    }
    * html #column1 {
    	padding-bottom:62px;
    	margin-right:5px
    }
    * html #column2 {
    	margin-left:5px;
    }
    * html #column3 {
    	margin-left:5px;
    	left:4px;
    }
    #footer {
    	clear:both;
    	height:60px;
    	border-top:thin solid #0050a0;
    	border-bottom:thin solid #0050a0;
    }
    * html #footer {
    \height:62px;
    he\ight:60px;
    }
    #clearfooter {
    	clear:both;
    	height:40px;
    }
    .contentowner {
    	font-family:Arial, helvetica, sans-serif;
    	font-size:12px;
    	text-align:left;
    	float:left;
    	line-height:normal;
    }
    .declouter {
    	font-family:Arial, helvetica, sans-serif;
    	font-size:12px;
    	text-align:right;
    	float:right;
    }
    .declinner {
    	font-family:Arial, helvetica, sans-serif;
    	font-size:12px;
    	text-align:left;
    	float:left;
    }
    h1.bluebarheading {
    	color:#FFCC66;
    	background:#0050A0;
    	text-align:left;
    	width:100%;
    	font-size:2.0em;
    	padding-left:3px;
    }
    h2.bluebarheading {
    	color:#FFCC66;
    	background:#0050A0;
    	text-align:left;
    	width:100%;
    	font-size:1.7em;
    	padding-left:3px;
    }
    h3.bluebarheading {
    	color:#FFCC66;
    	background:#0050A0;
    	text-align:left;
    	width:100%;
    	font-size:1.4em;
    	padding-left:3px;
    }
    h4.bluebarheading {
    	color:#FFCC66;
    	background:#0050A0;
    	text-align:left;
    	width:100%;
    	font-size:1.1em;
    	padding-left:3px;
    }
    h5.bluebarheading {
    	color:#FFCC66;
    	background:#0050A0;
    	text-align:left;
    	width:100%;
    	font-size:0.8em;
    	padding-left:3px;
    }
    h1.goldbarheading {
    	color:#0050A0;
    	background:#FFCC66;
    	text-align:left;
    	width:100%;
    	font-size:2.0em;
    	padding-left:3px;
    }
    h2.goldbarheading {
    	color:#0050A0;
    	background:#FFCC66;
    	text-align:left;
    	width:100%;
    	font-size:1.7em;
    	padding-left:3px;
    }
    h3.goldbarheading {
    	color:#0050A0;
    	background:#FFCC66;
    	text-align:left;
    	width:100%;
    	font-size:1.4em;
    	padding-left:3px;
    }
    h4.goldbarheading {
    	color:#0050A0;
    	background:#FFCC66;
    	text-align:left;
    	width:100%;
    	font-size:1.1em;
    	padding-left:3px;
    }
    h5.goldbarheading {
    	color:#0050A0;
    	background:#FFCC66;
    	text-align:left;
    	width:100%;
    	font-size:0.8em;
    	padding-left:3px;
    }
    #column1 ul {
    	list-style-position:inside;
    }
    #column2 ul {
    	list-style-position:inside;
    }
    #column3 ul {
    	list-style-position:inside;
    }
    #subnavblock {
    	padding: 2px;
    	background: #0050A0;
    }
    #subnavblock ul {
    	margin: 0;
    }
    #subnavblock ul li {
    	display:inline;
    	list-style:none;
    	border-left: thin solid #FFF;
    	padding-left: 5px;
    }
    #subnavblock ul li.first {
    	border-left:none;
    	color:#FFF;
    }
    #subnavblock ul li a {
    	color: #FFF;
    	text-decoration: none;
    	font-weight:bold;
    }
    #navblock {
    	padding: 2px;
    	background: #FFCC66;
    }
    #navblock ul {
    	margin: 0;
    }
    #navblock ul li {
    	display:inline;
    	list-style:none;
    	border-left: thin solid #0050A0;
    	padding-left: 5px;
    }
    #navblock ul li.first {
    	border-left:none;
    	color:#FFF;
    }
    #navblock ul li a {
    	color:#0050A0;
    	text-decoration: none;
    	font-weight:bold;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="header">
    	<p>GO Home</p>
    		<div id="rightheader"><p>Welcome to the WBAL Channel</p></div>
    	</div>
    	<div id="navblock">
    		<ul>
    			<li class="first"><a href="/index.htm">Home</a></li>
    			<li><a href="snicker.html">Snicker</a></li>
    			<li><a href="snicker2.html">Snicker2</a></li>
    		</ul>
    	</div>
    	<div id="subnavblock">
    		<ul>
    			<li class="first"><a href="finished.html">finished</a></li>
    			<li><a href="header_test.html">header test</a></li>
    			<li><a href="index2.htm">index 2</a></li>
    		</ul>
    	</div>
    	<div id="column1">
    		<h2 class="goldbarheading">Lessons Learned</h2>
    		<ul>
    			<li>Submit a lesson</li>
    			<li>Search Lessons Learned</li>
    			<li>Access your Lessons Learned Account</li>
    		</ul>
    	</div>
    	<div id="column2">
    		<h2 class="goldbarheading">About the Lessons Learned Program</h2>
    		<p>Here is where I will place a lot of information about this program as 
    
    soon as the content owner deigns to provide it to me.  As of now I have zippo to work with 
    
    so I must make it up as I go along.  I once heard a quote that was something like this </p>
    		<blockquote>Lie to the people, make it up as you go along</blockquote>
    		<p> I think this is very appropriate for most web developers as we poke in 
    
    this kind of bogus text</p>
    		<h3 class="bluebarheading">Now collecting Lessons Learned on the following 
    
    topic areas</h3>
    		<ul>
    			<li>Shoe tying process</li>
    			<li>Jury nullification procedures at the Jackson trial</li>
    		</ul>
    
    		<h3 class="bluebarheading">Lessons Learned Quote</h3>
    		<blockquote>I have learned my lesson -- Michael Jackson</blockquote>
    	</div>
    	<div id="column3">
    		<h2 class="goldbarheading">Latest News</h2>
    		<ul>
    			<li>Michael Jackson Learns Lesson</li>
    			<li>Martha Stewart Learns Lesson</li>
    			<li>Jemal Lewis Learns Lesson</li>
    		</ul>
    		<h3 class="bluebarheading">Lesson of the Month</h3>
    		<p>Jury Nullification sets Jackson Free</p>
    	</div>
    	<div id="clearfooter"></div>
    	<div id="footer">
    		<span class="contentowner">Content Steward: Ima M Portent<br />
    		Page Publisher: Michael Hatch<br />
    		Last Reviewed: 14 June 05<br />
    		Last Modified: 14 June 05</span>
    		<span class="declouter">Content on customer site <br />
    			<span class="declinner">in existince since 1999</span>
    		</span>
    	</div>
    </div>
    </body>
    </html>
    R
    MH

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

    You just need to lose the margin-right and left on the container and replace it with auto. You also need the min-height:100% on the container also.

    Here is the layout with some other things adjusted as weell so that it works together.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3c.org/TR/xhtml1/DTD/xht...ansitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test Page</title>
    <style type="text/css">
    * {margin:0;padding:0}
    h1,h2,h3,p{margin-bottom:1em}
    /* commented backslash hack v2\*/
    html, body {
     height:100%;
    }
    /* end hide */
    body {
     font-family: Arial, Helvetica, sans-serif;
     text-align:center;
     font-size:76%;
    }
    #container {
     height:100%;
     min-height:100%;
     min-width:900px;
     width:900px;
     margin-left:auto;
     margin-right:auto;
     margin-bottom:-52px;
     text-align:left;
     border: thin solid #0050a0;
     position:relative;
    }
    html>body #container {
     height:auto;
    }
    
    #header {
     background: url(/background.jpg) repeat-x;
     color: #FFCC66;
     height: 60px;
     vertical-align:top;
     font: 18px Arial, Helvetica, sans-serif;
     padding-left:10px;
     font-weight:bold;
    }
    #header p {
     float:left;
     clear:right;
    }
    * html #header {
     height: 60px;
    }
    #rightheader {
     background: url(/homepage_header.jpg) no-repeat;
     float:right;
     height: 60px;
     width: 325px;
     text-align:right;
     color: #FFF;
     font-weight: bolder;
    }
    #rightheader p {
     margin: 0;
     padding-right: 5px;
     text-align:right;
    }
    #column1 {
     position: relative;
     width: 290px;
     float:left;
     margin-top:5px;
     margin-right:5px;
    }
    #column2 {
     position: relative;
     margin-left:5px;
     width:290px;
     float:left;
     margin-top:5px;
     margin-right:5px;
     margin-left:5px;
    }
    #column3 {
     position: relative;
     width:290px;
     float:right;
     margin-left:5px;
     margin-top:5px;
    }
    * html #column1 {
     padding-bottom:62px;
     margin-right:5px
    }
    * html #column2 {
     margin-left:5px;
    }
    * html #column3 {
     margin-left:5px;
     left:4px;
    }
    #footer {
     position:absolute;
     left:0;
     bottom:0;
     width:100%; 
     clear:both;
     height:60px;
     border-top:thin solid #0050a0;
     border-bottom:thin solid #0050a0;
    }
    * html #footer {
    \height:62px;
    he\ight:60px;
    }
    #clearfooter {
     clear:both;
     height:60px;
    }
    .contentowner {
     font-family:Arial, helvetica, sans-serif;
     font-size:12px;
     text-align:left;
     float:left;
     line-height:normal;
    }
    .declouter {
     font-family:Arial, helvetica, sans-serif;
     font-size:12px;
     text-align:right;
     float:right;
    }
    .declinner {
     font-family:Arial, helvetica, sans-serif;
     font-size:12px;
     text-align:left;
     float:left;
    }
    h1.bluebarheading {
     color:#FFCC66;
     background:#0050A0;
     text-align:left;
     width:100%;
     font-size:2.0em;
     padding-left:3px;
    }
    h2.bluebarheading {
     color:#FFCC66;
     background:#0050A0;
     text-align:left;
     width:100%;
     font-size:1.7em;
     padding-left:3px;
    }
    h3.bluebarheading {
     color:#FFCC66;
     background:#0050A0;
     text-align:left;
     width:100%;
     font-size:1.4em;
     padding-left:3px;
    }
    h4.bluebarheading {
     color:#FFCC66;
     background:#0050A0;
     text-align:left;
     width:100%;
     font-size:1.1em;
     padding-left:3px;
    }
    h5.bluebarheading {
     color:#FFCC66;
     background:#0050A0;
     text-align:left;
     width:100%;
     font-size:0.8em;
     padding-left:3px;
    }
    h1.goldbarheading {
     color:#0050A0;
     background:#FFCC66;
     text-align:left;
     width:100%;
     font-size:2.0em;
     padding-left:3px;
    }
    h2.goldbarheading {
     color:#0050A0;
     background:#FFCC66;
     text-align:left;
     width:100%;
     font-size:1.7em;
     padding-left:3px;
    }
    h3.goldbarheading {
     color:#0050A0;
     background:#FFCC66;
     text-align:left;
     width:100%;
     font-size:1.4em;
     padding-left:3px;
    }
    h4.goldbarheading {
     color:#0050A0;
     background:#FFCC66;
     text-align:left;
     width:100%;
     font-size:1.1em;
     padding-left:3px;
    }
    h5.goldbarheading {
     color:#0050A0;
     background:#FFCC66;
     text-align:left;
     width:100%;
     font-size:0.8em;
     padding-left:3px;
    }
    #column1 ul {
     list-style-position:inside;
    }
    #column2 ul {
     list-style-position:inside;
    }
    #column3 ul {
     list-style-position:inside;
    }
    #subnavblock {
     padding: 2px;
     background: #0050A0;
    }
    #subnavblock ul {
     margin: 0;
    }
    #subnavblock ul li {
     display:inline;
     list-style:none;
     border-left: thin solid #FFF;
     padding-left: 5px;
    }
    #subnavblock ul li.first {
     border-left:none;
     color:#FFF;
    }
    #subnavblock ul li a {
     color: #FFF;
     text-decoration: none;
     font-weight:bold;
    }
    #navblock {
     padding: 2px;
     background: #FFCC66;
    }
    #navblock ul {
     margin: 0;
    }
    #navblock ul li {
     display:inline;
     list-style:none;
     border-left: thin solid #0050A0;
     padding-left: 5px;
    }
    #navblock ul li.first {
     border-left:none;
     color:#FFF;
    }
    #navblock ul li a {
     color:#0050A0;
     text-decoration: none;
     font-weight:bold;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="header"> 
    	<p>GO Home</p>
    	<div id="rightheader">
    	  <p>Welcome to the WBAL Channel</p>
    	</div>
      </div>
      <div id="navblock"> 
    	<ul>
    	  <li class="first"><a href="/index.htm">Home</a></li>
    	  <li><a href="snicker.html">Snicker</a></li>
    	  <li><a href="snicker2.html">Snicker2</a></li>
    	</ul>
      </div>
      <div id="subnavblock"> 
    	<ul>
    	  <li class="first"><a href="finished.html">finished</a></li>
    	  <li><a href="header_test.html">header test</a></li>
    	  <li><a href="index2.htm">index 2</a></li>
    	</ul>
      </div>
      <div id="column1"> 
    	<h2 class="goldbarheading">Lessons Learned</h2>
    	<ul>
    	  <li>Submit a lesson</li>
    	  <li>Search Lessons Learned</li>
    	  <li>Access your Lessons Learned Account</li>
    	</ul>
      </div>
      <div id="column2"> 
    	<h2 class="goldbarheading">About the Lessons Learned Program</h2>
    	<p>Here is where I will place a lot of information about this program as soon 
    	  as the content owner deigns to provide it to me. As of now I have zippo 
    	  to work with so I must make it up as I go along. I once heard a quote that 
    	  was something like this </p>
    	<blockquote>Lie to the people, make it up as you go along</blockquote>
    	<p> I think this is very appropriate for most web developers as we poke in 
    	  this kind of bogus text</p>
    	<h3 class="bluebarheading">Now collecting Lessons Learned on the following 
    	  topic areas</h3>
    	<ul>
    	  <li>Shoe tying process</li>
    	  <li>Jury nullification procedures at the Jackson trial</li>
    	</ul>
    	<h3 class="bluebarheading">Lessons Learned Quote</h3>
    	<blockquote>I have learned my lesson -- Michael Jackson</blockquote>
      </div>
      <div id="column3"> 
    	<h2 class="goldbarheading">Latest News</h2>
    	<ul>
    	  <li>Michael Jackson Learns Lesson</li>
    	  <li>Martha Stewart Learns Lesson</li>
    	  <li>Jemal Lewis Learns Lesson</li>
    	</ul>
    	<h3 class="bluebarheading">Lesson of the Month</h3>
    	<p>Jury Nullification sets Jackson Free</p>
      </div>
      <div id="clearfooter"></div>
      <div id="footer"> <span class="contentowner">Content Steward: Ima M Portent<br />
    	Page Publisher: Michael Hatch<br />
    	Last Reviewed: 14 June 05<br />
    	Last Modified: 14 June 05</span> <span class="declouter">Content on customer 
    	site <br />
    	<span class="declinner">in existince since 1999</span> </span> </div>
    </div>
    </body>
    </html>
    If you want full length column colurs then simply repeat a background image on the main container that contains all column colours and borders.

    Hope that helps

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Maryland, USA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I caught the margin error just after I clicked post. Makes me feel like a dolt. I threw a quick background behind this one of course I don't have any of my graphics tools on this machine so had to use paint and MS photoeditor. I noticed one odd thing the h2 and h3 on the right column seem to stick out some. Any ideas?

    Mike
    Last edited by mrhatch; Jun 14, 2005 at 10:18. Reason: sp

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

    You have specified all the headings as 100% width plus 3px left padding. This will make them all 3px too big. Just leave out the 100% as they will then default to auto which is effectively 100% and no more.

    You also have a left offset of 4px for some reason in this style which is not needed.
    Code:
    * html #column3 {
     margin-left:5px;
     left:4px;
     }
    Just get rid of that also.

    Your other columns don't seem to match your bg image but I assume you are still working on that so I didn't look further

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Maryland, USA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    As usual it was right in front of you but I couldn't see it. The background was something I threw together to line check the line up of the columns. I only had MSPaint available and was suprised it turned out as well as it did. It will probably not make the cut on the actual site. The customer has a thing about background colors....It has taken me 18 months to get them to even consider a CSS design that doesn't support NN4.x

    Thanks for all the help I am sure I will have more questions. One of these days I am going to distill all of these lessons and host them on my site, right after that I will pitch in and help with yours!
    R
    MH


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
  •