Ir para conteúdo

POWERED BY:

Arquivado

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

bohemianbear

Problemas com posicionamento/preenchimento

Por , em Desenvolvimento frontend

Recommended Posts

bohemianbear    0

bohemianbear
Postado

Bom, esse é um problema que já me fez desistir várias vezes de construir alguns sites de uma maneira x, e mudar para uma maneira y.

 

 

Tenho o seguinte "website": http://bejuba.besaba.com/

 

E tenho alguns problemas:

1- A div que está marcada como banner, não se move para baixo de maneira nenhuma;

2- As divs "caixa" e "wrapper" deveriam crescer conforme preencho a div "esquerda", mas isso não acontece;

 

E uma coisa que eu gostaria e aproveitar pra perguntar como deveria ser feito, pra que o "header" fique por cima do site sempre que rolar o conteúdo por baixo dele.

 

CSS:

<!DOCTYPE html>
<html>


	<head>
		
		<link href="css/css.css" type="text/css" media="screen" rel="stylesheet" />
		<meta name="description" content="site" />
		<meta charset="utf-8" />
		<title>site</title>
	
	</head>

<body>
	
		<header>
			<div id="menu1"><a href="#">placeholder</a>|<a href="#">placeholder</a>|<a href="#">placeholder</a>|<a href="#">placeholder</a>|<a href="#">placeholder</a></div>
		</header>


	<div id="wrapper">
	
		
		<div id="caixa">
		
			<div id="banner">banner</div>
			
			<div id="menu2">menu</div>
		
			<div id="esquerda">
				<div id="esq1">1</div>
				<div id="esq2">2</div>

				<div id="conteudo">


					<p>Placeholder textPlaceholder textPlaceholder textPlaceholder tex
						tPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder
						 textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textP
						 laceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPla
						 eholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder tex
						 tPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder t
						 extPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder
					 textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlac
					 eholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder textPlaceholder text</p>


				</div>

			</div>
			
			<div id="direita">
				<div id="direita1">1</div>
				<div id="direita2">2</div>
				<div id="direita3">3</div>
			</div>
		


		</div>
		

	</div>
		

</body>



</html>

*  {
	font-size: 18px;
	font-family: Tahoma;
	color: #FFF;
}

a {
	text-decoration: none;
}

body {
	background-color: #000;
}

header {
	background-color: #CCC;
}

#menu1 {
	background-color: #FF00FF;
	width: 400px;
	height: 200px;
	margin: 0 auto;
}

#wrapper {
	background-color: #FFF;
	margin: 0 auto;
	margin-top: 100px;
	height: 100%;

}

#caixa {
	background-color: #707070;
	width: 800px;
	margin: 0 auto;
	z-index: 40;

}

#banner {
	background-color: #505050;
	width: 500px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;

}

#menu2 {
	background-color: #303030;
	width: 800px;
	height: 100px;
	margin-top: 20px;

}

#esquerda {
	background-color: #0000FF;
	width: 500px;
	float: left;
	z-index: 50;
	position: relative;

}

#esq1 {
	background-color: #FF0000;
	width: 250px;
	height: 200px;
	float: left;
	z-index: 51;

}

#esq2 {
	background-color: #FF00FF;
	width: 250px;
	height: 200px;
	float: left;
	z-index: 51;

}

#direita {
	width: 300px;
	height: 150px;
	z-index: 50;
	float: right;
	background-color: #FF0000;

}

#direita1 {
	width: 300px;
	height: 30px;
	z-index: 51;
	float: right;
	background-color: #FF00FF;

}

#direita2 {
	width: 300px;
	height: 30px;
	z-index: 51;
	float: right;
	background-color: #FF00FF;

}

#direita3 {
	width: 300px;
	height: 30px;
	z-index: 51;
	float: right;
	background-color: #FF00FF;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

WictorP    9

WictorP
Postado

Não sei se você editou a página, mas na página a DIV Banner não aparece como HTML.

 

Em questão à div não crescer com preenchimento, é porque tu definiu width nela. Então óbvio que não vai crescer.

 

 

#posts {

	width: 500px;
	height: 800px;
	background-color: #FF0066;

}

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