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 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Simple quick fix THANNNG

    Hello, I am very new to css, and coding in general. As an experiment, in order to improve my skills and knowledge of the subject I am simply trying to make four squares that change colors when I mouse over.

    I can do this with text quite simply, but I cannot seem to get the squares im looking for.

    Here is my html so far....
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="colorsquare.css">
    </head>
    <body>
    <div class="s1">

    <div id="sq">
    <tr>
    <td></td>
    </tr>
    </div>

    <div id="sq1">
    <tr>
    <td></td>
    </tr>
    </div>

    <div id="sq2">
    <tr>
    <td></td>
    </tr>
    </div>

    <div id="sq3">
    <tr>
    <td></td>
    </tr>
    </div>
    </div>
    </body>
    </html>


    And here is my css....
    s1{
    background-color: #3B3932;
    }
    #sq:hover{color:#E702AD; height: 50px; width: 50px;}
    #sq1:hover{color:#F1FA04; height: 50px; width: 50px;}
    #sq2:hover{color:#F42C0B; height: 50px; width: 50px;}
    #sq3:hover{color:#3717BA; height: 50px; width: 50px;}


    What am i doing wrong? And is there anyway to do this more efficiently? Thanks.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    There is a lot of things wrong with what you posted. First you have no doctype. That is a must if you want cross browser compatibility. Second tr and td elements only go within tables, NOT within divs. Also IE6 which still exists doesn't support :hover on anything but anchor elements. You can do this with all anchor elements or you can use divs if you plan on putting a lot of content in them. I'm also assuming you wanted to change background colors. color changes the text color. I really suggest you read some tutorials on html/css as seems you may be off on the wrong foot. I think you should also check out the validate here: http://validator.w3.org

    It will show you your errors. Try the below.
    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=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
    	width:120px;
    	margin:auto;
    }
    #container .square {
    	background:#3B3932;
    	width:50px;
    	height:50px;
    	display:block;
    	margin:5px;
    	float:left;
    	color:#FFF;
    	text-decoration:none;
    	text-align:center;
    }
    #container .square.sq1:hover{background-color:#E702AD;}
    #container .square.sq2:hover{background-color:#F1FA04;}
    #container .square.sq3:hover{background-color:#F42C0B;}
    #container .square.sq4:hover{background-color:#3717BA;}
    </style>
    </head>
    
    <body>
    <div id="container">
    	<p>These will work in all browsers but they are limited to what you can put in them</p>
    	<a href="#" class="square sq1">Box 1</a>
    	<a href="#" class="square sq2">Box 2</a>
    	<a href="#" class="square sq3">Box 3</a>
    	<a href="#" class="square sq4">Box 4</a>
    	<p>These will work in all modern browsers like Safari, Firefow, IE7+</p>
    	<div class="square sq1">Box 1</div>
    	<div class="square sq2">Box 2</div>
    	<div class="square sq3">Box 3</div>
    	<div class="square sq4">Box 4</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    vokal (12-09-2009)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    There is a lot of things wrong with what you posted. First you have no doctype. That is a must if you want cross browser compatibility. Second tr and td elements only go within tables, NOT within divs. Also IE6 which still exists doesn't support :hover on anything but anchor elements. You can do this with all anchor elements or you can use divs if you plan on putting a lot of content in them. I'm also assuming you wanted to change background colors. color changes the text color. I really suggest you read some tutorials on html/css as seems you may be off on the wrong foot. I think you should also check out the validate here: http://validator.w3.org

    It will show you your errors. Try the below.
    Wow, thanks a lot. I truly do appreciate your help and quick response. Hopefully I will be able to take this and learn a thing or two. However, one thing I do not understand is what constrains the blocks to those layouts.
    for instance, I've modified your code to strictly meet my "vision"...
    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=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
    	width:120px;
    	margin:0px;
    }
    #container .square {
    	background:#3B3932;
    	width:50px;
    	height:50px;
    	display:block;
    	margin:0px;
    	float:left;
    	color:#FFF;
    	text-decoration:none;
    	text-align:center;
    }
    #container .square.sq1:hover{background-color:#E702AD;}
    #container .square.sq2:hover{background-color:#F1FA04;}
    #container .square.sq3:hover{background-color:#F42C0B;}
    #container .square.sq4:hover{background-color:#3717BA;}
    </style>
    </head>
    
    <body>
    <div id="container">
    
    	<div class="square sq1"></div>
    	<div class="square sq2"></div>
    	<div class="square sq3"></div>
    	<div class="square sq4"></div>
            <div class="square sq1"></div>
    	<div class="square sq2"></div>
    	<div class="square sq3"></div>
    	<div class="square sq4"></div>
    </div>
    </body>
    </html>
    This leaves me with a rectangle of 8 individual squares stacked vertically. But what if I wanted to arrange the squares diagonally or in an "x" etc. I ask this because Im trying to understand how to lay out elements on the page with css. Also, I cannot seem to figure out how to repeat these squares to cover the page. Would I have to create a new #container id using different parameters?

    Thanks again for your help.
    Last edited by vokal; 12-09-2009 at 06:05 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Essentially yes you would need more containers but each #container would need to be named differently because IDs are unique. To get them in an "x" or diagonally there is a lot more involved. You will need to adjust margins and play with floating.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Essentially yes you would need more containers but each #container would need to be named differently because IDs are unique. To get them in an "x" or diagonally there is a lot more involved. You will need to adjust margins and play with floating.
    Ah that is what I was afraid of. So there is no simple way I could just put the coordinates of where I want to have the elements appear?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You could use absolute positioning but more times often than not this can lead to other issues such as where the elements appear on other resolutions. Don't abuse absolute positioning. Why are you trying to make an "x". What are you trying to make?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You could use absolute positioning but more times often than not this can lead to other issues such as where the elements appear on other resolutions. Don't abuse absolute positioning. Why are you trying to make an "x". What are you trying to make?
    I'm not specifically trying to make an "x". What I'm trying to do is wrap my head around to positioning aspect of css.
    To make a another row of boxes would I just do this?
    Code:
    #container {
    	width:120px;
    	margin:0px;
    }
    #container .square {
    	background:#3B3932;
    	width:50px;
    	height:50px;
    	display:block;
    	margin:0px;
    	float:left;
    	color:#FFF;
    	text-decoration:none;
    	text-align:center;
    }
    #container .square.sq1:hover{background-color:#E702AD;}
    #container .square.sq2:hover{background-color:#F1FA04;}
    #container .square.sq3:hover{background-color:#F42C0B;}
    #container .square.sq4:hover{background-color:#3717BA;}
    #container .square.sq5:hover{background-color:#53FFAB;}
    
    #container1{
            width:120px;
            margin:0px;
    }
    
    #container1 .square1 {
            background:#3B3932;
    	width:50px;
    	height:50px;
    	display:block;
    	margin:120px;
    	float:right;
    	color:#FFF;
    	text-decoration:none;
    	text-align:center;
    }
    #container1.square1.sq6:hover{background-color:#E702AD;}
    #container1.square1.sq7:hover{background-color:#F1FA04;}
    #container1.square1.sq8:hover{background-color:#F42C0B;}
    #container1.square1.sq9:hover{background-color:#3717BA;}
    #container1.square1.sq10:hover{background-color:#53FFAB;}
    it doesn't seem to work haha.
    The hover function isn't working on the new container...
    Last edited by vokal; 12-09-2009 at 07:42 PM.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Look at your added CSS and the original CSS. Spaces are key here.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Look at your added CSS and the original CSS. Spaces are key here.
    Heh, that was easy. I'm sorry to be so reliant on you, but why is it that the boxes begin a quarter way down the page? And the boxes of the second container begin lower? Could it be the use of pixels, and the browser Im using? I'm testing it on both Firefox and Chrome.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its because you are using a margin of 120px.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Its because you are using a margin of 120px.
    Eh... I'm using margin-left now, and Im still running into the same problem.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You are also floating. We don't have time to walk you through everything you need to learn some things on your own.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You are also floating. We don't have time to walk you through everything you need to learn some things on your own.
    Yeah, I feel you. Its just that the resources I come upon don't really touch things of this nature.


  •  

    Posting Permissions

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