posicionar um DIV de tamanho fixo variando de acordo com a tela

[Victor Ferreira 0]

Olá amigos Imasters. Sou nova nessa onda de CSS e tal, e estou me aventurando pela primeira vez. Até aprendi bastatne coisa, mas me falta uma coisa que só o tempo dará: experiência.

 

O caso é o seguinte: Meu site terá 3 áreas bem definidas. sendo que a do meio é dividida em 2. A da direita deverá receber um elemento em PHP, um álbum que não pode variar de tamanho. Logo, essa área do centro à esquerda (a que receberá o álbum) tem que ter um tamanho fixo (eu acho).

 

Ok, estou montando meu site e encontro os seguintes problemas: Não consigo posicionar esta área de maneira que o redimensionamento da minha tela a comporte de forma agradável.

Vou enviar o código HTML e CSS, as partes que itneressam, como estão:

HTML

<div id="wrapper">
	
	<div id="header">
			
		<div id="header_block">				
   	  </div>
		
			<div id="header_navbar">
				<div id="navbar">
			<ul>
				<li><a>Perfil</a></li>
				<li><a>Galeria</a></li>
				<li><a>Contato</a></li>
			</ul>

				</div>
			</div>
   
	</div>
  
	<div id="baseboard">
	  </div>
	   
		<div id="content_left">
		
		</div>	
	
	</div>

CSS

#wrapper {
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background:#000;
}


#header {
	width: 100%;
	height: 169px;
	position:absolute;
	overflow: hidden;
}

#header_block {
	width: 70%;
	position: relative;
	top: 30px;
	background: #666;
	height:114px;
}

#header_navbar{
	width: 100%;
	height: 25px;
	background:#333;
	bottom: 0px;
	position: absolute;	
	}

#baseboard {
	position:absolute;
	top: 100%;
	margin-top: -22px;
	width: 100%;
	height: 22px;
	background:	#333;
	color:#fff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: xx-small;
	font-weight: bold;
}

Ok, isto ai é tudo que tem posicionamento no site até o momento. Tudo que envolve DIVs está ai.

 

Wrapper é o que segura minha página. Está ai caso eu preciso no futuro.

Header é um espaço que limita o conteúdo do topo do site. Ali entram o Navbar e o Block. Navbar comporta o Menu e o Block é somente uma caixa cinza pra modificar a aparencia da página.

Baseboard é meu rodapé. Ele fica certinho lá no fundo.

 

Agora vem o problema. Sempre que eu crio uma Div "Center" pra receber a área esquerda e direita (esquerda álbum e direita texto):

1- Eu tenho dificuldades para posicioná-la. Tenho que por embaixo do rodapé. e quando eu o faço, as vezes o rodapé muda de posição.

2- sempre que eu redimensiono a página, ela fica grandona, estática. ai o rodapé passa por trás dela, fica a maior loucura.

3- Tem como eu exigir largura e alturas mínimas? Tipo: tem que ser no mínimo 500 x 500, mas pode CRESCER o quanto quiser caso seja redimensionado. Ou só se eu fizer 2 divs?

 

A pergunta:

existe algum erro de fundamento neste código? quero dizer, estou usando as técnicas erradas de posicionamento?

alguém tem alguma sugestão de como devo proceder para colocar ali o álbum? Sei que é uma pergunta vaga, mas como vocês fariam? estou cheio de dúvidas neste ponto. não estou saindo do lugar e estou com medo de estar fazendo algo muito errado no posicionamento das DIVs.

[Scaico 0]

Como você mesma disse, é uma pergunta meio vaga...

 

Existe, sim, problemas com suas técnicas de posicionamento e montagem. Mas não desista.

Apesar de saber que quando você disse "nessa onda de CSS" você não quis dizer que CSS é uma modinha, mas vale reafirmar: CSS é a forma correta de se trabalhar. Estruturalmente e semanticamente.

 

Não consigo pegar o seu código e falar "mude isso" que tudo vai ficar ok. Mas posso dar dicas de como refazer para que ele possa funcionar. Vamos lá:

 

1 - Evite usar "Position:absolute" e "relative", a menos que seja estritamente necessário. Pela descrição do seu layout, não é.

2 - Caso você queira colocar duas divs lado a lado, opte por usar "float". Se você colocar "float:left" em uma div, ela irá flutuar à esquerda. Se você colocar o mesmo estilo na div seguinte, elas ficarão lado a lado.

3 - Eu evito trabalhar com tamanhos e margens em %. Por serem em porcentagem, elas mudam dependendo da resolução do usuário e isso pode ser um incomodo, já que você quer trabalhar com algumas medidas fixas. Opte sempre por usar px.

4 - O mesmo vale para font-size. Prefira trabalhar com 12px, 11px, 10px... Fica mais fácil de ter referências no futuro, quando você pensar "hmm, quero a font do rodapé um pouquinho menor que a do corpo".

 

Eu não consegui entender exatamente qual é a cara que você quer dar para o site. Você poderia fazer um desenho basico? quadrados mesmo, mostrando como você gostaria que as divs ficassem separadas?

 

Tirando uma de suas dúvidas: Se você definir apenas a largura OU a altura de uma DIV, ela irá se redimensionar, baseada nesse valor, conforme o conteúdo. Explicando melhor: Se uma div tem 200 de LARGURA e você entupir ela de conteúdo, a altura dela vai aumentando conforme o conteúdo. Sacou?

[Victor Ferreira 0]

consegui entender sim. então provavelmente utilizarei essa técnica de omitir a altura.

 

 

este é o layout do site, como foi desenhado. estou com probelmas na parte branca. não nas bordas arredondadas, que utilizarei imagens. mas com dificuldades envolvendo o tamanho do e a posição dessa DIV branca em relação a todo o resto (exceto a parte de cima, que não tá dando problema não).

 

na parte preta a direita ficará o texto, na esquerda, esse espaço branco ficará o álbum de fotos, o Block é aquele cinzão lá em cima. o navbar é toda barra cinza escuro.o Baseboard é o rodapé. Centro será uma área que eu gostaria que variasse de posição pra se ajustar ao conteúdo todo. ele será dividido em dois, como percebe-se.

[Victor Ferreira 0]

agora mesmo surgiu uma nova dúvida. tomei a decisão de criar um DIV que se espanda 100%, mas que seu início seja em 190px do topo e 50px da base.

 

#center {

position: relative;

width: 100%;

height: 100%;

top: 190px;

bottom: 50px;

background-color: #FFF;

}

 

e não funciona. isso que me fez pensar que algumas coisas lá em cima, talvez no wrapper e talvez nessa idéia de flutuação, estejam erradas.

[Scaico 0]

Olha só, vou colar abaixo uma sugestão de divisão. Não estou, de forma alguma, dizendo que é a forma CORRETA, ok? É apenas uma demonstração.

Mas a principio, é assim que eu faria...

 

 

A div Azul seria a primeira das de cima, comportando o logotipo + fundo;

A div vermelha seria a segunda das de cima, comportando os demais links.

 

Para obter esse resultado, é preciso definir suas larguras, margens e colocar float:left em ambas, para que elas fiquem "a esquerda".

 

A div Verde é seu conteudo principal. Se você não vai ter um conteúdo exato em cada página, não defina altura.

A div Laranja é seu album. Acho que não tem segredos.

 

Novamente, é preciso usar o float:left aqui.

 

Por último, a div Amarela é o seu rodapé.

 

--

 

Lembrando que o uso de uma div "geral", englobando todas as outras, é muito útil...

 

Como eu disse, é só um exemplo. Não estou dizendo nem que você deva fazer EXATAMENTE assim. Foi apenas para exemplificar. Demonstrar uma possível solução.

Esse tipo de coisa a gente só descobre fazendo. :D

[Victor Ferreira 0]

ai está. semrpe que eu vou posicionar esses blocos de cores cinzas, eu preciso usar position: relative ou absolute.

não encontro outro meio de posicioná-los sem que seja assim.