è da qualche settimana che mi sto cimentando nei rudimenti della programmazione web.
da qualche giorno ho cominciato a vedere i fogli di stile e ho provato a fare un esercizio che c'era nel libro che sto usando.
Quello che ho fatto (nel modo in cui avevo pensato di farlo) lo si può vedere nella seguente immagine:
il problema è che quando rimpicciolisco la pagina col mouse tutto si schiaccia..le immagini si avvicinano tra loro riducendo lo spazio intermedio e tutte le righe col testo diventano più strette (ma la grandezza del carattere è fissa e quindi il testo semplicemente si allunga in verticale. E questo solo con chrome. Su internet explorer da subito è apparso tutto accartocciato e anche estendendo la pagina al massimo le scritte erano spostate..in particolare quella dell'intestazione.
vi posto il codice che ho fatto cosi magari mi dite cosa c'è di sbagliato:
- Codice: Seleziona tutto
<html>
<head>
<title>css2</title>
<style>
.contenitore{
margin:1%;
width:96%;
height:98%;
border:thin solid green;
text-align:justify;
padding:1%;
font-style:times new roman,serif;
font-size:15pt;
overflow:auto;
}
.intestazione{
clear:both;
width:100%;
height:15%;
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:green;
text-align:center;
font-size:70pt;
font-style:times new roman,serif;
color:yellow;
background-color:#006600;
}
.pulsanti {
margin:0% 0% 1% 0%;
width:100%;
height:5%;
border-width:1px 0px 1px 0px;
border-style:solid;
border-color:green;
text-align:center;
background-color:green;
color:yellow;
}
.blocco1{
float:left;
margin:1% 1% 1% 0%;
width:300px;
height:225px;
border-width:1px 1px 1px 1px;
border-color:green;
border-style:solid;
}
.blocco2{
float:right;
margin:1% 0% 1% 1%;
width:300px;
height:225px;
border-width:1px 1px 1px 1px;
border-color:green;
border-style:solid;
}
</style>
</head>
<body>
<div class="contenitore"> <div class="intestazione" > Amici Dei Boschi </div>
<div class="pulsanti"> chi sono
le strutture
il bosco grande
le attivita
news letter </div>
<div class="blocco1"><img src="porco.jpg" width="300" height="225"></div>
<div class="blocco2"><img src="porco.jpg" width="300" height="225"></div>
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
