Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

[CSS] problema layout riducendo la pagina

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

[CSS] problema layout riducendo la pagina

Postdi ketbra » 29/07/14 21:03

ciao a tutti:

è 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:

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"> &nbsp;chi sono
                                                        &nbsp;&nbsp;&nbsp;&nbsp;le strutture
                                                        &nbsp;&nbsp;&nbsp;&nbsp;il bosco grande
                                                        &nbsp;&nbsp;&nbsp;&nbsp;le attivita
                                                        &nbsp;&nbsp;&nbsp;&nbsp;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>
ketbra
Utente Junior
 
Post: 15
Iscritto il: 01/07/14 09:44

Sponsor
 

Postdi archimede » 30/07/14 13:02

A me pare tutto ok sia su Chrome sia su Firefox: il contenuto si adatta alle dimensioni della finestra, il che mi pare una buona cosa.

Cosa faccia IE non ho idea perché non uso Windows.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi ketbra » 30/07/14 15:02

Ciao archimede grazie x l attenzione ma,sicuro di aver controllato bene?quando riduco le dimens della finestra di firefox la scritta "amici dei boschi"(per esempio)si sposta dal suo riquadro ...riducendo poco si sposta di poco mentre riducendo molto diventa un minestrone:(
ketbra
Utente Junior
 
Post: 15
Iscritto il: 01/07/14 09:44

Postdi archimede » 30/07/14 17:04

archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi ketbra » 30/07/14 17:38

ad esempio ,alla risoluzione più bassa ,le immagini son rimaste fisse..invece il contenuto si è tutto ristretto ,va a capo dopo una o due parole..rimpicciolendo ulteriormente la finestra le scritte nei blocchi si mescolano con gli altri blocchi del sito
ketbra
Utente Junior
 
Post: 15
Iscritto il: 01/07/14 09:44

Postdi archimede » 31/07/14 09:11

ketbra ha scritto:alla risoluzione più bassa ,le immagini son rimaste fisse..invece il contenuto si è tutto ristretto
E questa sarebbe la tua definizione di "minestrone"?

Se il tuo problema è fare in modo che le immagini si rimpiccioliscano automagicamente, temo di non poterti aiutare.

Se stai cercando il modo per rendere fruibile un sito anche su tablets, telefonini, ecc., allora cerca informazion sul responsive web design (ad esempio: https://developers.google.com/web/fundamentals/layouts/ o http://www.html.it/guide/responsive-web ... la-guida/).

HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Dylan666 » 01/08/14 17:14

Del codice di quella pagina per ora concentrati sul float:
http://www.html.it/pag/42450/float-e-clear/
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46


Torna a Programmazione


Topic correlati a "[CSS] problema layout riducendo la pagina":

Problema Windows 10
Autore: asso1998
Forum: Software Windows
Risposte: 1

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti