Padding fantasma (imagen ilustrativa en el post)

Sirius381 · #1 (**permalink**) 18/02/2012, 22:32

Buenas noches foro!

Tengo un problema que me esta volviendo loco, he eliminado el codigo HTML y CSS dos veces para empezar de cero y no hay forma de dar con el problema, la cosa esta si, tengo en a parte superior de mi web un cintillo superior que trae unos enlaces en una lista <ul>, es decir son elementos <li> dentro de estos elementos van ya propiamente los enlaces <a> hasta ahi todo bien, el problema viene cuando voy a intentar centrar existe un padding superior que va de la parte superior del cintillo a donde empieza el <li> entonces si pongo un padding digamos del 3% este parte de ese punto, es decir no parte desde el comienzo del cintillo, adjunto una imagen para describir mejor mi problema (siento que me enredo y no explico nada)

Les paso el codigo CSS a ver si ustedes ven algo que estoy pasando por alto, desde ya muchisimas gracias!!

Código:

body
{
    margin:1%;
    height: 100%;
    background-color: #0f1c25;
    /*border: transparent 1px;*/
}

#imageLeft
{
    float:left;
}

#imageRight
{
    float:left;
}

#upperBelt
{
    font-family: "New Century Schoolbook", serif;
    width:98%;
    height:63px;
    float:left;
    background-color:#547b7f; 
    display:inline;
    outline: 1px solid #FFF;
}

#upperBelt li
{
    height: 32px;
    width: 126px;
    font-family: Arial;
    list-style:none;
    float:right;
    color:#FFF;
    text-decoration: none;
    margin-left: 1%;
    margin-right: 1%;
    border: solid red 1px;
}

#upperBelt li a
{
    font-family: Arial;
    float:right;
    color:#FFF;
    text-decoration: none;
    list-style: none;   
    border: solid gold 1px;
}

cristian_cena · #2 (**permalink**) 19/02/2012, 04:39

hola sirius.
Añade overfow:hidden a las cajas que aniden cajas flotadas. Si no tienes contenedor para éstas crealo. Esto se conoce como "limpiar los floats", chequealo en google.
Por otra parte. Añade un reset. aunque sea algo básico como *{margin:0; padding:0;}

A lo mejor con esto basta para solucionarlo. Si el problema sigue, pasanos el html (ya bien estructurado) y el css (acorde, ya corregido) y lo vemos.

Saludos.

emprear · #3 (**permalink**) 19/02/2012, 09:19

No veo que en ninguna parte hayas reseteado tu <ul>

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
 
div {
border: solid 1px #000;
overflow: auto;
}
 
/* esto corregiría el padding */
div ul {
padding: 0;
margin: 0;
}
 
div ul li
{
    height: 32px;
    width: 126px;
    font-family: Arial;
    list-style:none;
    float:right;
    color:#FFF;
    text-decoration: none;
    margin-left: 1%;
    margin-right: 1%;
    border: solid red 1px;
}
 
 
/*]]>*/
</style>
</head>
<body>
<div>
<ul>
<li>ssss</li>
<li>zzzz</li>
</ul>
</div>
</body>
</html>

Agregué un borde al div solo para visualizar el problema
SAludos

Sirius381 · #4 (**permalink**) 19/02/2012, 14:22

@cristian_cena, @emprear: Muchísimas gracias amigos, quedo resuelto el problema, no sabia (evidentemente) que se tenia que reiniciar un <UL> ni nada por el estilo, habia usado el famoso "clear" para "empujar" cosas y que no se mostraran hechas un lío, pero lo de limpiar es nuevo, me va a servir mucho, de nuevo muchas gracias a los dos! andaré por aquí dando lata y claro, tratando de ayudar también, un abrazo!!