Foros del Web » Creando para Internet » CSS »

pq no funciona el float?

Estas en el tema de pq no funciona el float? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/07/2009, 13:21
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
pq no funciona el float?

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
  #2 (permalink)  
Antiguo 23/07/2009, 13:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: pq no funciona el float?

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 23/07/2009, 13:32
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: pq no funciona el float?

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

Gracias
  #4 (permalink)  
Antiguo 23/07/2009, 13:41
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 9 años, 3 meses
Puntos: 87
Respuesta: pq no funciona el float?

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&aacute;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
}
  #5 (permalink)  
Antiguo 23/07/2009, 13:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: pq no funciona el float?

Si es una relación de enlaces (una lista) utilizar las etiqueta apropiadas
Código html:
Ver original
  1. <div id="menu">
  2. <ul>
  3. <li><a class="paginacion" href="2.htm">2</a> - </li>
  4. <li><a class="paginacion" href="3.htm">3</a> - </li>
  5. <li><a class="paginacion" href="4.htm">4</a></li>
  6. </ul>
  7. </div>
y el css:
Código css:
Ver original
  1. * {margin: 0;padding: 0;}
  2. #menu {margin: 0 auto;
  3. width: 700px;
  4. height: 25px;
  5. text-align: center;
  6. }
  7. ul {list-style-type: none;
  8. border: solid 1px #444;
  9. }
  10. li {padding: 0 15px;
  11. display: inline;
  12. text-align: center;
  13. }
  14. a {line-height: 25px;}
por ejemplo. Adornado con una caja contenedora para centrarlos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 23/07/2009, 13:47
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: pq no funciona el float?

Yo pienso que deberías hacer esto con listas:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. #paginador ul{list-style:none;}
  7. #paginador ul li{ float:left;text-align:center; padding:2px;}
  8. #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;}
  9. #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;}
  10. </head>
  11.  
  12. <div id="paginador">
  13.     <ul>
  14.         <li>P&aacute;ginas: 1</li>
  15.         <li><a href="#">1</a></li>
  16.         <li> - </li>
  17.         <li><a href="#">2</a></li>
  18.         <li> - </li>
  19.         <li><a href="#">3</a></li>
  20.         <li> - </li>
  21.     </ul>
  22. </div>
  23. </body>
  24. </html>

Aunque no se si es forma más correcta. ya lo dirás
__________________
WFC
codigo82
  #7 (permalink)  
Antiguo 25/07/2009, 06:00
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta Respuesta: pq no funciona el float?

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
  1. #menupaginacion {margin: 0 auto;width: 700px;height: 25px;text-align: center;}ul {list-style-type: none;border: solid 1px #444;}
  2. li {padding: 0 15px;display: inline;text-align: center;}
  3. a {line-height: 25px;}

HTML
Código html:
Ver original
  1. <div id="menupaginacion">
  2. <ul>
  3. <li><a class="paginacion" href="2.htm">2</a> - </li>
  4. <li><a class="paginacion" href="3.htm">3</a> - </li>
  5. <li><a class="paginacion" href="4.htm">4</a></li>
  6. </ul>
  7. </div>

...y el resultado:



- Respecto al diseño de willyfc
el código adaptado es:
CSS
Código css:
Ver original
  1. #paginador ul{list-style:none;}
  2. #paginador ul li{ float:left;text-align:center; padding:5px;font-size:12px;border:solid 2px;}
  3. #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; }
  4. #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
  1. <div id="paginador">
  2. <ul>
  3. <li>P&aacute;ginas: 1</li>
  4. <li><a href="#">1</a></li>
  5. <li>  </li>
  6. <li><a href="#">2</a></li>
  7. <li> - </li>
  8. <li><a href="#">3</a></li>
  9. <li> - </li>
  10. </ul>
  11. </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
  #8 (permalink)  
Antiguo 25/07/2009, 07:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: pq no funciona el float?

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.
__________________
WFC
codigo82
  #9 (permalink)  
Antiguo 25/07/2009, 08:27
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta Respuesta: pq no funciona el float?

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

Código css:
Ver original
  1. #paginador ul{
  2. list-style:none;
  3. }
  4. #paginador ul li{
  5. float:left;
  6. text-align:center;
  7. padding:5px;
  8. font-size:17px;
  9. border:solid 2px;
  10. }
  11. #paginador a{ font-size:12px;
  12. color:#FFF;
  13. background:#B35A5E;
  14. padding:15px;
  15. text-decoration:none;
  16. border: solid 2px;
  17. border-top-color: #B35A5E;
  18. border-bottomcolor: #4D2628;
  19. border-left-color: #B35A5E;
  20. border-right-color: #4D2628;
  21. display:block;float:left; }
  22.  
  23. #paginador a:hover{
  24. text-decoration: none;
  25. background: #E4BC83;
  26. border-top-color: #8E2800;
  27. border-bottom-color:#FFB966;
  28. border-left-color: #8E2800;
  29. border-right-color: #FFB966;
  30. display:block;
  31. float:left;
  32. }



alguna solucion?
Gracias

Última edición por etanol; 25/07/2009 a las 08:29 Razón: No puedo resaltar padding:15px en el enlace
  #10 (permalink)  
Antiguo 25/07/2009, 08:36
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: pq no funciona el float?

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.
__________________
WFC
codigo82
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 21:13.