Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 08:24

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

Imagem

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.

Imagem

Agradeço a todos pela participação.

Abraços
0
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 08:33

Desculpe, esqueci de postar o codigo 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; 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; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 08:53

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

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

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 09:35

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
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 10:25

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.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 11:26

Então amigo, ainda não consegui alcançar o que preciso, montei um topo semelhante o que será montado, vejam:

Imagem

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:


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

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 11:31

Não seria a mesma coisa dessa figura abaixo?

Imagem
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 12:03

Você pode me mandar esse css?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 12:05

Segue abaixo. Ai é só mandar o style para o CSS

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

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 12:19

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:

Imagem

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
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 12:30

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>
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 12:51

não deu certo.. :(
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 13:44

Qual navegador está testando? Usei aqui no Firefox, o script com o doctype, e ficou ok. Posta o link até o documento.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 13:55

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 13:57

O link está off.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 14:04

por favor tente agora, liberei a porta no firewall.

vlw
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 14:10

Primeiro, tenta esse http para o doctype: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

Agora esse código aqui

<div style="float: none;"></div>

Ele vai depois do topo, ou seja, no final da div do topo, ai você coloca essa div, depois inicia seu conteúdo normal.

...
</div>
<div id="barra">bpppp</div>

<div style="float: none;"></div>

site....
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 14:17

nada ainda...
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 14:22

To vendo aqui que você alterou, mas, não colocou nada após a div com float none, que seria seu conteúdo.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 14:58

Depois que coloquei conteúdo depois da div topo, fez foi aparecer um espaçamento de uns 20 px acima do topo.

Veja ai.


vlw
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 15:05

Isso provavelmente é algo no seu CSS, que está dando margem.

Adiciona o seguinte no head

<style> * { margin: 0; padding: 0; } </style>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 15:16

Retirou o espaçamento que tinha aparecido acima do topo, mas ainda persiste o problema.


vlw
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 15:19

Qual é esse problema que está falando?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 13
Sexo: Masculino

Montando um topo

05-07-2011 15:25

Se você verificar vai ver que as divs barra e icons esta indo pra trás da div logo. Onde está preto é a div icons, que deveria começar depois que termina a div logo.


vlw
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Montando um topo

05-07-2011 15:47

Eu estava vendo só no Firefox, que parece Ok aqui, o problema parece estar no IE.

Eu testei aqui com o código abaixo, ficou ok, no IE e Firefox. Acho que alguma outra coisa em sua folha de estilo está estragando o layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div> <div style="float:left;width:434px; height:144px;background-color:#000;background-image:url(http://200.223.113.130:8080/newprimefaces/javax.faces.resource/img/logo.png.jsf);">logo</div> <div> <div style="width:auto; height:110px; background-color:#000;"><img src="http://200.223.113.130:8080/newprimefaces/resources/img/problema.png"></div> <div style="width:auto; height:44px; background-color:#fff;">outros</div> </div> </div> <div style="float:none;"></div> outros... </body> </html>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado