Imposta-Suddividi pagina web in parti

pup3770 · 9 Feb 2016

Ciao ragazzi,
ho cercato ma non sono riusciuto a chiarirmi le idee.

Vorrei creare una pagina web che si adatti automaticamente alle dimensioni del browser e che sia suddivisa in parti.

Vorrei realizzarla così:

http://www.comefarea.it/internet-web-design/css/definire-il-layout-di-pagina/images/12.jpg

solo che vorrei in più in altro un quadrato nella parte rossa di sinistra ed uno nella parte rossa di destra. Della stessa dimensione dei quadrati dei bordi, un rettangolo nella parte centrale sempre in alto.

Il testo, sia quello a sinistra, sia al centro, sia a destra dovrebbero essere sempre contenuti nell'area e non uscire fuori (sia in orizzontale che verticale)

Il codice per realizzare la pagina come da immagine link è:

Codice:

<html>
<head> 
<style type="text/css"> 
body {margin-top: 0px;} 
.contenitore {background-color: #CCCCCC; height: 100%; } 
.sinistra {background-color: #FF0000; float: left; width: 15%; height: 100%;} 
.destra {background-color: #FF0000; float: right; width: 15%; height: 100%; } 
.centro {float:left; width: 66%; text-align:justify; height: 100%; 
   	margin-right: 2%; margin-left: 2%;}
</style>
</head>
<body>
<div class="contenitore">
   <div class="sinistra">sinistra</div> 
   <div class="centro">Lorem ipsum … </div>
<div class="destra">destra</div> 
</div> 
</body>
</html>

Qualcuno può gentilmente aiutarmi?

Max 1 · 9 Feb 2016

Io non l'ho testato ma se hai già un codice cosa dovremmo farti noi

pup3770 · 10 Feb 2016

Max 1 ha scritto:
Io non l'ho testato ma se hai già un codice cosa dovremmo farti noi

Purtroppo non testandolo non te ne rendi conto. Nella situazione attuale la pagina è realmente divisa ma il testo passa da un riquadro all'altro e se molto lungo in verticale va oltre il riquadro andndo nella parte bianca, aggiungendo e stendo

Codice:

overflow

viene aggiunta la possibilità di scroll in orizzontale ma non in verticale.
Io vorrei capire come fare a delineare quella zona e mettere tutto quello che devo mettere allineano, zona che se il testo è più grande dello schermo del mio pc, posso scorrere con una barra di scorrimento in verticale per vedere la parte successiva, rimanendo sempre lo stesso sfondo.

Max 1 · 10 Feb 2016

Ora è pittosto tardi domani lo testo.
Comunque con:

Codice:

overflow-x:auto;

hai la barra orizzontale
e con:

Codice:

overflow-y:auto;

hai la barra verticale! Domani vedremo meglio

pup3770 · 10 Feb 2016

Grazie per l'ulteriore dritta.

Purtroppo non vedo miglioria utilizzando

Codice:

overflow-x: auto;

o

Codice:

overflow-y: auto;

Ho sistemato un po il codice ed adesso va, cioè se riduco la finestra del browser lui mantiene le proporzioni ma è strano che pur essendo le varie aree vuote la testata inferiore (testata piede) non la fa vedere, bisogna scendere con lo scroller del mouse.

Vi posto il codice, giustamente è rozzo attualmente vorrei solo capire il funzionamento:

Codice:

<html>
<head>
<style type="text/css"> 
body { margin-top: 5px; } 
.contenitore {background-color: #CCCCCC; height: 100%; margin-right: 0%; 
   	margin-left: 0%; overflow:scroll; } 
.sinistra { background-color: #FF0000; float: left; width: 15%; height: 100%; overflow:scroll; } 
.destra { background-color: #FF0000; float: right; width: 15%; height: 100%; overflow:scroll; } 
.centro {float:left; width: 66%; text-align: justify; height: 100%; 
   	margin-right: 2%; margin-left: 2%; overflow:scroll; } 
.testataPiede {clear: both; width: 100%; height:10%; background-color: #FFff00; }
</style> 
</head>
<body>
<div class="contenitore"> 
   <div class="testataPiede">testata</div> 
   <div class="sinistra">sinistra</div>
   <div class="centro">centro</div> 
   <div class="destra">destra</div> 
   <div class="testataPiede">piede</div> 
</div> 
</body> 
</html>

pup3770 · 10 Feb 2016

Così entra correttamente nello schermo del mio browser e mantiene le proporzioni:

Codice:

<html>
<head>
<style type="text/css"> 
body { margin-top: 5px; } 
.contenitore { height: 100%; margin-right: 0%; 
   	margin-left: 0%; overflow:scroll; } 
.testata {clear: top; width: 100%; height:7%; background-color: #FFff00; }
.sinistra { background-color: #FF0000; float: left; width: 15%; height: 86%; overflow:scroll; } 
.destra { background-color: #FF0000; float: right; width: 15%; height: 86%; overflow:scroll; } 
.centro {background-color: #CCCCCC; float:left; width: 66%; text-align: justify; height: 86%; 
   	margin-right: 2%; margin-left: 2%; overflow:scroll; } 
.piede {clear: both; width: 100%; height:7%; background-color: #FFff00; }

</style> 
</head>
<body>
<div class="contenitore"> 
   <div class="testata">testata</div> 
   <div class="sinistra">sinistra</div>
   <div class="centro">centro</div> 
   <div class="destra">destra</div> 
   <div class="piede">piede</div> 
</div> 
</body> 
</html>

(Bisogna vedere se va anche su altri browser. Domani provo)

Testato effettuando upload su server e visualizzando da browser chrome su Samsung Android e va, se ruoto in orizzontale ruota correttamente tutto il contenuto rispettando le proporzioni.

Se avete consigli per migliorare il codice e la visualizzazione sono ben accetti.

Cerca

Cerca

Imposta-Suddividi pagina web in parti

pup3770

Utente Attivo

Max 1

Super Moderatore

pup3770

Utente Attivo

Max 1

Super Moderatore

pup3770

Utente Attivo

pup3770

Utente Attivo

Discussioni simili