Foros del Web » Creando para Internet » CSS »

Emujar hacia abajo div cuya div anterior tiene float

Estas en el tema de Emujar hacia abajo div cuya div anterior tiene float en el foro de CSS en Foros del Web. Hola, en esta página , si os fijáis abajo del todo, en los enlaces de pasar de página, no consigo aplicar un margen superior que ...
  #1 (permalink)  
Antiguo 22/02/2011, 13:07
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Emujar hacia abajo div cuya div anterior tiene float

Hola, en esta página, si os fijáis abajo del todo, en los enlaces de pasar de página, no consigo aplicar un margen superior que lo separe del + o del enlace INSCRIBIRSE>>.

El + o INSCRIBIRSE>> (a veces no hay +) tienen estilos float right y left, y esto es lo que aplico en after y a la div de paginación:

Código CSS:
Ver original
  1. .listaArticulos .indexExtractoArticulo /*ESTE ES TODO EL BLOQUE DE LA ENTRADILLA*/
  2. {
  3.     width: 380px;
  4.     float: left;
  5.     margin-top: 8px;
  6.     text-align: left;
  7. }
  8.  
  9. .listaArticulos .pie-articulo /*ESTE ES EL SIGNO +*/
  10. {
  11.     width: 380px;
  12.     float: right;
  13.     margin: 0 0 5px 0;
  14. }
  15.  
  16. .listaArticulos .indexExtractoArticulo:after,
  17. .listaArticulos .pie-articulo:after
  18. {
  19.     content: ".";
  20.     color: white;
  21.     clear: both;
  22.     margin-bottom: 10px;
  23. }
  24.  
  25. .listaArticulos .paginacion-index /*ESTE ES EL DIV QUE QUIERO EMPUJAR HACIA ABAJO*/
  26. {
  27.     display: block;
  28.     clear: both;
  29.     width: 380px;
  30.     margin: 40px auto;
  31.     text-align: center;
  32.     border-top: 1px solid black;
  33.     padding-top: 3px;
  34. }

Este margin .listaArticulos .paginacion-index{...margin: 40px auto;...} lo ignora por completo, ¿Qué debo hacer para que se aplique?

Gracias
  #2 (permalink)  
Antiguo 22/02/2011, 13:18
Avatar de ofmjuanabascal  
Fecha de Ingreso: noviembre-2010
Ubicación: Cantabria
Mensajes: 17
Antigüedad: 7 años
Puntos: 0
Respuesta: Emujar hacia abajo div cuya div anterior tiene float

Tal vez el error este en el codigo HTML. Prueba a posicionar mas tarde ese div en el HTML y probablemente consigas tu objetivo.

Espero haberte ayudado. Un Saludo :)
  #3 (permalink)  
Antiguo 22/02/2011, 13:30
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Respuesta: Emujar hacia abajo div cuya div anterior tiene float

El html está bien puesto, uno detrás de otro. Además, no puedo modificarlo sin que afecte al resto del sitio web.

Tengo que hacerlo con CSS.

Gracias por tu respuesta
  #4 (permalink)  
Antiguo 22/02/2011, 14:46
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Emujar hacia abajo div cuya div anterior tiene float

A mí se me ocurre definir lo sigiente:
Código CSS:
Ver original
  1. .listaArticulos .paginacion-index /*ESTE ES EL DIV QUE QUIERO EMPUJAR HACIA ABAJO*/{
  2.     display: block; /* no es necesario */
  3.     clear: both;
  4.     width: 380px;
  5.     margin: 0 auto; /* uso el padding en lugar de margin para establecer la separación */
  6.     text-align: center;
  7.     border-bottom: 1px solid black; /* uso bottom en lugar de top */
  8.     padding-top: 40px; /* esta es la separación con respecto a + */
  9. }
  10. .paginacion-index a {
  11.     color: black;
  12.     margin: 30px 2px 0; /* 30px es la separación con respecto al borde de separación*/
  13.     text-decoration: none;
  14. }
Sólo lo he comprobado en Firefox. Sería buena idea comparar el resultado en otros navegadores antes de cantar victoria.
  #5 (permalink)  
Antiguo 22/02/2011, 14:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Emujar hacia abajo div cuya div anterior tiene float

¿El enlace que quiere separar es el que aparece como />>/?
Si es así, aumente el valor del margen superior de
.
Código CSS:
Ver original
  1. paginacion-index a {
  2.     color: black;
  3.     margin: 0 2px;
  4.     text-decoration: none;
  5. }

Edito:
Vaya, parece que estuve algo lento.

Etiquetas: float
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 20:38.