Corsi di Laurea

[Fabrix883]

Ho qualche dubbio riguardo questa domanda d'esame

2)Esercizio una immagine al centro e sotto tre una a sinistra,una al centro e una a destra il tutto con i css e i div

Chi può illuminarmi??

[goodhelp88]

si potrebbe utilizzare il css per definire :
un div centrato nella pagina (per inserci la prima immagine)

un div.container con l'attributo display settato a table.
un div un div e poi in ogni "cella" ci mettiamo una delle tre immagini che vanno sotto.

Credo che ci sia piu di una soluzione....non so se la mia è corretta...

[Losaitu]

Io non ho usato display ( anche perché non ero a conoscenza della sua esistenza ), sicuramente come ho fatto io non viene perfetto come una tabella ma nell'esercizio nn specifica che vuole il layout a tabella.
Cmq ho un div superiore centrato per la prima immagine e poi tre div inferiori allineati

#imgsup{



}



#img1{

width: 30%;

float: left;



}



#img2{

width: 30%;

float:left;



}



#img3{

width: 30%;

float: right;

}



Nell'HTML

[Fabrix883]

Non sono ancora del tutto sicuro.
Ci vorrebbe il parere di qualcuno a cui è stata fatta questa domanda in sede d'esame... c'è nessuno?

[Fabrix883]

Credo di esserci riuscito:

La pagina HTML

Il CSS

div.centro{text-align:center;}

img.dx{float:right;}

img.sx{float:left;}

[goodhelp88]

fabbri ma non penso che la text-align="center" ti permetta di allineare al centro anche un elemento img

[SleepyMan]

fabbri ma non penso che la text-align="center" ti permetta di allineare al centro anche un elemento img

Infatti, ho provato a realizzarla e non funziona. La soluzione di Losaitu, invece ha un errore: usa align nel codice html (l'utilizzo dei css dovrebbe proprio scoraggiare questa pratica...)

sto cercando la soluzione giusta...

[Losaitu]

L'unica soluzione è usare position però io non ho capito bene come usarlo. Secondo me dovrebbe essere più o meno così

#imgsup{

position: relative;

left:50%;

top: 50%;

}

[SleepyMan]

Io avrei trovato questa soluzione (http://www.raggioros...007/center.html):

IMG.displayed {

 display: block;

 margin-left: auto;

 margin-right: auto }

...

Ma non mi funziona...

[goodhelp88]

si puo' usare anche float="center"

[Fabrix883]

Ragazzi, io la mia soluzione l'ho provata su firefox e google chrome e funziona.
Su explorer, invece, non mette le 3 immagini sulla stessa riga, però rispetta la posizione (sinistra, centro, destra)

si puo' usare anche float="center"

Non mi sembra che float accetta come valore center... poi boh

[Fabrix883]

Ho provato con float="center" e funziona lo stesso.
Comunque in problema di fondo è la compatibilità del codice CSS con i vari browser: alcuni tag e selettori del codice CSS si comportano in modo diverso in base al browser in uso.
Perciò non scervellatevi troppo, si usa il float (o il display) per posizionare le immagini, punto e basta.

[SleepyMan]

Ok l'ho l'ho riprovata e funziona (chissà che mi ero saltato prima... )

Anche se formalmente text-align non è corretto, e float:center non è documentato... boh! )

[Fabrix883]

Io penso che la mia prima soluzione sia quella più corretta: il div{text-align:center;} si ripercuote anche sull'immagine al suo interno.
Inoltre il float="center" non è documentato come SleepyMan ha detto.
Mah... Ai posteri l'ardua sentenza!!