Sobre Lista <LI> + CSS, espaciado corto extrano

cpucpu · #1 (**permalink**) 04/11/2007, 19:11

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.

venedan · #2 (**permalink**) 04/11/2007, 20:44

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>

cpucpu · #3 (**permalink**) 05/11/2007, 01:38

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.

cpucpu · #4 (**permalink**) 05/11/2007, 16:46

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?

Ziongem · #5 (**permalink**) 06/11/2007, 16:28

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

webosiris · #6 (**permalink**) 06/11/2007, 18:35

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

cpucpu · #7 (**permalink**) 08/11/2007, 14:17

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