menu

[gigigi]

salve a tutti
sto realizzando questo sito...ed ho qualche problema col menu.
praticamente partendo da sx il primo bottone è attaccato al margine... i seguenti bottoni son distanziati tra loro circa 8px ed ho messo il margin-right:8px al[*]. l'ultimo bottone xo' deve rimanere attaccato al margine dx!
per ottenere questo mi son creato un li.dx con float:right; e margin:0px; ma mi tiene comunque il margin8 del li principale.
qualcuno mi sa dare una mano please?!?!

sito

CSS

[gigigi]

nessuno?
almeno come linea di pensiero è giusto?

[gigigi]

preferite vedere il codice? lo posto subito!
----------------------HTML-----------------
<div id="navigation"><ul>
<li class="dx">[img]imgs/6.gif[/img]
[*][img]imgs/1.gif[/img][*][img]imgs/2.gif[/img][*][img]imgs/3.gif[/img][*][img]imgs/4.gif[/img][*][img]imgs/5.gif[/img]
[/list]</div>
-----------------------------------------------

--------------CSS-------------------------------
#navigation ul{
padding: 0;
list-style-type: inherit;
display:inline;
margin:0px;
}
#navigation li{
display: inline;
margin-right:8px;
padding: 0;
display:inline;
}
#navigation a{
color:#EBE9E9;
font: normal bold 1.2em/2.5em arial,sans-serif;
text-decoration: none;
border-top:1px solid #333333;
margin:0px;
padding:0px;
background-color:#595D5C;
}
#navigation a:hover{
color: #fff;
text-decoration: none;
}
#navigation a#activelink{
color: #033;
text-decoration: none;
}
li.dx{
float:right;
margin:0px;
padding:0px;
position:relative;
text-align:right;
}
img{
border:0px;
margin:0px;
}
-----------------------------------------

dai dai dai
sto sbagliando molto?!?
un consiglio...
grazie
gigigi

[gigigi]

ci sono quasi... ma ho tolto gli <ul>[*]
ora ho fatto così
---------------------HTML---------------------
<div id="navigation">
<div id="dx">[img]imgs/6.gif[/img]</div>
<div id="menu">[img]imgs/1.gif[/img]</div>
<div id="menu">[img]imgs/2.gif[/img]</div>
<div id="menu">[img]imgs/3.gif[/img]</div>
<div id="menu">[img]imgs/4.gif[/img]</div>
<div id="menu">[img]imgs/5.gif[/img]</div>
</div>
------------------CSS----------------------------
#menu{
margin-right:7px;
padding: 0;
border-top:1px solid #333333;
display:inline;
}
#navigation a{
color:#EBE9E9;

margin:0px;
padding:0px;
background-color:#595D5C;
border-right:1px solid #595D5C;
}
#navigation a:hover{
color: #fff;
text-decoration: none;
}
#navigation a#activelink{
color: #033;
text-decoration: none;
}
#dx{
float:right;
padding:0px;
border-top:1px solid #333333;
}

img{
border:0px;
margin:0px;
}

xo' se andate a vedere il sito ora il bottone n°6 si allinea bene a dx ma rimane un px piu' basso rispetto agli altri... xke?!?!?

[gigigi]

... dovrei averi risolto....

tnx lo stesso!

[pierofix]

Aspetta! Sei andato di malino in peggio! E' che adesso non ho proprio tempo di spiegarti gli errori e le soluzioni.

[gigigi]

ops... veramente?

quando hai tempo magari dacci un'occhiata... nel frattempo proseguo coi tagli!!

grazie!
il sito è online all'indirizzo di sopra!

[pierofix]

Come al solito, procediamo per passi successivi.

Partiamo dal definire una struttura di markup che rispecchi il significato del contenuto e che usi i tag appropriati. Una lista non ordinata, in questo caso, può andar bene:

<ul id="navigazione">[*]Primo[*]Secondo[*]Terzo[*]Quarto[*]Quinto[*]Sesto[/list]

Nota innanzitutto come io abbia usato dei link testuali piuttosto che delle immagini. Questo perchè la soluzione va più incontro alle esigenze dell'accessibilità dei contenuti web.

Prova a pensare, ad esempio, ad una persona non vedente che arriva sul tuo sito: il suo lettore di schermo non sarebbe in grado di capire a cosa ogni immagine si riferisca. Al contrario, un testo puro è in grado di riconoscerlo e leggerlo.

A dir la verità avresti anche potuto attribuire ad ogni immagine un testo alternativo (attributo 'alt'): esso deve riportare lo stesso testo stampato sull'immagine. Un esempio:

[img]img/home.png[/img]

Io, comunque, rimango dell'idea che il link testuale sia più adatto.

Ora mi dirai: "Ma io voglio i pulsanti fighi! Voglio le immagini!". Perfetto, nessun problema. Useremo una tecnica chiamata image-replacement: essa consiste nel rendere invisibile il testo del link e nell'inserire l'immagine come sfondo dello spazio rimasto "vuoto". Quindi, ad esempio:

#navigazione a
{
   display:block;
   width:200px; height:40px; /* Dimensioni dell'immagine */
   text-indent:-999em;
   text-decoration:none;
   background:url('img/home.png') no-repeat 50% 50%;
}

Se uno ha i CSS abilitati vedrà semplicemente l'immagine cliccabile, altrimenti vedrà i suoi bei testi. Chi naviga senza CSS? Oltre ad una persona non vedente, ad esempio, possiamo portare il caso di coloro che navigano con browser testuali, come Lynx. Inoltre, forse anche un motore di ricerca attribuisce un peso più influente ad un testo correttamente marcato piuttosto che ad un'immagine.

Se fin qui ti è tutto chiaro possiamo proseguire nella risoluzione.

[gigigi]

si... tutto chiaro.
una sola domanda

se utilizzo la image-replacement dovrò doppiare questa parte
#navigazione a
{
display:block;
width:200px; height:40px; /* Dimensioni dell'immagine */
text-indent:-999em;
text-decoration:none;
background:url('img/home.png') no-repeat 50% 50%;
}

tante volte quanti sono i bottoni giusto?

[pierofix]

Non completamente. Farai una cosa del genere:

#navigazione a 
{ 
   display:block; 
   width:200px; height:40px; /* Dimensioni dell'immagine */ 
   text-indent:-999em; 
   text-decoration:none;
   background:no-repeat 50% 50%; 
}
#link1 { background-image:url('link1.png') }
#link2 { background-image:url('link2.png') }
/* ... */

Ovviamente attribuirai un id ad ogni link del menù.

Adesso sono molto impegnato e non ho tempo di passare alla "fase 2": forse domani mattina trovo un attimo, ok? Nel frattempo, puoi preparare e postare uno schemino che illustri graficamente il risultato finale che vuoi ottenere?