Formatação de Layout

jotaerre10 · Março 10, 2008

to tendano fazer ess layout aqui, mais qndo minimizo a tela ele perde a formatação...

sei que é por causa do float que acontece isso, mais queria saber como faço pra resolver, ou seja,

que o quadro fique do msm tamanho sempre dependendo de qualquer resolução da tela....

segue o link

segue o código

HTML

<body>

	<div id="menuTop"> </div>
	<div id="menuInput"> </div>
	<div id="barraProjetos"> </div>
	<div id="home"> </div>
	<div id="menuBar"> </div>
	<div id="menuBar"> </div>
	<div id="menuBar"> </div>

</body>

CSS

/** CSS **/
body{ margin:0; padding:0; }

/** MENU DO TOPO **/
#menuTop{ background:#FF0000; width:700px; height:100px; float:left; }

/** MENU COM INPUT **/
#menuInput{ background:#0000FF; width:300px; height:100px; float:left; }

/** BARRA DE PROJETOS EM FLASH **/
#barraProjetos{ display:block; background:#006600; width:100%; height:200px; }

/** PÁGINA PRINCIPAL **/
#home{ background:#FF6633; display:block; width:700px; height:300px; float:left; }

/** MENUBAR DA PÁGINA PRINCIPAL **/
#menuBar{ background:#666666; width:300px; height:100px; float:left; border:1px solid #fff; }

brcontainer · Março 10, 2008

primeiro seu layout está estranho

o que relamente você gostaria de fazer faça uma screen para entendermos

segundo não se pode repetir IDs(isso não tem haver com o seu problema mas deve-se corrigir tambem)

<div id="menuBar"> </div>
	<div id="menuBar"> </div>
	<div id="menuBar"> </div>

faça assim:

div.menuBar{ background:#666666; width:300px; height:100px; float:left; border:1px solid #fff; }

<div class="menuBar"> </div>
	<div class="menuBar"> </div>
	<div class="menuBar"> </div>

pelo que eu acho que você quer fazer no teu layout seria mais apropriado usar um DIV PAI ao qual abrange-se todos

outros elemtos.

que teria 1000px de largura pois os DIVs menuTop e MenuInput tem 700px e 300px

no Menuinput ao inves de float:left; o certo seria float:right;

falow

Entrar

Arquivado

Formatação de Layout

Recommended Posts

jotaerre10 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante