Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal,
Estou com um problema na meu layout que não consigo resolver de jeito nenhum. Depois que eu criei a div #wrapper pra centralizar o site todo, apareceram umas margens superiores e inferiores que não consigo retirar. Também gostaria de saber como manter width 100% no layout para que o site não fique com esse aspecto quadrado e o layout flua melhor.
Avaliações sobre meu código são bem vindas também. :)
XHTML>>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="murilodesigner.css" />
<title> Layout de teste 01</title>
</head>
<body>
<div id="wrapper"><!--inicio header-->
<div id="header">
<img class="logotipo" src="img/logo.gif" alt="LOGO" width="300" height="120"/>
<div class="habilidades">
<p>descrição das habilidades</p>
</div>
</div>
<div class="bar-menu">
<ul class="nav-menu">
<li><a href="index-teste.html">home</a></li>
<li><a href="portfolio.html">about me</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contato.html">contact</a></li>
</ul>
</div><!--fim header-->
<div id="content">
<h1 class="bemvindo">Seja bem vindo!</h1>
<p class="descript-home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta porta orci, sit amet accumsan nibh vestibulum et. In non elit vitae velit tempus semper id non felis. Fusce auctor lacinia erat a tincidunt. In turpis dolor, cursus vitae dapibus ut, elementum vitae dui. Vivamus congue sollicitudin nibh, in consequat tellus eleifend ut. Pellentesque sit amet nulla non nunc semper bibendum ac ac dolor. Donec id odio commodo nulla eleifend sodales. Sed non metus mi. Duis et tellus a felis porttitor fermentum et in sem. Proin nec orci ac dui vestibulum blandit.Proin ante erat, malesuada eget consectetur sed, vestibulum eget leo. Quisque sed nisl elit, ut viverra ligula. Fusce eu porta leo. Sed mauris nisi, ultricies sit amet rutrum id, tempor eu magna. Vestibulum tempor mi sed lacus lacinia facilisis. Proin eget nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo metus, lacinia sit amet luctus at, commodo ac metus. Etiam quam lorem, euismod at mollis eget, eleifend sit amet elit. Nunc mollis mauris vitae nisl adipiscing porttitor. In eleifend metus vitae lorem placerat sagittis. In placerat tempus elit, vitae consectetur dolor sollicitudin at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras condimentum, lorem eget dapibus porttitor, urna velit mollis enim, ac tincidunt lorem est vitae dui. Praesent sit amet dolor neque, et rhoncus lorem.</p>
</div>
<div id="footer">
<p class="copyright">Site desenvolvido por Murilo Santos Bispo © 2013 - Todos os diretos reservados.</p>
</div>
</div>
</body>
</html>======================
CSS>>
*{overflow-x: hidden; padding:0; border:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
}
#wrapper{
position:relative;
margin:0 auto;
width:960px;
height:auto;
}/ inicio do header /
#header{
width:960px;
height:150px;
background:#507181;
float:left;
}
.logotipo{
padding-top:15px;
float:left;
margin-left:50px;
}
.habilidades{
font-size:10pt;
padding-top:108px;
margin-left:690px;
color:#E8FFF9;
}/ inicio da barra de menu /
.nav-menu{
list-style-type:none;
margin-left:20px;
margin-top:18px;
padding:0;
width:960px;
float:left;
}.nav-menu li{
margin-left:30px;
font-weight:bold;
display:inline;
padding:0px;
}.nav-menu li a{
color:#E8FFF9;
text-decoration:none;
}.nav-menu li a:hover{
color:#8BFFB5;
text-decoration:none;
}
.bar-menu{
width:960px;
height:60px;
background:#163A56;
float:left;
margin-top:0px;
}/ inicio conteudo /
#content{
width:960px;
height:600px;
background:#E8FFF9;
float:left;
}
.descript-home{
text-align:left;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
margin-left:50px;
margin-top:80px;
margin-right:50px;
}
.bemvindo{
text-align:left;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
margin-left:50px;
margin-top:80px;
margin-right:50px;
}/ inicio rodape /
#footer{
width:960px;
height:80px;
background:#507181;
float:left;
}
.copyright{
color:#F3F3F3;
padding-top:20px;
margin-left: 50px;
font-size:12px;
}luqfreitas realmente tentei fazer desta forma, mas não deu certo aqui comigo, acredito que pode ser pq se eu limitei o tamanho do site em 960px, pode dar alguma restrição com o uso da % no tamanho dessa nova div. Fiquei pensando aqui e pensei se não é errado misturar pixel e porcentagem, fiquei com a impressão do código ficar estranho ou errado.
O problema das margens ainda não consegui resolver também...continuo tentando.
cara, seguinte:
html, body{
margin:0;
padding:0;
height:100%;
}
agora falando sobre o código, te sugiro a colocar a tua div principal em porcentagem, ao invés de por width:960px põe uns 80% fica melhor de fazer um lance responsivo depois saca? e no texto... eu colocaria tudo dentro de um <span></span> e ao invés de fazer vários <br /> e colocaria cada bloco em um <p></p> separado, ou nem precisa de span da pra meter os paragrafos direto a menos que tu não queira deixa-los solto.Pessoal consegui resolver da seguinte forma:
#content{
width:960px;
height:640px;
background:#F6F6F6;
margin:0 auto;
}
#content-bg{
width:100%;
max-height:640px;
background:#F6F6F6;
}Resolvido, agora é continuar estudando ;)
Obrigado pela ajuda! abs
Sobre a margem estava aparecendo por causa da forma que as divs estavam organizadas no html.
Fala murilo, blz?
Então cara.. a barra de rolagem no topo foi proposital?? (só uma dúvida rs)
vou fazer num estilo e vc testa
eu pensei em uma coisa assim:
>
não sei oque rolou mas postou duas vezes sozinho e eu nem tinha terminado, enfim haha
html>>
css>>
#bgheader { height: A MESMA DA DIV HEADER; width:100%; }
e das bordas inferiores e superiores não consegui.. olhei o codigo inteiro e não achei nada