• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

gajo da net

Problema na montagem de Layout CSS

14 mensagens neste tópico

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:

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.  :wallbash:

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

:eek:

Ainda bem que já resolveste esse mistério! :biggrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.  :wallbash:

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

:)
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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  ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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">

<html lang="pt">

<head>

<style type="text/css" media="screen">

#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>

    <div id="areadetexto">

        <p>testetestetestetestetestetestetestetestetestetesteteste</p>

    </div>

</body>

</html>

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

Resultado no IE:

iezh6.th.gif

Resultado no FF:

fflq8.th.gif

Abraço

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 :P uma para o ff e outro para o ie.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora