[ayuda] Listas con css

  • Autor Autor Renato Guzman
  • Fecha de inicio Fecha de inicio
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Renato Guzman

Renato Guzman

Delta
Programador
Retroalimentación: +44 / =1 / -0
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?
 
Pues los que le debes aumentar son los li
 
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.
 
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:
 
gracias KnxDT! habia intentado lo del margin pero en el li No se me habia ocurrido. Muchas Gracias!
 
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Atrás
Arriba