...

View Full Version : Simple quick fix THANNNG



vokal
12-09-2009, 05:23 PM
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.

_Aerospace_Eng_
12-09-2009, 05:38 PM
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.

<!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>

vokal
12-09-2009, 05:59 PM
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"...

<!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.

_Aerospace_Eng_
12-09-2009, 06:10 PM
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.

vokal
12-09-2009, 06:13 PM
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?

_Aerospace_Eng_
12-09-2009, 06:17 PM
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?

vokal
12-09-2009, 07:30 PM
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?

#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...

_Aerospace_Eng_
12-09-2009, 07:32 PM
Look at your added CSS and the original CSS. Spaces are key here.

vokal
12-09-2009, 08:08 PM
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.

_Aerospace_Eng_
12-09-2009, 08:39 PM
Its because you are using a margin of 120px.

vokal
12-09-2009, 08:51 PM
Its because you are using a margin of 120px.
Eh... I'm using margin-left now, and Im still running into the same problem.

_Aerospace_Eng_
12-09-2009, 10:33 PM
You are also floating. We don't have time to walk you through everything you need to learn some things on your own.

vokal
12-10-2009, 08:36 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum