Visualizzazione dei risultati da 1 a 10 su 10

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2004
    Messaggi
    79

    Aiuto impaginazione CSS

    Salve a tutti,
    sono un novello dell'impaginazione con i CSS, sto cercando di imparare con la guida di html.it ma sto facendo un casino che metà basta
    sto cercando di creare il layout di cui ho allegato lo schema come immagine a questo messaggio.

    partiamo con ordine:
    _ per il BODY elimino i margini e il padding ed imposto l'altezza al 100% dello schermo:
    codice:
    body {
      background-color: #FFFFFF;
      margin: 0px;
      padding: 0px;
      height:100%;
    }
    _ seguendo i consigli della guida ho fatto un div "container che conterrà tutta la mia struttura" a cui ho dato position:absolute (per ottenere l'altezza 100%), larghezza e altezza impostate a 100%, e margini azzerati e fin qui tutto funge.
    codice:
    div#container{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
    }
    _qui inizio a creare le prime due colonne "IMMG" e "MENU" e anche qui tutto bene anche se ho lavorato con il float (con l'altro metodo non riesco ad ottenere l'impaginazione):
    codice:
    div#immg{
      top: 0px; 
      left: 0;
      width: 45px;
      height: 100%;
      background-color:#000066;
      float:left;
    }
    
    div#menu{
      top: 0px;
      width: 190px;
      height: 100%;
      background-color:#F0F0F2;
      float:left;
    }
    _ da qui in poi inizia il casino, non riesco a completare il layout con la parte destra. in particolare non riesco a far si che la parte destra prenda tutta la parte restante dello schermo. E non riesco nemmeno a posizionare il footer.
    Ho provato così:

    codice:
     
    div#contenuto{
      top: 0px; 
      right:0px;
      width:100%;
      margin-left:235px;
      height: 100%;
      background-color:#cc0000;
      float:right;
    }
    div#header{
      top:0px;	
      height:200px;
      background-color:#DDDDDD;
    }
    L'html invece è questo:
    codice:
    <div id="container" name="container">
        <div id="fasciaLaterale">
          IMMG
        </div>
        <div id="menu">
          menu
        </div>
        <div id="contenuto">
            <div id="header">
            header
            </div>
            contenuto
        </div>
    
    </div>
    So già di aver fatto un pò di confusione, ho provato con diverse soluzioni, anche con i margini negativi ma non c'è verso di riuscire ad ottenere ciò di cui ho bisogno.
    Qualcuno ha la pazienza di darmi un aiuto?

    Grazie a tutti!
    Immagini allegate Immagini allegate
    ...::: by tonyno :::...

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.