Publicado em 27 de jan.

Background da DIV não aparece em nenhum navegador!

Boa noite, estuo criando uma página index para um site que estou desenvolvendo, está bem no começo e ainda estou apenas criando as DIVs que vou trabalhas, porém criei uma div chamada "barra_op" onde nela ficara um tipo de menu, então estou tentando colocar uma imagem de fundo (background) com uma altura referente a da div e uma largura de 7px, para então ela se repetir. No Dreamweaver ela aparece normalmente, mas quando vou visualizar em algum navegador ela não aparece, e se coloco algum conteúdo, só aparece o conteúdo. Por favor me ajudem.

Obs.: Sei que já existem alguns tópicos relacionados à esse problema, porém nenhum resolveu o meu problema, por isso estou postando um novo tópico com o meu html e o meu css.

HTML

<!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>VotuClick - Tudo o que você precisa, à um clique</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body background="imagens/bg.png">
<div id="topo"></div>
<div id="#conteudo"></div>
<div id="#barra_op"></div>
</body>
</html>

CSS

@charset "utf-8";
#topo {
	height: 200px;
	width: 100%;
}

##conteudo {

	height: 400px;
	width: 100%;
}

##barra_op {

	width: 100%;
	height: 252px;
	float: left;
	background-image: url(../imagens/bg_barra_op.png);
}

Desde já agradeço a ajuda.

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Diéssica· 27 de jan.

Enquanto HTML

id="nomeElemento"

Então CSS

#nomeElemento

Um elemento com id no HTML não deve nomeado da forma que fez, o # só é usado para estilizar (CSS) um elemento com tal id. No seu código, só o elemento topo foi marcado corretamente, logo funcionará. Só arrumar os outros.

Nota: o atributo body background foi obsoleto. Para estilizar, utilize apenas CSS. :bye:

BrunoJavan· 27 de jan.

Funcionou! Só mais uma dúvida, como eu faço para que essa div da barra_op tenha uma largura ajustada ao navegador?

Muito obrigado!

Henrique Barcelos· 27 de jan.

Deveria estar assim, como ela está?

BrunoJavan· 27 de jan.

O lado direito e o esquerdo estão com um espaçamento entre as bordas da janela, o que eu preciso editar nessa div para que ela fique com a largura ajustada à janela? Já tentei colocar margin e padding 0px e a largura 100% mas não deu certo.

Diéssica· 27 de jan.

Aplicou onde? Deve ser no body:

body {

margin:0;
}

Esse, onde a margin do body é zerada, é básico. Mas o melhor a se fazer em um projeto é resetar todas as propriedades pré-definidas, principalmente margin e padding (que não apliquei acima). Leia sobre Reset CSS.

BrunoJavan· 28 de jan.

Muito obrigado! deu certinho!

Tópico Resolvido!

Marcos Xavier· 28 de jan.

Já que você gosta de HTML5 poderia retirar aquele:

E fazer isso na folha de estilos(CSS)

body{background-image("imagens/bg.png");}

BrunoJavan· 28 de jan.

É já fiz isso, vi que fica muito mais organizado, o HTML fica mais "limpo" e todo o style fica no CSS.

Obrigado à todos vocês!