The four images img1, img2, ig3 , img4 that are acting as tabs should be next to each other not in a vertical line. I put in list-style-none but that doesn;t work. How do I make them line up horizontally? Thank-you
http://bit.ly/bPhoJi
PS Any comments on css also greatly received
Just float the <li> 
ul.simpleTabsNavigation li{float:left;}
Thank-you Ryan! That works great. I still have a problem though with the footer as it isn’t going to the bottom of the page. How can I change this? Thanks
Thanks Ryan I’ll do that. Last question please-I can’t seem to get rid of the grey boxes above each a href in the centre of the page. How do I get rid of these please? Thank you
http://bit.ly/bPhoJi
The gray squares are just the anchors background
ul.simpleTabsNavigation li a {background:none;}
Hi thanks Ryan that works great. I have been trying various implementations of the sticky footer link you sent but it doesn’t seem to work because strcuturally my footer is inside the main div. If I take it out and put it on its own at the end then the main div collapses. What should I use? Min height on the main div? http://bit.ly/bPhoJi TIA
Try this, I commented the CSS, and moved the footer outside
<!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="es" lang="es">
<head>
<base href="http://copywritecolombia.com/index3.html" />
<title></title>
<meta name="description" content="" />
<link media="screen" href="css/test.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/simpletabs_1.3.js"></script>
<style>
html,body{height:100%;}/*Allow for 100% height*/
#footer
{
margin:20px auto 0;/*Horz center*/
}
#wrapper
{
min-height:100%;/*Min-height instead to allow for expansion*/
height:auto;/*just remove the height you set*/
margin-top:-72px;/*total footer height*/
overflow:hidden;/*contain floats*/
padding-bottom:0;
}
* html #wrapper{height:100%;}/*IE6 min-height*/
#header
{
border-top:72px solid transparent;/*total footer height*/
overflow:hidden;/*contain floats*/
width:100%;/*IE6 contain floats*/
}
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
</style>
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="block one">
<a href="">
<img src="logo.jpg" width="275" height="31" alt="" style="float:left;" />
</a>
<p class="tag" style="font-size:80%;">tagline tagline tagline tagline tagline<br/>tagline tagline
tagline tagline</p>
</div>
<div class="block two">
<img src="freephone.gif" alt="" width="180" height="75" style="float:left;" />
</div>
<div class="block three">
<span style="margin-bottom:5px;font-size:70%;float:right;">
<strong style="padding-right:10px;">To see your account log in</strong>
<a href="" style="font-size:80%;">remember password</a>
</span>
<br/>
<span style="padding-top:5px;float:right;">
<label for="name"><span style="font-size:80%;">user:</span></label>
<input id="name" class="forminput" type="text" />
<label for="name"><span style="font-size:80%;">password:</span></label>
<input id="pass" class="forminput" type="text" />
<input value="enviar" class="formsub" type="submit" />
</span>
</div>
</div>
<div id="mainnavcontainer">
<ul class="nav">
<li><a href="" title="">link</a></li>
<li><a href="" title="">link</a></li>
<li><a href="" title="">link</a></li>
<li><a href="" title="">link</a></li>
</ul>
</div>
<!-- left navigation -->
<div id="main">
<div id="leftnav">
<span class="">link link</span> <br />
link link <br />
link link <br />
link link <br />
link link <br />
link link <br />
link link <br />
link link <br />
</div>
<!-- center content -->
<div id="maincontent">
<h1>header</h1>
<div style="padding:0;margin:0;">text text text text text text text text text text text text
texttext text text text text texttext text text text text texttext text text text text texttext text
text text text texttext text text text text texttext text text text text texttext text text text
text texttext text text text text text</div>
<!--
<object style="visibility: visible;" id="mycontent" data="index2_files/front.swf"
type="application/x-shockwave-flash" width="476" height="380"><param value="true"
name="allowfullscreen" /></object>-->
<div style="padding:0;margin:0;">
<div class="simpleTabs" style="background: url('backform1.jpg') no-repeat;padding-top:19%;">
<ul class="simpleTabsNavigation">
<li><a href="#" rel="nofollow"><img src="img1.jpg" alt="" width="99" height="125"
/></a></li>
<li><a href="#" rel="nofollow"><img src="img2.jpg" alt="" width="99" height="125" /></a></li>
<li><a href="#" rel="nofollow"><img src="img3.jpg" alt="" width="99" height="125" /></a></li>
<li><a href="#" rel="nofollow"><img src="img4.jpg" alt="" width="99" height="125" /></a></li>
</ul>
<div class="simpleTabsContent">Content here to be called when "Tab 1" is
clicked.</div>
<div class="simpleTabsContent">Content here to be called when "Tab 2" is clicked.</div>
<div class="simpleTabsContent">Content here to be called when "Tab 3" is clicked.</div>
<div class="simpleTabsContent">Content here to be called when "Tab 4" is clicked.</div>
</div>
</div>
</div>
<!-- right content -->
<div id="bonusinfo">
<h2>header</h2>
<div id="navcontainer">
<ul id="navlist">
<li>right hand side text text text</li>
<li>right hand side text text text</li>
<li>right hand side text text text</li>
<li>right hand side text text text</li>
<li>right hand side text text text</li>
<li>right hand side text text text</li>
<li>right hand side text text text</li>
<li>right hand side text text text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<p class="footer">
<a href="">link</a> |
<a href="">link</a> |
<a href="">link</a>
<br />text text text text text text text text text</p>
</div>
</body></html>
http://bit.ly/dhg6xI
Awesome Ryan thanks, it is almost there-in latest versions of ie and ff (tested) the page seems to invoke the side scrollbar. I have added in backgorund color to the footer div and I think i will have to add in another div to fill in the remaining background in the centre with white.
The c ode I posted doesn’t exhibit a scrollbar so you must have added something :). Give me one second…
On #wrapper you set a 1px border on all sides so no matter waht the 100% higgh element will be
100%+2px . THus the scrollbar will always appear
Thanks Ryan that works great
You’re welcome
The background is not showing between the last div and the footer as you can see http://bit.ly/dhg6xI, I have tried adding a new div to surround all the divs but that doesn’t work. How can I do this-it seems like the background may not be compatible with this sticky structure? Also I tried to move the css fro the head to my css file but strangely it didn’t work (even leaving the conditional css). How can I safely move it off? Thanks
If you mean the space between the footer and the content that’s because you set a top margin on the footer. I assumed you wanted that.
Remove the top margin on the footer and then lower the values on the #wrapper to -52px and put the value on #header to 52px
Hi Ryan thanks for the answer I did those changes but they don’t work-they just put a scrollbar in and changed the position a bit.
http://bit.ly/dhg6xI
What I am aiming at is putting a white background where the squiggle is in this image:
http://bit.ly/9uyYfc
Look at the bold ;).
As for the horizontal space on the footer, just increase the width to match the wrapper
#footer {width:865px;}
Yes the wrapper may be 845px but you add 10px left and right padding making that an extra 20px
Hi ryan thanks for the reply, the width is sorted out on the footer div but there is still a socking great gap between the footer and the div wrapper. How do I get rid of it? Thanks
http://bit.ly/bPhoJi
That’s just the sticky footer. THe goal of a sticky footer is to have the footer sit at the bottom of the screen if there isn’t enough content, if there IS enough content the footer will be pushed down.
Do you not want a sticky footer anymore?
Thanks Ryan the min height sorted it out perfectly.
You’re welcome :).