Layout Elástico

GabrielFerrari · Abril 8, 2010

O CSS que você postou não tem nenhum erro aparente e está sendo validado...

Acho que eu errei em algumas coisas pq fica bem feio qdo eu vejo no navegador, e não aparece um menu :/

teria como postar um link ou PrintScreenpara poder visualizar o problema?

Meh · Abril 8, 2010

tenho, tenho sim. só um minuto e coloco o code do xhtml tb

Imagem Postada

Aquela parte branca ali é pra se o menu :S

PS: Medidas erradas, coloquei só pra teste.

<!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>homepage</title>
<link rel= "stylesheet" type= "text/css" href="css2.css"/>
</head>
<body>
<div id="tudo">
<div id="imgtopo">
</div>
<div id="menuadms">
</div>
<div id="LeS">
</div>
<div id="Menuus">
</div>
<div id="FeC">
</div>
</div>
</body>
</html>

GabrielFerrari · Abril 9, 2010

Ta ai Imagem Postada

Testei no FF e IE8 .. To sem o IETester nessa máquina então da uma verificada e nos demais navegadores também

O principal problema do seu código era que no HTML o ID Menuus tava com o M maiúsculo e no CSS estava em minúsculo

Para facilitar a edição das medidas do conteudo da esqueda acabei colocando eles dentro de um outro div chamado esquerda

Assim os que ficarem dentro dele terão 100% e ele terá 20% se quiser remover ele não tem problema.

Acho que era só isso mesmo... Evite usar IDs e Classes com letras maiúsculas e minúsculas sempre acaba confundindo. rs

CSS

@charset "utf-8";/* Documento CSS - GS Assessoria *//* Criado e desenvolvido por Melina Girardi */Body { 	margin : auto; 	padding : 0; 	font : Não coloquei ainda pq n tem nada escrito, espero poder usar uma fonte q ngm tem (hospedar e linkar)}#tudo { 	background : #FFF; 	width : 100%; 	height : 100%;} #imgtopo { 	background : #CCC; 	min-width : 800px; 	width : auto !important; 	width : 1000px; 	height : 10px;}#menuadms { 	background : #0C9; 	min-height : 10px; 	height : auto !important; 	height : 50px; 	width : 100%; }#esquerda{	float:left;	width: 20%;	background: red;}#LeS { 	 	background : #6CF; 	min-height : 100px; 	height : auto !important; 	height : 200px; 	width : 100%; 	float : left;}#Menuus { 	background : green; 	min-height : 300px; 	height : auto !important; 	height : 500px; 	width : 100%; 	}#FeC { 	background : #FCC; 	min-height : 600px; 	height : auto !important; 	height : 1280px; 	width : 80%; 	float : right;}/*fim do css, layout etc. */

HTML

<body><div id="tudo">	<div id="imgtopo">	</div>	<div id="menuadms">	</div>	<div id="esquerda">	<div id="LeS">	</div>		<div id="Menuus">			<ul>				<li>LINK</li>				<li>LINK</li>				<li>LINK</li>				<li>LINK</li>				<li>LINK</li>				<li>LINK</li>				<li>LINK</li>				<li>LINK</li>			</ul>		</div>	</div>	<div id="FeC"> </div></div></body>

Meh · Abril 9, 2010

Ah, é mesmo.. bah, que falta de percepção que eu tive.. Obrigado!

:thumbsup:

Hei, só um minuto , deu um problema aqui...

antes disso as colunas não se alinhavam. agora...

a div esquerda rouba o espaço da LeS e do menuus ..

fica metade azul e verde (as divs acima) e metade da div esquerda aparecendo;

dai eu tentei tirar a div, só que agora não alinha, mesmo com o float :/

AlocK · Abril 9, 2010

envolva as alinhadas em uma outra div assim ela não permite a outra entrar do lado.

se eu entendi bem é so fazer isso...

Abraço, Imagem Postada

Meh · Abril 9, 2010

Com div esquerda

http://img521.imageshack.us/img521/4817/comdivesquerda.gif

Sem div esquerda

http://img245.imageshack.us/img245/5369/semdivesquerda.gif

fica mt estranho D:

acho q precisa dum margin no meio disso, MAS com que medida eu vou fazer?

eu tentei colocar 3px; só que fico mais longe ainda ._.

AlocK · Abril 9, 2010

Opa!

Então... é assim... eu acho que o que esta "quebrando" o lado esquerdo é o flaot:left; na div #LeS ,

eu não entendi muito bem a intenção da disposição final do layout. mais se nao for para a LeS ficar alinhada com as outras acredsito que é isso mesmo...

e caso o height: auto; seja somente para ocupar o 100% coloque apenas overflow:hidden; que ele entende que as medidas colocadam são realmente importantes.

vai a dia ai.

Abraço, Imagem Postada

GabrielFerrari · Abril 9, 2010

#Menuus e o #LeS precisam estar com a largura de 100%

O que irá mudar a largura deles vai ser o div #esquerda

Acho que seja isso. Imagem Postada

quando estava testando aconteceu exatamente isso antes de mudar para 100%

Meh · Abril 9, 2010

Continua a mesma coisa.. eu vou remover a div esquerda e tentar de novo.. olhe o código

com a DIV Esquerda.

@charset "utf-8";
/* Documento CSS - GS Assessoria */
/* Criado e desenvolvido por Melina Girardi */
Body {
        margin : 0;
        padding : 0;
        font : Não coloquei ainda pq n tem nada escrito, espero poder usar uma fonte q ngm tem (hospedar e linkar)
}
#tudo {
        background : #FFF;
        width : 100%;
        height : 100%;
} 
#imgtopo {
        background: #fcf;
        min-width : 800px;
        width : auto !important;
        width : 1000px;
        height : 100px;
}
#menuadms {
        background : #0C9;
        min-height : 10px;
        height : auto !important;
        height : 50px;
        width : 100%; 
}
#esquerda{
        float:left;
        width: 20%;
        background: red;
}
#LeS {  
        background : #6CF;
        min-height : 100px;
        height : auto !important;
        height : 200px;
        width : 20%;
}
#Menuus {
        background : green;
        min-height : 300px;
        height : auto !important;
        height : 500px;
        width : 20%;
        }
#FeC {
        background : #FCC;
        min-height : 600px;
        height : auto !important;
        height : 1280px;
        width : 80%;
        float : right;
}
/*fim do css, layout etc. */

a img -> http://img31.imageshack.us/img31/3048/comdivesquerda2.jpg

Sem DIV esquerda :

@charset "utf-8";
/* Documento CSS - GS Assessoria */
/* Criado e desenvolvido por Melina Girardi */
Body {
        margin : 0;
        padding : 0;
        font : Não coloquei ainda pq n tem nada escrito, espero poder usar uma fonte q ngm tem (hospedar e linkar)
}
#tudo {
        background : #FFF;
        width : 100%;
        height : 100%;
} 
#imgtopo {
        background: #fcf;
        min-width : 800px;
        width : auto !important;
        width : 1000px;
        height : 100px;
}
#menuadms {
        background : #0C9;
        min-height : 10px;
        height : auto !important;
        height : 50px;
        width : 100%; 
}
#LeS {  
        background : #6CF;
        min-height : 100px;
        height : auto !important;
        height : 200px;
        width : 20%;
		float : left;
}
#Menuus {
        background : green;
        min-height : 300px;
        height : auto !important;
        height : 500px;
        width : 20%;
        }
#FeC {
        background : #FCC;
        min-height : 600px;
        height : auto !important;
        height : 1280px;
        width : 80%;
        float : right;
}
/*fim do css, layout etc. */

IMG -> http://img245.imageshack.us/img245/5369/semdivesquerda.gif

- Thelon, forma uma imagem totalmente diferente, veja como fica, com 100% de largura :

http://img151.imageshack.us/img151/6671/problema1q.jpg

AlocK · Abril 9, 2010

#esquerda e #FeC devem ter o mesmo float de preferencia. Float:left; nos dois deve resolver se naotenta colocar witdh de 19% no esquerda, se ficarem alinhados alguma coisa esta dando espaçamento a mais do que deve... eu recomendo colocar overflow:hidden nos dois assim voce tem a certeza que não tem nada dentro deles que influa nas suas dimenções

Imagem Postada

GabrielFerrari · Abril 9, 2010

Não entendo o que está acontecendo.. aqui está perfeito com a div #esquerda

reparei que no ultimo post seu a div #Menuus e #Les estão com 20% e não com 100%

Fiz até o upload para dar uma olhada: http://gabrielweb.com.br/teste/ (o css http://gabrielweb.co...teste/css2.css)

copie e cole esse código exatamente como está:

@charset "utf-8";
/* Documento CSS - GS Assessoria */
/* Criado e desenvolvido por Melina Girardi */
Body {
 	margin : 0;
 	padding : 0;
 	/* font : Não coloquei ainda pq n tem nada escrito, espero poder usar uma fonte q ngm tem (hospedar e linkar)*/
}
#tudo {
 	background : #FFF;
 	width : 100%;
 	height : 100%;
} 
#imgtopo {
 	background: #fcf;
 	min-width : 800px;
 	width : auto !important;
 	width : 1000px;
 	height : 100px;
}
#menuadms {
 	background : #0C9;
 	min-height : 10px;
 	height : auto !important;
 	height : 50px;
 	width : 100%; 
}
#esquerda{
 	float:left;
 	width: 20%;
 	background: red;
}
#LeS { 
 	background : #6CF;
 	min-height : 100px;
 	height : auto !important;
 	height : 200px;
 	width : 100%;
}
#Menuus {
 	background : green;
 	min-height : 300px;
 	height : auto !important;
 	height : 500px;
 	width : 100%;
 	}
#FeC {
 	background : #FCC;
 	min-height : 600px;
 	height : auto !important;
 	height : 1280px;
 	width : 80%;
 	float : right;
}
/*fim do css, layout etc. */

Meh · Abril 9, 2010

eu fiz as duas coisas.

deu o espaçamento fico em branco 1% (dos 20%)

mas não subiu o #FeC

continua em baixo :/

vou testar aqui o seu code, thelon.

aqui não deu certo, fico a mesma img de antes, os 100% do LeS e do menuus ocuparam a pg inteira :/

no IE8 e no mozila 3.6 ficaram assim é os q eu uso ..

Sim eu coloquei 20%, pra ver se mudava essa faixa inteira, e mudou, MAS o FeC tava em baixo ainda, ele não alinhou horizontalmente...

GabrielFerrari · Abril 9, 2010

Realmente acho estranho já que aqui para mim está normal...

a menos que eu esteja entendo errado a forma que você quer as divs posicionadas

Veja como elas estão aqui:

é dessa forma mesmo?

Meh · Abril 9, 2010

Realmente acho estranho já que aqui para mim está normal...

a menos que eu esteja entendo errado a forma que você quer as divs posicionadas

Veja como elas estão aqui:

é dessa forma mesmo?

Sim é dessa forma que eu quero elas alinhadas, mas aqui não fica...

aqui fica assim:http:http://img151.imageshack.us/img151/6671/problema1q.jpg//

GabrielFerrari · Abril 9, 2010

Você já tentou limpar os dados pessoais do navegador?

Se quiser upar os arquivos e me enviar eu posso dar uma olhada também porque é muito estranho o que está acontecendo.

Thiago Retondar · Abril 9, 2010

A coluna da esquerda vai ser uma cor só? E vai ter que crescer de acordo com a da direita?

Se quiser isso, dá uma olhada aqui :seta: http://ogordo.com/faux-column-com-css/

:thumbsup:

Evandro Oliveira · Abril 10, 2010

Melina, aqui vai uma base.

Utilze a (já citada) técnica de faux columns para fazer o efeito do plano de fundo do menu e se futuramente for necessário um rodapé, não relute em recorrer ao fórum novamente.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css" media="all">
* {
	padding: 0;
	margin: 0;
	list-style: none;
}

body {
	background: cyan;
}

h1 {
	background: magenta;
	text-align: center;
}

.userTools {
	background: silver;
	text-align: center;
}

.userTools li {
	display: inline;
	padding: 20px;
}

#leftMenu {
	float: left;
	width: 20%;
}

#leftMenu fieldset {
	background: yellow;
	border: 0;
	margin-bottom: 10px;
	padding: 10px;
}

#leftMenu legend {
	display: none;
}

#leftMenu fieldset p {
	position: relative;
}

#leftMenu fieldset p input {
	position: absolute;
	left: 70px;
	width: 150px;
	border: 1px dotted black;
}

#leftMenu .botoes {
	float: left;
	width: 50%;
	margin-top: 3px;
}

#leftMenu .botoes span {
	display: block;
	text-align: right;
	padding-right: 12px;
}

#leftMenu .botoes button {
	width: 50px;
	height: 30px;
	border: 1px solid black;
}

#leftMenu .botoes a {
	display: block;
	padding: 2px;
	font-size: 10px;
}

#content {
	background: purple;
	color: white;
	margin-left: 20%;
	position: relative;
}
</style>
</head>
<body>
<h1>
	<img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" alt="Texto alternativo" title="Slogan da empresa" />
	<span>Slogan da sua empresa.</span>
</h1>
<ul class="userTools">
	<li><a href="./?do=logout" title="Finalizar Sessão">Logout</a></li>
	<li><a href="./?do=change&param=name" title="Finalizar Sessão">Alterar nome</a></li>
	<li><a href="./?do=change&param=pass" title="Finalizar Sessão">Alterar senha</a></li>
</ul>
</div>
<div id="leftMenu">
	<form action="./?do=login" method="post">
		<fieldset>
			<legend>Área do usuário</legend>
			<p><label for="username">Usuário:</label><input type="text" id="username" name="username" /></p>
			<p><label for="username">Senha:</label><input type="password" id="password" name="password" /></p>
			<p class="botoes">
				<a href="./?do=remember" title="Clique para obter nova senha.">Esqueceu a senha?</a>
				<a href="./?do=signup" title="Clique para se afiliar.">Cadastre-se</a>
			</p>
			<p class="botoes"><span><button type="submit">OK</button></span></p>
		</fieldset>
	</form>
	<ul id="menu">
		<li><a href="./" title="Página inicial">Home</a></li>
		<li><a href="./contato.html" title="Entre em contato">Contato</a></li>
		<li><a href="./sobre-nos.html" title="Conheça o grupo">Sobre nós</a></li>
		<li><a href="./trabalhos.html" title="Veja o que já fizemos">Trabalhos</a></li>
	</ul>
</div>
<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in quam metus, vitae dapibus diam. Sed ultricies augue eu velit blandit faucibus. Nunc condimentum posuere est sed malesuada. In hac habitasse platea dictumst. Fusce eget lacus in neque rhoncus placerat vel vitae eros. Nullam at tellus felis, sed aliquet eros. Maecenas at tellus turpis, a luctus metus. Mauris interdum dui eget metus sagittis placerat congue justo scelerisque. Proin cursus mattis tincidunt. Donec pulvinar, odio ac scelerisque bibendum, diam tellus gravida mi, at mollis nulla diam quis sem. Maecenas nec tellus sit amet erat congue sollicitudin id non neque. 

Nunc ac orci sed orci euismod adipiscing quis vulputate ante. Nullam at consectetur turpis. Proin eget velit lectus. Ut purus ipsum, ultricies in consectetur sit amet, gravida et tortor. Vivamus ac suscipit neque. Mauris at velit risus, eu elementum purus. Praesent vitae condimentum diam. Nullam a eros a magna gravida dapibus. Nulla ut sem vel leo tincidunt aliquam. Donec semper, nisl eget fermentum vulputate, elit neque porta enim, in tincidunt ipsum risus nec justo. Pellentesque eu sapien eu tellus vehicula mollis non eget ipsum. Quisque sed tellus in magna placerat hendrerit quis et ipsum. Cras imperdiet fringilla odio a molestie. 

Duis nisl nisl, dictum quis venenatis nec, egestas a nunc. Morbi placerat, erat ut condimentum euismod, erat nisi convallis sapien, eget vehicula enim augue viverra erat. Etiam sit amet porttitor dui. Sed sed magna nec neque vulputate laoreet. Proin ut metus turpis. Vestibulum lobortis lectus at tellus pellentesque ut tempus dui placerat. In libero dui, adipiscing nec ultricies vitae, lobortis a enim. Nulla facilisis scelerisque turpis a dignissim. Praesent et augue eu nisl semper pellentesque. Sed consequat, nulla egestas volutpat lacinia, justo ante consectetur felis, eu pretium nulla nunc et arcu. Nam at metus nisl. Aliquam sollicitudin, tortor viverra suscipit sodales, mi mauris ullamcorper libero, in feugiat neque orci ac velit. Suspendisse semper accumsan lobortis. 

Donec pulvinar lectus ac risus elementum eu ultrices diam ullamcorper. Nunc ac ante neque. Nam purus erat, fringilla in imperdiet eget, facilisis mattis sem. Curabitur at libero et eros pellentesque lacinia. Duis ultrices nibh non felis vehicula non pretium nisi vehicula. Praesent condimentum bibendum sapien, sit amet molestie nulla sagittis vitae. Cras quis erat at nisl accumsan imperdiet eu sit amet lorem. Donec mi arcu, auctor sed suscipit vel, viverra mattis leo. Phasellus lobortis egestas nunc, ac facilisis leo mattis et. Fusce egestas, augue at placerat dapibus, risus lectus congue dolor, a tincidunt turpis orci sit amet elit. Donec sodales, turpis at hendrerit sagittis, dolor lorem consequat mi, sit amet facilisis dui est nec turpis. 

Nulla condimentum arcu at odio consequat vehicula. Cras congue molestie risus vel pretium. Fusce fermentum volutpat arcu, et tempus dui dapibus non. Quisque rhoncus eros ullamcorper est mattis eu pulvinar ipsum tristique. Quisque nulla quam, cursus nec iaculis id, mollis et eros. Ut nunc augue, congue et porttitor eu, lacinia sed est. Vestibulum ullamcorper posuere neque ac lacinia. Pellentesque molestie porttitor sem id luctus. Mauris non massa ligula. Phasellus aliquet vulputate neque eu gravida. Proin posuere massa vel lacus semper sit amet pulvinar nisi malesuada. Aliquam pharetra dapibus urna, sit amet molestie nulla accumsan nec. Donec feugiat, lectus quis volutpat accumsan, felis risus rutrum mauris, vel scelerisque risus leo sed eros. Donec dictum arcu sed erat dapibus porttitor. Aenean eget rhoncus risus. Morbi tempus aliquam nunc, nec blandit augue porttitor nec. Duis venenatis elementum sagittis. Mauris pretium egestas purus, nec pharetra dui facilisis porta. Nullam eget egestas risus.</p>
</div>
</body>
</html>

O resultado é rigorosamente igual em:

Opera 10.50

Chrome Dev 5

Safari 4

Firefox 3.6

IE 8, 7, 6

angelorubin · Abril 10, 2010

Bom dia,

Olha é apenas uma sugestão !

Acho você deveria tentar montar a estrutura de um forma mais intuitiva para que posteriormente você visualize mais facilmente onde esta cada parte.

Por exemplo assim:

XHTML

<div id="box_geral">

  	<div id="box_topo">

  	</div>

  	<div id="box_tools">

  	</div>

  	<div id="box_esquerda">

		<div id="box_login">

  		</div>
        
                <div id="box_menu">

  		</div>

  	</div>

  	<div id="box_conteudo">

  	</div>

  	<div id="box_rodape">

  	</div>

	</div>

<div>

CSS

#box_geral {
	width:100%;
	height:auto;
	overflow:hidden;
	}

#box_topo {
	width:100%;
	height:200px;
	background-color:#F0F;
	float:left;
	}
	
#box_tools {
	width:100%;
	height:30px;
	background-color:#090;
	margin:1px 0 1px 0;
	float:left;
	}
	
#box_login {
	width:99%;
	height:150px;
	background-color:#00F;
	margin:1px;
	}
	
#box_menu {
	width:99%;
	height:150px;
	background-color:#060;
	float:left;	
	}
	
#box_esquerda {
	width:20%;
	height:auto;
	float:left;
	}
		
#box_conteudo {
	width:79.8%;
	height:400px;
	background-color:#FC0;
	float:left;
	margin:0 1px 1px 0;
	}
	
#box_rodape {
	width:100%;
	height:50px;
	background-color:#000;
	float:left;
	}

Espero que ajude.

Paulo de Tarso F. M. · Abril 11, 2010

Mas meu caro angelorubin, não é recomendável que se utilize nomes de elementos de acordo com sua posição na página. Veja esse trecho retirado do blog do Maujor:

Nomeie IDs baseado no valor semântico. Evite usar nomes baseados na apresentação. Nomear algo como coluna-direita não é uma escolha acertada, pois no futuro uma mudança de layout poderá impor que sua coluna-direita esteja posicionada à esquerda. E isto trará confusões no futuro, então é bom evitar nomes baseados na apresentação.

Fonte: 70 dicas para escrever CSS

Opte sempre pela adoção de nomes com valores semânticos aos elementos aos elementos ao invés de isso ser feito em relação à sua posição na página. Entenda por valor semântico como o que um elemento na página realmente significa. É comum vermos banners em sites na lateral direita da página, mas, ao invés de nomear a div que os contém como div#boxDireita, opte por definir como div#banners, por exemplo. Ou seja, se amanhã ou depois a posição desses banners mudar, a div#boxDireita não estará mais posicionada à direita, e assim o seu nome, ID, não terá mais sentido, ao contrário da div#banners, que continuará sendo uma área de banners independente de sua posição...

:joia:

Meh · Abril 12, 2010

Sim, eu limpei os dados do navegador, e mesmo assim continuou o problema...

Não seria necessário usar faux Columns, porque como disse anteriormente, ele vai ser elástico. Vai ocupar a página inteira, mas não vai ter a barra de rolagem...

Se for necessário, é claro que usarei, mas a primeira expectativa que tenho é de que ele não precise ter.

Obrigada pessoal.. :thumbsup:

- Olha, aqui deu certo a Base que o Evandro me passou.. , apareceu certinho os menus, sem nenhum problema Imagem Postada

Agora me resta seguir em frente, parar um pouco de incomodar - Rs Imagem Postada

Obrigada pessoal.. qualquer coisa, chamo.. De novo. Imagem Postada

Arquivado

Layout Elástico

Recommended Posts

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlocK 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlocK 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlocK 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0