[CSS] left center right posizionare div

**Megrecor** · 16-11-2009, 15:23

Salve a tutti sto diventando matto io ho questo menu è vorrei ottenere il risultato come nel immagine,qualcuno mi può aiutare

codice:

<div id="navigazione">
	<div id="left">[img]images/left_48.png[/img]</div>
	<div id="home">[img]images/home_48.png[/img]</div>
	<div id="right">[img]images/right_48.png[/img]</div>
</div>

**Megrecor** · 16-11-2009, 15:29

ecco l'immagine scusate

**fcaldera** · 16-11-2009, 15:50

ne può venir fuori un utile esercizio

1) le immagini devono essere in formato .png o potrebbero essere gif con colore bianco di trasparenza?
2) che compatibilità browser devi avere?

**fcaldera** · 16-11-2009, 16:09

se seguiamo la strada delle gif e doctype xhtml, possiamo scrivere una navigazione semantica (dove l'informazione non è veicolata dalle immagini) e usare una sprite come immagine

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>


        <style type="text/css">

        ul {
            height          : auto;
            overflow        : hidden;
        }

        ul li {
            background-image    : url(nav.gif);
            background-repeat   : no-repeat;
            overflow            : hidden;
            line-height         : 100em;
        }

        ul li,
        ul a {
            float               : left;
            display             : inline;
            width               : 53px;
            height              : 53px;
        }

        #prev   { background-position : 0 -53px; }
        #next   { background-position : 0 -106px; }


        #start  { margin : 0 50px;} /* definisce lo spazio tra le icone

        </style>
    </head>

<body>

    <ul>
        <li id="prev">Indietro
        <li id="start">Indice
        <li id="next">Avanti[/list]

</body>
</html>

l'immagine utilizzata è allegata a questo post (salvala con nome 'nav.gif')

**Megrecor** · 16-11-2009, 16:12

1) le immagini devono essere in formato .png o potrebbero essere gif con colore bianco di trasparenza?

Credo che vadano bene tutti i formati che supportino la trasparenza.Io ho trovato delle icone in png che credo siano perfette

2) che compatibilità browser devi avere?

Vorrei la più ampia possibile,pure se non credo che mai nessuno visiterà questo sito,e bene imparare come fare

**fcaldera** · 16-11-2009, 16:16

stesso codice validato in html5 (con supporto a IE)

codice:

<!DOCTYPE html>
<html lang="it">

    <head>
        <meta charset="UTF-8" />
        <title>html 5</title>
        <!--[if IE]>
            <script type="text/javascript">
            document.createElement('nav');
            </script>
        <![endif]-->

        <style type="text/css">

        ul {
            height          : auto;
            overflow        : hidden;
        }

        ul li {
            background-image    : url(nav.gif);
            background-repeat   : no-repeat;
            overflow            : hidden;
            line-height         : 100em;
        }

        ul li,
        ul a {
            float               : left;
            display             : inline;
            width               : 53px;
            height              : 53px;
        }

        #prev   { background-position : 0 -53px; }
        #next   { background-position : 0 -106px; }


        #start  { margin : 0 50px;} /* definisce lo spazio tra le icone */

        </style>
    </head>

<body>

    <nav>
        <ul>
            <li id="prev">Indietro
            <li id="start">Indice
            <li id="next">Avanti[/list]
    </nav>

</body>
</html>

la gif che ho creato non è trasparente
creane tu una trasparente nel modo che ti ho indicato. Questo ti consentirà di fare una sola get per l'immagine anziché 3

**Megrecor** · 16-11-2009, 16:30

Io attualmente sto usando ubuntu con firefox 3.3.5 e non funziona molto bene si vedono solo 2 elementi del menù,
ci sono altre soluzioni

Discussione: [CSS] left center right posizionare div

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] left center right posizionare div

Permessi di invio