Imposta-Suddividi pagina web in parti

pup3770

Utente Attivo
30 Mag 2012
122
0
16
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Io non l'ho testato ma se hai già un codice cosa dovremmo farti noi
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Utente Attivo
30 Mag 2012
122
0
16
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

Utente Attivo
30 Mag 2012
122
0
16
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.
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
M [PHP] Imposta limite giornaliero PHP 1
G Imposta opzioni dei browser al 100% zoom HTML e CSS 7
G Pagina html in stringa PHP 2
L Creare ancore interne alla pagina PHP 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
Shyson Regex che trova la parola nella pagina jQuery 6
L Eliminazione di una pagina dalla gallery SEO e Posizionamento 0
D Apre il lightbox fuori pagina Javascript 0
K posizionare variabile da pagina html all'iframe. Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
U Link a pagina ed esecuzione file PHP 0
S Passare query o utm alla pagina successiva Domini 1
D [Cerco] Pagina Facebook settore calcio Annunci servizi di Social Media Marketing 0
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
G Eliminare l'effetto refresh di una pagina internet PHP 8
L Bing prima pagina prima riga; Google mi ignora SEO e Posizionamento 0
P Pagina modifica record che non funziona PHP 0
T Conferma reload pagina Javascript 4
A Submit senza ricaricare la pagina Ajax 2
L Problemi form Pagina php HTML e CSS 3
L php mysql cerca e visualizza pagina PHP 0
S Variabile in post su altra pagina PHP 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
D Pagina non trovata Wordpress WordPress 7
E Pagina Cloudflare e captcha Domini 1
W Anomalia Pagina Facebook Social Media Marketing 9
A Aiuto per pagina php PHP 0
T Risolto Redirect a pagina esterna Javascript 2
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
T Offuscare link pagina web PHP 2
D Stampa a video in altra pagina html Database 3
Cosina script data aggiornamento pagina Javascript 1
Y cambiare sfondo di una pagina Javascript 1
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
S Apertura in una nuova pagina PHP 6
G creazione menu a tendina e invio a pagina php PHP 1
B Stampare una porzione della pagina PHP 0
D Pubblicità Instagram su pagina da 144 mila follower Vendere e Acquistare pubblicita' online 3
A Dare l'accesso ad una pagina solo ad un utente specifico PHP 0
F pagina dinamica PHP PHP 3
W Invio Dati ad un altra pagina Classic ASP 1
Samuele Ronzani Click e reload della pagina PHP 1
M Compilazione automatica campi in input stessa pagina PHP 0
C Statistiche pagina Facebook aziendale Social Media Marketing 2
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
MarcoGrazia Pagina canonical SEO e Posizionamento 0
elpirata Update dinamico informazioni scritte in una pagina php jQuery 11
C Vendo pagina FB Presentati al Forum 0
A [CERCO] Pagina Instagram Annunci servizi di Social Media Marketing 1
L Cerco pagina Instagram 1-2k Annunci servizi di Social Media Marketing 4

Discussioni simili