Ir para conteúdo

POWERED BY:

Arquivado

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

DanielGianni

Posicionamento Centralizado elementos

Por , em Desenvolvimento frontend

Recommended Posts

DanielGianni    0

DanielGianni
Postado

Pessoal estou tentando estudar css, mas a cada dia me deparo com mais problemas do que soluções.

 

vejam:

 

http://www.ribeiraohost.com/daniel/

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>teste</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="box">	<div id="conteudo">		<div id="menu">			<Ul class="menu-a">				<li><a href="#">Item Numero 1</a></li>				<li><a href="#">Item 2</a></li>				<li><a href="#">Item n. 3</a></li>			</ul>			<Ul class="menu-b">				<li><a href="#">Item Numero 4</a></li>				<li><a href="#">Item 5</a></li>				<li><a href="#">Item n. 6</a></li>			</ul>		</div>		<div id="folha"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla cursus ultricies dui. Mauris id mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean convallis. Nunc dictum pellentesque massa. Vivamus sapien nunc, commodo a, faucibus eu, imperdiet in, nibh. Aliquam risus. Morbi sed erat. Maecenas ornare sollicitudin est. Curabitur dictum. Nulla fermentum. Maecenas ut ipsum id lectus laoreet semper. Etiam purus turpis, nonummy nec, adipiscing quis, facilisis a, sem.</p><p>Pellentesque leo augue, tincidunt sed, posuere a, dictum nec, nulla. Pellentesque vel turpis. In tincidunt dui id lacus. Donec velit. Nulla sit amet erat. Sed egestas eros at mi. Proin mi nunc, commodo nec, aliquam eget, tristique ut, pede. Nam vitae ante blandit libero volutpat pulvinar. In gravida pulvinar ipsum. Mauris arcu arcu, hendrerit nec, tincidunt et, euismod non, quam. Fusce luctus elit. Suspendisse sem. Praesent quam. Donec sem. Integer in nunc. Etiam arcu pede, vulputate et, sodales vitae, sagittis eu, pede. Vivamus gravida, diam vitae gravida vehicula, lacus diam laoreet massa, non luctus massa ante ut nisi.</p><p>Integer eleifend tellus at est. Ut feugiat. Curabitur consectetuer. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis cursus fermentum orci. Quisque suscipit magna nec velit. Pellentesque posuere enim et dui. Vivamus egestas vestibulum pede. Proin faucibus eros eget pede. Maecenas commodo lacinia nulla. Etiam a dolor sodales velit nonummy porttitor. Suspendisse et erat. Aliquam orci. Quisque purus eros, interdum in, viverra nec, varius at, nulla. In hac habitasse platea dictumst.</p>		</div>	</div></div></body></html>

e o css está assim:

 

body {	margin			:0px;	padding			:0px;	text-align		:center; /* hack para o IE */}#box {	width			: 640px;	margin			: 0 auto;	text-align		: left; /* "remédio" para o hack do IE */}#conteudo {	background-image	:url("fundo.gif");	background-repeat	:no-repeat;	  height				:500px;}#menu {	font-family	: verdana;	font-weight	: bold;	font-size	  : 10px;	margin-left	: 280px;	margin-top 	: 20px;}.menu-a {	margin-top	: 10px;	margin-left	: 20px;	float		: left;}.menu-b {	margin-top	: 10px;	margin-right: 20px;	float		: right;}#folha {	padding		: 20px;	margin-top	: 90px;	margin-left	: 20px;	margin-right: 20px;	clear		: both;}#folha p {	font-family	: verdana;	font-weight	: bold;	font-size	  : 12px;}

 

A questão é com a página centralizada, não consigo posicionar corretamente os 2 menus de lista e depois o texto no box criado pela imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

cara... um tem float: left e outro tem float right... naum vai funcionar corretamente... soh o float left jah resolveria... nos dois mesmo... e posicionamento eh soh ir mexendo nas margens, etc...

 

fora q você tah usando uma imagem de fundo pra tudo... naum recomendo isso, pois você limita o conteúdo... seria bom colocar um fundo para cada parte... fica mto mais fácil e acessível de se posicionar as coisas... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

DanielGianni    0

DanielGianni
Postado

pa_bruno,Muito Obrigado pelas dicas, vou tentar arrumar.Quanto ao conteúdo, é bem pouco mesmo, por isso optei por um fundo como delimitador do layout.

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