n0nsense

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!

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

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.

n0nsense

scusate, doppio post.

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>

n0nsense

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?

n0nsense

@n0nsense

Post creati da n0nsense