Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    1st attempt not working.

    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

    Here is the result

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

    What am I doing wrong?

  • #2
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    1
    Thanked 1 Time in 1 Post
    The problem occurs here

    Code:
    <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

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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.

    Code:
    <!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">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, Now I need to get the top box to show the size that I coded.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    I think span would be better used spanning a selection of text. Maybe you want to use divs instead?

    Like this:

    Code:
    <div id="top">testing123</div>
    <div id="left">testing123</div>
    <div id="right">testing123</div>
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Then a span if you like:
    Code:
    <div id="top"><span class="mytext">testing123</span></div>
    Code:
    .mytext {
    color: #fff;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Why not apply .mytext directly to the div?

  • #8
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    1
    Thanked 1 Time in 1 Post
    You don't have to change the css at all, all you need to do is change 'span' for 'div'

    Code:
    <div class="left">testing123</div>
    <div class="right">testing123</div>
    <div class="top">testing123</div>
    Then leave the CSS as it is.

    Code:
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by CyanLight View Post
    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.
    Last edited by Excavator; 12-27-2007 at 07:49 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •