Uniformare le altezze del sito nei vari browser.

giovedì 14 febbraio 2008 - 13.06

ghisirds Profilo | Junior Member

Salve.
Ho un sito, fatto e modificato diverse volte, in cui vorrei rendere uguali le altezze e le spaziature in verticale, in modo che si possa vedere allo stesso modo in tutti i browser. Il tutto è complicato dal fatto che vorrei mantenere corretta la validazione w3c e con il carrello PayPal si complica un po’ la cosa.
Adesso, se lo si guarda con Explorer il sito è allungato in verticale in quanto aumentano le spaziature sopra e sotto il tasto "aggiungi al carrello" nonostante abbia impostato con una classe, l'altezza dello stesso e i margini verticali. Idem ho fatto per l'immagine che sta sopra e la scritta che sta sotto, ma evidentemente è interpretato diversamente dai vari browser.
Qualcuno mi può aiutare ad uniformare la pagina senza fare grossi stravolgimenti?
L'indirizzo è questo:
http://www.idee-regalo.biz/articoli-regalo.html

Questa la classe dell'immagine sopra:
[CODE].immaginiCatalogo { float: left; display: inline; width: 242px; height: 202px; margin-right: 10px; margin-top: 0px; margin-bottom: 0px; }[/CODE]

Questa del pulsante aggiungi al carrello, che sta in mezzo:
[CODE].AggiungiAlCarrello { clear: left; float: right; display: inline; width: 150px; height: 24px; margin-top: -40px; margin-bottom: -40px; border-right: 1px solid #6479AD; }[/CODE]

E questa quella del titolo sotto:
[CODE]h2.titoliCatalogo { clear: both; font: 900 18px/20px Geneva, Arial, Helvetica, sans-serif; text-align: center; background: #3399ff; color: #FF0000; text-decoration: none; margin-top: 10px; margin-bottom: 0px; }[/CODE]
Il problema, come già detto, è proprio rendere uniforme la spaziatura sopra l'aggiungi al carrello in tutti i browser: idem la spaziatura sotto.
Grazie


__________________
http://www.idee-regalo.biz/regali-natale.html

gene_old Profilo | Junior Member

Ciao,
provo a darti una mano anche se nn avendo il progetto in mano diventa difficoltoso.
Ho visto la struttura Xhtml della pagina e in questione il pezzo 'incriminato'.
In genere quando hai a che fare con elementi dinamici come può essere nel tuo caso il carrello di pay pal, conviene "ingabbiare" il più possibile gli elementi con cui hai a che fare. specie se ci sono elenti rimpiazzati come le immagini.
Ho visto e nn capisco il perchè tu abbia racchiuso un'immagine e del testo di descrizione dentro un H3, che in genere
viene utilizzato per definire un titolo.
Cmq in linea di massima io farei così:
Creo un div contenitore, gli do una classe, così lo puoi replicare più in basso visto che la tua struttura si ripete.
Ha questo div darei un'altezza e una larghezza fisse.
Imposto a tutte le immagini di quel div la proprietà float left e display block.
Poi creo un elemento p dove inserire il tuo testo. A questo p darei float left e gli imposterei una larghezza e un'altezza fisse.(la larghezza deve essere tale da permettere al p di stare a fianco dell'immagine).
Infine inserirei l'elemento form, cerca di giostrarlo, vedi dove sta e come reagisce, in linea di massima dovrebbe stare nella stessa posizione in tutti i browser.
Se va dove vuole (intendo orizzontalmente) inseriscilo a sua volta dentro un div, e setta le proprietà a questo div, tipo width auto e clear both, così si fissa bene in fondo al div padre e poi gioca con del padding interno per
aggiustare il bottone.

tipo così:
Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Fammi sapere...ciao!

ghisirds Profilo | Junior Member

Grazie della celere risposta.
Il codice è un po pocciato perchè è frutto di un vecchio progetto rivisitato e corretto poco alla volta.
Credo che ci sia un problema di fondo nella tua soluzione, ma forse sbaglio.
Se metto il form dentro un div... non passa la validazione!
O almeno, ci avevo provato ma mi dava quell'errore....
Vero è che è comunque anche adesso dentro un div più grande....
Dov'è il trucco?

Boh!?

gene_old Profilo | Junior Member

Questo è vero in effetti, anche io lavoro sempre con i form, però al suo interno si possono inserire dei div, mi sono imbattuto diverse volte in strutture come la tua, in genere la visualizzazione era comune in tutti i browser.
Il mio consiglio è di provare a fare come ti ho scritto, ripeto nn avendo il progetto mi diventa difficile vedere i risultati, cmq puoi sempre aggiustare qualche imperfezione che ti ho descritto.
Secondo me dovresti chiudere l'immagine e il p dentro un div e dargli delle dimensioni fisse, sotto inserisci il form, il div ha delle dimensioni fisse per tutti i browser e poi il tuo testo nn è dinamico e in questo caso è un vantaggio, perchè se il testo fosse dinamico nn potresti dare ne al div ne al p delle dimensioni rigide.



Ciao!

ghisirds Profilo | Junior Member


>Creo un div contenitore, gli do una classe, così lo puoi replicare
>più in basso visto che la tua struttura si ripete.
>Ha questo div darei un'altezza e una larghezza fisse.

Sto provando la tua soluzione, ma sono fermo.
la puoi vedere qui:
http://www.giftideashop.net/18th-gifts.html

in pratica ho creato 5 div e vi ho racchiuso gli articoli, dal titolo h2 al form, e li ho indicati così:
<div class"articoli_catalogo">

poi nel css vi ho aggiunto:
div.articoli_catalogo {
height: 500px;
float: left;
display: block;
}

ma provando a variare l'height, non cambia niente: si vede sempre alto uguale.
Dove sbaglio?
Grazie ancora
ciao

gene_old Profilo | Junior Member

Il div è già un elemento di blocco, quindi evita pure di mettere display: block.
Poi nn capisco cosa intendi, intendi dire che se ad esempio metti al div height:600px, nn te lo fa alto 600px? prova mettere ai div un bordo e guarda come reagiscono.

ghisirds Profilo | Junior Member

Cacchio, ho messo il bordo blu di 2 pixel e non si vede.
Ho forse sbagliato la sintassi?
Grazie
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5