[ayuda] Listas con css

Renato Guzman · 23 Feb 2010

Escribi este css:

Insertar CODE, HTML o PHP:

body {
	font: 1.2em "Tahoma",sans-serif;
	background: #fff;
	color: #000;
	margin: 0px;
}

#top {
	background-color: #000;
	color: #fff;
	margin: 0px;
	height: 30px;
	padding-top: 0px;
}

#top a:link, a:visited {
	color: #fff;
	text-decoration: none;
}

#top a:hover {
	color: #fff;
	text-decoration: underline;
}

#navigation {
	width: 960px;
	margin: auto;
}

#navigation li {
	padding-left: 10px;
	display: inline;
}

#login {
	margin-right: 0px;
	margin-top: 0px;
	float: right;
}

y este html

HTML:

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html version="xhtml 1.1"
xml:lang="es"
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd">
     <head>
         <title>Titulo</title>
		 <link rel="stylesheet" href="style.css" type="text/css"> 
     </head>
     <body>
		<div id="top">
			<div id="navigation">
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				<div id="login">
					Otro
				</div>
			</div>
		<div>
     </body>
 </html>

El resultado es: http://i46.tinypic.com/15dp0qr.png
Asi es como quiero que se vea, pero si le aumento las tags <ul> y </ul> en la lista (como debería ser) el resultado es este:

http://i50.tinypic.com/1glp9j.png

Aqui el codigo aumentando el <ul>

HTML:

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html version="xhtml 1.1"
xml:lang="es"
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd">
     <head>
         <title>Titulo</title>
		 <link rel="stylesheet" href="style.css" type="text/css"> 
     </head>
     <body>
		<div id="top">
			<div id="navigation">
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
				<div id="login">
					Otro
				</div>
			</div>
		<div>
     </body>
 </html>

Alguna idea de que puede pasar?

iboa · 23 Feb 2010

Pues los que le debes aumentar son los li

KnxDT · 23 Feb 2010

Es sencillo, por defecto las listas dejan un margen, si no me equivoco es de 16 px. Lo que debes hacer es lo siguiente. Primero que nada #navigation li está mal definido (si nos apegamos estrictamente al estándar) pues lo correcto sería: #navigation ul li. Lo segundo en hacer sería agregar el elemento de estilo de la lista (ul) a fin de asignarle un margin-top: 0.

Al final tu CSS terminaría:

body {
font: 1.2em "Tahoma",sans-serif;
background: #fff;
color: #000;
margin: 0px;
}

#top {
background-color: #000;
color: #fff;
margin: 0px;
height: 30px;
padding-top: 0px;
}

#top a:link, a:visited {
color: #fff;
text-decoration: none;
}

#top a:hover {
color: #fff;
text-decoration: underline;
}

#navigation {
width: 960px;
margin: auto;
}

#navigation ul{
margin-top: 0;
}

#navigation ul li {
padding-left: 10px;
display: inline;
}

#login {
margin-right: 0px;
margin-top: 0px;
float: right;
}

ROJO: Cambio añadido.
AZUL: Cambio modificado.

Linksus · 23 Feb 2010

KnxDT dijo:
Es sencillo, por defecto las listas dejan un margen, si no me equivoco es de 16 px. Lo que debes hacer es lo siguiente. Primero que nada #navigation li está mal definido (si nos apegamos estrictamente al estándar) pues lo correcto sería: #navigation ul li. Lo segundo en hacer sería agregar el elemento de estilo de la lista (ul) a fin de asignarle un margin-top: 0.

Al final tu CSS terminaría:

ROJO: Cambio añadido.
AZUL: Cambio modificado.

Perdon por el offtopic pero estos usuarios dan gusto :wink1:

Renato Guzman · 23 Feb 2010

gracias KnxDT! habia intentado lo del margin pero en el li No se me habia ocurrido. Muchas Gracias!

KnxDT · 23 Feb 2010

Fandox dijo:
Perdon por el offtopic pero estos usuarios dan gusto :wink1:

Gracias 🙂

michi122513 dijo:
gracias KnxDT! habia intentado lo del margin pero en el li No se me habia ocurrido. Muchas Gracias!

No hay problema, a todos nos pasa 😉

Saludos.

[ayuda] Listas con css

Renato Guzman

iboa

KnxDT

Linksus

Renato Guzman

KnxDT

Temas similares