invertire ordine dei div

**n0nsense** · 20-07-2006, 16:07

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

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>

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

<div id="1"></div>
<div id="4"></div>
<div id="3"></div>
<div id="2"></div>
<div id="5"></div>

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?

**Mich_** · 20-07-2006, 16:31

Anzitutto i nomi definiti negli id non sono validi: i nomi devono iniziare per lettera e contenere solo lettere e numeri (oltre il _).

Poi per "spostare" degli elementi devi posizionarli in modo assoluto o relativo, per cui devi conoscerne le dimensioni (nel tuo caso la dimens. vert.).

**ashtur1** · 20-07-2006, 16:37

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.

li vuoi ordinare in verticale vero? altrimenti dovresti modificare la width

Anzitutto i nomi definiti negli id non sono validi: i nomi devono iniziare per lettera e contenere solo lettere e numeri (oltre il _).

oltre a questo teoricamente basta che tu li metta in un div contenitore e poi gli dai l' ordine che vuoi e loro si posizionano verticalmente nell' ordine voluto...

**n0nsense** · 20-07-2006, 16:55

Sono stato troppo frettoloso, scusate. Il codice della pagina è questo

<div id="header"></div>
<div id="content"></div>
<div id="subcontent"></div>
<div id="navbar"></div>
<div id="footer"></div>

i div hanno tutti quanti width=100% e nessuna height prefissata; vorrei allinearli verticalmente in quest'ordine

<div id="header"></div>
<div id="navbar"></div>
<div id="subcontent"></div>
<div id="content"></div>
<div id="footer"></div>

In questo modo e senza ulteriori div, non riesco ad ordinarli. Ho provato a rachiuderli così:

...
<div id="wrapper">
<div id="navbar"></div>
<div id="subcontent"></div>
<div id="content"></div>
</div>

ho trovato qualche tutorial in merito, ma si riferisce ad impaginazioni in colonna mentre, ripeto, io devo fissare la larghezza a 100%: insomma sono fermo lì, non riesco ad invertire <div id="navbar"> con <div id="content">

**ashtur1** · 20-07-2006, 17:02

codice:

<div id="wrapper">
<div id="header"></div>
<div id="navbar"></div>
<div id="subcontent"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

in questo modo dovresti riuscire a invertire tutto...se non dovessi risolvere posta pure il css

**n0nsense** · 20-07-2006, 18:26

con il wrapper mi viene:

codice:

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

usando questo CSS

codice:

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;
    }

**ashtur1** · 20-07-2006, 19:45

come ti avevo detto in uno dei primi post se li devi affiancare orizzontalmente devi andare ad intervenire sulla width...

per cui metti tutto dento un wrapper come ti avevo scritto in precedenza e sistema la width intorno al 50% in maniera da ottenere due box affiancati che occupano tutta la larghezza perche 50%+50%=100%

**n0nsense** · 20-07-2006, 19:56

i div hanno tutti quanti width=100% e nessuna height prefissata; vorrei allinearli verticalmente in quest'ordine..

So come allinearli in orizzontale, il problema è che devo farlo in verticale e con la width al 100% non mi scorrono col float.

**ashtur1** · 20-07-2006, 20:44

scusami allora non ho capito...mica mi potresti fare un disegnino di come li vorresti o mandarmi un sito di esempio...

grazie

Discussione: invertire ordine dei div

Strumenti discussione

Ricerca discussione

Visualizza

invertire ordine dei div

Permessi di invio