invertire ordine dei div

n0nsense

invertire ordine dei div

Ciao a tutti,
non so come risolvere questo problema: ho 5 div, tutti con width=100% posti in questa maniera

ma che vorrei far apparire in questo ordine usando i fogli di stile

Ho provato per disperazione a riunire i div 2,3,4 in un altro div per ordinarli al suo interno, ma il doverli mantenere con width=100% mi rende impossibile ordinarli.
Qualche suggerimento?

cibino

dovrei vedere il css...

dusy

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

n0nsense

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>

cibino

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

cibino

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

n0nsense

scusate, doppio post.

n0nsense

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.

cibino

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>
*

n0nsense

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

cibino

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

n0nsense

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!