Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia, povo.
Venho recorrer a voces mais uma vez.
Estou trabalhando em um projeto para a faculdade e estou tendo problemas com o tao famoso layout responsivel.
Eu dei uma procurada na net e achei bastante coisa bacana.
Bom, estou apenas fazendo testes, e estou tendo problemas com o alinhamento das divs.
Segue meus codigos.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/LargeStyle.css" type="text/css" media="all">
<link rel="stylesheet" href="css/SmallStyle.css" type="text/css" media="screen and (min-width: 140px)">
<link rel="stylesheet" href="css/MediumStyle.css" type="text/css" media="screen and (min-width: 520px)">
<link rel="stylesheet" href="css/LargeStyle.css" media="screen and (min-width: 800px)" >
</head>
<body> <!----><div id="header">
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
<div id="box">teste</div>
</div>
</body>
</html>* {
margin:0;
padding:0;
}
#header{
position:absolute;
width: 100%;
height:auto;
alignment-adjust:central;
background-color:#C96;
}
#box{
position:relative;
border: 1px solid #BBB;
width: 50px;
height:50px;
float:left;
margin:5px;
}css2:
* {
margin:0;
padding:0;
}
#header{
position:absolute;
width: 100%;
height:auto;
alignment-adjust:central;
background-color:#F00;
}
#box{
position:relative;
border: 1px solid #BBB;
width: 50px;
height:50px;
float:inherit;
}css3:
* {
margin:0;
padding:0;
}
#header{
position:absolute;
width: 100%;
height:auto;
alignment-adjust:central;
background-color:#FF9933;
}
#box{
position:relative;
border: 1px solid #BBB;
width: 50px;
height:50px;
float:inherit;
}As divs BOX na pagina, estao ficando na posiçao correta, mas quando eu diminuo a resolução, elas ate descem, porem, como eu pre-defini a resoluçao para troca das folhas de estilo, quando a resoluçao da tela fica em um intervalo, fica um "espaço em branco" entre a utima div da linha e a borda da pagina, como se a div da linha debaixo nao coubesse ali.
Eu estou querendo colocar as divs alinhadas ao centro da pagina.
Como nesse site:
da div #header é pai da div #box, usei o absolute no header , para que os boxs que eu chamar dentro da header, apareçam sempre na frente da header.
O que eu nao estou conseguindo fazer é os boxs ficarem centralizados dentro da div header. Funciona quando eu tiro o comando float:left, porem, cada div box que eu chamar, fica em uma linha.
Nao entendi muito bem a sua resposta. Se puder me dar uma luz..
Andreatti, bom dia.
Antes de mais nada, não consegui fazer o alinhamento ao centro, como no site de referência, mas tenho algumas dicas.
Design Responsivo é o termo correto.
Sempre que tiver a necessidade de estilizar um mesmo elemento diversas vezes em uma página, utilize CLASSES.
No seu caso, você tem que estilizar a div#Box, que são muitas. Seguindo as boas práticas de CSS, ficaria assim:
* {
margin:0;
padding:0;
}
/*REMOVI O POSITION ABSOLUTE POR NÃO SER NECESSÁRIO.background-color:orange;
}/REMOVI O POSITION RELATIVE POR NÃO SER NECESSÁRIO/
.box{
/position:relative;/
border: 1px solid #BBB;
width: 50px;
height:50px;
float:left;
margin:5px;
}/*CLASS CONTAINNER QUE IRÁ CENTRALIZAR O CONTEÚDO.
LEMBRANDO QUE AO TRABALHAR COM PORCENTAGENS É DIFÍCIL TER A RESOLUÇÃO EXATA, ENTÃO OS 65% CORRESPONDEM A APROXIMADAMENTE 960PX DE LARGURA.
*/
.containner{
width:65%; /*Que é +/- 960px*/
margin:0 auto; /*Centraliza a página*/
}/* A CLASSE CLEAR FICA ENCARREGADA DE NÃO PERMITIR QUE NENHUM ELEMENTO "SUBA", IGNORANDO OS ELEMTOS COM FLOAT:LEFT.
É O QUE FAZ O #HEADER "DESCER" JUNTO COM O .BOX AO DIMINUIR A RESOLUÇÃO.
*/
.clear{
clear: both;
}No HTML tem uma questão na VIEWPORT, coloquei no comentário.
E o HTML ficou assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> --><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/largeStyle.css" type="text/css" media="all">
<link rel="stylesheet" href="css/smallStyle.css" type="text/css" media="screen and (min-width: 140px)">
<link rel="stylesheet" href="css/mediumStyle.css" type="text/css" media="screen and (min-width: 520px)">
<link rel="stylesheet" href="css/largeStyle.css" media="screen and (min-width: 800px)" >
</head>
<body>
<div id="header">
<div class="containner"> <!-- CENTRALIZA O CONTEÚDO -->
<div class="box">teste</div> <!-- CLASS .BOX em todos os elementos BOX -->
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
<div class="box">teste</div>
</div>
<div class="clear"></div> <!-- Uma limpeza nos elementos que "sobem" e não respeitam o FLOAT:LEFT dado no BOX -->
</div>
</body>
</html>Espero ter ajudado de alguma forma, ainda que não seja resolvendo o problema de CENTRALIZAR AS DIVS como no layout de exemplo.
não use absolute. Estruture com floats.