...

View Full Version : 1st attempt not working.



chipperi
12-27-2007, 05:37 PM
This is my 1st attempt at trying to learn css. I created an external style sheet to try to standardize all pages on the site. Keep in mind this is a work in progress but as it is should be a grey background with 3 darker grey bars 100px wide with red borders around the boxes. The grey background is showing up but not the bars?

This is work safe I just named it xxx for testing.

Style Sheet (http://www.chipperi.com/xxx.css)

Here is the result (http://www.chipperi.com/test.htm)

I validated the code and it says its fine, and it doesn't work in IE or Firefox.

What am I doing wrong?

Gilligan
12-27-2007, 05:41 PM
The problem occurs here


<span>class="left">testing123</span>
<span>class="right">testing123</span>
<span>class="top">testing123</span>

You ended the span tag to early.

It should be


<span class="left">testing123</span>
<span class="right">testing123</span>
<span class="top">testing123</span>

Excavator
12-27-2007, 06:13 PM
Hello chipperi,
Like it says in my signature, I'm a big fan of using the validator when develping a site. It can help you learn too.

The validator finds those errors if you use a Strict DocType rather than Transitional. Have a look at the Use the right DocType link for an explanation of how to choose one.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

chipperi
12-27-2007, 06:14 PM
Thanks, Now I need to get the top box to show the size that I coded.

Excavator
12-27-2007, 06:21 PM
I think span would be better used spanning a selection of text. Maybe you want to use divs instead?

Like this:



<div id="top">testing123</div>
<div id="left">testing123</div>
<div id="right">testing123</div>


body {
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #000000;
background-color: #999999;
}
#top {
background-color: #666666;
height: 100px;
width: 600px;
border: thin dotted #FF0000;
}
#left {
background-color: #666666;
float: left;
height: 1000px;
width: 100px;
margin-top: 125px;
border: thin dotted #FF0000;
}
#right {
background-color: #666666;
float: right;
height: 1000px;
width: 100px;
margin-top: 125px;
border: thin dotted #FF0000;
}

Excavator
12-27-2007, 06:25 PM
Then a span if you like:

<div id="top"><span class="mytext">testing123</span></div>


.mytext {
color: #fff;
}

Apostropartheid
12-27-2007, 06:35 PM
Why not apply .mytext directly to the div?

Gilligan
12-27-2007, 06:36 PM
You don't have to change the css at all, all you need to do is change 'span' for 'div'


<div class="left">testing123</div>
<div class="right">testing123</div>
<div class="top">testing123</div>

Then leave the CSS as it is.


body {
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #000000;
background-color: #999999;
}
.left {
background-color: #666666;
float: left;
height: 1000px;
width: 100px;
margin-top: 125px;
border: thin dotted #FF0000;
}
.right {
background-color: #666666;
float: right;
height: 1000px;
width: 100px;
margin-top: 125px;
border: thin dotted #FF0000;
}
.top {
background-color: #666666;
height: 100px;
width: 600px;
border: thin dotted #FF0000;
}

Up to you, both easy, both give same result.

Excavator
12-27-2007, 06:45 PM
Why not apply .mytext directly to the div?

Because span is typically just a small section of the text in a sentence. I suppose I could have written one, ... <div id="top"><p>This is a paragraph with a lot of very long<span class="mytext">sentences</span>in it.</div>

And yes, if all the text is to be white, <div id="top" class="mytext"></div> will work. So will color:#fff; in #top.

chipperi
12-27-2007, 06:49 PM
Cool now in "For Dummies" lingo what is the difference between span and div? most of the tutorials I have read say they are the same.

Excavator
12-27-2007, 06:53 PM
A link might explain it best.. certainly better than I could. I'm not sure about the "for dummies" part though. http://www.w3.org/TR/html4/struct/global.html

effpeetee
12-27-2007, 09:58 PM
This will also help.

http://css-discuss.incutio.com/?page=ClassesVsIds

Frank

Apostropartheid
12-27-2007, 10:40 PM
spans and divs aren't the same thing, but they are the same type of element: meaningless. The difference is that spans encapsulate a bit of text while a div is a division, or a block, if you would, in a page. spans cannot contain block-level elements such as p, div or ul.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum