Anzitutto attenzione alla semantica. Probabilmente adesso non te ne rendi conto, ma hai 5 classi con nomi molto simili (elementi, elementi1, ...)
Uno (o forse due) di questi non fa parte della serie, perche` contiene l'intestazione.
Allora andrebbe chiamato "intestazione" (o un nome ragionevole).
Poi ci sono altri trucchi che puoi usare.
Trucco n. 1. assegnare piu` classi allo stesso elemento:
Esempio (da rielaborare e completare)
codice:
HTML:
<div class="elementi vert"> immagine vert </div>
<div class="elementi oriz"> immagine orizz </div>
<div class="elementi vert">immagine vert </div>
CSS:
.elementi {
display: block;
float: left;
height: 650px;
border: 1px solid black;
background: red;
}
.vert {
width: 520px; /* attenzione che hai un errore di sintassi */
}
.oriz {
width: 1040px;
}
.vert img {
...
}
.oriz img {
...
}
}
Trucco n. 2
Dare solo la classe "elementi" al <div>, fissando solo l'altezza e spostare nel CSS dell'immagine la definizione di larghezza: questo ti semplifica la vita nelle modifiche che dovrai fare quando cambierai le immagini di ciascuna "striscia":
codice:
HTML:
<div class="elementi"> <img class="vert" ... /> </div>
<div class="elementi"> <img class="oriz" ... /> </div>
<div class="elementi"> <img class="vert" ... /> </div>
CSS:
.elementi {
...
}
.elementi img {
border: 0;
}
.vert {
height: 100%;
}
.oriz {
...
}
Ma forse nel tuo caso puo` essere sufficiente definire solo height:100% in tutte le img e lasciare che il browser si arrangi a sistemarle: potrebbe essere l'uovo di colombo
grazie però.
Rispondi quotando
