Ir para conteúdo

POWERED BY:

Arquivado

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

Rafael Biagione

Div horizontal que cobre todas as extremidades

Por , em Desenvolvimento frontend

Recommended Posts

Rafael Biagione    0

Rafael Biagione
Postado

Olá,

Estou tentando criar uma div horizontal em CSS que cubra as extremidades da direita e esquerda, como essa barra azul do topo que abriga o banner do iMasters:

 

topov.jpg

 

Ela cobre toda a horizontal da tela, e penso que foi criada utilizando uma DIV em CSS, não?

 

Já sei centralizar uma DIV, mas realmente não consigo criar este efeito. E já pesquisei em alguns sites.

 

Obrigado desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

am designer    7

am designer
Postado

Salve Rafael!!

 

Cara, o que você quer é ter uma barra que pegue a largura inteira da janela do navegador? Se sim, você tera que definir uma largura de 100% para esta div ai...o repeat somente vai repetir a img até chegar ao final da largura que você definiu.

 

 

Segue codigo:

 

 

<!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 type="text/css">

div#topo{

background-image: url('topo.jpg');

background-repeat:repeat-x;

width:100%;

height:80px;

}

</style>

 

</head>

 

<body>

<div id="topo"></div>

 

</body>

</html>

 

 

Espero que funcione, boa sorte!

 

té mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunobispo    20

brunobispo
Postado

Os <div> são elementos em bloco e, portanto, ocupam a largura total da página por padrão.

 

Ou seja, não precisa fazer nada. Apenas certifique-se de inserir algum conteúdo ou definir uma altura no CSS.

 

Exemplo: http://jsfiddle.net/brunobispo/Axk3S/

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