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:
Carregando comentários...