Forum Moderators: not2easy
I have a framework for a very simple site - I've actually reverse engineered it from a complex one I did before.
To help me get started I've div'ed everything up and even colour-coded the backgrounds so I can see where I'm about to work.
Problem is I'm getting gaps between my areas. I've tried and tried and I've done this many times before, but just cannot get rid of them - shows in FF and IE so I'm sure it's a silly coding thing.
Here's the html:
<body>
<div class="container">
<div class="banner">
<p>banner area</p>
</div>
<div class="navigation">
<p> navigation</p>
</div>
<div class="main">
<div class="subnav">
<p>subnav area
</p>
<p><a href="#">link 1</a></p>
<p><a href="#">link 2</a></p>
<p><a href="#">link 3</a></p>
</div>
<div class="content">
<p>this is the content section</p>
<h1>This is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5</h5>
<h6>this is heading 6</h6>
<p><a href="#">this is how a link looks - it is determined by link, visited
and hover css tags</a></p>
<p>this is paragraphed</p>
<p> <img src="images/generic/thumbopportunities.jpg" alt="opportunities image" width="60" height="60" class="thumbs" />This
shows that the img tag is set to float (meaning text wraps around the
image - otherwise there will be a white space around the image)</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
</div>
</body>
and here's the CSS:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
.container {
width: 740px;
border: 1px solid #666666;
background-color: #FFFFFF;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
position: relative;
padding: 0px;
margin-bottom: 30px;
}
.banner {
background-color: #960;
margin: 0px;
padding: 0px;
height: 200px;
}
.navigation {
background-color: #666666;
margin: 0px;
padding: 0px;
color: #FFFFFF;
height: 35px;
}
.main {
margin: 0px;
padding: 0px;
background-color: #CCC;
}
.subnav {
margin: 0px;
width: 200px;
margin: 0px;
padding: 0px;
float: left;
position: fixed;
font-size: 0.8em;
background-color: #9CC;
}
.content {
margin-right: 0px;
margin-top: 0px;
margin-left: 220px;
background-color: #CC9;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
.content p {
font-size: 0.8em;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1em;
margin-left: 0px;
}
.content img {
border: 1px solid #CCCCCC;
padding: 0px;
margin: 0px 5px 5px 0px;
float: left;
}
h1 {
font-size: 1.2em;
font-weight: bold;
color: #333333;
background-color: #D3D3D3;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1em;
margin-left: 0px;
padding-top: 4px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 5px;
background-image: url(../images/generic/spacerh1.jpg);
background-repeat: repeat-x;
background-position: left bottom;
height: 22px;
}
h2 {
font-size: 1em;
font-weight: bold;
color: #333333;
background-color: #CCCCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1em;
margin-left: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;
}
h3 {
font-size: 1em;
font-weight: bold;
color: #666666;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.3em;
margin-left: 0px;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
h4 {
font-size: 0.9em;
font-weight: bold;
color: #990000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.3em;
margin-left: 0px;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #E1E1E1;
}
.content a:link, .content a:visited {
color: #03C;
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
color: #990000;
}
.footer {
margin: 0px;
padding: 0px;
background-color: #996;
height: 60px;
}
that's all of it so it's hardly a problematic site.
any ideas - should be no white areas
Try using this at the very top of you css
* {
padding:0px;
margin:0px;
}
What this does basically cancels out all the extra spacing caused by certain elements like P and H1. you will also find that this will help you to reduce the number of IE, FF fixes or hacks.
FYI: you will have to then go back and apply padding and margins to elements like P and H1,2,3 because they will loose their natural spacing... and readjust some of your other css rules.
Let me know if this helps
all the best - feel like I've learnt something new today!
SunsterV
