Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need advice from others

Status
Not open for further replies.
oxEz

oxEz

Programmer
Jun 9, 2005
4
CA
This is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>
<title>CSS testing 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.vert {
background-color: green;
width: 500px;
height: 500px;
}

.jaune {
width: 100px;
height: 50px;
background-color: yellow;
position: relative;
float: right;
}

div {
text-align: center;
color: #FFFFFF;
font-family: Verdana;
font-size: 9px;
font-weight: bold;
}

.bleu {
width: 100px;
height: 50px;
background-color: blue;
position: relative;
float: left;
}

.rouge {
float: left;
width: 100px;
height: 50px;
background-color: red;
position: relative;
clear: right;
top: 400px;
}

.noir {
float: right;
width: 100px;
height: 50px;
background-color: black;
position: relative;
clear: right;
top: 400px;

}
</style>
</head>

<body>
<div class="vert">
<div class="jaune">jaune</div>
<div class="bleu">bleu</div>
<div class="rouge">rouge</div>
<div class="noir">noir</div>
</div>

</body>
</html>


This displays 100% how I want it to do. It is W3C validated. I just want to know if I used the correct code to do what I did. I really want to learn CSS the best possible way.

Any ideas on how I can optimize my code or is it already (?) optimized?

Thanks :]
 
Sort by date Sort by votes
I don't have any major problems with it. If it validates and shows correctly in all major browsers, I guess it is ok. Without knowing what you are trying to do it is hard to give you more advice.
 
Upvote 0 Downvote
Hm ok. I wanted to create a big green container. And then create 4 boxes in the 4 corners.
 
Upvote 0 Downvote
If you want fixed size boxes, at fixed positions, then the code you've got would be fine.

If you wanted a flexible, scalable solution, then I would not use the code you have, as your values are all absolute units (px), and may not scale in all browsers (IE, for example).

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
I wanted to create a big green container. And then create 4 boxes in the 4 corners.
Click to expand...
And that's what you got, so good for you. An alternative - equally valid - way to do it would be with absolute positioning.

The reason we're not giving you more advice is that your example is purely academic - a big green box with coloured corners. Great. In real life you have some content that you want to present in a particular way, including, who knows, putting different bits in different corners. That'll present it's own problems because the HTML markup should reflect the structure of the content, and the CSS the presentation.

Without knowing what (if anything) it is that you want to present in this way, we can't comment on whether you're going the best way about it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Chris: yea I admit the page I showed you is pretty basic. This was after some hours of tutorials :eek:

I just finished the top of my webpage (which was with tables before). It's located @ It displays correctly in firefox, but the menu is pretty much wrong with IE. I think I got all my images positioned correctly, with some more tutorials and tries.

If anyone can help me with the menu displaying vertically with IE, that would be great :]

Thank you
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
256
jjgupta915
jjgupta915
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
277
LyndonOHRC
LyndonOHRC
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
189
spamjim
spamjim
stephane.bouchard2
  • Locked
  • Question
How can you find the html version from source code. 2
Replies
6
Views
332
stephane.bouchard2
stephane.bouchard2

Part and Inventory Search

Sponsor

Back
Top