6 replies [Last post]
angeliewv
angeliewv's picture
Offline
newbie
Last seen: 9 years 4 weeks ago
Timezone: GMT-5
Joined: 2010-11-13
Posts: 4
Points: 5

Okay, I am a total newbie to CSS, just learning it to make a website for my friend's farming business. I thought I was catching on but have been stumped already!

I have been watching an online video tutorial for beginners about designing a layout in CSS. I was following along with the instructor and everything in my site was coming out exactly like his until he/we added a class of { clear : both } at a certain point, which you will see in the markup. At this point, his site showed a white background beneath the main content text and stretching the length of the header, while mine showed A) nothing beneath the text on the computer I was working from, only the main content text with no background separating it from the body background and B) the header background image duplicating when I would look at the site from a different computer.

Try it and tell me what you see, but please ignore the crappy images as I've not put any thought into those yet, just trying to get the template laid out:


http://community.wvu.edu/~ati000/template.html

This is really annoying me, as I have gone through both of our codes (instructor's and mine) and they look identical to me. I have included my CSS and markup below.

Can anyone tell me what might be causing this discrepancy between his site and mine? I know you can't see his, but at least you can see what is wrong with mine--either duplicating header with nothing visually separating the main content div from the body background, or if you're seeing what I see on my laptop, then no duplicating headers but still nothing separating the main content from the body background. FYI, when I remove the [p class="clear"] from the HTML, the duplicate headers disappear but there is still no white background under the main content as in the tutorial, which is what I would like to visually separate the content from the background. Clearly, then, the duplicating headers at least are related to this piece of code, but I don't know why.

Sorry if this doesn't make any sense. Thanks in advance--your help is much appreciated!

Angie

 
body {
    font-family: Georgia, serif;
    background: #fff url(..images/leaf-button.gif);  
    margin: 0;
    padding: 0;
 
}
 
div#outerDiv {
    width: 770px;
    margin: 0 auto;
    background: #fff url(../images/header.gif); no-repeat;
}
/* ******header****** */
 
div#header {
    height: 152px;
    position: relative; 
}
 
/* ********contact link********* */
 
#outerDiv div#contactButton {
    position: absolute;
    left: 650px;
    top:0
}
#contactButton a:link, #contactButton a:visited {
    height: 29px;
    width: 86px;
    display: block;
    text-indent: -1000em;
    background: url(../images/contact-button-combined.gif); left top;
    border: none;
}
 
#contactButton a:hover, #contactButton a:active {
    background-position: left bottom;
 
}
/* ****main menu**** */
 
#header #mainMenu {
    position: absolute;
    left:225px;
    bottom: 0px; 
}
 
#mainMenu ul{
    list-style:none;
    margine: 0;
    padding: 0;
}
 
#mainMenu li {
    float:left;
    margin: 0;
    padding: 0;
 
}
 
#mainMenu li a:link, a:visited {
    font-family: "Georgia", serif;
    display: block;
    color: #165125;
    text-decoration: none;
    padding: 0 15px 0 30px;
    margin-right: 10px;
    line-height: 25px;
    background: url(../images/navbar.gif); no-repeat; left top;
    border: solid white 2px    
 
}
 
#mainMenu li a:hover, a:active {
    background-position: left bottom;
 
}
 
/* *****main content**** */
 
 
 
 
#content div#mainContent {
    float:left;
    width: 430px;
    margin: 0;
    padding: 0 15px;
 
}
 
#mainContent p {
    font-family: Georgia, serif;
    font-size: .9em;
    line-height: 1.4em;
    color: #165125;
    margin: 1ex 0;
 
}
 
#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h1 {
    font-family: "Trebuchet MS", sans-serif; 
 
}
 
#mainContent h1 {
    font-size: 1.6em
    font-weight: bold;
    color: #165125;
    margin: 0 0 .4ex 0;
}
 
#mainContent h2 {
    font-size: 1.2em
    color: #165125;
    margin: .4ex 0;
}
 
#mainContent h4 {
    font-size: 1.1em
    font-weight: bold;
    color: #165125;
    margin: 1ex 0 -.2x 0;
}
 
/* ***** miscellaneous styles**** */
 
.class { clear: both }

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Young Harvest</title>
</head>
<link href="CSS/main.css" rel
 
="stylesheet" type="text/css" />
 
<body>
<div id="outerDiv">
	<div id="header">
    	<div id="contactButton">
        	<a href="mailto:[email protected]" title="contact us">contact us</a>
        </div><!--contact button-->
        <div id="mainMenu">
        	<ul>
            	<li><a href="home.html" class="current">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="markets.html">Markets</a></li>
                <li><a href="csa.html">CSA</a></li>
            </ul>
        </div> <!--main menu-->
    </div> <!--header-->
    <div id="midBanner"><img src="images/miniheader.gif" width="770" height="35" /></div> <!--midBanner-->
 
    <div id="content">
 
   	  <div id="mainContent">
       	<h1> Main Content </h1>
       	  <p> Content here. </p>
 
        </div> 
    	<!--mainContent--> 
 
     	<p class="clear" />
 
	</div> <!-- content --> 
 
</div><!--outerDiv-->
 
</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 41 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3 things that I see right

3 things that I see right away.
The link element to the stylesheet belongs in the head (you've placed it just below the closing head tag).
Your image has no alt attribute (which won't cause problems, but wont validate either).
The element you've applied the clear class to shouldn't self close as you have it. If it were a break tag, you'd be alright but a p tag should be opened and closed with a separate tag - like this:<p class="clear"></p>. Having said that, there are other ways to contain floats without using extraneous markup...

angeliewv
angeliewv's picture
Offline
newbie
Last seen: 9 years 4 weeks ago
Timezone: GMT-5
Joined: 2010-11-13
Posts: 4
Points: 5

Thanks for the tips. I just

Thanks for the tips. I just thought I left you a reply but am not sure where it went--sorry if I'm repeating myself here.

Anyway, I changed the things you noted. Still it is not appearing as it should. I'm going batty and my poor kid has been neglected for the past 24 hours while my face is in front of this computer pushing buttons to no avail! You mention that there are other ways to accomplish what I am trying to accomplish. Do you have any suggestions for where I might go to find information about those other ways? I've tried googling ideas but haven't come up with anything. For some reason I thought that because I studied Linguistics in grad school and had an affinity for syntax, I could do this with relative ease. Now I think I was wrong. Puzzled

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 41 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the clearing div isn't

the clearing div isn't working because you have given it a class of "clear" but in your stylesheet it appears you're using "class".

one other way to contain the floats would be to eliminate the clearing element (p) all together and add this to your stylesheet:#content { overflow: hidden; }

angeliewv
angeliewv's picture
Offline
newbie
Last seen: 9 years 4 weeks ago
Timezone: GMT-5
Joined: 2010-11-13
Posts: 4
Points: 5

Okay, thanks so much, that

Okay, thanks so much, that alternative seems to have worked! I don't quite understand exactly why it worked just yet but for now I'm okay with being only a little bit smarter than a trained monkey taking commands from the experts! Ha! Anyway, hopefully as I get a little better at this it will make more sense so that when I add my sidebar content I won't screw everything up...or will at least be able to fix it myself if I do. Thanks again, much appreciated.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 41 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

it should be noted that your

it should be noted that your original way would have worked had you used the correct class name. Also, see gary's post on float containment for more information on the subject.

angeliewv
angeliewv's picture
Offline
newbie
Last seen: 9 years 4 weeks ago
Timezone: GMT-5
Joined: 2010-11-13
Posts: 4
Points: 5

I just tried it in a "save

I just tried it in a "save as" copy of my page, and you are right, it did work, too. I think maybe I'd just been staring at it all for too long and was overlooking the obvious errors. Thanks again, and also for the link about the float containment. I'm catching on slowly but surely and appreciate the help. -angie