Ir para conteúdo

POWERED BY:

Arquivado

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

Isaac Sampaio

Montando topo

Por , em Desenvolvimento frontend

Recommended Posts

Isaac Sampaio    1

Isaac Sampaio
Postado

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

 

toponew.jpg

 

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.

 

topoerro.jpg

 

 

Meu código CSS.

 

#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;
}

#icons{
  background-color: #000000;
  height: 109px;
  width: 100%;
  float: left;
}

body{
  margin: 0;
  padding: 0;
}

 

Agradeço a todos pela participação.

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
http://wbruno.com.br/blog/2009/08/16/div-100-redimensionavel-com-coluna-fixa/

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#topo{
   height: 144px;
   width: 100%;
height:144px;
   float: left;
}

#logo{
  background:#656565;
  height: 144px;
  width: 434px;
  float: left;
}

#barra{
background:#232323;
   height: 35px;
   width:100%;
}

#icons{
  background-color: #777;
  height: 109px;
  width: 100%;
}

body{
  margin: 0;
  padding: 0;
}
</style>
</head>

<body>
<div id="topo">
       <div id="logo">logo</div>
       <div id="icons">icons</div>
       <div id="barra">barra</div>
</div>
</body>
</html>

 

Com o código acima consegui o efeito desejado. Acho que tá mais pra uma gambiarra.. enfim, tirei um print pra ver como ficou aqui: anSWE.png

Mas não deixe de conferir o blog do Willian :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isaac Sampaio    1

Isaac Sampaio
Postado

Olá amigo crf_h0m3r, conforme você colocou realmente esta aparenta estar funcionando. Agora tire a cor de fundo da div logo e você vai ver que a div barra e icons esta atrás da div logo. O que eu preciso é que essas divs inicie logo apos a div logo e vá até o final da página independente da resolução.

 

 

vlw

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