Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11

Discussione: Posizione DIV

  1. #1

    Posizione DIV

    Allora una serie di contenitori:

    #contenitore
    altezza 450, larghezza 1000

    che contiene:

    #colonna_sinistra
    altezza - , larghezza 500
    float: left

    #colonna_destra
    altezza 450, larghezza 500
    float: left

    sotto #contenitore si trova:

    #piede
    larghezza 1000, altezza 50

    Quando il contenuto di #colonna_sinistra determina un'altezza superiore a #colonna_destra succede che #piede si posiziona alla destra di #colonna_sinistra e sotto #colonna_destra, mentre io vorrei che si posizionasse sotto entrambi (infatti la sua larghezza equivale a colonna sinistra + colonna destra).

    Cosa devo fare?
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    applica un clearing al contenitore (cerca nel forum)

    quello più veloce consiste nel definire per #contenitore

    height: auto
    overflow: hidden;
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    non funziona....
    Anzi, il piede mi si posiziona in alto, all'altezza delle due colonne
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  4. #4
    ho cercato ma non riesco a trovare la soluzione.

    Allora, il mio schema dovrebbe essere il seguente:
    Immagini allegate Immagini allegate
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  5. #5
    mentre invece su explorer mi viene fuori in questo modo:
    Immagini allegate Immagini allegate
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  6. #6
    E su firefox in questo modo:
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  7. #7
    ops
    Immagini allegate Immagini allegate
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  8. #8
    Il codice utilizzato è il seguente:

    codice:
    #contenitore {
    	margin: 3px 5px;
    	width: 100%;
    	height: 428px;
    }
    
    
    
    #colonna_sinistra {
    	margin-right: 3px;
    	padding: 3px;
    	float: left;
    	width: 490px;
    	border: 1px ridge #DDECFF;
    	text-align: left;
    	display: block;
    	background-color: #FAF5FF;
    }
    
    #colonna_destra{
    	padding: 3px 18px;
    	float: left;
    	height: 420px;
    	width: 350px;
    	border: 1px ridge #DDECFF;
    	text-align: left;
    	display: block;
    	background-color: #FAF5FF;
    }
    
    #piede {
    	margin: 0px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-color: #9CBABD;
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	background-color: #EFF3F7;
    	vertical-align: middle;
    	width: 900px;
    }
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  9. #9
    su firefox ho risolto inserendo:

    clear: both

    su #piede, ma su explorer non c'è verso.
    www.blogotom.com
    Tecnologia mobile evoluta. News e risorse per cellulari e dispositivi multimediali.

  10. #10
    Utente di HTML.it
    Registrato dal
    Apr 2004
    Messaggi
    5
    Una regola indispensabile per un layout stabile

    Arrivati a questo punto bisogna considerare la lunghezza relativa delle colonne. Infatti, se la colonna di navigazione risulta più lunga si ottiene che il footer si dispone appena sotto i contenuti e non sotto la colonna secondaria, causando un effetto non proprio piacevole: la navigazione si sovrappone al footer.

    Per sistemare le cose basta una semplice regola, si fa in modo che il footer non abbia elementi float alla sua destra attraverso la proprietà clear:

    div#footer{
    clear: right
    }

    Con l'aggiunta di questa semplice riga di codice abbiamo sistemato le cose.

    tratto dalla lezione 19 "guida layout dei siti con i css"

    http://css.html.it/guide/lezione/68/...-con-il-float/

    non sono un esperto ma penso potrebbe servirti

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.