Fórum para dúvidas sobre CSS, Tableless e Webstandards.
Moderador: web
 por standart Offline » Ter Jul 05, 2011 9:24 am
|
Olá pessoal, estou iniciando meus trabalhos na programação web e ja perdi minhas primeiras horas da noite com um problema de formação de designer web.
Estou precisando dividir um topo em 3 partes, sendo que a parte da logo deverá ter tamanho fixo e as outras 2 partes que seus cumprimentos completem todo restante da pagina de acordo com a resolução do usuário, vejam um exemplo:
Deveria ficar assim
Mas não consigo encaixar a duas divs da direita, detalhe colocando tamanho fixo nelas eu consigo encaixar, mas o proposito é que elas se adaptem ao tamanho da resolução da tela.
Agradeço a todos pela participação.
Abraços
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por standart Offline » Ter Jul 05, 2011 9:33 am
Desculpe, esqueci de postar o codigo css.
- Código: Selecionar todos
#topo{
background-image: url("#{resource['img/topo-back.jpg']}");
background-repeat: repeat-x;
height: 144px;
width: 100%;
float: left;
}
#logo{
background-image: url("#{resource['img/logo.png']}");
background-repeat: no-repeat;
height: 144px;
width: 434px;
float: left;
display: block;
}
#barra{
background-image: url("#{resource['img/barra.png']}");
background-repeat: repeat-x;
height: 144px;
float: right;
}
#icons{
background-color: #000000;
height: 109px;
width: 100%;
float: left;
}
body{
margin: 0;
padding: 0;
}
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por web Offline » Ter Jul 05, 2011 9:53 am
Você não se confundiu ai na altura das divs na direita? Estão com a mesma altura em px, mas, com alturas diferentes.
Não sou especialista em tableless, mas, montei aqui um código, veja se ajuda
- Código: Selecionar todos
<div>
<div style="float:left;width:434px; height:144px;background-color:pink;">logo</div>
<div>
<div style="width:auto; height:100px; background-color:red;">icons</div>
<div style="width:auto; height:44px; background-color:gold;">icons</div>
</div>
</div>
outros...
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por standart Offline » Ter Jul 05, 2011 10:35 am
Olá amigo,você tem razão o height do icons é 109px e da barra é 35px.
Com relação ao exemplo que você postou o resultado se aproximou do que eu preciso, na div até dá pra usar assim, porque é uma div de fundo transparente onde colocarei os icones, porem na div barra como ela vai ter fundo ela esta sobrepondo a div logo do lado esquerdo. Quando coloquei float: left em ambos elas se posicioraram numa sequencia, porém o cumprimento por ser auto, ficou enfileirado.
vlw
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por web Offline » Ter Jul 05, 2011 11:25 am
Mas, ficou ok como precisava? Supondo que barra seria a div do logo, coloquei um background e não sobre-pôs as outras divs.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por standart Offline » Ter Jul 05, 2011 12:26 pm
Então amigo, ainda não consegui alcançar o que preciso, montei um topo semelhante o que será montado, vejam:
Veja onde estão os icones, eu coloquei o fundo preto, para mostrar a div, eu precisava que ela ocupasse todo restante da div topo, para empurrar a outra div barra que esta em branco no lado direito, se isso acontecesse ficaria conforme eu preciso.
O codigo css, agora esta assim:
- Código: Selecionar todos
#topo{
background-image: url("#{resource['img/topo-back.jpg']}");
background-repeat: repeat-x;
height: 144px;
width: 100%;
float: left;
}
#logo{
background-image: url("#{resource['img/logo.png']}");
background-repeat: no-repeat;
height: 144px;
width: 434px;
float: left;
}
#barra{
background-image: url("#{resource['img/barra.png']}");
background-repeat: repeat-x;
height: 35px;
float: right;
width: auto;
margin-left: 0;
}
#icons{
background-color: #000000;
height: 109px;
width: auto;
float: left;
}
#icons ul{
list-style: none;
padding: 0;
float: left;
display: block;
}
#icons ul li{
padding: 0 0 0 30px;
display: inline;
}
body{
margin: 0;
padding: 0;
}
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por web Offline » Ter Jul 05, 2011 12:31 pm
Não seria a mesma coisa dessa figura abaixo?
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por standart Offline » Ter Jul 05, 2011 1:03 pm
Você pode me mandar esse css?
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por web Offline » Ter Jul 05, 2011 1:05 pm
Segue abaixo. Ai é só mandar o style para o CSS
- Código: Selecionar todos
<div>
<div style="float:left;width:434px; height:144px;background-color:pink;background-image:url(apache_pb.gif);">logo</div>
<div>
<div style="width:auto; height:100px; background-color:#000;">icons</div>
<div style="width:auto; height:44px; background-color:#fff;">outros</div>
</div>
</div>
outros...
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por standart Offline » Ter Jul 05, 2011 1:19 pm
Olhando seu código a unica diferença que eu vejo é que o meu esta com float: left pra todos os divs, quando o seu tem apenas no primeiro div. Mas quando eu faço igual ao seu olha o que acontece:
As outras divs ficam por tras da div logo. Quando na verdade eles deveriam iniciar logo ao termino da div logo.
Obrigado pela força
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por web Offline » Ter Jul 05, 2011 1:30 pm
Acho que já sei, você está usando doctype. Coloca o seguinte antes de iniciar o conteúdo que irá ficar abaixo das divs.
<div style="float:none;"></div>
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por standart Offline » Ter Jul 05, 2011 1:51 pm
não deu certo.. 
standart
MEMBRO
Mensagens: 13
Registrado em: Ter Jul 05, 2011 9:15 am
|
por web Offline » Ter Jul 05, 2011 2:44 pm
Qual navegador está testando? Usei aqui no Firefox, o script com o doctype, e ficou ok. Posta o link até o documento.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por standart Offline » Ter Jul 05, 2011 2:55 pm
por web Offline » Ter Jul 05, 2011 2:57 pm
O link está off.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para CSS, Tableless e Webstandards
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 2 visitantes
|
|
|
