Ir para conteúdo

POWERED BY:

Arquivado

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

Andreatti

Layout Responsivel - Alinhamento Errado

Por , em Desenvolvimento frontend

Recommended Posts

Andreatti    0

Andreatti
Postado

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>            <!---->
<!--HEADER-->
<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>

CSS1:

 

 
* {
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:

http://wallbase.cc/random

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não use absolute. Estruture com floats.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andreatti    0

Andreatti
Postado

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..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diego Fersan    0

Diego Fersan
Postado

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.
HEIGHT AUTO TAMBÉM NÃO, A CLASSE .CLEAR FICARÁ RESPONSÁVEL POR MANTER A ALTURA DO HEADER.
ALIGNMENT-ADJUST EU DESCONHEÇO.
 */
#header{
/*position:absolute;*/
width: 100%;
/*height:auto;*/
/*alignment-adjust:central;*/
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"/> -->
<!-- O IDEAL É QUE VOCÊ NÃO LIMITE A OPÇÃO DE ZOOM DO USUÁRIO, NÃO SE SABE A DIFICULDADE DE LEITURA QUE ELE TEM -->
<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.

 

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