top menu con immagini

**grungi** · 05-06-2008, 18:10

Ciao,
vorrei creare in css il menu orizzontale che allego.
Ho 6-7 voci in fila ma non riesco a capire come buttare il codice, il tratteggio a lato e l'asterisco insieme al testo non riesco a metterli insieme.
Qualcuno mi puoi aiutare nei primi passi?
grazie!

**noize86** · 05-06-2008, 19:29

ciao grungi.. prova così:

allora, potresti realizzarlo solamente con del testo, ma non avrebbe un grande impatto grafico, perciò ti consiglio di utilizzare delle immagini che rendono la vista più piacevole per via dell'antialiasing.. procedi così: crei un'immagine per ogni voce contente solo la scritta e l'asterisco..queste immagini ovviamente devono essere uguali in senso di altezza larghezza, cambia solo la scritta.. per il tratteggio usiamo il css..

poi usa questo codice prima dei tag </head> e tra i tag <style>:

Codice PHP:


.menu {width:auto; margin:0 2px; border-left:1px dotted #f1f1f1; display:block;float:left} .menu:hover { border-left:1px dotted #ccc;}

poi inserisci questo dopo il tag <body> nel punto in cui vuoi venga visualizzato:

Codice PHP:


 <div class="menu">[img] url dell'immagine [/img]</div>

utilizza il div con la classe menu quante volte sono le sezioni del menu..

vedi se funge così..

**gabip87** · 05-06-2008, 20:20

Originariamente inviato da noize86

Codice PHP:


 <div class="menu">[img] url dell'immagine [/img]</div>

utilizza il div con la classe menu quante volte sono le sezioni del menu..

vedi se così ti piace di più:

codice:

<ul>
   <li id="home">  home  
   <li id="voce">  voce 
   <li id="page">  page [/list]

poi procedi con l'image replacement.

se invece il testo non viene sostituito dall'immagine si possono anche eliminare gli id dei tag[*] e usare un background comune (con l'asterisco e magari anche con il bordo).

**grungi** · 06-06-2008, 17:57

purtroppo non mi esce un bel niente se non le immagini che ho ritagliato. provo ancora durante il weekend. grazie intanto, vi faccio sapere come mi e' uscito

**grungi** · 07-06-2008, 19:45

sono riuscita nel primo esempio ma mi si crea sempre uno spazietto tra le due immagini. come posso eliminarlo?
TKS

**grungi** · 07-06-2008, 20:00

per quanto riguarda il secondo consiglio, di usare un bg comune per asterisco e tratteggio:
ho messo un margin left e right alle scritte solo che la lunghezza delle parole non e' sempre la stessa e quindi mi si sfasano gli spazi.
Non mi si mantiene l'allineamento con il bg sotto.

**grungi** · 08-06-2008, 21:55

cercando di semplificare ancora, ho creato questo codice ma non riesco a mettere allineate in basso le scritte...PERCHE'? oltretutto se stringo la pagina mi si sposta tutto il menu...

...
<style>
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px dashed #bbb}
#menu li {
float:left;
margin-left:7px;
width:8em;
height:2em;
border-right:1px dashed #bbb;
text-align:left}

#menu li a:hover {
border:0; /* needed to trigger IE */
color:#bbb;
}

.menu {width:auto; margin:0 2px; border-left:1px dashed #bbb; display:block;float:left}

</style>

</head>

<body>
<ul id="menu">
[*]home[*]soluzioni[*]offerte[*]pacchetto[/list]

</body>
</html>

**gengix** · 09-06-2008, 09:13

Ti vedo un po' in alto mare.
Nel tuo codice devi definire le proprietà anche ai li non solo all'ul, inoltre richiami una classe .menu che nel codice di struttura non esiste.

Guardati bene i menu di questo sito:

http://www.cssplay.co.uk/menus/

Hai a disposizione molti esempi di menu diversi e puoi accedere anche al codice sorgente.

**grungi** · 09-06-2008, 12:13

si lo sono, in alto mare.
Grazie per l'aiuto.

**grungi** · 26-06-2008, 23:21

Originariamente inviato da grungi
Ciao,
vorrei creare in css il menu orizzontale che allego.
Ho 6-7 voci in fila ma non riesco a capire come buttare il codice, il tratteggio a lato e l'asterisco insieme al testo non riesco a metterli insieme.
Qualcuno mi puoi aiutare nei primi passi?
grazie!

Ciao! tra un weekend e l'altro sto proseguendo con il mio progetto..
Ho creato il mio menu e vorrei modificarlo.
Il tratteggio e' un css, cosi come testo e roll over. Vorrei aggiungere anche l'immagine dell'asterisco, quest'ultima non serve che sia link, basta che sia presente.

Ho provato con questo codice ma mi si sovrappone testo e asterisco.
Potete aiutarmi?
Grazie.

CSS
#section {
border-left:0.1em dashed #bbb;
height:3.5em;
line-height:3.5em;
background-image:url(img/star3.gif);
background-position:top;
background-position:left;
background-repeat:no-repeat;
padding-left: 0.5em;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11px;
clear:both
}

HTML
<div id="section">Indirizzo</div>

Discussione: top menu con immagini

Strumenti discussione

Ricerca discussione

Visualizza

top menu con immagini

Re: top menu con immagini

Permessi di invio