pq no funciona el float?

etanol · #1 (**permalink**) 23/07/2009, 12:21

Hola a todos:
Aunque el título del tema no es muy acertado, no sabía que escribir en tan poco espacio.

Vereis, mi problema es muy simple, pero no logro dar con el error.
Se trata de unos enlaces en div que van seguidos de guiones pero los div los coloca abajo seguidos y sin guiones.

Este es el código CSS:

Código HTML:

a.paginacion { 
float: left;
display: block;
background-color:#B35A5E;
padding: 0.5em;
color: #ffffff; 
height: 100%; 
text-decoration: none; 
text-align: center;
font-size:12; 
border: solid 2px;
border-top-color: #B35A5E;
border-bottom-color: #4D2628;
border-left-color: #B35A5E;
border-right-color: #4D2628;

} 
a.paginacion:hover { 
float: left;
display: block;
text-decoration: none; 
text-align: center;
font-size:12;
background-color: #E4BC83; 
border: solid 2px;
color: #000000;
border-top-color: #8E2800;
border-bottom-color: #FFB966;
border-left-color: #8E2800;
border-right-color: #FFB966;

}

Este es el código HTML:

Código HTML:

<div>P&aacute;ginas: 1 - 
<a class="paginacion" href="2.htm">2</a> - 
<a class="paginacion" href="3.htm">3</a> - 
<a class="paginacion" href="4.htm">4</a>

Gracias y un saludo

kseso? · #2 (**permalink**) 23/07/2009, 12:28

porque float se aplica a todos menos los elementos menos los posicionados
si a un elemento de línea como es el enlace, lo conviertes en uno de bloque, ocupará toda la línea horizontal, desplazando al siguiente elemento a la línea inferior.

etanol · #3 (**permalink**) 23/07/2009, 12:32

Gracias por responder, pero que solución se propone para realizar lo que pretendo?

Gracias

quike88 · #4 (**permalink**) 23/07/2009, 12:41

Buenas, si te entiendo bien, lo que quieres es que los links esten en una fila separados por guiones. puedes intentar poner

<div class="paginacion">Páginas: 1 -
<a href="2.htm">2</a> - <a href="3.htm">3</a> - <a href="4.htm">4</a>
</div>

CSS:

.paginacion a{
tus atributos
}

.paginacion a:hover{
tus atributos
}

kseso? · #5 (**permalink**) 23/07/2009, 12:44

Si es una relación de enlaces (una lista) utilizar las etiqueta apropiadas

Código html:

Ver original<div id="menu">
<ul>
<li><a class="paginacion" href="2.htm">2</a> - </li>
<li><a class="paginacion" href="3.htm">3</a> - </li>
<li><a class="paginacion" href="4.htm">4</a></li>
</ul>
</div>

y el css:

Código css:

Ver original* {margin: 0;padding: 0;}
#menu {margin: 0 auto;
width: 700px;
height: 25px;
text-align: center;
}
ul {list-style-type: none;
border: solid 1px #444;
}
li {padding: 0 15px;
display: inline;
text-align: center;
}
a {line-height: 25px;}

por ejemplo. Adornado con una caja contenedora para centrarlos.

Un saludo

willyfc · #6 (**permalink**) 23/07/2009, 12:47

Yo pienso que deberías hacer esto con listas:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#paginador ul{list-style:none;}
#paginador ul li{ float:left;text-align:center; padding:2px;}
#paginador a{ font-size:12px; color:#FFF;background:#B35A5E;padding:10px; text-decoration:none;border: solid 2px;border-top-color: #B35A5E;border-bottom-color: #4D2628;border-left-color: #B35A5E;border-right-color: #4D2628; display:block;float:left; margin:-10px 0 0 0;}
#paginador a:hover{text-decoration: none; background: #E4BC83;border-top-color: #8E2800;border-bottom-color: #FFB966;border-left-color: #8E2800;border-right-color: #FFB966; display:block; float:left;margin:-10px 0 0 0;}
</style>
</head>
 
<body>
<div id="paginador">
    <ul>
        <li>P&aacute;ginas: 1</li>
        <li><a href="#">1</a></li>
        <li> - </li>
        <li><a href="#">2</a></li>
        <li> - </li>
        <li><a href="#">3</a></li>
        <li> - </li>
    </ul>
</div>
</body>
</html>

Aunque no se si es forma más correcta. ya lo dirás

etanol · #7 (**permalink**) 25/07/2009, 05:00

Hola, ante todo gracias por responder el mensaje.

Os cuento. Me convence la forma de hacerlo en listas pero tengo un problema

- Respecto al diseño que propone kseso?
El código adaptado es el siguiente

CSS

Código css:

Ver original#menupaginacion {margin: 0 auto;width: 700px;height: 25px;text-align: center;}ul {list-style-type: none;border: solid 1px #444;}
li {padding: 0 15px;display: inline;text-align: center;}
a {line-height: 25px;}

HTML

Código html:

Ver original<div id="menupaginacion">
<ul>
<li><a class="paginacion" href="2.htm">2</a> - </li>
<li><a class="paginacion" href="3.htm">3</a> - </li>
<li><a class="paginacion" href="4.htm">4</a></li>
</ul>
</div>

...y el resultado:

- Respecto al diseño de willyfc
el código adaptado es:
CSS

Código css:

Ver original#paginador ul{list-style:none;}
#paginador ul li{ float:left;text-align:center; padding:5px;font-size:12px;border:solid 2px;}
#paginador a{ font-size:12px; color:#FFF;background:#B35A5E;padding:px;text-decoration:none;border: solid 2px;border-top-color: #B35A5E;border-bottomcolor: #4D2628;border-left-color: #B35A5E;border-right-color: #4D2628; display:block;float:left; }
#paginador a:hover{text-decoration: none; background: #E4BC83;border-top-color: #8E2800;border-bottom-color:#FFB966;border-left-color: #8E2800;border-right-color: #FFB966; display:block; float:left;}

HTML

Código html:

Ver original<div id="paginador">
<ul>
<li>P&aacute;ginas: 1</li>
<li><a href="#">1</a></li>
<li>  </li>
<li><a href="#">2</a></li>
<li> - </li>
<li><a href="#">3</a></li>
<li> - </li>
</ul>
</div>

...y el resultado: (le he añadido un border:solid 2px para saber por qué no centraba verticalmente

Por tanto me convence mas el de willyfc, pero cómo lo hago para que me centre vertical?

Muchas gracias

willyfc · #8 (**permalink**) 25/07/2009, 06:52

Mira, una solución bastante fácil es aumentar el font-size en la li, esto no afectará al tamaño de los números por que tienen su propio font-size definido en la "a" muy aparte del comportamiento de la lista. Obviamente si esto no afecta tu diseño.

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#paginador ul{list-style:none;}
#paginador ul li{ float:left;text-align:center; padding:5px;font-size:17px;border:solid 2px;}
#paginador a{ font-size:12px; color:#FFF;background:#B35A5E;padding:px;text-decoration:none;border: solid 2px;border-top-color: #B35A5E;border-bottomcolor: #4D2628;border-left-color: #B35A5E;border-right-color: #4D2628; display:block;float:left; }
#paginador a:hover{text-decoration: none; background: #E4BC83;border-top-color: #8E2800;border-bottom-color:#FFB966;border-left-color: #8E2800;border-right-color: #FFB966; display:block; float:left;}
</style>
</head>

<body>
<div id="paginador">
<ul>
    <li>P&aacute;ginas: 1</li>
    <li><a href="#">1</a></li>
    <li> - </li>
    <li><a href="#">2</a></li>
    <li> - </li>
    <li><a href="#">3</a></li>
    <li> - </li>
</ul>
</div>
</body>
</html>

El resultado sería algo así:

Nos comentas como te va.

etanol · #9 (**permalink**) 25/07/2009, 07:27

el problema que encuentro es que cuando quiero darle padding al enlace sigue centrandolo arriba verticalmente

Código css:

Ver original#paginador ul{
list-style:none;
}
#paginador ul li{ 
float:left;
text-align:center; 
padding:5px;
font-size:17px;
border:solid 2px;
}
#paginador a{ font-size:12px; 
color:#FFF;
background:#B35A5E;
padding:15px;
text-decoration:none;
border: solid 2px;
border-top-color: #B35A5E;
border-bottomcolor: #4D2628;
border-left-color: #B35A5E;
border-right-color: #4D2628; 
display:block;float:left; }
 
#paginador a:hover{
text-decoration: none; 
background: #E4BC83;
border-top-color: #8E2800;
border-bottom-color:#FFB966;
border-left-color: #8E2800;
border-right-color: #FFB966; 
display:block; 
float:left;
}

alguna solucion?
Gracias

willyfc · #10 (**permalink**) 25/07/2009, 07:36

prueba de esta manera

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#paginador ul{list-style:none;}
#paginador ul li{ float:left;text-align:center; padding:5px;font-size:17px;border:solid 2px;}
#paginador ul li span{display:block; padding:15px;}
#paginador a{ font-size:12px; color:#FFF;background:#B35A5E;padding:15px;text-decoration:none;border: solid 2px;border-top-color: #B35A5E;border-bottomcolor: #4D2628;border-left-color: #B35A5E;border-right-color: #4D2628; display:block;float:left; }
#paginador a:hover{text-decoration: none; background: #E4BC83;border-top-color: #8E2800;border-bottom-color:#FFB966;border-left-color: #8E2800;border-right-color: #FFB966; display:block; float:left;}
</style>
</head>

<body>
<div id="paginador">
<ul>
   <li> <span>P&aacute;ginas: 1</span></li>
    <li><a href="#">1</a></li>
    <li><span> - </span></li>
    <li><a href="#">2</a></li>
    <li><span> - </span></li>
    <li><a href="#">3</a></li>
    <li><span> - </span></li>
</ul>
</div>
</body>
</html>

ajusta un poco las medidas.