Slide gallery che non si allinea sopra " CSS + JQUERY "

[killumix]

Salve

Ho creato questa pagina con CSS + Jquery http://www.havingroove.altervista.org

Per dare un po di dinamicità alla pagina ho scaricato un gallery fatta in css e jquery. Direi che rispetto al layout che ho creato l'immagine centrale dovrebbe stare come quando si apre la pagina quindi con un margin-top a zero pixel, solo che quando ho portato dentro il css della galery ( giusto per prova gli stili sono incorporati) e non va su, basta scorrere lo slide per vedere che già dalla seconda immagine, mi si creano degli spazi sopra e sotto, tra l'altro con un segno : ( >) Il CSS che ho portato all'interno della pagina, modificandolo nella larghezza altezza, sono riuscito a inserirlo con un buon risultato. Il problema sono quegli spazi e poi capire come creare un div nel quale inserire i pulsanti prev next previus e last dandgli un background e attributi come il text decoration etc..

[KillerWorm]

Ciao, il validatore mi da diversi errori sul codice html. Dovresti iniziare correggendo questi.
http://validator.w3.org/check?uri=ht...Inline&group=0

Sui tag <img> ci sono dei ";" (puntoevirgola) fuori posto. Probabilmente li hai messi per errore fuori dalle virgolette della proprietà width.
Questo, per conseguenza, influisce sul carattere ">" di chiusura del tag, che probabilmente viene considerato come contenuto testuale dopo il tag, e non per ciò che dovrebbe essere.
<img src="images/social1.gif" width="50px"; height="50px;">

[killumix]

Grazie mille

In effetti... avevo lasciato il punto e virgola fuori per tutte le immagini oltre che aver scritto due volte il segno minore. Pero' nonostante gli attributi nel css l'immagine rispetto al menù continua ada avere qualche pixel di distacco senza che lo decidessi come pure nella parte sotto. Hoprovato a rivedere tutti i margin-top dei div ma non capisco

[Roby140569]

Correggi i punti e virgola di troppo, ricarica la pagina e vediamo cosa succede.
C'è anche un div di troppo in fondo.

Guarda qui: http://validator.w3.org/check?uri=ht...vices#line-179

[killumix]

Ho rimosso i punti e virgola di troppo e riuplodato la pagina togliendo anche quel div che speravo fosse quello a interferire sul codice, invece no ho visto sul validato che mi segnala : > per ogni chiusura del tag img ma ho controllato, è tutto ok.

[KillerWorm]

Scusa, mi sono confuso anche io ma i puntoevirgola devi proprio eliminarli.
Gli attributi width ed height, che applichi ai tag, sono attributi html, non css. In tali attributi devi specificare solo un valore numerico (che implicitamente è espresso in pixel), senza indicare unità di misura e tantomeno puntoevirgola.

<img src="images/social1.gif" width="50" height="50" alt="">

EDIT: inoltre, va aggiunto l'attributo alt.
Ad ogni modo, width ed height potresti impostarli da css (in tal caso come proprietà css) senza dovrli specificare per ogni singolo tag img.
Sul css puoi indicare una cosa tipo:

#social img{width:50px;height:50px}
#slider img{width:800px;}

ecc. per gli altri eventuali tag img

[killumix]

Ho riuplodato la pagina andando a specificare i pixel nel css, continua a darmi quell ospazio sopra e sotto anche se facendo un controllo dalla consolle di Crhome ho notato che i collegamenti per far muovere lo slide sono contenuti in un <div> che visualizzo solo nel codice della sorgente e non sul mio file

codice :

<span id="firstBtn"><a href="javascript:void(0);">First</a></span>

<span id="prevBtn"><a href="javascript:void(0);">Previous</a></span>

<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

<span id="lastBtn"><a href="javascript:void(0);">Last</a></span>

[KillerWorm]

Non capisco quale è esattamente il problema.
Non vedo lo spazio di cui stai parlando.

La console web mi segnala un errore alla riga 97, relativo al valore del padding:

#dx{width:397px; margin-left:1px; padding:px;}

[killumix]

In pratica nel progetto grafico,la foto grande dovrebbe stare giusto a 1px staccata dal menu di navigazione e il#main che contiene il div di sinistra e destra uno con testo e l'altro con la foto piccola, dovrebbe stare attaccato dallo #slider senza creare quello spazio grigio che sarebbe il background del #wrap.


Credo che quello spazio in basso sia dovuto al posizionamento dei pulsanti First PreviousNextLast, e forse potrei risolverlo inserendo un div con all'interno appunto i pulsanti dandogli anche un colore per rendere l'aspetto grafico più omogeneo, Solo che, essendo che non si trovano nel codice della pagina ma nel file js query,,non so come gestirlo.

[ac_socmel]

secondo me dovresti azzerare il "line-height" del <li>