...

View Full Version : help with structure a site with css and divs.



alapimba
12-17-2006, 08:06 PM
Hello, i have been building sites for about 3 years and i allways use tables, now i'd like to start trying css and divs but i don't know how to align the divs, give space between them and that stuff.
The code i have to far works ok with firefox but on IE6 it looks completly diferent. Is this a problem with ie6 or a problem with my code? Because if the problem is with imcompatibity with ie6 i guess i'll have to keep using tables for a bit longer..

Anyways to my problem.
I want this: 4944

and my code now is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clube Amigos do 600/500 de Portugal</title>
<link href="css/600.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div id="right"><img src="img/top_right.jpg" alt="" width="210" height="410" /></div>
<div id="top"><img src="img/topo.gif" alt="top" name="top" width="740" height="110" id="top" />
<div id="logo"><img src="img/logo_club.png" width="188" height="192" /></div>
</div>
<div id="bottom">bottom</div>

</div>
</body>
</html>


my 600.css file is:

body {
background-color: #FFFFFF;
background-image: url(../img/background.gif);
text-align: center;
}
#logo{
height: 192px;
width: 188px;
z-index: 2;
position: relative;
top: -96px;
left: 500px;
}
#main{
background-color:#FFFFFF;
width: 955px;
padding: 5px;
margin: 0 auto;
text-align: left;
z-index: -1;
}
#top{
background-color:#666666;
height: 110px;
width: 740px;
z-index: 0;
position: relative;
}
#right{
background-color:#3333FF;
height: 410px;
width: 210px;
float: right;
}
#bottom{
background-color:#00CCFF;
height: 300px;
width: 740px;
overflow: auto;
}


what i'm doing wrong? i guess it has something to do with how i place divs inside divs, but i'm not sure.

Anyone to help me? :rolleyes:

Thanks in advance :thumbsup:

danielfolsom
12-17-2006, 08:19 PM
Web browsers can only handle certain tags, and while i haven't had too much time to look over your code, it seems that there might be some problems with what tags you use
There is this thing called Valid HTML - and that's and HTML site that ONLY uses tags supported by all the browsers (which is quite a number of tags really) ... try putting this at the bottom of you website and then click it:


<p style="text-align: center;"><a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88"/></a> </p>


If it says valid, I'm wrong, but I bet it'll say invalid - in which case you would have to find an alternative way to do your site.

danielfolsom
12-17-2006, 08:20 PM
Also, why does you thing say css/600.css? You describe your css page as 600.css, and if that's the title there's no need for the css/ part

alapimba
12-17-2006, 09:14 PM
Also, why does you thing say css/600.css? You describe your css page as 600.css, and if that's the title there's no need for the css/ part

er... css is the dir where the 600.css file is.

the main problem so far is that the top div instead of stay with the height set on the css file it dispaly with that height + the logo div height. that div should be on top of all others.

Excavator
12-17-2006, 10:56 PM
Hello alapimba,
I totally did not understand your last post but I did have a look at your code. It might be easier if I had the images ... I don't know.
See if this does what your wanting.



body {
background-color: #FFFFFF;
background-image: url(../img/background.gif);
text-align: center;
}
* {
margin: 0;
padding: 0;
}
#logo{
height: 192px;
width: 188px;
}
#main{
background-color:#FFFFFF;
width: 955px;
padding: 5px;
margin: 0 auto;
text-align: left;
}
#top{
background-color:#666666;
height: 110px;
width: 740px;
}
#right{
background-color:#3333FF;
height: 410px;
width: 210px;
float: right;
}
#bottom{
background-color:#00CCFF;
height: 300px;
width: 740px;
overflow: auto;
}

I did not change anything in the html

Excavator
12-17-2006, 11:06 PM
maybe #logo needed a little more help:


body {
background-color: #FFFFFF;
background-image: url(../img/background.gif);
text-align: center;
}
* {
margin: 0;
padding: 0;
}
#logo{
height: 192px;
width: 188px;
float: left;
}
#main{
background-color:#FFFFFF;
width: 955px;
padding: 5px;
margin: 0 auto;
text-align: left;
}
#top{
background-color:#666666;
height: 302px;
width: 740px;
}
#right{
background-color:#3333FF;
height: 410px;
width: 210px;
float: right;
}
#bottom{
background-color:#00CCFF;
height: 300px;
width: 740px;
overflow: auto;
}

alapimba
12-26-2006, 07:34 PM
on firefox it looks like this:
http://img444.imageshack.us/img444/8253/firefoxzr5.jpg

on ie it looks like this:
http://img444.imageshack.us/img444/8523/iehb7.jpg

Excavator your css didn't solve the problem :(

Excavator
12-26-2006, 08:19 PM
Just looked at it again real quick so there is probably a better way to do this. I'm not very good with absolute positioning but that's the only way I see of putting the logo over top of your other divs.
I put the logo by itself, instead of enclosed in the #top div like you had it, and positioned it absolute using (and this is where I'm not sure) margin to move it over.

It validates and looks good in IE7 and FF2.

See it at http://www.nopeople.com/alapimba/



Sorry about the picture, it's a crop from a photo of Johnny Cash that I really like and I probably shouldn't have used it - I don't mean to offend anyone with it.

alapimba
12-26-2006, 10:54 PM
well it seems to work.
can you show me your css code?

alapimba
12-26-2006, 11:01 PM
forget my last post. i just found how you did it.
I just didn't understand this property at all... it set a margin from left based on the div where the logo div is in? If it's absolute it shouldn't be based on the x=o and y=o of the browser?

It's working fine i just want to understand this property
thanks in advance

Excavator
12-27-2006, 12:57 AM
It's working fine i just want to understand this property

Maybe someone could explain it to me too. I avoid absolute positioning like the plague so I really don't know a lot about how it acts...That's why I was wondering if the margin I put on it was really the right way to do it.
It validates so it can't be too messed up.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum