Autor Tópico: [Ajuda]- Ajuda em site com problemas de css e centragem  (Lida 3070 vezes)

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« em: Março 22, 2009, 10:23:01 pm »
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

Offline ilovehentai

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #1 em: Março 27, 2009, 07:49:03 am »
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.

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #2 em: Março 30, 2009, 11:13:24 am »
Citação de: 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.


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

Offline hfca

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://humbertotarouca.no.sapo.pt
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #3 em: Março 30, 2009, 03:47:51 pm »
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á.

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #4 em: Março 31, 2009, 02:47:16 pm »
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">
<!--
.style3 {color: #000000}
.style4 {color: #a2a2a3}
.style5 {
font-size: 12px
}
-->
</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[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="contct">menu[/url]</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>

Offline hfca

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://humbertotarouca.no.sapo.pt
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #5 em: Março 31, 2009, 03:04:48 pm »
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[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="contct">menu[/url]</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>

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #6 em: Março 31, 2009, 08:57:48 pm »
Citação de: 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[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="contct">menu[/url]</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.

Offline hfca

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://humbertotarouca.no.sapo.pt
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #7 em: Abril 02, 2009, 07:05:49 pm »
hoje se tiver tempo vou testar no meu pc e logo k possa mando a solução.

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #8 em: Abril 02, 2009, 09:46:41 pm »
Citação de: hfca
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;


}

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #9 em: Abril 04, 2009, 06:14:08 pm »
Citação de: 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

Offline t_e_e_m

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[Ajuda]- Ajuda em site com problemas de css e centragem
« Responder #10 em: Abril 06, 2009, 05:46:07 pm »
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[/url]</li>
<li><a href="XXX">Equipa[/url]</li>
<li><a href="XXX">Instalações[/url]</li>
<li><a href="XXX">Serviços[/url]</li>
<li><a href="XXX">Conveções[/url]</li>
<li><a href="XXX">Contactos[/url]</li>
</ul>

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49