Ir para conteúdo

Arquivado

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

Fernando NB

Iniciando com DIV - Cabeçalho esquerda, meio e direita

Por , em Desenvolvimento frontend

Recommended Posts

Fernando NB    0

Fernando NB
Postado

Bom dia pessoal, estou iniciando a desenvolver utilizando DIV e tenho uma dúvida básica. Meu site é centralizado no tamanho 960px. Portanto no meu cabeçalho tenho a parte esquerda, meio (960px), direita. Na parte esquerda e na parte direita quero que a div contenha uma imagem que se repita conforme a dimensão da resolução da tela e monitor.

 

Abaixo segue meu código:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de DIV</title>
<style type="text/css">
body{margin: 0px;}
div#site{width: 100%; height: 500px; background-color: gray;}
div#topo{width: 100%; height: 110px;}
div#topo-esquerda{width: 10%; height: 110px; background-color: red; float: left;}
div#topo-meio{width: 960px; height: 110px; background-color: blue; float: left;}
div#topo-direita{width: 10%; height: 110px; background-color: green; float: right;}
</style>
</head>
<body>
<div id="site">
<div id="topo">
<div id="topo-esquerda">E</div>
<div id="topo-meio">M</div>
<div id="topo-direita">D</div>
</div>
</div>
</body>
</html>
Desde já agradeço apoio.

Fernando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonseifert    10

andersonseifert
Postado

Olá Fernando nao entendi muito bem, mas assim o que deu pra entender que vocer uma varias imagens se repetindo nos lados direito e esquerdo da tela, usa se da seguinte forma :

 

Apartir desse ponto a imagem esta se repedindo de acordo com o tamando da sua DIV height:X;

 

background-image:url('img/java_tech.jpg'); /*Chamando a imagem*/

background-repeat:repeat-y; /* REPETINDO IMAGEM PARA BAIXO*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de DIV</title>
<style type="text/css">
body{margin: 0px;}
div#site{width: 100%; height: 500px; background-color: gray;}
div#topo{width: 100%; height: 110px;}
div#topo-esquerda{width: 10%; height: 110px;  float: left; background-image:url('img/java_tech.jpg');background-repeat:repeat-y; }
div#topo-meio{width:80%; height: 110px; background-color: blue; float: left;}
div#topo-direita{width: 10%; height: 410px;  float: right;background-image:url('img/java_tech.jpg'); background-repeat:repeat-y;}
</style>
</head>
<body>
<div id="site">
<div id="topo">
<div id="topo-esquerda">E</div>
<div id="topo-meio">M</div>
<div id="topo-direita">D</div>
</div>
</div>
</body>
</html>

Qualquer coisa o Dino tem :

http://www.maujor.com/tutorial/backtut.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

Opa! ;)

 

Olha, no caso, o que você quer é deixar a DIV na altura máxima também?

Caso seja isso, bem, nada melhor que o height:100% pra te ajudar nisso.

 

Como o andersoneifert já disse, background-repeat:repeat-y; - fará com que as imagens em background se repitam na vertical.

 

OBS.: Você disse que o site é centralizado em 960px, certo? Isso se refere ao site inteiro, ou só o conteúdo do centro?

Se for o site inteiro, então a DIV topo, ou DIV site devem possuir width:960px, com 100% ele vai estender completamente, e as DIV's laterais não vão se alinhar em largura com a DIV do meio.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

Lucas esqueci de comentar isso mais eu ja coloquei pra ele 10% Div Esquerda, 80% Meio , 10% Div Dir.

 

Entendi!

Bem, é que eu não sabia se ele realmente queria assim, ou somente com 960px na DIV central ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

Sim! Testei aqui, vi como está.

É exatamente como eu tinha testado com o código anterior dele também ;)

 

Fazendo dessa forma, ele não deve encontrar problema não!

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