Inquiridor
Ajudinha com CSS

Pergunta
-
Bom dia pessoal,estou iniciando um pequeno aplicativo web e pensei em um layout, mas infelizmente não estou conseguindo passar a idéia para o css, então resolvi pedir ajuda aos mais intimos com o css.
A idéia é a seguinte:
Um site para resolução de 1024x768 e que fique centralizado (somente na horizontal) em resoluções maiores.
o site tem 4 áreas:
- logo 980x60 (centralizado e alinhado ao topo)
- menu 980x24 (centralizado e alinhado abaixo do logo)
- fundo da tela (que é tudo que sobrar)
- janela que vai ter tamanho variado e tem que ficar centralizado (horizontal e vertical) dentro do "fundo da tela"
Espero que eu tenha sido claro na explicação.----------------------------------------------- | LOGO | | | ----------------------------------------------- | MENU | ----------------------------------------------- | | | FUNDO DA TELA | | --------------------------------- | | | | | | | | | | | JANELA | | | | | | | | | | | | | | | --------------------------------- | | | | | ----------------------------------------------- - Movido Rafael Fagundes terça-feira, 31 de março de 2009 13:41
quarta-feira, 25 de março de 2009 11:14
Todas as Respostas
-
Bom, vamos lá...
Na div que contem todas essas outras div dentro delas, no caso, uma div_principal do site, vc coloca o seguinte atributo:
.div_principal{
margin: 0 auto;
}
Isso irá centralizar a página. Só que no IE não vai, então tem que usar um hack na body pro IE:
body{
text-align:center; /* hack para o IE */
}
Ai surge um outro problema: todos os texto do seu site ficaram centralizado. Então damos um "remédio" para o hack do IE.
.div_principal{
margin: 0 auto;
text-align:left; /* "remédio" para o hack do IE */
}
Pronto! Página centralizada!- Sugerido como Resposta Xakkal86 sábado, 4 de abril de 2009 20:54
sábado, 4 de abril de 2009 20:54 -
sábado, 25 de julho de 2009 17:03
-
Olá amigo caso seja util marque como respondida.
<html>
<title>Meu site</title>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#img{
background-color:orange;
margin:0;
}
form{
margin:30px 20px;
}
#menu ul{list-style:nome}
#menu ul li{display:inline;}
#menu ul li a{
font:13px verdana, arial tahoma, sans-sirif;
color:#000;
background-color:#d9d9d9;
text-decoration:none;
float:left;
margin-left:1px;
padding:5px 10px;
}
#menu{
background:#002e66;
display:table;
width:100%;
}
#menu ul li a:hover{
background-color:#002e66;
color:white;
}
#janela{
margin:40px 90px;
background-color:orange;
width:800px;
height:600px;
text-align:center;
}
</style>
</head>
<body>
<div id="img">
<img src="crome.jpg" title="minha img"/>
</div>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Agenda</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Download</a></li>
</div>
<div id="janela">
<h1>Minha Janela</h1>
</div>
</div>
</body>
</html>
Legend Of Zelda N64,Gc,wii- Sugerido como Resposta Juliano Sales sábado, 27 de fevereiro de 2010 20:30
sábado, 27 de fevereiro de 2010 20:04 -
Também sugiro o Grid960, um framework CSS que torna as coisas mais fáceis (eu acho).
Coragem não é ausência de medo e sim o controle dele. Cursando Tecnologia em Análise e Desenvolvimento de Sistemas - Unoparquinta-feira, 14 de outubro de 2010 13:55