Ir para conteúdo

POWERED BY:

Arquivado

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

rcdesign

Preciso de orientação de como fazer

Por , em Desenvolvimento frontend

Recommended Posts

rcdesign    1

rcdesign
Postado

Como ainda estou engatinhando no CSS gostaria de orientações de como fazer a estrutura abaixo utilizar 100 % da janela do navegador.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="site">
	<div id="topo"><? include "topo.php" ?></div>
	<div id="barra"></div>
	<div id="conteudo1">
		<div class="banner"></div>
		<div class="menu"><? include "menu.php" ?></div>
	</div>
	<div id="conteudo">
		<div class="contesq">
			<div class="linha01"><? include "linha01.php" ?></div>
			<div class="linha02"><img src="img/bannerexemplo.gif" width="468" height="60"></div>
			<div class="linha03"><? include "linha03.php" ?></div>
		</div>
	    <div class="contdir"><? include "colunistas.php" ?></div>
	</div>
	<div id="rodape"><? include "menu2.php" ?></div>
</div>
</body>
</html>

 

Como podem ver eu tenho vários conteúdos dinâmicos no site. Gostaria que a div contesq que inclui as linhas 01, 02 e 03 ocupassem 100 % do espaço "que sobra" na janela do navegador, já que a div contdir terá um tamanho fixo.

 

Abaixo, parte do meu CSS

 

body 	{	font-size: 12px;	font-family: "Arial";	text-align: center;	background-image:url(img/fundo.jpg);	top left repeat-x: fixed;	margin:0 0 5px 0;	padding:0;		height: auto;	}	a 	{	color: black;	text-decoration: none	}a:hover 	{	color: #003366;	text-decoration: none	}	#site	{width: 780px;height: auto;margin:0 auto; 	 text-align:left; /* "remédio" para o hack do IE */		}	#topo	{	background: url(img/topo.jpg);	text-align: left;	height: 61px;	width: 780px;	}#barra 	{	background-color: #FADF27;	text-align: left;	width: 780px;	height: 10px;	}#conteudo1	{	background-color:;	text-align: justify;	width: 780px;	height: 124px;	}.banner	{	background: url(img/fundobanner.jpg);	text-align: left;	width: 606px;	height: 124px;	float: left;	}.menu	{	text-align: left;	width: 174px;	height: 124px;	float: left;	}#conteudo	{	text-align: justify;	width: 780px;	height:100%;	}.contesq	{	text-align: left;	width: 606px;	position:relative;	float: left	}.linha01	{	font-size: 08px;	text-align: justify;	width: 600px;	_width: 606px;	height: auto;	padding: 10px 10px 10px 10px;	_padding: 10px 0px 10px 10px;	position:relative;	float: left	}.linha02	{	text-align: center;	width: 600px;	_width: 606px;	height: 60px;	padding: 10px 10px 10px 10px;	_padding: 10px 0px 10px 10px;	position:relative;	float: left	}.linha03	{	text-align: center;	width: 600px;	_width: 606px;	height: auto;	padding: 10px 10px 10px 10px;	_padding: 10px 0px 10px 10px;	position:relative;	float: left	}	.contdir	{	text-align: right;	width: 174px;	height:100%;	position:relative;	float: left;	}#rodape 	{	font-size: 11px;	font-family: "Arial";	text-align: center;	background: url(img/rodape.jpg);	height: 60px;	width: 780px;	float: left;	}

Alguém pode me orientar como devo alterar meu CSS ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

olha, tem exemplos d como fazer isso por ae no fórum, faça uma busca ae... vou ver seu código aki, qq coisa posto aki... mas faça uma busca q recentemente postei algo sobre isso, ou parecido... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

ok.. tks bruno... antes de fazer um post eu sempre faço uma busca sobre o assunto... realmente não achei nada que pudesse me ajudar. Acho que minha busca não foi muito eficiente... rs.. vou procurar de novo.Estou também procurando pela net. Até achei um exemplo, mas bastante complicado, que não contempla exatamente o que eu preciso e ainda por cima é invertido, ou seja, a coluna esquerda é fixa e a direta flutuante. Além de complicado meu caso é exatamente o contrário. Estou tentando adapta-lo de qqr forma...vou pesquisar no forum novamente... obrigado de novo

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

ok... estou analisando seu codigo tb... tanto o css qnt o xhtml estão invalidados... ;) e eh meio dificil d ver tb... c naum tem esse html online naum??? fica melhor vendo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

você quer q ocupe a tela toda naum eh isso? primeiramente retirar o width da div #site... pq se você setar um tamanho, ela naum vai ficar 100% na tela... ;) outra coisa, nunca utilize numeros em nomes d classes e identificadores... browsers naum suportam... alguns deles...

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

dah uma olhada aki cara... agora molde ae d acordo como você quer... ;) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Teste</title><style type="text/css">body {text-align: center;background-image:url(img/fundo.jpg) top left repeat-x fixed;margin: 0;padding: 0;}a {color: black;text-decoration: none}a:hover {color: #003366;text-decoration: none}#site {margin: 0 auto;  text-align: left;font: 12px "Arial", Verdana, Tahoma, _sans;}#topo {background: #F5F5F5 url(img/topo.jpg);height: 61px;border-bottom: 10px solid #FADF27;}#conteudo {text-align: justify;}#conteudoEsquerda {background-color: #CCCCCC;}#conteudoDireita {float: right;width: 174px;}.banner {background: url(img/fundobanner.jpg);width: 606px;height: 124px;}#menu {height: 124px;background-color: #CCCC99;}#contdir {text-align: right;background-color: #00CC99;height: 100px;}.linhaUm {font-size: 8px;text-align: justify;padding: 10px 10px 10px 10px;}.linhaDois {text-align: center;height: 60px;padding: 10px 10px 10px 10px;}.linhaTres {text-align: center;padding: 10px 10px 10px 10px;}#rodape {font-size: 11px;text-align: center;background: url(img/rodape.jpg);height: 60px;background-color: #FFCC33;clear: both;}</style></head><body>	<div id="site">		<div id="topo"><? include "topo.php" ?></div>		<div id="conteudo">			<div id="conteudoDireita">				<div id="menu"><? include "menu.php" ?></div>				<div id="contdir"><? include "colunistas.php" ?></div>			</div>			<div id="conteudoEsquerda">				<div class="banner"></div>				<div class="linhaUm"><? include "linha01.php" ?></div>				<div class="linhaDois"><img src="img/bannerexemplo.gif" width="468" height="60"></div>				<div class="linhaTres"><? include "linha03.php" ?></div>			</div>		</div>		<div id="rodape"><? include "menu2.php" ?></div>	</div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

...primeiramente retirar o width da div #site...

isso é lógico pa_bruno... o cód. do primeiro post era o original com o site centralizado na tela, inclusive é aquele que você viu on-line. hehe

...nunca utilize numeros em nomes d classes e identificadores... browsers naum suportam... alguns deles...

Não sabia disso não.. não tinha visto sobre isso nas coisas que eu li até o momento... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif bom.. agora sobre o código que você postou aí..do jeito que está não está funcionando, nem no IE nem no Firefox... tá uma bagunaça só... :D .. mas é claro que agora vou começar a mexer pra ver se consigo ajeitá-lo...obrigado novamente

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

bom, como você tah usando includes e eu naum esconsigo vê-los (o codigo, logico), eu naum consigo fazer o posicionamento direito... soh com backgrounds, etc funcionou aki... ;) mas ae agora vai fazendo o posicionamento em cima desse codigo... esquece o q você tinha feito, o codigo e joga o conteudo em cima desse q t passei... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

pa_bruno o que está acontecendo é que o conteúdo da esquerda está se sobrepondo ao conteúdo da direita. Além disso os paddings não estão "funcionando" para essa mesma div porquê tá tudo grudado... ainda não conseguir arrumar... mas estou tentando..rs

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

coloque um float left no conteudo da esquerda:

foi a primeira coisa que eu fiz.. mas não resolveu...também coloquei um clear: both; nele.melhorou.. mas continua não dando certo.com o conteúdo da esquerda assim:
#contesq {float: left;clear:both;}
(alterei o nome e tirei o background também :P )No IE a div banner está posicionada corretamente, mas as outras divs do contesq estão gigantes e todas lado a lado.No FF a coisa é pior ainda... a div banner está ao lado da div linha01; a div linha 03 está gigante com a div linha02 por cima dela; e todas abaixo do conteúdo da direita...... :( .. continuo na batalha, fazendo outras alterações

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

poste um link com o resultado atual... esse clear both ae naum eh legal naum... pode tira-lo...poste um link pra eu dar uma olhada... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

cara, teu site tah com tabelas, moh confusão no codigo, incríveis 10 tags html... como você tah fazendo o include hein? no arquivo q você tah incluindo você naum está tirando as tags <html>, <head>, <body>, etc naum??? tem q tirar... dentro do arquivo q está sendo incluído, você apenas coloca as tags necessárias.

 

ex.:

index.html:

<html>
<head>
<title>teste</title>
</head>
<body>
teste
<?php include(conteudo.php); ?>
</body>
</html>

conteudo.php:

<div id="conteudo">
texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.
</div>

somente isso... você deve estar colocando seu conteudo.php assim:

<html>
<head>
<title>teste</title>
</head>
<body>
<div id="conteudo">
texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.
</div>
</body>
</html>

se for, vai duplicar as tags... ae ocorre tantos erros ae... ;)

 

conserta ae e depois poste... ;) sempre q postar, olhe o codigo, naum soh o design... ae você pode achar o erro, defeito mais facilmente... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

pôxa pa_bruno não tá tão confuso assim vai....além disso eu sempre olho/trabalho o código...

 

agora, independente dos arquivos includes terem ou nãs as tags html os problemas no layout são os mesmos... eu já tinha testado isso retirando essas tags.

 

algumas páginas de includes tem tabelas sim, porquê não consigo fazer essas páginas com CSS, por causa de suas características, programações, etc. Como disse no começo do post ainda estou engatinhando em CSS.

 

veja lá.. eu tirei novamente as tags html e não mudou absolutamente nada... :(

 

Estive testando outras soluções para resolver o problema desse layout mas tá realmente complicado, para mim, fazer o CSS funcionar como as tabelas funcionam.

 

Minha última tentativa fiz assim com o conteúdo esquerdo:

 

#contesq	{	text-align: left;	width: 77%;	float: left;	}.banner	{	background: url(img/fundobanner.jpg);	text-align: left;	width: 606px;	height: 124px;	float: left;	}.linha01	{	font-size: 08px;	text-align: justify;	width: 100%;	height: auto;	padding: 10px 10px 10px 10px;	_padding: 10px 0px 10px 10px;	float: left;	}.linha02	{	text-align: center;	width: 100%;	height: 60px;	padding: 10px 10px 10px 10px;	_padding: 10px 0px 10px 10px;	float: left;	}.linha03	{	text-align: center;	width: 100%;	height: auto;	padding: 10px 10px 10px 10px;	_padding: 10px 0px 10px 10px;	float: left;	}

Isso até que funciona mais ou menos bem, mas se o navegador do usuário com resolução de 800 x 600 px onde o browser não estiver maximado, detona o layout, a coluna da direita vai lá pra baixo, se ao menos criasse uma barra de rolagem vertical...... http://forum.imasters.com.br/public/style_emoticons/default/sick.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

bom, agora tem 5 tags <html>... metade, mas ainda tem mais do q se deve neh... :D e seguinte, usando coisas com tabelas, divs desnecessários, eh meio cascudo... acho melhor você começando tuuudo d novo... um projeto pararelo... começando desde o início, colocando cada parte, devagar... um d cada vez... tenho certeza q vai ser mais facil, rapido e menos stressante pra conseguir... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

uma dica... qnd criar sites com includes, faça primeiro com o conteúdo inteiro dentro da página, num único arquivo... qnd os posicionamentos, tudo estiver pronto, você divide em includes e depois criar as paginas internas... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

acabei de editar o meu post...heheessas 5 tags html devem ser de outros arquivos de programação.. vou dar uma olhada.(acho que agora foi..)agora começar tudo de novo é mais cascudo ainda... :wacko: ..não sei nem seu rio ou se eu choro. preciso terminar esse site até o final deste mês de qqr jeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

to t falando... começar tudo eh bem mais facil... desse jeito como está fazendo, você resolve um problema, mas aresolução as vezes implica em outros problemas, e por ae vai rolando akela bola d neve... eh o q acontece várias vezes... pelo menos do nada você tendo a ideia dp q quer, eh bem mais rapido e facil... pois você faz a montagem toda... depois separa e coloca o conteudo e dps divide por includes...minha opinião... acho q desse modo como tah fazendo vai acabar batendo mta cabeça... as vezes ateh na mesma tecla... ;)

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