Zaloguj | Zarejestruj | FAQ
Anonymous

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

+ Odpowiedz

Posty: 2 Strona 1 z 1


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

przez Fernando NB » So maja 31, 2014 11:24 am

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/xhtml1/DTD/xhtml1-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.
Avatar użytkownika

Fernando NB

  • Posty: 1
  • Dołączył(a): So maja 31, 2014 11:02 am

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

przez nanoverso » Wt cze 03, 2014 1:27 am

Para definir uma imagem de fundo para um elemento é utilizada a propriedade background-image no CSS. Ex: background-image:url('arquivo.png'); iria no CSS dos DIV´s topo-esquerda e topo-direita.
A repetição da imagem é controlada com a propriedade background-repeat, que aceita como parâmetros repeat, repeat-x, repeat-y ou no-repeat.
Avatar użytkownika

nanoverso

  • Posty: 253
  • Dołączył(a): So maja 10, 2014 12:08 am
  • Lokalizacja: Brazil
--
Free VST Plugins Download.


+ Odpowiedz

Strona 1 z 1