I’m trying to convert a three column to a four,
though I can’t seem to locate the graphical element
ie I’ve got four columns, but the background displays three
also is it good to use images to spilt things up, or not.
for info the fourth is called: “fart” :shifty:
thanks
<html>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
text-align: center;
margin: 0px;
padding: 20px 0px 20px 0px;
}
#wrapper {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}
#header {
text-align:center;
margin: 0px;
padding: 0px;
height: 100px;
width: auto;
background-color: #f1f1f1;
}
#container {
padding: 0px;
margin: 10px 0px 0px 0px;
background-attachment: scroll;
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 160px;
padding: 10px 20px 10px 20px;
float: left;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666;
text-decoration: none;
display: block;
margin: 0px;
padding: 3px 15px 3px 15px;
width: 130px;
}
#nav li a:hover {
color: #999;
text-decoration: none;
}
#center {
height: auto;
width: 154px;
padding: 10px 20px 10px 20px;
float: left;
margin: 0px 0px 0px 20px;
line-height: 1.8em;
}
h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#right {
padding: 10px 2px 1px 20px;
height: auto;
width: 160px;
float: left;
margin: 0px 0px 0px 50px;
}
#fart{
padding: 10px 20px 10px 10px;
height: auto;
width: 20px;
float: left;
margin: 0px 0px 0px 10px;
/*border:3px solid #fff;*/
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin: 10px 0px 0px 0px;
text-align: center;
padding: 15px 0px 15px 0px;
background-color: #f1f1f1;
}
#footer p {
color: #999;
margin: 0px auto 0px auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999;
text-decoration: none;
}
#footer a:hover {
color: #ccc;
text-decoration: none;
}
.menu {
display:table; /* ignored by IE */
padding:0;
list-style-type:none;
white-space:nowrap; /* keep text on one line */
border:1px solid #06a; /* add a border to show size of menu */
}
* html .menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */
padding:0 2px; /* fix bug in IE for border spacing */
}
.menu li {
display:table-cell; /* ignored by IE */
}
* html .menu li {
display:inline; /* for IE only */
}
.menu a, .menu a:visited {
display:block; /* for all browsers except IE */
padding:4px 16px;
color:#000;
background:#d4d4d4;
border:1px solid #fff; /* add a 1px white border around items */
text-decoration:none;
}
* html .menu a, * html .menu a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
}
.menu a:hover {
color:#fff;
background:#08c;
}
.lefted {margin:70 auto 0 0;}
.centered {margin:0 auto;}
.righted {margin:0 0 0 auto;}
</style>
<body>
<div id="wrapper">
<div id="header">
<ul class="menu centered">
<li><a href="#">Tab One</a></li>
<li><a href="#">Tab Two: Longer</a></li>
<li><a href="#">Tab Three: Longest</a></li>
<li><a href="#">Tab Four</a></li>
<li><a href="#">Tab Five</a></li>
<li><a href="#">Tab 6</a></li>
<li><a href="#">Tab 7</a></li>
<li><a href="#">Tab 8</a></li>
</ul>
</div>
<div id="container">
<div id="left">
<ul id="nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about us">about us</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="testimonials">testimonials</a></li>
<li><a href="#" title="contact us">contact us</a></li>
</ul>
</div>
<div id="center">
<h1>Title Placeholder</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="fart">
testing
</div>
<div id="right">Some content, the rain in spain stays mainly in the plane the plane the rain in spain stays mainly in the plain.</div>
<div class="clearer"> </div>
</div>
<div id="footer"><p>© <a href="http://www.sebastiansulinski.co.uk/" title="Freelance Web Designer" target="_blank">Freelance Web Designer</a></p>
</div>
</div>
</body>
</html>
//////
