Centralizar lista - HTML

Henrique Barbosa · 18 de janeiro de 2012

Galera, estou com um problema muito chato, já pesquisei muito, e não acho solução, vou tentar explicar por partes, pra ver se vocês entendem:

*Fiz uma lista, e em cada item dela um "sublista", e tudo ficou perfeito, alinhado belezinha.

->(porém eu precisava alinhar ela no centro, pesquisei bastante e encontrei num outro fórum, um subparâmetro q deixava a lista no centro)

*coloquei esse subparâmetro e a lista foi pro centro, só que perdeu todo o seu alinhamento, pois este, alinhou CADA palavra ao centro.

Alguém sabe como eu faço pra alinhar a LISTA INTEIRA no centro?

Lembrando que estou usando linguagem HTML.

DiF · 18 de janeiro de 2012

sem "ver" uma screen do problema e o codigo.. nao dá

Henrique Barbosa · 19 de janeiro de 2012

Meu amigo, ainda está muito "no início" o site, ou seja, os itens da lista não estão prontos, menus, ou melhor, quase nada tá pronto, mas dá pra ter uma ideia do que estou fazendo...

Tem duas fotos do site (uma com a lista centralizada, e outra no canto), e duas dos códigos(centralizada e canto também)

DiF · 19 de janeiro de 2012

em miudos... você quer deixar sua lista nao ordenada, igual a que esta na segunda foto.. mas fazer ela ficar no centro da tela.. é isso?

Henrique Barbosa · 19 de janeiro de 2012

Exatamente isso, não ordenada, alinhada igual na primeira, só q no centro da tela.

Caso isso não seja possível, estava pensando se tem como dar um espaçamento, como se fosse uma margem em toda lista, ao invés de colocar exatamente no centro, o q for mais fácil.

DiF · 19 de janeiro de 2012

experimente definir um width para a dv da lista nao muito grande e defina o atributo margin como zero auto.

exemplo:

#lista{ width: 300px; margin: 0 auto;}

o "margin: 0 auto" geralmente centraliza a div. de repente se usar um padding na div também para centralizar a lista na div em si.

bom eu nao testei.. pois nao tenho sua lista aqui.. e digitar ela so pra testar é muito trabalhoso... rsrs

Henrique Barbosa · 19 de janeiro de 2012

Ignore esse comentário, consegui interpretar o que você quis dizer, é q primeira vez q fui procurar saber o que é html foi Domingo (15-01), por isso fiz confusão

DiF · 19 de janeiro de 2012

bom, o que eu quis dizer é que você deve usar CSS para estilizar sua página. eu nao recomendo usar essas tags de alinhamento diretamente nos elementos.. pois muitas vezes pode causar algum conflito.. e nao atingir o resultado esperado.

como você criou ali uma class="menu" para sua div... minhas conclusoes sao de que você estava ja familiarizado com folhas de estilo em cascata.

onde você tem .menu{ } deve ter um estilo ali..

tente adicionar os atributos no seu css na sua class criada. se nao der na class.. crie uma id="menu" e faça o estilo com #menu{width: 300px; margin: 0 auto; }

inclua também um CSS RESET é muito importante zerar antes da seguinte forma:

*{margin: 0; padding: 0; }.

posta aqui o codigo da sua lista sem ser por imagens... se possivel a parte do CSS também.. assim fica melhor

Henrique Barbosa · 19 de janeiro de 2012

Amigo, como já disse, ainda estou aprendendo HTML, por isso mh dificuldade com css, eu tentei incluir esse codigo em css lá, mas não consegui mesmo usando as tags necessarias.

A págian tá toda em HTML, não tem nada em outra linguagem, porém tem mtos link de redirecionamento, etc, então to mandando só a lista

<ul>

<li>Chevrolet</li>

<ul><li>Astra Hatch</li>

<li>Astra Sedan</li>

<li>Chevete</li>

<li>Monza</li>

<li>Opala</li>

<li>Caravan</li></ul>

<ul><li>Palio</li>

<ul><li>Escort</li>

<li>Escort Perua</li>

<li>Escort Hobby</li>

<li>Escort Zetec</li></ul>

<li>Honda</li>

<ul><li>New Civic</li></ul>

<li>Volkswagen</li>

<li>Santana</li>

<li>Quantum</li>

<li>Saveiro</li></ul></div>

DiF · 19 de janeiro de 2012

aqui funcionou amigo...

fiz assim:

o CSS dentro do <head>


<style type="text/css">

#menu{width: 300px; margin: 0 auto; background: green;}

</style>

e a lista:


<div [B]id[/B]="menu">
<ul>
	<li>Chevrolet</li>
	<ul>
		<li>Astra Hatch</li>
		<li>Astra Sedan</li>
		<li>Chevete</li>
		<li>Monza</li>
		<li>Opala</li>
		<li>Caravan</li>
	</ul>

	<li>Fiat</li>
	<ul>
		<li>Palio</li>
		<li>Uno</li>
	</ul>

	<li>Ford</li>
	<ul>
		<li>Escort</li>
		<li>Escort Perua</li>
		<li>Escort Hobby</li>
		<li>Escort Zetec</li>
	</ul>

	<li>Honda</li>
	<ul>
		<li>New Civic</li>
	</ul>

	<li>Volkswagen</li>
	<ul>
		<li>Gol</li>
		<li>Santana</li>
		<li>Quantum</li>
		<li>Saveiro</li>
	</ul>
</ul>	
</div>

ficou bem no meio.. coloquei ali um fundo verde, só para você ver o tamanho da div .. tudo que eu fiz foi especificar o tamnanho da div... e centralizar com a margin: 0 auto

Henrique Barbosa · 19 de janeiro de 2012

Cara, ficou muito bom, funcionou direitinho mesmo

quando a a pessoa sabe (tipo você kkkkkkkk), arruma jeito pra tudo mesmo

muito obrigado.

Eu não tava conseguindo era inserir o código css dentro do HTML, hr q eu ver que já estou "manjando" html, vou partir pra esse.

Olha o resultado.

DiF · 19 de janeiro de 2012

Parabens amigo, ficou legal sim.

e você fez bem em usar um editor que te força a escrever os codigos como o notepad++.

mas, nao se limite só ao HTML. estude ele e principalmente CSS.. se tiver disposto a gastar um pouco de dinheiro, eu recomendo comprar o livro: Construindo sites com CSS e (X)HTML de Maurício Samy Silva pela editora Novatec, este livro é ótimo pra você estudar o css.

pense tambem em escolher uma linguagem de programaçao.. como por exemplo o PHP. assim você poderá fazer suas paginas dinamicas, usando banco de dados.. usar javascript, tecnicas de ajax para uma melhor interatividade... usar o jQuery que é uma biblioteca javascript muito boa e fácil de aprender.. te permite vários recursos visuais... enfim.. estas sao todas dicas.. para você tomar um caminho.

abraço e bom estudo

Henrique Barbosa · 19 de janeiro de 2012

Realmente, meu caro, eu procurei primeiro entender a lógica de funcionamento, e também aprender como funcionam os códigos, e assim q eu ver q já posso começar a estudar CSS (se der, essa semana ainda), pretendo aprofundar bastante no assunto, vou "mergulhar de cabeça" nisso, pois a partir da semana que vem, vou estar um pouco mais apertado, pois vai terminar minhas férias de um curso técnico que estou fazendo.

Eu não to com muita pressa pra fazer esse site, por isso quero entender bem, pra depois ir pra prática, apesar de ter a ansiosidade de ver isso pronto kkkk

Muito obrigado pelas dicas, pretendo realmente estudar, pois aprendizado, é a unica coisa q não se perde.