Elenco ordinato per colonne..

**dbseo** · 09-11-2012, 19:18

Ho un elenco (collegato a db), vorrei ordinarlo per colonne, in modo che alla 50° riga, l'elenco vada a capo sull'altra colonna.
In modo da riempiere il corpo della pagina e non scorrere km di pagina.
L'elenco è bello lungo.
Il codice che preleva le categorie è il seguente ed ho questo risultato (foto 1) :

Codice PHP:


$nomeTabellaCat = $tbl_prefix."categorie_lavoro";

                          $queryCat = "SELECT * FROM $nomeTabellaCat ORDER BY nome ASC";

                          $sqlCat = @mysql_query($queryCat);

                          if (($sqlCat) AND (mysql_num_rows($sqlCat)>0))

                          {

                            $numElementi = mysql_num_rows($sqlCat);

                            $i = 0;

                            while ($datiCat = mysql_fetch_array($sqlCat))

                            {

                                $i++;

                                $urlCat = $datiCat['url_cat'];

                                $nomeCat = htmlentities(stripslashes($datiCat['nome']));

                                if ($i < $numElementi)

                                    

                                    

                                    echo('[url="'.$docRoot.'tpl_lavoro_cat.php?cat='.$urlCat.'"]'.$nomeCat.'[/url]---');

                                else

                                    echo('[url="'.$docRoot.'tpl_lavoro_cat.php?cat='.$urlCat.'"]'.$nomeCat.'[/url]');

                                                                                                                                            

                            }

                          }

Io vorrei che venisse come in foto 2,

Ho già fatto un elenco province ordinato per regioni e ci siamo.
Nel css ho:
.col{font-weight:bold;color:#228B22;float:left;margin-left:5px;padding:0px 0;width:100px;height:250px}
.col ul{font-weight:normal;margin:0px;line-height:18px}
.col ul a{color:#FF0000;text-decoration:none}
.col ul a:hover{text-decoration:underline}

Usando: <ul class='col'> e[*]

Grazie.

**Prill** · 09-11-2012, 22:23

I css3 prevedono la divisione in più colonne, purtroppo è proprietà non ancora pienamente supportata (vedi Explorer). Per Firefox, Safari, Chrome e Opera basterebbe assegnare all'ul un'altezza atta a contenere le 50 righe e una larghezza per le colonne, il cui numero il browser andrebbe a calcolare in base ai contenuti, esempio:

codice:

<style type="text/css"> 
ul {
	margin:o;
	padding:0;
	list-style-type:none;
	-moz-column-width: 150px;
	-webkit-column-width: 150px;
	column-width: 150px;
	height: 50px;
}
</style>
</head>
<body>
<ul>[*]voce1[*]voce2[*]voce3[*]voce4[*]voce5[*]voce6[*]voce7[*]voce8[*]voce9[*]voce10[*]voce11[*]voce12
[/list]
</body>
</html>

**dbseo** · 12-11-2012, 10:31

Il problema è che la maggior parte degli utenti usa IE

**Prill** · 12-11-2012, 16:38

Coi soli css credo questa sia l'unica soluzione. Potresti altrimenti, se il problema è solo evitare che l'elenco si estenda troppo in altezza, assegnargli un' altezza specifica e un overflow:auto (o inserirlo in un div con altezza e overflow:auto) in modo da scorrere i dati all'interno del loro contenitore (e questa potrebbe essere anche solo la soluzione adottata per Explorer con specifico foglio di stile con commenti condizionali).
Una soluzione unica e crossbrowser sarebbe possibile con un qualche script che contasse i dati e li inserisse a gruppi di 50 in contenitori affiancati, ma questo esula dal forum css

**dbseo** · 12-11-2012, 18:41

In pratica dici di mettere una barra di scorrimento?
Noo viene bruttissimo...

**Prill** · 12-11-2012, 19:52

No, ti prospetto ciò che è possibile fare coi css. Esistono script di varia natura che permettono di simulare le colonne, per quanto si vada ad appensantire il codice, cerca su google "css columns ie" e simili.

**dbseo** · 13-11-2012, 15:59

Con il codice allegato ottengo questo risultato:

Codice PHP:


<?php

                        $i = 0;

                        echo "<ul class='col'>";

                        $nomeTabellaCat = $tbl_prefix."categorie_lavoro";

                          $queryCat = "SELECT * FROM $nomeTabellaCat ORDER BY nome ASC";

                          $sqlCat = @mysql_query($queryCat);

                          if (($sqlCat) AND (mysql_num_rows($sqlCat)>0))

                    // {      

                        while ($datiCat = mysql_fetch_array($sqlCat))

                        {

                            $urlCat = $datiCat['url_cat'];

                            $nomeCat = htmlentities(stripslashes($datiCat['nome']));

                            echo('[*][url="'.$docRoot.'tpl_lavoro_cat.php?cat='.$urlCat.'"]'.$nomeCat.'[/url]');

                            $i++;

                            //

                            // echo "<ul>";

                            // $queryCat = "SELECT * FROM $nomeTabellaCat ORDER BY nome ASC";

                              // $sqlCat = @mysql_query($queryCat);

                              // if (($sqlCat) AND (mysql_num_rows($sqlCat)>0))

                            // {

                            // while ($datiCat = mysql_fetch_array($sqlCat))

                            // {

                            // echo '[*][url="'.$docRoot.'tpl_lavoro_cat.php?cat='.$urlCat.'"]'.$nomeCat.'[/url]';

                            // $i++;

                            // }

                            //

                            echo "[/list]";

                            if($i == 15)

                                {

                                $i = 0;

                                echo "[/list]<ul class='col'>";

                                }

                            // }

                            echo "[/list]"; 

                        }    

                    // }        

                        ?>

Forse ci siamo...ma

**Prill** · 13-11-2012, 18:34

La larghezza delle colonne va impostata in base ai suoi contenuti, quale è il tuo css?

Ps.: dai magari l'html risultante invece che il codice php

**dbseo** · 13-11-2012, 19:14

Ho risolto usando questo codice:
http://forum.html.it/forum/showthrea...=&pagenumber=3

Devo solo risolvere un errore di query

Discussione: Elenco ordinato per colonne..

Strumenti discussione

Ricerca discussione

Visualizza

Elenco ordinato per colonne..

Permessi di invio