Ir para conteúdo

POWERED BY:

Arquivado

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

Carlos Marchesin

Alinhamento com Float

Por , em Desenvolvimento frontend

Recommended Posts

Carlos Marchesin    0

Carlos Marchesin
Postado

Olá pessoal, estou tendo duvidas com relação ao alinhamento no css, pois faz muito tempo que não programo em css e agora volto enferrujado. E pra poder voltar o conhecimento novamente estou revendo tudo de novo.

 

E no momento estou revendo o alinhamento usando float.

Neste caso quero criar 4 box, cada box deve estar alinhado em cada canto da tela (esquerda-superior, esquerda-inferior, direita-superior e direita-inferior).

 

Consegui fazer um exemplo mais acho que está errado.

Poderiam avaliar e me ajudar com que estiver faltando.

 

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="lefttop">
<div>

<div class="leftbottom">
</div>

<div class="righttop">
</div>

<div class="rightbottom">
</div>	
</body>
</html>

 

body {
margin: 0;
padding: 0;
background-color: #EEE;
}

div.lefttop {
left: 0;
top: 0;
float: left;
width: 50px;
height: 50px;
background-color: #00f;
display: block;
position: fixed;
border: 1px solid #000;
}

div.leftbottom {
top: 550px;
float: left;
width: 50px;
height: 50px;
background-color: #999;
display: block;
position: fixed;
border: 1px solid #000;
}

div.righttop {
left: 950px;
float: right;
width: 50px;
height: 50px;
background-color: #999;
display: block;
position: fixed;
border: 1px solid #000;
}

div.rightbottom {
top: 550px;
left: 950px;
float: right;
width: 50px;
height: 50px;
background-color: #00f;
display: block;
position: fixed;
border: 1px solid #000;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ramael    0

Ramael
Postado

Antes de mais nada, falta fechar com a barra o div “lefttop” no HTML, isso quebra as pernas. rssss

 

Quando você coloca "div.lefttop", você está dizendo que todo div que tem o nome "lefttop" terá o determinado estilo, e se por ventura tentar usar a classe "lefttop" em outra tag (elemento) não vai funcionar.

 

O posicionamento absoluto ou fixo ignora o float (W3Schools), então ou você usa float ou absolute, é um ou outro na div. Você está usando floats e fixes na mesma div, então os floats estão todos sendo ignorados.

 

Olha só uma forma de fazer seu exemplo, mas pra fazer esse mesmo layout existem inúmeras maneiras. ^^:

CSS

body {
font: 12px arial, verdana, helvetica, sans-serif;
background: #eee;
margin: 0;
padding: 0;
font-weight: bold;
}

.lefttop, .leftbottom, .righttop, .rightbottom  {
position: fixed;
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
color: #fff;
background-color: #00f;
}

.leftbottom {
bottom: 0;
background-color: #999;
}

.righttop {
position: relative;
float: right;
background-color: #999;
}

.rightbottom {
bottom: 0;
right: 0;
background-color: #00f;
}

 

...também não esqueça de declarar um doctype no HTML, isso é muito importante pra coisas funcionarem adequadamente.

 

HTML

 <?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt">
 <head>
<title>Site de teste</title>
<link rel="stylesheet" href="teste.css" type="text/css" media="screen" />
 </head>
 <body>
<div class="lefttop">LT</div>
<div class="leftbottom">LB</div>
<div class="righttop">RT</div>
<div class="rightbottom">RB</div>  
 </body>
</html>

 

t+

Ramael

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