Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

nknk

Meu layout está certo ?

Por , em Desenvolvimento frontend

Recommended Posts

nknk    3

nknk
Postado

Eu dei uma lida nos tutoriais e resolvi fazer um layout para o meu site(com base nos exemplos, ctrl+c + ctrl+v), gostaria de saber se está correto.

 

Depois criarei um arquivo css

 

 

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

Transitional//EN">

<html>

<head>

<title>Centrar uma página com CSS</title>

<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">

<head>

<style type="text/css">

 

body {

margin:0;

padding:0;

background:#ffffff;

text-align:center; /* hack para o IE */

}

 

#tudo {

width: 760px;

margin:0 auto;

padding: 10px;

text-align:left; /* "remédio" para o hack do IE */

}

 

#conteudo {

padding: 5px;

background-color: #eeeeee;

 

}

 

#topo{

width:auto;

height:60px;

background-color:#333;

border-top:1px solid #666;

border-bottom:2px dotted #666;

color:#0f0;

text-align:center;

}

#conteudoEsq {

position:absolute;

width:190px;

top:150px;

left:270px;

color:#99f;

padding-bottom:20px;

border-bottom:3px double #666;

}

#conteudoDir {

position:absolute;

width:140px;

top:150px;

right:270px;

color:#99f;

padding-bottom:20px;

border-bottom:3px double #666;

}

#colEsq {

background:#444;

}

#sepEsqcolCentral {

margin-left:200px;

padding-left:2px;

background:#666;

}

#colDir {

background:#444;

margin:0px;

}

#sepcolCentralDir {

margin-right:150px;

padding-right:2px;

background:#666;

}

#colCentral {

background:#22232F;

color:#991;

padding:2px 10px;

text-align:justify;

border-bottom:1px solid #666;

}

 

</style>

</head>

<body>

<div id="tudo">

<div id="conteudo">

<h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>

<div id="topo">

<h1>TOPO</h1>

</div>

<div id="conteudoEsq">

<h3>COLUNA ESQUERDA</h3>

<p>Lorem .... </p>

<p>gfdg</p>

<p>df</p>

<p>sdfsd</p>

<p> </p>

<p>gd</p>

<p>fg</p>

<p> </p>

</div>

<div id="colEsq">

<div id="sepEsqcolCentral">

<div id="colDir">

<div id="conteudoDir">

<h3>COLUNA DIREITA</h3>

<p>gdfgdf</p>

<p>fd</p>

<p>fsd</p>

<p>f</p>

<p>sdf</p>

<p> </p>

<p>gd</p>

<p>fgLorem ipsum ... </p>

</div>

<div id="sepcolCentralDir">

<div id="colCentral">

<h1>COLUNA CENTRAL</h1>

<h3>Abaixo a folha de estilo

deste layout:</h3>

..............

<h3>E abaixo o código HTML</h3>

<p>.......

</p>

<p>g</p>

<p>g</p>

<p>g</p>

<p>g </p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo nknk, seu código está certo e sim é de um tutorial, agora não percebo sua duvida?!?!

Se você for a ver na parte do IE6 as medidas fogem do normal pois algo não está batendo certo.. Se tivesse um tempinho ajudaria-te nesse aspecto, mas não posso neste momento porque vou de cama :P.

 

Boa sorte com isso.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

nknk    3

nknk
Postado

Valeu pela resposta,eu queria saber se o site vai ficar com o layout identico em qq navegadorSeria uma div maior com 800 de largura englobando 3 colunas fixas.Seria como esse fórum que tem duas colunas maiores uma cinza e outra branca, então não entendi direito como coloca uma dentro da outra, mas utilizando o ctrl+c ctrl+v ficou com essa aparencia.__|||

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

eu queria saber se o site vai ficar com o layout identico em qq navegador

Para saber isso, você tem que testar em outros browsers, oras pois... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Aí, se por acaso tiver alguma coisa fora do lugar, você pergunta, cita os erros, passa links e códigos e etc...

mas utilizando o ctrl+c ctrl+v ficou com essa aparencia.

Que aparência? Na hora que acessei seu tópico, não dava para eu copiar e colar, pq tava de passagem rapidinha... Se tivesse um link seria mais fácil... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Ok meu caro? Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito