Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 4 su 4
  1. 06-09-2009, 16:47 #1
    nephilim89
    nephilim89 non è in linea
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    163

    posizionare correttamente il layout

    ciao! sto cercando di dare al mio sito una struttura del genere:1 intestazione,1menu orizzontale sotto l'intestazione,2 div centrali,1 footer, il tutto contenuto in una cornice.

    <div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="body_left"></div>
    <div id="body_right"></div>
    <div id="footer"></div>
    </div>

    per cui:

    il problema è che non riesco ad affiancare i 2 div centrali,nemmeno usando float:left!
    come dovrebbero essere i valori position di tutti i div?quali div devono avere anche float?

    grazie

    p.s. ho provato a mettere un secondo contenitore:
    <div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>

    <div id="container">
    <div id="body_left"></div>
    <div id="body_right"></div>
    </div>

    <div id="footer"></div>
    </div>

    ma non ho risolto nulla!
    Rispondi quotando Rispondi quotando
  2. 06-09-2009, 17:49 #2
    emnlmn
    emnlmn non è in linea
    Utente di HTML.it L'avatar di emnlmn
    Registrato dal
    Oct 2008
    Messaggi
    263
    Posta il css che hai usato...
    Rispondi quotando Rispondi quotando
  3. 06-09-2009, 18:08 #3
    nephilim89
    nephilim89 non è in linea
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    163
    Codice PHP:
    #wrapperbg {
            background:url(img/background.gif);
            background-position:center;
            background-repeat:no-repeat;
            width: 810px;
            height: 610px;
            margin-left: auto;
            margin-right: auto;
    }


    #header {
            height:200px;
            position:relative;
    }

    #menu {
            position:relative;
            height:50px;
    }


    #bodyleft {
            overflow:hidden;
            position:relative;
            margin-left:5px;
            margin-top:5px;
            width:790px;
            height:280px;
            color:#ffffff;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            padding-left: 10px;
            padding-top: 20px;
            padding-right: 50px;
    }

    #bodyright {
            width:250px;
            height:344px;
            z-index:1;
    }

    #footer {
            position:relative;
            height:50px;
            color:#FFFFFF;
            font-family: Verdana, Arial, Helvetica, sans-serif;
    } 
    inizialmente aveva tutto position:relative
    Rispondi quotando Rispondi quotando
  4. 06-09-2009, 21:26 #4
    marco.carrieri
    marco.carrieri non è in linea
    Utente di HTML.it L'avatar di marco.carrieri
    Registrato dal
    Jul 2008
    Messaggi
    1,071
    Attenzione avevi dato id ai div differenti da quelli usati nello style.
    Inoltre anche se corretti non ottenevi lo stesso risultato indicato in figura.
    Prova a vedere se questo fa al caso tuo.

    Codice PHP:
    <html>
        <    head>
            <    title>prova</title>
            <    style type="text/css"> 
                    #wrapper 
                    { 
                        width: 800px; 
                        height: 610px; 
                } 
                    #header
                    { 
                        width:100%;
                        height:200px; 
                        background:lightgreen;
                } 
                    #menu
                    { 
                        height:100px; 
                        background:pink;
                        margin-top:20px;
                } 
                    #bodyleft
                    { 
                        float:left;
                        margin-top:20px;
                        width:600px; 
                        height:350px; 
                        background:lightblue;
                } 
                    #bodyright
                    { 
                        float:right;
                        margin-top:20px;
                        width:200px; 
                        height:350px; 
                        background:lightgray;
                } 
                    #footer
                    { 
                        margin-top:20px;
                        height:50px; 
                        background:red;
                }
            </    style>
        </    head>
        <    body>
            <    div align="center">
                <    div id="wrapper">
                    <    div id="header">HEADER</div>
                    <    div id="menu">MENU</div>
                    <    div id="container">
                        <    div id="bodyleft">BODY LEFT</div>
                        <    div id="bodyright">BODY RIGHT</div>
                        <    div style="clear:both"></div>
                    </    div>
                    <    div id="footer">FOOTER</div>
                </    div>
            </    div>
        </    body>
    </    html> 

    Carrieri Informatica - Sviluppo siti web
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.