Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Meu layout tem três div's (colunas)
Nas div's left e right eu tenho um menu em cada uma delas, certo?
No IE as três div's ficam alinhadinhas mais no Firefox a div left
fica com uma margem que não sei de onde saiu, com isso o tamanho dos links fica pequeno
e fica tudo desalinhado nesse menu.
O estranho é qua a div "right" fica normal e não tem diferença entre as duas, só mesmo o tamanho e o float!
Sabem o que pode ser?
Vejam o css:
body {
background:#fff;
font:normal 13px/normal "Trebuchet Ms", arial, sans-serif;
margin:5px 5px;
padding:0;
padding:0;
}
#geral {
background:#f9f9f9;
margin-top:0;
padding-top:0;
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
width:850px;
}
#conteudo_centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}
#left{
width:156px;
float:left;
margin-top:5px;
}
#right {
width:178px;
float:right;
margin-top:5px;
}margin: 0 3px 0 5px;
padding: 0;font:normal 12px/normal "trebuchet ms", arial, sans-serif;
}ul#menu li, ul#menu_r li {
border-bottom: 1px solid #ccc;
}ul#menu li a:link, ul#menu li a:visited, ul#menu_r li a:link, ul#menu_r li a:visited {
display: block;
text-decoration: none;
color:#666;
padding:3px 5px;
border: 1px solid #ddd;
border-bottom: 0;
border-top: 0;
}ul#menu li a:hover, ul#menu_r li a:hover {
background-color: #f9f9f9;
color:#c70000;
}ul#menu .titulo {
height: 20px;
border:1px solid #ddd;
font-family:Verdana;
font-size:13px;
font-weight:bold;
color:#000;
width:146px;
padding-top:3px;
}ul#menu_r {
margin: 0 5px 0 3px;
padding: 0;font:normal 12px/normal "trebuchet ms", arial, sans-serif;
}ul#menu_r .titulo {
height: 20px;
border:1px solid #ddd;
font-family:Verdana;
font-size:13px;
font-weight:bold;
color:#000;
width:168px;
padding-top:3px;
}<div id="geral">
<div id="left">
<ul id="menu">
<div class="titulo"> » Menu 1</div>
<li><a href="/" >Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<div class="titulo"> » Menu 2</div>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>
<div id="conteudo_centro">Conteudo do Site</div>
<div id="right">
<ul id="menu_r">
<div class="titulo"> » Menu Direita</div>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>
</div>>
porque no seletor BODY tem dois padding:0;?
ponha isso tambem no seu CSS:
*{
list-style:none;
margin:0px;
padding:0px;hua nem vi que tinha dois.
Mais assim, resolveu meu problema, to desde meio dia tentando! Brigadão mesmo http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif
Se podia me falar mais uma coisa?
É que tem outra diferença aqui no firefox, tipo:
Tenho uma tabela com os mesmo valores de margem e width do paragrafo,
no IE eles fica alinhadinhos, mais no Firefox a tabela ocupa todo espaço do "centro".
o css:
p {
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}
#centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}
#table {
width:490px;
background-color:#fff;
margin:10px 15px 5px 10px;
}#table .titulo_materia, .titulo_outros {
font-size:15px;
font-weight:bold;
color:#009900;
width:100%;
border-bottom:1px dotted #000099;
}<div id="centro">
<table id="table">
<tr>
<td colspan="6" class="titulo">Blá Blá Blá</td>
</tr>
<p>Aqui eu queria que o texto ficasse alinhado com o que tá escrito na td da tabela<br/>
no IE ele fica, mais no Firefox, a tabela ocupa todo o espaço do "centro" sem ficar com as margens</p>
</div>aqui você não fechou TABLE
<div id="centro">
<table id="table">
<tr>
<td colspan="6" class="titulo">Blá Blá Blá</td>
</tr><p>Aqui eu queria que o texto ficasse alinhado com o que tá escrito na td da tabela<br/>
no IE ele fica, mais no Firefox, a tabela ocupa todo o espaço do "centro" sem ficar com as margens</p>
</div>>
aqui você não fechou TABLE
<div id="centro">
<table id="table">
<tr>
<td colspan="6" class="titulo">Blá Blá Blá</td>
</tr><p>Aqui eu queria que o texto ficasse alinhado com o que tá escrito na td da tabela<br/>
no IE ele fica, mais no Firefox, a tabela ocupa todo o espaço do "centro" sem ficar com as margens</p>
</div>Não não esqueci só aqui mesmo, tá tudo fechadinho!!
Aqui eu não vi nenhuma diferença muito grande, mas me diga por que "tabelas"??
Não seria melhor DIV com P + CSS ??
arrume seu código HTML para podermos entende-lo
ok? ;)
>
Aqui eu não vi nenhuma diferença muito grande, mas me diga por que "tabelas"??
Não seria melhor DIV com P + CSS ??
arrume seu código HTML para podermos entende-lo
ok? ;)
Tabelas pq eu quero alinhar outros intens tbm, dai com css tentei e não tive sucesso,
ai fiz com tabela msm, veja o código mais completo:
css:
body {
background:#fff;
font:normal 13px/normal "Trebuchet Ms", arial, sans-serif;
margin:5px 5px;
padding:0;
}*{
list-style:none;
margin:0px;
padding:0px;
}p {
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}
#centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}
#table {
width:490px;
background-color:#fff;
margin:10px 15px 5px 10px;
}
.titulo {
font-size:15px;
font-weight:bold;
color:#009900;
width:100%;
border-bottom:1px dotted #000099;
}
.icon_favoritos {
width:6%;
}
.icon_enviar {
width:6%;
}
.icon_imprimir {
width:6%;
}
.autor {
width:82%;
font-size:12px;
color:#666666;
}<div id="centro>
<table id="table">
<tr>
<td colspan="6" class="titulo">Titulo Texto</td>
</tr>
<tr>
<td class="autor">Por<a class="link" href="/"> Autor</a> em
<a class="link" href="" title="">Sessão</a></td>
<td class="icon_favoritos"><a href="java script:favoritos('<?php echo $site; ?>'<img src="img/star.png" /></a></td>
<td class="icon_enviar"><a href="java script:window.open('indique.php?url=<?php echo $site; ?><img src="img/email_go.png" /></a></td>
<td class="icon_imprimir"><a href="java script:window.print()" title="Imprimir">
<img src="img/printer.png" /></a></td>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis
laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut
sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet
ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas
dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero,
ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse
et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis
laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut
sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet
ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas
dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero,
ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse
et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis
laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut
sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet
ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas
dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero,
ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse
et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
</p>
</div>Para tudo! http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif
resolvi o problema ai das tabelas,
é que separei a parte de tabela no meu css com
comentário, dai essa tabela que me referi vinha logo depois
dai tirei o comentário só pra testar, num é que funcionou... http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif
Agora num sei pq o comentário fez isso...
Vlw d+ a ae ajuda Silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif
Feliz ano novo!
Para tudo! http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif
resolvi o problema ai das tabelas,
é que separei a parte de tabela no meu css com
comentário, dai essa tabela que me referi vinha logo depois
dai tirei o comentário só pra testar, num é que funcionou... http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif
Agora num sei pq o comentário fez isso...
Vlw d+ a ae ajuda Silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif
Feliz ano novo!
Kurt_z eu não vi diferenças mas se tiver algum link para passar
abraço
feliz ano novo tambem ;)
>
Kurt_z eu não vi diferenças mas se tiver algum link para passar
abraço
feliz ano novo tambem ;)
Já resolvi Silver,
tipo era o comentário que tinha antes da div tipo:
<!-- Tabela -->
#table {
etc...
}
Tirei o comentário e resolveu, agora o porque eu num sei :huh:
vlw!
eu sei que você já resolveu seu problema mas tem duas coisas que observei
uma é que aqui:
>
et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
</p>
</div>
tem dois <P> um a mais do que deveriae segundo o comentario ao qual você se refere é o texto dentro de <P>, né?então tente por assim:
p {
display:block;/adicione isso/
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}
pois como lhe disse aqui eu vejo normal, porem pode ter algo a mais na sua página que afeta o <P>;) abraço e feliz ano novo
>
eu sei que você já resolveu seu problema mas tem duas coisas que observei
uma é que aqui:
>
et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
</p>
</div>
tem dois <P> um a mais do que deveriae segundo o comentario ao qual você se refere é o texto dentro de <P>, né?então tente por assim:
p {
display:block;/adicione isso/
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}
pois como lhe disse aqui eu vejo normal, porem pode ter algo a mais na sua página que afeta o <P>;) abraço e feliz ano novo
Ah sim! Mais esse p eu coloquei a mais sem ver, mais na página que estou fazendo tá normal.
Já o comentário eu tava fazendo um comentário que o css não aceita olha como eu fiz
<!-- TABELA -->
#table {
width:490px;
background-color:#fff;
margin:10px 15px 10px 10px;Agora e seu fazer assim :
/Tabela/
#table {
width:490px;
background-color:#fff;
margin:10px 15px 10px 10px;
}a sim o comentario ao qual você se referia era dentro do CSS
entendi :o
isso mesmo essa é a maneira certa** /Tabela/**
feliz ano novo
;)
>
a sim o comentario ao qual você se referia era dentro do CSS
entendi :o
isso mesmo essa é a maneira certa** /Tabela/**
feliz ano novo
;)
Valeu! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif
Feliz ano novo pra nós todos http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
porque no seletor BODY tem dois padding:0;?
e por que você pos <DIV> dentro de <UL> não seria melhor um <LI> com CLASS??
ponha isso tambem no seu CSS:
*{
}asterisco é um seletor global ;)