Problema na montagem de Layout CSS

gajo da net · November 1, 2007 at 10:07 AM

Estou a construir o layout mas o "#corpo2" não consigo mostrar e não sei o que poderá estar mal no meu códico:

http://img107.imageshack.us/img107/3203/problv4.th.gif


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="pt">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>titulo</title>
<style type="text/css" media="screen">



body
{   
   background-color:green;
   font-family:georgia,times,"times new roman",serif;
}



#corpo1
{


   position: absolute;
   width:800px;
   height:152px;
   top:21px;
   left:0px;
   background-image:url("corpo1.gif");

}


#corpo11
{

   z-index:1;
   position:absolute;
   width:528px;
   height:143px;
   top:9px;
   left:136px;
   background-image:url("banner2.gif");

}



#corpo2
{

margin:0px;
padding:0px;

z-index:2;
   position: absolute;
   width:800px;
   height:34px;
   top:173px;
   left:0px;
   background-image:url("baixo.gif");

}



</style>
</head>
<body>


<div id="corpo1">

   <div id="corpo11">
   </div>

</div>


<div id="corpo2">
</div>



</body>
</html>

Abraço

gajo da net · November 2, 2007 at 05:52 PM

Eu sou tão estupido ... estupido estupido estupido lolol e está sempre a acontecer-me. São estes erros parvos que me fazem perder horas desnecessárias.

Por isso é que não aparecia, não fiz upload da imagem 😄

Triton · November 2, 2007 at 06:51 PM

Por isso é que não aparecia, não fiz upload da imagem 😄

?

Ainda bem que já resolveste esse mistério! 😁

pebat · November 2, 2007 at 08:28 PM

deves querer uma cena destas assim:

Parte do css:


body{
margin:10px 15px;
font: 12px Arial, Helvetica, sans-serif;
background-color:#000000;
}
#geral {
width:700px;
/* background: url(faux-bg.gif) repeat-y 0 0; */
background-color:#black;
}
#topo {	
height:100px;
background-color:#df7ddf;
/*background-image:url(../images/admin/topo.jpg);*/
background-repeat: no-repeat;
}
#direita {
width:550px;
/*background-color:#9cf;*/
float:right;
padding-top: 10px;
}
#escreda {
width:150px;
height: auto;
background-color:#C3C3C3;
float:left;
clear: left;
padding-top: 10px;
padding-bottom: 10px;	
}
#direita * {
padding: 0 20px;
margin-top: 10px;
}
#esquerda * {
padding: 0 8px;
}
#rodape {	
clear:both;
height:20px;
background-color:#666666;
}

Parte do HTML:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mp Estudios</title>
</head>

<link rel="stylesheet" type="text/css" href="css.css" />

<body>

<center>
  <div id="geral" align="center">
  	<div id="topo">Banner </div>
<div id="direita">  Menu direito</div>
<div id="esquerda"> Menu esquerdo</div>
<div id="rodape"> Rodape</div>
</div>
</center>
</body>
</html>

E isto que queres?

djthyrax · November 2, 2007 at 08:50 PM

pebat,

Eu sou tão estupido ... estupido estupido estupido lolol e está sempre a acontecer-me. São estes erros parvos que me fazem perder horas desnecessárias.

Por isso é que não aparecia, não fiz upload da imagem 😄

🙂

gajo da net · November 22, 2007 at 08:18 PM

Boas

Tenho uma piquena duvida:

Tenho uma div com determinado tamanho e cor de fundo, a questão é que o texto que insiro lá dentro não me aparece em cima encostado à div, mas sim um pouco mais abaixo.

Já tentei por o padding e o margin a zero e nao deu em nada, usei agora line-height:0px; mas só subiu um bocado, não chegou ao topo.

Outra ... no IE aparece como eu quero, só não aparece no topo o Firefox.

Ele deixa-me sempre o espaço de uma linha em cima 😉

NCS_One · November 22, 2007 at 09:33 PM

Ois

Experimenta fazer :

*
{
margin: 0pt 0pt;
padding: 0pt 0pt;
}

O FF da um margin e padding de 8px a todos os objectos e isto faz com k fiquem todos com zero.

gajo da net · November 23, 2007 at 12:09 PM

Tambem não resultou ...

NCS_One · November 23, 2007 at 04:36 PM

Ois

Uma boa maneira para encontrar esses problemas eh :

Sabes k o problema deve ser no margin ou padding entao começas no ultimo selector do css a eliminar os margins e padddings,

nao eh preciso eliminares basta pores como se fosse um comentario entre /* */, vais eliminando as hipoteses ate k encontres o teu problema

e depois tentas encontrar uma soluçao.

Battousai · November 26, 2007 at 09:46 AM

experimenta:

* {

margin:0;

padding:0;

border:0;

}

Se não resultar, então é porque tens um atributo numa tag a não deixar encostar o texto.

gajo da net · December 20, 2007 at 06:41 PM

Limpei o codico todo e não descubri nenhum padding, border ou margin que estivesse na origem deste problema. Continuo sem conseguir colocar o texto no topo e tenho andado a fazer malabarismo para conseguir uma posição satizfatoria em ambos os browsers..

Pelo que tenho lido noutros sitios parece que o firefox custuma dar alguns problemas quando se lida com line heights, alguem confirma esta ideia?

Abraço do gajo

gajo da net · December 20, 2007 at 07:49 PM

Construi um pequeno e simples exemplo para vos mostrar o que não consigo corrigir:

Codico: ----------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

#areadetexto

{

position:absolute;

width: 400px;

height: 400px;

top: 200px;

left: 200px;

font-family:arial;

font-size:100%;

color:white;

background-color:black;

}

</style>

</head>

<body>

<p>testetestetestetestetestetestetestetestetestetesteteste</p>

</div>

</body>

</html>

-------------------------------------------------------------------------------------

Resultado no IE:

http://img512.imageshack.us/img512/430/iezh6.th.gif

Resultado no FF:

http://img146.imageshack.us/img146/5207/fflq8.th.gif

Abraço

gajo da net · December 21, 2007 at 07:05 PM

Entretanto ... Coloquei position relative na div do texto e este já enconstou ... mas continua mal na mesma porque não foi o texto que subiu, foi a caixa que desceu, o que me poe o layout na mesma desfigurado em relação ao resultado no IE

pebat · December 26, 2007 at 12:59 PM

Isso tem a ver com os hack, do css, tenta la fazer no position relative ou seguinte: "_position" mas deixado a mesma o outro.

O que eu custumo fazer é smp dois css 😛 uma para o ff e outro para o ie.

Problema na montagem de Layout CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information