• Bannato Super User

    dovrei vedere il css...


  • User Attivo

    usa il z-index...
    se intendi la sofrapposizione...


  • User Newbie

    Intendevo allineare i div verticalmente.
    Questo è il codice base, l'ho ridotto all'osso come il css per capire come uscirne

    
    <html>
    <body>
    <div id="header">header</div>
    <div id="wrapper">
       <div id="main_content">main content</div>
       <div id="featured_articles">featured articles</div>
       <div id="navbar">navigation bar</div>
    </div>
    <div id="sidebar">sidebar and footer</div>
    </body>
    </html>
    
    

    Il Wraper l'ho aggiunto per disperazione, una sorta di divide et impera.
    Questa è l'ultima versione del CSS, che ancora non funziona:

    
    body {
      margin:2px;  min-width: 600px;
    }
    #header {
        width:100%;
        clear:both;
        }
    
    #navbar {
        background-color:#0FF;
        float:left;
        width:100%
        }
    
    #main_content { 
        background-color:#FF9900;
        float:right;
        width:100%;
        }
    
    #featured_articles {
        background-color:#ffffcc;
        clear:both;
        width:100&
        }
    #sidebar {
        width:100%;
        clear:both;
        }
    
    

    L'effetto che vorrei ottenere è che l'utente, con ma meglio sarebbe senza il Wrapper, veda i div in questo ordine:

    
    <html>
    <body>
    <div id="header">header</div>
    <div id="main_content">main content</div>
    <div id="featured_articles">featured articles</div>
    <div id="navbar">navigation bar</div>
    <div id="sidebar">sidebar and footer</div>
    </body>
    </html>
    
    

  • Bannato Super User

    ma in pratica vuoi 5 righe una sotto l'altra?


  • Bannato Super User

    questo è quello che va nel body
    <body>
    <div id="container">
    <div id="header">header</div>
    <div id="main_content">main_content</div>
    <div id="featured_articles">featured_articles</div>
    <div id="navbar">navbar</div>
    <div id="sidebar">sidebar</div>
    </body>

    e questo è il css
    <style>
    #container{
    width:100%;
    position:absolute;
    }
    #header{
    width:100%;
    margin-top:1px;
    background-color:#FF00FF;
    }
    #main_content{
    width:100%;
    margin-top:1px;
    background-color:#00FFFF;
    }
    #featured_articles{
    width:100%;
    margin-top:1px;
    background-color:#0000FF;
    }
    #navbar{
    width:100%;
    margin-top:1px;
    background-color:#FFFF00;
    }
    #sidebar{
    width:100%;
    margin-top:1px;
    background-color:#FF0000;
    }
    </style>

    per vedere se è come volevi te, puoi cliccare [url=http://www.marcoziero.it/prova.html]qui


  • User Newbie

    scusate, doppio post.


  • User Newbie

    sì, è esattamente come volevo: 5 righe una sotto l'altra....solo che deve apparire navbar al posto di main-content e viceversa:

    • header
    • navbar
    • featured-articles
    • main-content
    • sidebarprovo a raggruppare navbar e featured-articles, vediamo se riesco.

  • Bannato Super User

    e allora fai semplicemente così:
    *<body>
    <div id="container">
    <div id="header">header</div>
    <div id="navbar">navbar</div>
    <div id="featured_articles">featured_articles</div>
    <div id="main_content">main_content</div>
    <div id="sidebar">sidebar</div>
    </body>
    *


  • User Newbie

    E' da lì che sono partito.
    Ora ho bisogno che il layout resti com'è, nel senso che senza foglio di stile deve venire visualizzato in quest'ordine:

    
    <body>
    <div id="header">header</div>
    <div id="main_content"> main content</div>
    <div id="featured_articles"> featured articles</div>
    <div id="navbar">navbaa a a a a aaaaaaaaa a a aaaaar</div>
    <div id="footer">footerrrrrr</div>
    </body>
    
    

    e che invece il foglio di stile lo stampi su schermo così:

    
     <body>
     <div id="header">header</div>
     <div id="navbar">navbaa a a a a aaaaaaaaa a a aaaaar</div>
     <div id="featured_articles"> featured articles</div>
     <div id="main_content"> main content</div>
     <div id="footer">footerrrrrr</div>
     </body>
     
    

    cioè invertendo di posto navbar con main_content.
    Il CSS originale è questo

    
    body {
        margin: 5px, 0;
        min-width: 600px;
    }
    #header {
        width:98%;
        margin-left:1%;
        height:20px;
        clear:both;
        border: solid 1px;
        }
    #main_content {
        background-color:#FF9900;
        width:98%;
        height:100%;
        margin-left:1%;
        border: solid 1px;
        }
    #featured_articles {
        background-color:#ffffcc;
        width:98%;
        margin-left:1%;
        height:20px;
        border: solid 1px;
        }
    #navbar {
        background-color:#999999;
        width:98%;
        margin-left:1%;
        height: 20px;
        border: solid 1px;
        }
    #footer {
        background-color:#cc99cc;
        width:98%;
        margin-left:1%;
        height:70px;
        border: solid 1px;
        clear:both;
        }
    
    

    Il problema è tutto lì: invertire a stampa i div toccando il codice il meno possibile. Sembra una cosa da esperti, dato tutto il tempo (sprecato) che ci sto impiegando.
    Ho provato a dare float a navbar e featured-articles ma non funziona; se provo con position:absolute a navbar e featured-articles ma poi il footer giustamente scivola sotto la navbar e quindi dietro il main-content diventando invisibile.

    ...aiuto..:x


  • Bannato Super User

    ah...ora mi è più chiaro...sul codice è scritto un ordine, ma a video vuoi che ne venga fuori un altro...
    vediamo...
    🙂


  • User Newbie

    Ho risolto con questo css:

    
    #header {
        width:98%;
        margin-left:1%;
        height:20px;
        clear:both;
        border: solid 1px;
        }
    #main_content {
        background-color:#FF9900;
        margin-top:44px;
        width:98%;
        margin-left:1%;
        margin-right:-100%;
        border: solid 1px;
        float:left;
        display: block;
        }
    #featured_articles {
        background-color:#ffffcc;
        width:98%;
        margin-left:1%;
        height:20px;
        border: solid 1px;
        }
    #navbar {
        background-color:#999999;
        width:98%;
        margin-left:1%;
        height: 20px;
        border: solid 1px;
        }
    #footer {
        background-color:#cc99cc;
        width:98%;
        margin-left:1%;
        height:70px;
        border: solid 1px;
        clear:both;
        }
    
    

    che non è esattamente quello che mi aspettavo, ma potrei accontentarmi...se solo non sballasse i margini con IE!