[SOLUCIONADO] Margenes en paginacion y div

[warywin]

Hola buenas a todos, tengo dos pequeños obstaculos en mi pagina, el primero esque las imagenes que muestro en la web no llegan a ocupar el 100% del div principal quedandose un margen a la derecha de unos -2px, he probado todo y no funciona supongo que sera la colocacion erronea de divs o css mal aplicado aqui va el codigo:

Código HTML:

<div id="novList">
    <ul >            
        <div><li><a> AQUI VAN TODAS LAS IMAGENES </a></li></div>              
       </ul>
</div>
 

Código CSS:

#novList ul{
 
width:976px;
height:auto;
float:right;
margin:0px 0px;
}
#novList{
width:100%;
}
#novList li{
height:198px;
width:185px;
float:left;
list-style:none;
margin-left:0px;
margin:12px 10px 5px 0px;
 
}
#novList img{
width:100%;
overflow:hidden;
float:left;
border:1px solid #FD5;
}
 

Tuve que poner en novlist float:right para que se pusiera a la izquierda algo muy raro, supongo que estara mal (esta etiqueta es el contenedor de todas las imagenes.

---------

Y segundo error, uso la paginacion "Zebra Pagination" que esta ya hecha y cambiando el css, puedo editar todo menos la posicion de los numeros que se quedan pegados arriba en el borde de cada <a> y probando todo tampoco me funcionaba os pego el css de la paginacion:

Código CSS:

/* ATTRIBUTES FOR THE CONTAINER (THIS HOW WE CENTER EVERYTHING)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_Pagination                       { clear: both; width: 100%; overflow: hidden;font-size:16px; }
.Zebra_Pagination ul                    { position: relative; left: 50%; list-style-type: none; margin: 0; padding: 0; float: left }
.Zebra_Pagination li                    { position: relative; float: left; right: 50%; }
 
/* COMMON ATTRIBUTES FOR ALL THE LINKS
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_Pagination a                     { padding: 0px 11px 6px ; border: 1px solid #F0C; color: #888; text-decoration: none; margin: 0 2px; display: block; float: left; /*-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*box-shadow:0px 0px 1px 1px #C8C8C8, inset 0px -1px 2px 1px #EAEAEA;*/}
 
 
.Zebra_Pagination a:hover               { background-color: #000; color: #fff; border: 1px solid #fff; }
 
/* "NEXT PAGE" AND "PREVIOUS PAGE" LINKS
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_Pagination a.navigation          { border: 1px solid transparent; overflow: hidden; background-repeat: no-repeat;font-weight:bold; }
.Zebra_Pagination a.previous            { /*background-image: url(larrow.png); background-position: left center; padding-left: 25px*/padding: 0px 7px 6px ; border: 1px solid #F6F; color: #666; text-decoration: none; margin: 0 7px; display: block; float: left; /*-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow:0px 0px 2px 0px #C8C8C8, inset 0px -1px 2px 1px #EAEAEA;*/   }
.Zebra_Pagination a.next                { /*background-image: url(rarrow.png); background-position: right center; padding-right: 25px */padding: 0px 7px 6px ; border: 1px solid #F6F; color: #888; text-decoration: none; margin: 0 7px; display: block; float: left; /*-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow:0px 0px 2px 0px #C8C8C8, inset 0px -1px 2px 1px #EAEAEA;*/ }
.Zebra_Pagination a.next:hover                {background-color: #000; color: #fff; border: 1px solid #fff;}
.Zebra_Pagination a.previous:hover            {background-color: #000; color: #fff; border: 1px solid #fff;}
.Zebra_Pagination a.disabled            { filter: alpha(opacity=30); -khtml-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; }
.Zebra_Pagination a.disabled:hover      { background-color: inherit; color: #666;border: 1px solid #F6F; }
 

Si podeis ayudarme os lo agredecria muchisimo con estos dos grandes fallos , Muchas gracias!

[heinzy]

hola

la verdad es que exactamente no se a que te refieres con contenedor principal pero me imagino que será #novlist

y tampoco con que objetivo pones las fotos dentro de un elemento li...
luego depende como quieras q salgan las fotos en vertical al 100% o horizontal.
en realidad creo q falta mas información..

yo he puesto las imágenes al 100% de su contenedor de esta manera,

te paso el código a lo mejor te sirve...

Código CSS:

#novList{
            width:976px;
            height:auto;
            float: left;
            }
 
            #novList ul{
            
            margin:0px 0px;
            
            }
            
            
            #novList li{
            float:left;
            list-style:none;
            margin-left:0px;
            margin:12px 0px 5px 0px;
            width:100%;
 
            }
            #novList img{
            width:100%;
            overflow:hidden;
        
            }
 

Código HTML:

<div id="novList">
    <ul >            
        <li><a href="http://wwww.elpais.es"> <img src="ramo1.jpg"/>AQUI VAN TODAS LAS IMAGENES </a></li>
         <li><a href="http://wwww.elpais.es"> <img src="ramo1.jpg"/>AQUI VAN TODAS LAS IMAGENES </a></li>
          <li><a href="http://wwww.elpais.es"> <img src="ramo1.jpg"/>AQUI VAN TODAS LAS IMAGENES </a></li>
          <li><a href="http://wwww.elpais.es"> <img src="ramo1.jpg"/>AQUI VAN TODAS LAS IMAGENES </a></li>             
       </ul>
</div>
 

sobre el segundo problema no se a lo que te refieres...

saludos

[warywin]

Hola heinzy, gracias por contestar, no se me arregló pero ya se donde esta la raiz del problema, esta en la separacion de los LI horizontalmente en

Código CSS:

#wrapList li{
margin:12px 10px 5px 0px;
}
 

el 10 deja un margen a la derecha, ese margen, en la ultima imagen de la fila hace que no llegue al 100% del novList, como podria hacer para separar las imagenes sin esa propiedad?

---
El segundo problema era, que no se porque los numeros de la paginacion, 1,2,3,4,5..... estan muy pegados arriba al borde de su casillita, queria centrarlos en medio

[heinzy]

hola

pues podrías darle al útlimo li una clase y quitarle el margen

Código CSS:

.last{margin-right:0px;}
 

luego en la numeración podrías probar a ponerle...

Código CSS:

text-align: center;
 

salu2

[warywin]

ya he arreglado lo del ancho de lista, pero lo de la paginacion no tengo ni idea por donde cogerlo, porque en ese css nose que propiedad hace referencia a los numeros, he probado en todos los lados pero nada funciona, quizá haya que reorganizarlo todo de nuevo..

[warywin]

vale pues ya lo he arreglado, tocando cosas, al final he puesto

line-height:30px; y solucionado