[Resolvido] Caracterísiticas de lista isoladas

[juniormatrix 2]

Olá a todos

 

Creio q minha dúvida não seja tão dificil de solucionar. Fiz o seguinte menu em lista:

<ul id="menu">
<li><a href="#">Institucional</a></li>
<li><a href="#">Internet via Rádio</a></li>
<li><a href="#">Produtos de Informática</a></li>
<li><a href="#">Desenvolvimento de Websites</a></li>
<li><a href="#">Cursos de Informática</a></li>
<li><a href="#">Entre em contato</a></li>
</ul>

Em um arquivo "menu.css" tem as características desse menu. Até aí deu certo. Mas o que eu preciso é o seguinte: o primeiro e o último item da lista (Institucional e Entre em contato, respectivamente) possuem uma característica diferente dos demais itens da lista: o padding-top e o padding-bottom são valores diferentes. Veja abaixo o menu.css:

ul#menu {
	margin:0;
	padding:0;
	list-style-type: none;
	background-color: #006699; 
}
ul#menu li {
	border-bottom:1px solid #003366;
	background-image:url(imagens/01bar1.gif);
	background-repeat:repeat-y;
	background-position:left
}
ul#menu li a:link, ul#menu li a:visited {
	display:block;
	text-decoration:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	vertical-align:middle;
}
ul#menu li a:hover {
	padding-left:15px
}

Espero q tenham me entendido. Resumindo: o primeiro item e o último da lista possuem algumas características que são diferentes dos demais itens, só não sei como se faz para separar essas características.

 

Se alguém puder me ajudar, ficaria grato.

 

Junior

[William Bruno 1501]

Use classes.

<ul id="menu">
<li class="primeiroItem"><a href="#">Institucional</a></li>

e no css:

.primeiroItem { padding: ....; }

existem seletores para acessar diretamente, mas o IE6 não reconhece direito.

Então as classes são a melhor solução pra ti.

[juniormatrix 2]

Willian, seguinte.. tentei usar esse método aí e não funcionou. Provavelmente devo ter feito algo errado pelo fato de não dominar o CSS como deveria.

 

Fiz essa "gambiarra" aí em baixo e deu certo. Claro que deve ter uma outra maneira que seria a mais correta a ser usada, pois veja que os códigos se repetem várias vezes, o que poderia ser reduzido, mas em principio o que fiz funcionou.

 

Críticas ao código são bem-vindas, pois desejo aprender a gera-los corretamente.

 

Valews

ul#menu {
	margin:0;
	padding:0;
	list-style-type: none;
	background-color: #006699;
}
ul#menu li#itemMeio {
	border-bottom:1px solid #003366;
	background-image:url(imagens/01bar1.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	/*vertical-align:middle;*/
}
ul#menu li#itemAcima {
	border-bottom:1px solid #003366;
	background-image:url(imagens/01bar1.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left:10px;
	padding-top:0px;
	padding-bottom:5px;
	/*vertical-align:top;*/
}
ul#menu li#itemAbaixo {
	border-bottom:0px;
	background-image:url(imagens/01bar1.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px
	/*vertical-align:top;*/
}
ul#menu li a:hover {
	padding-left:15px
}
ul#menu li a.link {
	display:block;
	text-decoration:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFFFFF;
	font-weight:bold
}

[Thiago Retondar 18]

Você colocou CSS Reset, não é? Se não, coloque. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Isso facilita muito.

 

Nesse código, você pode colocar as definições que se repete no ul#menu li, e o que você quer diferenciado vai colocando junto com suas ids.

 

Abraços.