Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16
  1. #1

    Problema Layout CSS - Aiutooooo!!!

    Scusate la banalità del problema per molti di voi esperti del settore ma io che sto guida alla mano da qualche giorno sto diventanto stupido a presso a questo problema:
    Ho creato una pagina/struttura in html con relativo codice css più che altro per capire alcune cose riguardo alle regole dei fogli di stile per l'impaginazione delle varie sezioni logiche di un sito.
    La pagina ha questa struttura
    codice:
    <body> 	
    <div id="contenitore">
       <div id="intestazione">INTESTAZIONE</div>       
       <div id="contenuto">CONTENUTO</div>       
       <div id="navigazione">NAVIGAZIONE</div>       
       <div id="footer">FOOTER</div>            
    </div> 
    </body>
    Questo invece sono le regole CSS
    codice:
    body {
    	margin: 0px;
    	padding: 0px;
    	background-color: #FF0;
    }
    #contenitore {
    	background-color: #0CF;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	width: 800px;
    	height: 100%;
    	position: relative;
    	border-top-width: 5px;
    	border-right-width: 5px;
    	border-bottom-width: 5px;
    	border-left-width: 5px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    }
    #contenitore #intestazione {
    	height: 100px;
    	background-color: #00F;
    	float: left;
    	width: 800px;
    }
    #contenitore #contenuto {
    	background-color: #0F0;
    	width: 600px;
    	float: left;
    	min-height: 600px;
    }
    #contenitore #navigazione {
    	width: 200px;
    	background-color: #0CF;
    	float: left;
    	min-height: 600px;
    }
    #contenitore #footer {
    	background-color: #F0F;
    	float: left;
    	width: 800px;
    	height: 100px;
    }
    Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
    Ciaooo!!!

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    dipende dal float non interrotto, serve un clear. Fra l'altro inutile il float sul footer, toglilo e aggiungi invece, sempre in footer, un clear:both

  3. #3
    Originariamente inviato da Prill
    dipende dal float non interrotto, serve un clear. Fra l'altro inutile il float sul footer, toglilo e aggiungi invece, sempre in footer, un clear:both
    Ciao Prill,
    grazie mille per la risposta!!
    Ho tolto il float sul footer e gli ho assegnato un clear both ma il problema ancora non viene risolto...dovrei agire su qualche altro parametro?!

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    aggiorna la pagina (o svuota la cache) e vedrai che il contenitore si allunga a inglobare tutti i div

    questo il codice:

    codice:
    #contenitore #footer {
    	background-color: #F0F;
    	clear: both;
    	width: 800px;
    	height: 100px;
    }

  5. #5
    Originariamente inviato da Prill
    aggiorna la pagina (o svuota la cache) e vedrai che il contenitore si allunga a inglobare tutti i div

    questo il codice:

    codice:
    #contenitore #footer {
    	background-color: #F0F;
    	clear: both;
    	width: 800px;
    	height: 100px;
    }
    Non riesco a capire...su firefox 19 continua a non funzionarmi!!
    Su iexplorer 9 funziona l'inglobamento del contenitore rispetto agli altri div ma non funziona il centramento del contenitore per mezzo dei margini left-right impostati su Auto e se non tolgo il border al contenitore il div navigazione mi slitta sotto al div contenuto
    Sono un po' confuso!!

    p.s. tra l'altro, ho provato a riaprire su ie9 la pagina esattamente con le impostazioni iniziali che avevo postato (senza clear both ma con float left su footer) e l'inglobamento del div contenitore nei confronti degli altri div funziona comunque

  6. #6
    Spero di aver capito il problema

    Partendo dal codice originale ho semplicemente sostituito in #contenitore {

    la riga

    height: 100%;

    con

    overflow: hidden;

    Può andare?

  7. #7
    Originariamente inviato da pascalman
    Spero di aver capito il problema

    Partendo dal codice originale ho semplicemente sostituito in #contenitore {

    la riga

    height: 100%;

    con

    overflow: hidden;

    Può andare?
    Si, sei un grande !!!
    Il problema allora era che impostavo - come alcune guide consigliavano - un height al 100%.
    Ho provato anche senza impostare overflow:hidden e funziona comunque. C'è un motivo particolare perchè inserivi overflow:hidden?
    Come mai, se non è troppo, su ie9 l'accentramento del contenitore tramite margin left right su auto non funziona? C'è un modo diverso di accentrare i div su ie9???

  8. #8
    Beh, hidden lo uso quasi sempre, poichè mi evita che il contenuto eccedente vada al di là del div (in altezza)
    Gioca con questo ;-)

    A me su IE9 quel codice si vede centrato.
    Se vuoi centrare un div devi impostare la proprietà width e inserire margin: 0 auto;.

    Ciao

  9. #9
    Originariamente inviato da pascalman
    Beh, hidden lo uso quasi sempre, poichè mi evita che il contenuto eccedente vada al di là del div (in altezza)
    Secondo te, col fatto che il div #contenuto ha un'altezza non impostata e quindi suppongo si comporti come se l'avessi impostata su auto, ha senso o comunque sarebbe superfluo impostare il valore overflow? (te lo chiedo solo per capire meglio come funzionano le cose )

    A me su IE9 quel codice si vede centrato.
    Se vuoi centrare un div devi impostare la proprietà width e inserire margin: 0 auto;.

    Ciao
    A me continua a visualizzarmelo non centrato
    Eppure ho impostato i css per il #contenitore così
    codice:
    #contenitore {
    	background-color: #F00;
    	margin: 0px auto;
    	width: 800px;
    }

  10. #10
    Io se tolgo overflow: hidden il contenitore principale diventa alto una dozzina di pixel.

    Ti passo tutto il codice che ho, vedi se riesci a capire se nel tuo codice si nasconde qualche errore:
    codice:
    <!DOCTYPE html>
    	<head>
        <meta charset="UTF-8" />
        <style>
            body {
    					margin: 0px;
    					padding: 0px;
    					background-color: #FF0;
    				}
    				#contenitore {
    					background-color: #0CF;
    					margin: 0 auto;
    					width: 800px;
    					overflow: hidden;
    					position: relative;
    					border-top-width: 5px;
    					border-right-width: 5px;
    					border-bottom-width: 5px;
    					border-left-width: 5px;
    					border-top-style: solid;
    					border-right-style: solid;
    					border-bottom-style: solid;
    					border-left-style: solid;
    				}
    				#contenitore #intestazione {
    					height: 100px;
    					background-color: #00F;
    					float: left;
    					width: 800px;
    				}
    				#contenitore #contenuto {
    					background-color: #0F0;
    					width: 600px;
    					float: left;
    					min-height: 600px;
    				}
    				#contenitore #navigazione {
    					width: 200px;
    					background-color: #0CF;
    					float: left;
    					min-height: 600px;
    				}
    				#contenitore #footer {
    					background-color: #F0F;
    					float: left;
    					width: 800px;
    					height: 100px;
    				}
    
        </style>
    </head>
    <body> 	
    	<div id="contenitore">
    		 <div id="intestazione">INTESTAZIONE</div>       
    		 <div id="contenuto">CONTENUTO
    		 	
    
    Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!Il problema è che quando inserisco un testo bello lungo nella sezione #contenuto, questo si allunga in altezza fino a dove termina il testo inserito mentre INVECE il #contenitore rimane sempre di altezza fissa (=altezza della viewport browser) e quindi inferiore. Vorrei che il #contenitore seguisse l'altezza del contenuto e del #footer che gli sta subito sotto ma non so proprio come diavolo si faccia. Sono due giorno che ci sto dietro; ho letto svariate guide che trattano anche di questo ma non riesco proprio a capire cos'è che sbaglio 
    Potreste consigliarmi?!! Ve ne sarei veramente molto grato!!
     Ciaooo!!!</p></div>       
    		 <div id="navigazione">NAVIGAZIONE</div>       
    		 <div id="footer">FOOTER</div>            
    	</div> 
    </body>
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.