Olá,
estou tendo problemas ao montar um layout.
Tenho dois floats na esquerda, uma caixa central de conteúdo e dois floats na direita.
O problema é que os floats da direita estão ficando abaixo da caixa central de conteúdo.
Estou enviando o código caso alguém possa me ajudar.
Obrigado.
[codebox]<html>
<head>
<style>
#container {
border: 1px solid black;
width: 900px;
height: 700px;
margin: auto;
}
#banner {
border-bottom: 1px solid red;
height: 120px;
width: 900px;
/*background-image: url(logo.jpg);*/
}
#menu {
border-bottom: 1px solid green;
height: 30px;
width: 900px;
}
#left_float {
border-right: 1px solid green;
border-bottom: 1px solid green;
float: left;
width: 120px;
height: 90px;
margin-left: 20px;
margin-top: 20px;
/*background-image: url(relativa.jpg);*/
background-repeat: no-repeat;
}
#left_menu {
border-right: 1px solid yellow;
border-bottom: 1px solid yellow;
float: left;
width: 120px;
height: 300px;
clear:left;
margin-left: 20px;
margin-top: 20px;
/*background-image: url(menu.jpg);*/
}
#carrinho {
border-left: 1px solid green;
border-bottom: 1px solid green;
float: right;
width: 120px;
height: 170px;
margin-right: 20px;
margin-top: 20px;
/*background-image: url(relativa2.jpg);*/
background-repeat: no-repeat;
clear: right;
margin-top: 0px;
position: relative;
}
#right_float {
border-left: 1px solid yellow;
border-bottom: 1px solid yellow;
float: right;
clear: right;
width: 120px;
height: 220px;
margin-right: 20px;
margin-top: 20px;
/*background-image: url(ads.jpg);*/
}
#rodape {
border-top: 1px solid blue;
clear: both;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
}
#conteudo {
border: 1px solid black;
width: 550px;
height: 410px;
margin: auto;
margin-top: 20px;
/*background-image: url(conteudo.jpg);*/
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="menu">
</div>
<div id="left_float">
</div>
<div id="left_menu">
</div>
<div id="conteudo">
</div>
<div id="carrinho">
</div>
<div id="right_float">
</div>
<div id="rodape">
</div>
</div>
</body>
</html>[/codebox]
Problema Com Layout Css
Started By bambolero, 30/09/2009, 14:49
5 replies to this topic
#2
Kahor
-
- Usuários
-
- 230 posts
12 Horas
- Sexo:Masculino
Posted 30/09/2009, 18:30
coloca float: left no #conteudo
Tipo, nao adianta coloca float: right em 2 elementos, para alinhar voce tem que dar float em todos, assim o #conteudo nao deixava nada ao lado, com isso fico do jeito que voce quer.
#conteudo {
border: 1px solid black;
width: 550px;
height: 410px;
margin: auto;
margin-top: 20px;
float: left;
/*background-image: url(conteudo.jpg);*/
}Tipo, nao adianta coloca float: right em 2 elementos, para alinhar voce tem que dar float em todos, assim o #conteudo nao deixava nada ao lado, com isso fico do jeito que voce quer.
#3
bambolero
-
- Usuários
-
- 7 posts
Novato no fórum
- Sexo:Não informado
Posted 01/10/2009, 10:28
Valeu, Kahor. O que você disse tá certo.
Mas resolvi o problema criando um layout de 3 colunas e colocando os dois floats(top e down) internamento às colunas das duas extremidades.
Ainda sou novo nisso mas parece ser o jeito mais elegante.
Obrigado!
Mas resolvi o problema criando um layout de 3 colunas e colocando os dois floats(top e down) internamento às colunas das duas extremidades.
Ainda sou novo nisso mas parece ser o jeito mais elegante.
Obrigado!
#4
Victor Hugo Odo
-
- Administradores
-
- 779 posts
Doutor
- Sexo:Masculino
- Localidade:São Paulo - SP
- Interesses:Compartilhar conhecimentos!
Posted 01/10/2009, 12:03
Isso dá certo, mas o que o Kahor falou é mais recomendado.
Tome cuidado ao trabalhar com floats diferentes ao mesmo tempo, teste em vários navegadores.
[]'s
Tome cuidado ao trabalhar com floats diferentes ao mesmo tempo, teste em vários navegadores.
[]'s
Fórum WMO - Administrador
#5
bambolero
-
- Usuários
-
- 7 posts
Novato no fórum
- Sexo:Não informado
Posted 01/10/2009, 14:26
Tá certo, nada ta em definitivo ainda.
Outra dúvida: pra posicionar uma lista de produtos no frame central, eu criei uma tabela.
Eu vi um pessoal dizendo que não é pra usar tabelas pra fazer isso, e sim usar CSS.
Alguém pode me dar uma dica de como usar CSS pra esse tipo de tarefa?
Obrigado.
Outra dúvida: pra posicionar uma lista de produtos no frame central, eu criei uma tabela.
Eu vi um pessoal dizendo que não é pra usar tabelas pra fazer isso, e sim usar CSS.
Alguém pode me dar uma dica de como usar CSS pra esse tipo de tarefa?
Obrigado.
#6
Victor Hugo Odo
-
- Administradores
-
- 779 posts
Doutor
- Sexo:Masculino
- Localidade:São Paulo - SP
- Interesses:Compartilhar conhecimentos!
Posted 01/10/2009, 15:00
Fórum WMO - Administrador
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
