SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Thread: border problem

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border problem

    Hey guys...

    here is the link : Website

    The problem i have is obvious when viewed in ie and not in firefox...basically the divider bar are miss aligned on i.e. This would not be a problem if it was possible to make the two divs 100% height or something but i dont know how...Any ideas would be great.. (btw please dont suggest using images as i dont want that solution..needs to be easily editable and modified in css

    Thanks

    rodent

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    if you want them to be the same, take out the border-left in your second column and replace it with border-right: double (instead of solid). However, that won't make IE drop to the bottom. IE is really a bugger when it comes to that.

    You can also set a min-height using pixels.

    I'm not entirely sure either solution will work since css for me is often trial and error.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That kind of works...but now there is spacing to the right side....im sure there is a method to make the heights 100%...i just do not know how to do it...i dont want to make my divs too complex, and i dont get it when people do inner divs outer divs etc...all too complex..

    Thanks for help

    Rodent

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

    To many width's set
    Don't embrace the boxmodel problem, set padding and margin's on tags in the containers
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="xx" />
    	<meta name="keywords" content="xxx" />
    	<meta name="description" content="xxxx" />
    	<meta name="robots" content="all" />
    	<title>Yoursite.com</title>
    	<style type="text/css" media="all">
    	
    	*{margin:0;padding:0;}
    	
    	body{
    	font:10pt Verdana, Arial, Helvetica, sans-serif;
    	background:#bdc7ce;
    	text-align:center;
    	color:#353635;
    	}
    
    	a:link, a:visited, a:active {
    	color:#666;
    	font:bold 10pt georgia, verdana, arial, sans-serif;
    	}
    	a:hover{color:#ff0000;}
    
    	h1{
    	font:28pt georgia, verdana, arial, sans-serif;
    	color:#fff;
    	padding:20px;
    	}
    	
    	 h2{
    	font:14pt georgia, verdana, arial, sans-serif;
    	letter-spacing: -2px;
    	color:#304462;
    	border-bottom:1px solid #304462;
    	padding-bottom:5px;
    	text-align: left;
    	}
    	h3{
    	font-size:10pt;
    	letter-spacing: -1px;
    	color:#304462;
    	padding-bottom: 5px;
    	text-align: left;
    	font-weight: bold;
    	}
    
    	p{
    	font: 8pt verdana,sans-serif;
    	text-align:justify;
    	padding-top:15px;
    	}
    
    	#contain {
    	margin:50px auto;
    	width:700px;
    	border:4px solid #fff;
    	background:#bdc7ce;
    	}
    
    	#header {
    	height:117px;
    	border-bottom:1px solid #CCC;
    	background:#7b88a5;
    	}
    	
    	#spacer{
    	border-top:5px solid #bdc7ce;
    	height:10px;
    	background:#304462;
    	overflow:hidden;
    	}
    
    	#navbar{
    	border-top:5px solid #bdc7ce;
    	background:#304462;
    	text-align:center;
    	font-family:helvetica, arial, verdana, tahoma, sans-serif;
    	letter-spacing: -1px;
    	font-size: 130%;
    	height:30px;
    	}
    
    	#leftcol {
    	width:129px;
    	float:left;
    	text-align:left;
    	border-right:1px solid #fff;
    	}
    
    	#leftcol p{
    	padding:10px;
    	}
    	#leftcol h2,#leftcol h3,#content h2{
    	margin:0 10px 0 10px;
    	}
    
    	#content{
    	float:left;
    	margin-left:-1px;
    	width:570px;
    	border-left:1px solid #fff;
    	}
    
    	#content p{
    	padding:10px 10px 10px 10px;
    	}
    
    	#footer{
    	clear:both;
    	border-top:1px solid #fff;
    	background:#304462;
    	}
    	* html #footer{height:1%;}
    
    	#footer p {
    	text-align:right;
    	padding:4px 4px 4px 0;
    	font:8pt verdana, arial, sans-serif;
    	color: #fff;
    	}
    	
    	#navbar a{
    	padding:0px 20px 0px 20px;
    	text-decoration: none;
    	color:#fff;
    	font:10pt verdana, arial, sans-serif;
    	border-bottom:4px solid #304462;
    	}
    	#navbar a:hover{
    	color:#ff0000;
    	border-bottom:4px solid #ff0000;
    	}
    	
    	</style>
    </head>
    <body>
    <div id="contain">
    
    <div id="header"><h1>www.yoursite.com</h1></div>
    
    <div id="spacer"></div>
    
    <div id="navbar">
    			 |<a href="##">Link One</a> |
    			<a href="##">Link Two</a> |
    			<a href="##">Link Three</a> |
    			<a href="##">Link Four</a> |
    			<a href="##">Link Five</a> |
    </div>
    		<div id="leftcol">
    				<h2>Header 2</h2>
                    <h3>Header 3</h3>
    				<p>
                        Quisque ut lectus. Nam dictum lacinia nulla.
                         Nullam suscipit, nibh vitae suscipit condim
                         entum, purus felis lacinia felis, vitae rut
                         rum risus justo quis tortor. Curabitur ultr
                         icies feugiat arcu.
                         <br /><br />
                          Cras laoreet viverra n
                         eque. Praesent viverra commodo nibh. Nulla
                         m dictum placerat orci. Etiam risus mauris
                         , adipiscing eget, dapibus eu, vulputate e
                         t, tortor. Fusce hendrerit sollicitudin er
                         os. Donec metus pede, eleifend sit amet,
    					 </p>
     		</div>
    
    
    		<div id="content">
    				<h2>Header 2</h2>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                    Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                    leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                    nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                    Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                    Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                    nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                    fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                    tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                    Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
    				</p>
    
    				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                    congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                    magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                    Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                    consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                    et purus in purus rutrum commodo. Fusce id eros.
    				</p>
    
    
    		</div>
    
    		<div id="footer">
    			<p>Copyright &copy; Invisible Web Design</p>
    		</div>
    	</div>
    </body>
    </html>

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can i ask what you have done here? just not sure what i did wrong...thx for your help btw!

    Rodent

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what does this do?

    * html #footer{height:1%;}

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

    the border
    a floats 129px +border right 1px
    a floats 570px +border left 1px + margin left -1px

    and only 3 width's are set
    the wrapper
    the 2 floats

    H2 width 100% + margin = no fit
    blocklevel elements in a container (screen) will take full width and need no 100% width, if not floated, and can take padding or margin's

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    the border
    a floats 129px +border r 1px
    a floats 570px +border l 1px + margin left -1px

    and only 3 width are set
    the wrapper
    the 2 floats

    H2 width 100% + margin = no fit
    blocklevel elements in a container (screen) will take full width and need no 100% width, if not floated, and can take padding or margin's
    Highly confused....you may need lamens terms..i have no clue what on earth you just said...."a floats 129px +border r 1px"

    lol soz Rodent

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

    its your code

    float 1
    #leftcol {
    width:129px;
    float:left;
    text-align:left;
    border-right:1px solid #fff;
    }
    float 2
    #content{
    float:left;
    margin-left:-1px;
    width:570px;
    border-left:1px solid #fff;
    }

    wrapper
    #contain {width:700px;

    from your style sheet
    h2{padding:10px;width: 100%; = 100% + 2x10px = no fit

    haslayout for IE see FAQ CSS
    * html #footer{height:1%;}

    Your model, fits in any width, only 2 width parameters
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="xx" />
    	<meta name="keywords" content="xxx" />
    	<meta name="description" content="xxxx" />
    	<meta name="robots" content="all" />
    	<title>Yoursite.com</title>
    	<style type="text/css" media="all">
    	
    	*{margin:0;padding:0;}
    	
    	body{
    	font:10pt Verdana, Arial, Helvetica, sans-serif;
    	background:#bdc7ce;
    	text-align:center;
    	color:#353635;
    	}
    
    	a:link, a:visited, a:active {
    	color:#666;
    	font:bold 10pt georgia, verdana, arial, sans-serif;
    	}
    	a:hover{color:#ff0000;}
    
    	h1{
    	font:28pt georgia, verdana, arial, sans-serif;
    	color:#fff;
    	padding:20px;
    	}
    	
    	 h2{
    	font:14pt georgia, verdana, arial, sans-serif;
    	letter-spacing: -2px;
    	color:#304462;
    	border-bottom:1px solid #304462;
    	padding-bottom:5px;
    	text-align: left;
    	}
    	h3{
    	font-size:10pt;
    	letter-spacing: -1px;
    	color:#304462;
    	padding-bottom: 5px;
    	text-align: left;
    	font-weight: bold;
    	}
    
    	p{
    	font: 8pt verdana,sans-serif;
    	text-align:justify;
    	padding-top:15px;
    	}
    
    	#contain{
    	border:4px solid #fff;
    	background:#bdc7ce;
    	}
    	* html #contain{height:1%;}
    	
    	#con tain{
    	margin:50px auto;
    	width:700px;
    	}
    
    	#header{
    	height:117px;
    	border-bottom:1px solid #CCC;
    	background:#7b88a5;
    	}
    	
    	#spacer{
    	border-top:5px solid #bdc7ce;
    	height:10px;
    	background:#304462;
    	overflow:hidden;
    	}
    
    	#navbar{
    	border-top:5px solid #bdc7ce;
    	background:#304462;
    	text-align:center;
    	font-family:helvetica, arial, verdana, tahoma, sans-serif;
    	letter-spacing: -1px;
    	font-size:130%;
    	height:30px;
    	}
    
    	#leftcol{
    	width:129px;
    	float:left;
    	text-align:left;
    	border-right:1px solid #fff;
    	}
    
    	#leftcol p{
    	padding:10px;
    	}
    	#leftcol h2,#leftcol h3,#content h2{
    	margin:0 10px 0 10px;
    	}
    
    	#content{
    	float:left;
    	margin-left:-1px;
    	width:100%;
    	border-left:1px solid #fff;
    	}
    
    	#content p{
    	padding:10px 10px 10px 10px;
    	}
    
    	#footer{
    	clear:both;
    	border-top:1px solid #fff;
    	background:#304462;
    	}
    	* html #footer{height:1%;}
    
    	#footer p {
    	text-align:right;
    	padding:4px 4px 4px 0;
    	font:8pt verdana, arial, sans-serif;
    	color: #fff;
    	}
    	
    	#navbar a{
    	padding:0px 20px 0px 20px;
    	text-decoration: none;
    	color:#fff;
    	font:10pt verdana, arial, sans-serif;
    	border-bottom:4px solid #304462;
    	}
    	#navbar a:hover{
    	color:#ff0000;
    	border-bottom:4px solid #ff0000;
    	}
    	* html .r{float:left;}
    	head+body .r{margin:0 0 0 130px;}
    	</style>
    </head>
    <body>
    <div id="contain">
    
    <div id="header"><h1>www.yoursite.com</h1></div>
    
    <div id="spacer"></div>
    
    <div id="navbar">
    			 |<a href="##">Link One</a> |
    			<a href="##">Link Two</a> |
    			<a href="##">Link Three</a> |
    			<a href="##">Link Four</a> |
    			<a href="##">Link Five</a> |
    </div>
    		<div id="leftcol">
    				<h2>Header 2</h2>
                    <h3>Header 3</h3>
    				<p>
                        Quisque ut lectus. Nam dictum lacinia nulla.
                         Nullam suscipit, nibh vitae suscipit condim
                         entum, purus felis lacinia felis, vitae rut
                         rum risus justo quis tortor. Curabitur ultr
                         icies feugiat arcu.
                         <br /><br />
                          Cras laoreet viverra n
                         eque. Praesent viverra commodo nibh. Nulla
                         m dictum placerat orci. Etiam risus mauris
                         , adipiscing eget, dapibus eu, vulputate e
                         t, tortor. Fusce hendrerit sollicitudin er
                         os. Donec metus pede, eleifend sit amet,
    					 </p>
     		</div>
    
    <div class="r">
    		<div id="content">
    				<h2>Header 2</h2>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                    Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                    leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                    nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                    Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                    Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                    nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                    fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                    tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                    Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
    				</p>
    
    				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                    congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                    magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                    Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                    consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                    et purus in purus rutrum commodo. Fusce id eros.
    				</p>
    
    
    		</div>
    </div>		
    
    		<div id="footer">
    			<p>Copyright &copy; Invisible Web Design</p>
    		</div>
    	</div>
    </body>
    </html>
    Last edited by all4nerds; Jun 19, 2006 at 07:30.

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another issue now...I have modified to create myself a now 3 column template...link below :
    http://www.invisiblewebdesign.co.uk/demo/3column/

    As you can see if the right hand column is too short the right bar shortens itself...i know that 3 columns is a whole new kettle of fish but any help would be fabulous.

    thanks a bunch

    Rodent

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

    No, only works when main content container is higher
    or set a height min-height on middle box

    * html #content{height:500px;}
    head+body #content{min-height:500px;}

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    
    <!-- Mirrored from www.invisiblewebdesign.co.uk/demo/3column/ by HTTrack Website Copier/3.x [XR&CO'2006], Mon, 19 Jun 2006 15:50:21 GMT -->
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="" />
    	<meta name="keywords" content="" />
    	<meta name="description" content="" />
    	<meta name="robots" content="all" />
    	<title>Yoursite.com</title>
    	<style type="text/css" media="all">
    		@import url(style/style.css);
    		* html #content{height:500px;}
    		head+body #content{min-height:500px;}
    	</style>
    </head>
    <body>
    	<div id="contain">
    		<div id="header">
            	<h1>www.yoursite.com</h1>
    		</div>
    		<div id="spacer">
    
    		</div>
    		<div id="navbar">
    			 |<a href="#">Link One</a> |
    			<a href="#">Link Two</a> |
    			<a href="#">Link Three</a> |
    			<a href="#">Link Four</a> |
    			<a href="#">Link Five</a> |
    		</div>
    		<div id="leftcol">
    				<h2>Header 2</h2>
                    <h3>Header 3</h3>
                    <p>Quisque ut lectus. Nam dictum lacinia nulla.
                    Nullam suscipit, nibh vitae suscipit condim
                    entum, purus felis lacinia felis, vitae rut
                    rum risus justo quis tortor. Curabitur ultr
                    icies feugiat arcu.
                    <br /><br />
                    Cras laoreet viverra n
                    eque. Praesent viverra commodo nibh. Nulla
                    m dictum placerat orci. Etiam risus mauris
                    , adipiscing eget, dapibus eu, vulputate e
                    t, tortor. Fusce hendrerit sollicitudin er
                    os. Donec metus pede, eleifend sit amet,</p>
     		</div>
    
    
    		<div id="content">
    				<h2>Header 2</h2>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                    Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                    leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                    nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                    Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                    Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                    nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                    fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                    tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                    Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
    				</p>
    
    				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                    congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                    magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                    Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                    consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                    et purus in purus rutrum commodo. Fusce id eros.
    				</p>
    								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                    Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                    leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                    nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                    Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                    Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                    nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                    fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                    tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                    Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
    				</p>
    
    				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                    congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                    magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                    Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                    consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                    et purus in purus rutrum commodo. Fusce id eros.
    				</p>
    		</div>
    
    		<div id="rightcol">
    				<h2>Header 2</h2>
                    <h3>Header 3</h3>
                    <p>Quisque ut lectus. Nam dictum lacinia nulla.
                    Nullam suscipit, nibh vitae suscipit condim
                    entum, purus felis lacinia felis, vitae rut
                    rum risus justo quis tortor. Curabitur ultr
                    icies feugiat arcu.
    </p>
     		</div>
    
    		<div id="footer">
    			<p>Copyright &copy; Invisible Web Design</p>
    		</div>
    
    	</div>
        <div id="footer-nav">
        		 |<a href="#">Link One</a> |
    			<a href="#">Link Two</a> |
    			<a href="#">Link Three</a> |
    			<a href="#">Link Four</a> |
    			<a href="#">Link Five</a> |<br />
    	</div>
    
    </body>
    </html>
    this is the closed you need, a 3 wrapper negativ margin model, see also Paul's website he has lots more of them
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	
    	* {margin:0;padding:0}
    	
    	body{font-size:75%;background:#a2a2a2;}
    	
    	body i{color:#909090;}
    	
    	div{font-size:1em;}
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/*  */
    	
    	.wra{background:#909090;}
    	
    	.wra,.fo{border:1px solid #000000;}
    	
    	.w{width:64em;margin:.5em auto 0 auto;}
    	.wx{width:90%;}
    	
    	.he{background:#ff8c00;border-bottom:1px solid #000000;}
    	
    	.na,.fo{background:#fbfbfb;}
    	
    	.bo{border-bottom:1px solid #000000;}
    	
    	.aur{background:#d8d8d8;border-right:1px solid #000000;}
    	
    	.aul{background:#b7b7b7;border-left:1px solid #000000;}
    	
    	.aur{margin:0 18em 0 0;}
    	.aul{margin:0 0 0 18em;}
    	.l,.ll{position:relative;width:18.01em;}
    	.l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
    	.ll{margin:0 -18em 0 0;float:right;}
    	
    	.r{width:100%;float:left;}
    	head+/**/body .r{width:99.9%;}
    	
    	.fo{border-top:none;margin:0 auto;}
    	
    	.wra h1,.wra p,.fo p{padding:5px;}
    	
    	.wra a:hover{padding:0 0 15em 0;display:block;}
    	</style>
    </head>
    <body>
    <div class="wra w">
    
    <div class="he bo">
    <h1>header</h1>
    <p>Basic 3 Column Bare</p>
    </div>
    <div class="na bo">
    <p>navigation</p>
    </div>
    
    <div class="aur">
    <div class="aul fc">
    
    <div class="l">
    <p>
    start
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    <div class="r">
    <p>
    start
    <br /><br /><br /><!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    <div class="ll">
    <p>
    start
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    </div>
    </div>
    
    </div>
    
    <div class="fo w"><p>footer</p></div>
    
    <p><i>&nbsp;&copy; b. bakker</i></p>
    
    </body>
    </html>
    PS if you want a 100% hight model , you still need other code

  12. #12
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    If you need more help, look at Paul O'B's layout models here: http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    or find more information about them in the sticky at the top of this forum:
    http://www.sitepoint.com/forums/showthread.php?t=143801
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  13. #13
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>12345 12345 12345 12345 12345</title>
        <
    style type="text/css">
        
        * {
    margin:0;padding:0}
        
        
    body{font-size:75%;background:#a2a2a2;}
        
        
    body i{color:#909090;}
        
        
    div{font-size:1em;}
        
        
    head+/**/body .fc:after {
        
    content:"."
        
    display:block
        
    height:0
        
    clear:both
        
    visibility:hidden;
        }
        
    /* \*/
        
    html .fc{height:1%;}
        *+
    html .fc{display:inline-block;}
        
    /*  */
        
        
    .wra{background:#909090;}
        
        
    .wra,.fo{border:1px solid #000000;}
        
        
    .w{width:64em;margin:.5em auto 0 auto;}
        .
    wx{width:90%;}
        
        .
    he{background:#ff8c00;border-bottom:1px solid #000000;}
        
        
    .na,.fo{background:#fbfbfb;}
        
        
    .bo{border-bottom:1px solid #000000;}
        
        
    .aur{background:#d8d8d8;border-right:1px solid #000000;}
        
        
    .aul{background:#b7b7b7;border-left:1px solid #000000;}
        
        
    .aur{margin:0 18em 0 0;}
        .
    aul{margin:0 0 0 18em;}
        .
    l,.ll{position:relative;width:18.01em;}
        .
    l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
        .
    ll{margin:-18em 0 0;float:right;}
        
        .
    r{width:100%;float:left;}
        
    head+/**/body .r{width:99.9%;}
        
        .
    fo{border-top:none;margin:0 auto;}
        
        .
    wra h1,.wra p,.fo p{padding:5px;}
        
        .
    wra a:hover{padding:0 0 15em 0;display:block;}
        </
    style>
    </
    head>
    <
    body>
    <
    div class="wra w">

    <
    div class="he bo">
    <
    h1>header</h1>
    <
    p>Basic 3 Column Bare</p>
    </
    div>
    <
    div class="na bo">
    <
    p>navigation</p>
    </
    div>

    <
    div class="aur">
    <
    div class="aul fc">

    <
    div class="l">
    <
    p>
    start
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </
    div>

    <
    div class="r">
    <
    p>
    start
    <br /><br /><br /><!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </
    div>

    <
    div class="ll">
    <
    p>
    start
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </
    div>

    </
    div>
    </
    div>

    </
    div>

    <
    div class="fo w"><p>footer</p></div>

    <
    p><i>&nbsp;&copybbakker</i></p>

    </
    body>
    </
    html
    The above version has a very strange css format...can someone give me a hand it making it more user friendly with names, im trying to figure it out but it always screws up. why they use such crap abbriviations is beyond me.

    Rodent thx btw

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

    thanks a lot

    wra wrapper
    he header
    l left column
    ll right column
    r margin FF/ float IE
    fo footer
    na navigation
    aur an autowith with margin right
    aul an autowidth with margin left
    w main width
    fc float clearing
    bo border

    PS names do nothing whats in the brackets that counts

    I can also use Dutch
    wra = wrapper = houder

  15. #15
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is that i have changed the naming, but the css that is used seems overlapping and not in an easy to understand manner...would it be to rude of me to ask if you could assist in changing the naming for me...i will miss somethign and prob screw it up...

    <div class="aur">
    <div class="aul fc">
    I know you said the above two are autowidth margin right but can you explain their purpose please...

    Thanks a bunch for helping me...been trying to get templates sorted for ages :P

    Rodent

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

    A single column with 3 floats in it
    2 extra wrappers for the bgr colors, left column, right column
    1 wrapper has a margin left as wide as the left float
    1 wrapper has a margin right as wide as the right float
    The floats are drawn in place by a negative left / right margin, (as wide) as the l/r floats

    The third float is 100% wide so that is adjusts to the main width class w (change w in wx and the model adjust to full screen)

  17. #17
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh i see...so the two wrappers with the left and right margins actually keep the central div in place, where the divs containing the text are positioned above the wrappers. Then the central div is "Squashed" to fit inbetween. Would you say that the jist of it..if so thanks for explaning well...

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

    Yes the nagative margins make room for the content box

  19. #19
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why did you have a seperate css tag for the width of the wrapper...why did you no just use it with the one style? is there a good reason for splitting those things up??

    I keep forgetting to ask questions...this is final one.. (i hope) why do you use 64em for width rather than a specific pixel width?? what is the em?

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

    the w width is a parameter, simply ad .w {width:80%;} or width:84em at the end of the sheet and see what happens or use the class .wx (set it to .w)

    if you program the parameters out you can very ezy control models

    in this model the parameters are

    .l .ll .w and the margins of .r .aul .aur

    this + class w controls the model
    .aur{margin:0 18em 0 0;}
    .aul{margin:0 0 0 18em;}
    .l,.ll{position:relative;width:18.01em;}
    .l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
    .ll{margin:0 -18em 0 0;float:right;}

    PS em scale if browser text size is changed
    why 64em (32 16 8 4 2 1)
    standard font size is 16px 75% = 12px=div=1em
    64em = 64x12=768px

  21. #21
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never Mind...Fixed It...Thank mate for everything...ill be recommending ur help for anything...cheers

    Rodent

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

    .left_column h2,.left_column h3,.right_column h2,.right_column h3,.r h2{
    margin:0 10px 0 10px;
    }

    .left_column p,.right_column p,.r p{
    padding:10px 10px 10px 10px;
    }

    left_column use left-column
    selectors should begin with a letter and contain only letters (A-Z, a-z), numbers (0-9), and the hyphen character (-). The CSS2 specification allows more (such as escaped characters) but these are not recommended due to style and compatibility reasons.

    if you are not using em's leave this out div{font-size:1em;}

    use pixel px not pt


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
  •