Problemi con le dimensioni dei box CSS

[Dunix]

Ho creato i box con XHTML e con il CSS gli ho dato le dimensioni tutte in percentuale tranne il carattere e i bordi. Io lo ho testato con IE ma provandolo con Mozilla e Netscape ci sono vari problemi. Per esempio si allargono tutti i box e si sballa tutto.
Come posso fare per evitare questo problema?
Inoltre sapete come posso dare le dimensioni con CSS per le immagini di sfondo?

[floyd46]

ciao
non hai una pagina in rete in modo tale da fare vedere quello che ti viene fuori? Da quello che hai scritto non credo ti si possa dare molto aiuto.

ciao

[Jerry Masslo]

sento puzza di problemi di box model, fai una ricerca, oggi mi secca un po' farla per te .

sintetizzando: nel caso stai usando una dtd per cui ie va in quirk mode (se non intendi questo passo vuol dire che è così e puoi trascurarlo).


lo standard dice che la larghezza totale di un elemento è data da width + border + padding

quindi se hai un box ad esempio di 400px di width più 20px di border e padding ie lo farà sempre di 400px mentre i browser che seguono lo standard (anche ie6 in standard mode), correttamente lo porteranno a 480px.

Ci sono vari metodi per ovviare di cui il più semplice di tutti è: non usare quelle tre proprietà insieme per lo stesso elemento, cioé, se non dai un width il problema non c'è, così come se quando dai il width non dai border e padding, non sempre si può fare ma conviene un frego.

[Dunix]

Ho provato come mi hai detto tu, cioè ho levato il width lasciando soltanto il margin ed effettivamente funziona bene sia con Mozzilla, con IE e con Opera. Ora pero misorge un altro dubbio, le dimensioni dei bordi le ho date tutte in em, e quelle del carattere in pt. Voi cosa mi consigliate di lasciarle cosi o di portarle tutte in percentuale ?

[Jerry Masslo]

la seconda che hai detto.


i pt così come i pixel non vengono ridimesionati da ie e ciò è sconsigliatissimo, chi vede i caratteri troppo piccoli o troppo grandi non apprezza.

[Dunix]

Grazie. Ora vorrei chiederti un altra cosa, se non ti dispiace, come faccio a dare le dimensioni ad un immaggine in modo che a diverse risoluzioni rimanga sempre uguale?

[Jerry Masslo]

Originariamente inviato da Dunix
Grazie. Ora vorrei chiederti un altra cosa, se non ti dispiace, come faccio a dare le dimensioni ad un immaggine in modo che a diverse risoluzioni rimanga sempre uguale?

spiega meglio che non si capisce? intendi come posizionarla in modo che stia sempre da qualche parte che dovresti specificare?

oppure vuoi che anche cambiando risoluzione se misurata col decimentro sul monitor si ottenga sempre la stessa misura? Perchè dando le dimensioni in pixel l'immagine avrà sempre la stessa misura in pixel.

il secondo caso mi pare parecchio strampalato, potresti risalire alla risoluzione ma non credo che si possano ottenere le dimensioni fisiche dello schermo da cui anche dipendono i cm con cui vengono visualizzati gli elementi in pixel.

[Dunix]

Intendevo dire che con il CSS ho messo un immagine come sfondo, cambiando la risoluzione o semplicemente rimpicciolendo la finestra le immagini risultano tagliate all'interno del box. Come faccio per ovviare a questo problema?

[Jerry Masslo]

Originariamente inviato da Dunix
Intendevo dire che con il CSS ho messo un immagine come sfondo, cambiando la risoluzione o semplicemente rimpicciolendo la finestra le immagini risultano tagliate all'interno del box. Come faccio per ovviare a questo problema?

ora è chiaro, scusa se te lo dico ma quando poni un quesito dovresti metterti nei panni di chi lo deve interpretare.

colle immagini di sfondo ci puoi fare quasi tutto tranne ottenere un ridimensionamento in percentuale, almeno via css, forse esiste qualche javascript però.

il mio consiglio è che ne usi una con un elemento grafico principale al centro e gli dai un:

background-position:center; in modo che quando viene tagliata a mozzarsi siano le zone periferiche o in ogni caso se l'elemento che vuoi non venga tagliato sta in un'altra zona posizioni l'immagine in modo che siano le altre zone a passare per la mannaia cioè se ad esempio sta in basso a destra allora darai un:

background-position:bottom right;

immagino che già usi un:

background-repeat:no-repeat;