[Ajuda]- Ajuda em site com problemas de css e centragem

[t_e_e_m]

Boas.
Sou mais ou menos novato nestas coisas de web design.

Há algum tempo que estou a realizar um projecto, de plena satisfação pessoal, em css e html.

Após vários dias, se não meses mesmos, qual não é o meu espanto que qdo vou visualizar o meu site em ie6 aparece totalmente descentrado, ao contrario do que no ie7 no qual testei sempre o meu site!

Como poderei resolver esta situação?

O conteudo de uma div à direita, passou para baixo de uma div esq.

Obrigado

[ilovehentai]

Isto acontece porque estás a usar Float:left provavelmente para encostar as divs, contudo quando o espaço que lhes é reservado é menor que a soma das larguras das duas divs uma empurra a outra por baixo. Provavelmente o que precisas é de reduzir a largura das duas divs.

Notas a ter em consideração se declarares por exemplo que uma div tem 100px de largura e depois um padding  de 10px significa que essa mesma div tem na realidade 110px de largura. É só fazer as contas e ver se o espaço em largura para as duas divs é suficiente para a soma das larguras dessas divs.

[t_e_e_m]

Isto acontece porque estás a usar Float:left provavelmente para encostar as divs, contudo quando o espaço que lhes é reservado é menor que a soma das larguras das duas divs uma empurra a outra por baixo. Provavelmente o que precisas é de reduzir a largura das duas divs.

Notas a ter em consideração se declarares por exemplo que uma div tem 100px de largura e depois um padding  de 10px significa que essa mesma div tem na realidade 110px de largura. É só fazer as contas e ver se o espaço em largura para as duas divs é suficiente para a soma das larguras dessas divs.

Eu ja corrigi essa situação, e tenho andado as voltas com isto e nada. Não sei o que fazer mais.

[hfca]

O ideal era locares aí o código que tens assim podia ser que eu te desse uma ajuda mas preciso de ver como tá.

[t_e_e_m]

O css

/* Deixar as margens 0 em todo o site */
* {margin:0; pading:0;}

/* Border das imagens 0 */
img {border:0;}

/* cor e letra todo o site */
body {
background-color:#d9d9df;
font-family:Arial, Helvetica, sans-serif;
}

/* formatação */
h1, h2 {font-size:14px;font-weight:bold; }
p {font-size:12px}
.nota {font-size:11px; color: #3333FF;}

/* Estrutura geral do site */
#geral {
width:730px;
height:650px;
margin:0 auto; /* centra o div geral */
}
/* Topo do site e altura */
#topo {
width:730px;
height:156px;}
/* border-bottom:2px solid #fbc970;*/


/* Espaço menus */
#menus {width:730px; height:38px; background-image:url(IMAGENS/bg_menu.jpg);}
#menus ul { list-style-type:none; float:left; background-image:url(IMAGENS/bg_menu.jpg);}
#menus ul li {display:inline;}
#menus ul li a {padding:10px 45px; float:left; text-decoration:none; color:#77787b; border-left: 1px solid #a09a94}
#menus ul li a:hover {color: #000;}

/*CONTEUDO DO SITE*/

#conteudo {
width:730px;
height:392px;
background-color:#feefd6;
border-top: 2px solid #ecebef;

}



/* Coluna esq */
#coluna_esq {
width:550px;
height:392px;
padding-left:0px;
border-right: 3px solid #d9d9df;
float:left;


}


/* Coluna esqtop */

.coluna_esqtop {
width:544px;
height:100px;
padding-left:33px;

float: right;

}


/* Formatação */
.coluna_esqtop img{margin:5px; float:left;}
.coluna_esqtop h1 {color:#a2a2a3; padding:5px 0;}


/* Links */

.coluna_esqtop p a{color:#a2a2a3; text-decoration:none;}
.coluna_esqtop p a:hover {text-decoration:underline;}

/* Parte de baixo da coluna esquerda */

.coluna_esqbot {

width:453px;
height:230px;
background-image:url(Imagens/bg_evento.jpg);
background-repeat:no-repeat;
margin:14px 0 0 37px;
padding:10px 20px 10px;
_margin:4px 0 0 5px;

}

/* Formatação */
.coluna_esqbot h1 {color:#666666; padding-bottom:5px;}
.coluna_esqbot h2 {color: #a2a2a3; padding-top:5px;}
.coluna_esqbot h3 {color: #a2a2a3; padding-top:0px; font-size:12px;}
.coluna_esqbot h4 {color: #a2a2a3; padding-top:5px;font-size:12px;}
.coluna_esqbot p a{color:#0000CC; text-decoration:none;}
.coluna_esqbot p a:hover {text-decoration: underline;}

.coluna_esqbot img {float:left; margin:26px 5px;}

/* Parte de baixo da coluna esquerda para as paginas que nao index*/

.coluna_esqbotni {

width:453px;
height:500px;
background-image: url(Imagens/bg_contactos.jpg);
background-repeat:no-repeat;
margin:14px 0 0 37px;
padding:10px 20px 10px;
_margin:4px 0 0 5px;

}

/* Formatação */
.coluna_esqbotni h1 {color:#666666; padding-bottom:5px;}
.coluna_esqbotni h2 {color: #a2a2a3; padding-top:5px;}
.coluna_esqbotni h3 {color: #a2a2a3; padding-top:0px; font-size:12px;}
.coluna_esqbotni h4 {color: #a2a2a3; padding-top:5px;font-size:12px;}
.coluna_esqbotni p a{color:#0000CC; text-decoration:none;}
.coluna_esqbotni p a:hover {text-decoration: underline;}

.coluna_esqbotni img {float:left; margin:8px 5px;}



#coluna_dta {
width:167px;
height:382px;
padding: 5px;
float:left;
background-color:#FFFFFF;


}

/* Formatação */
#coluna_dta h1 {float: left;}
#coluna_dta h2 { color:#a2a2a3; ; font-size:10px;}
#coluna_dta h3 { color:#a2a2a3; font-size:10px;}
#coluna_dta h4 { color:#a2a2a3; font-size:10px; }
#coluna_dta h5 { color:#a2a2a3; font-size:10px;}
#coluna_dta h6 {font-size:14px;font-weight:bold; padding-bottom:4px;}
.linha { height:3px; background-color:#d9d9df;}

/* Coluna direita baixo */
#coluna_dta_bot {

height:100px;
padding-top:70px;
margin-bottom:15px;
margin-left:14px;
}

#coluna_dta_bot h1 { color:#a2a2a3; font-size:9px; margin-left:19px; font-variant:small-caps;}
#coluna_dta_bot h2 { color: #000000; font-size:9px; margin-left:19px; font-variant:small-caps;}



/* Inicio do rodape */
#Rodape {
width:730px;
height:49px;
border-top:0px solid #fae5c3;
background-color:#d9d7df;
padding-top:0px;
color:#000000;
text-align:center;
font-size:10px;
}


O html


<!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=utf-8" />
<title>CRB</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">

</style>
</head>
<body>
<div id="geral">

<div id="topo"><img src="IMAGENS/Topo.jpg" /></div>
<div id="menus">

<ul>
<li><a href="index.html" style="border:none;">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="contct">menu</a></li>
</ul>


</div>
<div id="conteudo">
<div id="coluna_esq">
<div class="coluna_esqtop">
<img src="Imagens/477x104.jpg" alt= "imagem 01" />

</p>

</div>
<div class="coluna_esqbot">
<h1>Crb</h1>
<h2> Texto crb</h2>
<p>&nbsp;</p>
<h3 class="style5">Espaço reservado para uma breve nota introdutória ao site.</h3>


</div>

</div>

<div id="coluna_dta">


<h1 class="style4">Contactos</h1>


<div class="linha">


<h2> Morada</h2>



<div class="linha">


 
<h6 class="style4">Localização</h6>

<div class="linha">


<h2> Junto às </h2>
<h2>GPS: coordenadas gps</h2>
</div>

<div id="coluna_dta_bot">
<h2> Clique na Imagem</h2>
<img src="Imagens/localiz.jpg" alt="Clique sobre a imagem" /> </div>

<div class="linha">
</div>

</div>
</div>
</div>
<div id="Rodape"> &copy; <span class="style3"> 2009</span>

Webdesign: JF</div>


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

[hfca]

tenta por na tabela principal que engloba tudo.

. float: center;

penso que deve funcionar assim

Penso que assim tb vai funcionar na boa:

</head>
<body>
<div id="geral" align="center">

<div id="topo" align="center"><img src="IMAGENS/Topo.jpg" /></div>
<div id="menus" align="center">

<ul>
<li><a href="index.html" style="border:none;">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="contct">menu</a></li>
</ul>


</div>
<div id="conteudo" align="center">
<div id="coluna_esq">
<div class="coluna_esqtop">
<img src="Imagens/477x104.jpg" alt= "imagem 01" />

</p>

</div>
<div class="coluna_esqbot">
<h1>Crb</h1>
<h2> Texto crb</h2>
<p>&nbsp;</p>
<h3 class="style5">Espaço reservado para uma breve nota introdutória ao site.</h3>


</div>

</div>

<div id="coluna_dta">


<h1 class="style4">Contactos</h1>


<div class="linha">


<h2> Morada</h2>



<div class="linha">



<h6 class="style4">Localização</h6>

<div class="linha">


<h2> Junto às </h2>
<h2>GPS: coordenadas gps</h2>
</div>

<div id="coluna_dta_bot">
<h2> Clique na Imagem</h2>
<img src="Imagens/localiz.jpg" alt="Clique sobre a imagem" /> </div>

<div class="linha">
</div>

</div>
</div>
</div>
<div id="Rodape"> &copy; <span class="style3"> 2009</span>

Webdesign: JF</div>


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

[t_e_e_m]

tenta por na tabela principal que engloba tudo.

. float: center;

penso que deve funcionar assim

Penso que assim tb vai funcionar na boa:

</head>
<body>
<div id="geral" align="center">

<div id="topo" align="center"><img src="IMAGENS/Topo.jpg" /></div>
<div id="menus" align="center">

<ul>
<li><a href="index.html" style="border:none;">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="XXX">menu</a></li>
<li><a href="contct">menu</a></li>
</ul>


</div>
<div id="conteudo" align="center">
<div id="coluna_esq">
<div class="coluna_esqtop">
<img src="Imagens/477x104.jpg" alt= "imagem 01" />

</p>

</div>
<div class="coluna_esqbot">
<h1>Crb</h1>
<h2> Texto crb</h2>
<p>&nbsp;</p>
<h3 class="style5">Espaço reservado para uma breve nota introdutória ao site.</h3>


</div>

</div>

<div id="coluna_dta">


<h1 class="style4">Contactos</h1>


<div class="linha">


<h2> Morada</h2>



<div class="linha">



<h6 class="style4">Localização</h6>

<div class="linha">


<h2> Junto às </h2>
<h2>GPS: coordenadas gps</h2>
</div>

<div id="coluna_dta_bot">
<h2> Clique na Imagem</h2>
<img src="Imagens/localiz.jpg" alt="Clique sobre a imagem" /> </div>

<div class="linha">
</div>

</div>
</div>
</div>
<div id="Rodape"> &copy; <span class="style3"> 2009</span>

Webdesign: JF</div>


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

Nao deu. JA nao sei mais que fazer. que raio de ie6.

[hfca]

hoje se tiver tempo vou testar no meu pc e logo k possa mando a solução.

[t_e_e_m]

hoje se tiver tempo vou testar no meu pc e logo k possa mando a solução.

Muito obrigado fico bastante agradecido, assim posso ver o que esrtava mal e ouvir a tua opinião.
Mas Parece que ja estou a atinar com isto. Estou a reformolar o css.
Agora estou com uma duvida.

Nesta coluna, gostava de dividila em dois, de modo a poder na segunda coluna do lado dto colocar uma imagem.  Como poderei fazer isso?


#coluna_dta {
width:167px;
height:382px;
padding: 5px;
background-color:#FFFFFF;


}

[t_e_e_m]

Muito obrigado fico bastante agradecido, assim posso ver o que esrtava mal e ouvir a tua opinião.
Mas Parece que ja estou a atinar com isto. Estou a reformolar o css.
Agora estou com uma duvida.

Nesta coluna, gostava de dividila em dois, de modo a poder na segunda coluna do lado dto colocar uma imagem.  Como poderei fazer isso?


#coluna_dta {
width:167px;
height:382px;
padding: 5px;
background-color:#FFFFFF;


}

JA resolvi o problema.

Agora nao sei é como fazer o menu horizontal mais porreirinho

[t_e_e_m]

Estou comdificulades em criar sub menus no meu menu ja criado, tenho tentado mas nada.

/* Espaço menus */
#menus {
width:730px;
height:38px;
background-image:url(IMAGENS/bg_menu.jpg);
}
#menus ul {
list-style-type:none;
background-image:url(Imagens/bg_menu2.jpg); background-repeat:repeat-x;
}
#menus ul li {
display:inline;
}
#menus ul li a {
padding:10px 25px;
float:left;
text-decoration:none;
color:#77787b;
border-left: 1px solid #a09a94
}
#menus ul li a:hover {
color: #000;
}


html:

<ul>
<li><a href="index.html" >CRB</a></li>
<li><a href="XXX">Equipa</a></li>
<li><a href="XXX">Instalações</a></li>
<li><a href="XXX">Serviços</a></li>
<li><a href="XXX">Conveções</a></li>
<li><a href="XXX">Contactos</a></li>
</ul>