Foros del Web » Creando para Internet » CSS »

Sobre Lista <LI> + CSS, espaciado corto extrano

Estas en el tema de Sobre Lista <LI> + CSS, espaciado corto extrano en el foro de CSS en Foros del Web. que tal, estoy haciendo una porcion de codigo, es un menu <UL> <LI>..... se ve asi: el rectangulo rojo es el <UL> cada rectangulo azul ...
  #1 (permalink)  
Antiguo 04/11/2007, 19:11
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Sobre Lista <LI> + CSS, espaciado corto extrano

que tal, estoy haciendo una porcion de codigo, es un menu <UL> <LI>.....
se ve asi:



el rectangulo rojo es el <UL>
cada rectangulo azul es el <A> dentro del <LI>

esto que hise, (segun yo) fue casi un hack...por que no podia especificar ancho y alto del <a> por ser inline....asi que me ayude del padding..

la informacion es un ejemplo, el caso es que, ocurre un espaciado entre rectangulo y rectangulo que no he podido identificar...

codigo:
es un codigo simple, ul-li-a-hover
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> 

<head>
<title>tile</title>

<style type="text/css">

body{
    background:#000;
}
#menu {
    /*display:inline;*/
    /*background: #006699 url(punto.jpg) left repeat-y;*/
    width: auto;
    height: 100%;
    margin:0px;
    padding:0px;
    }
#menu ul{
    margin:0px;
    padding:20px 0px 20px 0px;
    /*height:80px;*/
    border: 1px solid red;

    }
#menu li{
    display:inline;
    /*height:100px;*/    
    font:14px "Lucida Sans";
    /*margin:0px;
    padding:0px;
    
    vertical-align:top;*/
    }
#menu li a{
/*    line-height:100px;*/
/*display:block;
width:100px;
height:50px;*/

    color:#000;
    text-decoration:none;
    margin:0px;
    padding:20px 10px 20px 10px;
    background-color:#315584;
    /*line-height:60px;*/
    }
#menu li a:hover{
    background-color:#fff;
    }
</style>
<script type="text/javascript" src="embeddedcontent.js" defer="defer"></script>


</head>
<body>
<div id="divDios">



<div id="menu">
<ul>
        <li><a href="that.html">Nuestra Compañia</a></li>
        <li><a href="this.html">Nuestro Datacenter</a></li>
        <li><a href="that.html">Planes Hosting</a></li>
        <li><a href="theOther.html">Planes Reseller</a></li>
        <li><a href="theOther.html">Registro de Dominios</a></li>
    </ul>
</div>


</div>
</body>
</html>
cuaquier ayuda, sera bienvenida, gracias.
__________________

  #2 (permalink)  
Antiguo 04/11/2007, 20:44
 
Fecha de Ingreso: septiembre-2007
Mensajes: 60
Antigüedad: 10 años, 2 meses
Puntos: 1
Re: Sobre Lista <LI> + CSS, espaciado corto extrano

pana hay varios errores en tu codigo como por ejemplo el uso de dos div sin necesidad aqui te hice un codigo nuevo sin esos errores que tenias

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> 
<head>
<title>tile</title>
<style type="text/css">
body{
    background:#000;
}
#menu {
    background-color:#000;
    float:left;
    width: 100%;
    margin:0px;
    padding:0px;
	list-style-type:none;
    }
#menu li{
  display:inline;
    }
#menu a{
  float:left;
  width:auto;
  text-decoration:none;
  text-align:center;
  color:#ff0000;
  background-color:#f7f8e8;
  padding:3px 5px;
    }
#menu li a:link, a:visited {
text-decoration:none;
background-color:#0000FF;
}
#menu li a:hover{
    background-color:#FFFFFF;
    }
</style>
</head>
<body>
<div id="menu">
<ul>
        <li><a href="that.html">Nuestra Compañia</a></li>
        <li><a href="this.html">Nuestro Datacenter</a></li>
        <li><a href="that.html">Planes Hosting</a></li>
        <li><a href="theOther.html">Planes Reseller</a></li>
        <li><a href="theOther.html">Registro de Dominios</a>    </li>
</ul>
</div>
</body>
</html>

Última edición por venedan; 05/11/2007 a las 07:28
  #3 (permalink)  
Antiguo 05/11/2007, 01:38
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Re: Sobre Lista <LI> + CSS, espaciado corto extrano

w0w...

Dejame analizar el codigo que enviaste.
Por cierto, podrias ir mencionando tales errores?

por ejemplo, acerca del doble div...creo que ese no es un error, solo que lo que escribi era una version recducida de otro codigo mas largo...

pero en verdad, me interesa conocer mis errores, muchas gracias.
__________________

  #4 (permalink)  
Antiguo 05/11/2007, 16:46
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Re: Sobre Lista <LI> + CSS, espaciado corto extrano

ok, no se exactamente que errores tuve, pero si se que tu codigo es mas corto y simplificado y funciona mejor.

Al parecer le talon de aquiles fue:
FLOAT, que elimina el espacio existente entre anchors, no tengo la menor idea por que...

lo unico que te falto, es <Ul>, para corregir el margin por defecto, ya que se veia mal..(solo se veia bien con float:right;)

y lo arregle con lo siguiente:
#menu ul{
margin:0px 10%;
}
para que quedara seudo-centrado, como yo quiero

alguien prodria decirme por que float lo arregla?
__________________

  #5 (permalink)  
Antiguo 06/11/2007, 16:28
Avatar de Ziongem  
Fecha de Ingreso: noviembre-2007
Ubicación: mvd
Mensajes: 58
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: Sobre Lista <LI> + CSS, espaciado corto extrano

Buenas, como va? El float elimina el espacio porque pega un div contra el otro, o una li contra la otra, si no eliminaste el padding/margin que trae por defecto el li no te iba a ser posible que quedaran juntos. Aparte el tema del float te permite otras libertades con el height y el width que no te permite el display inline.


Saludos, Zg
  #6 (permalink)  
Antiguo 06/11/2007, 18:35
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: Sobre Lista <LI> + CSS, espaciado corto extrano

eso es un tema que tambien me pasaba cuando usaba inline (aún poniendo margin, padding, border, etc todo a 0), hasta que un amigo me mostró la solución
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 08/11/2007, 14:17
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Re: Sobre Lista <LI> + CSS, espaciado corto extrano

Exelente Webosiris, ya quedo.
Es increible ver estas deficiencias del... html?

bueno supongo asignaba propiedades predeterminadas a los espacios del documento html, y por eso se veian tales espacios fantasma.

Gracias y Saludos, al fin la solucion al problema de fondo. :)

PD: la diferencia (o principal desventaja) entre hacerlo via el metodo float o via el metodo inline, es que:
- float NO TIENE ALINEACION CENTRADA, habra que usar margin y/o padding y es algo mas compejo
- inline no se le puede aplicar ancho o alto convencionales por ser de ese display, pero para eso se tiene line-height
__________________

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:22.