[CSS] Mio piccolo CSS hack, mi aiutate a sistemare gli ultimi dettagli?

D4rkAng3l · 12-10-2007, 10:10

Ciao,
ho incrociato insieme due tipi di menu, per essere precisi sono partito da questo presentato su Html.it: http://css.html.it/articoli/leggi/23...umb-con-i-css/
e lvisto che volevo un menu a tendina a doppio livello (cioè che passando il mouse su ogni elemento del menu mi si apra un sotto menu verticale) l'ho incrociato con questo:
http://www.cssplay.co.uk/menus/drop_definition.html (il codice di questo lo potete vedere semplicemente visualizzando il codice dal broswer se volete).

Per me come principiante è stato un po' un lavoraccio lungo e faticoso perchè ho dovuto cambiare notevolmente la struttura logica del primo menu mantenendone comunque l'asppetto grafico e l'effeto stile rollover ma alla fine sono riuscito a tirar fuori qualcosa di pseudo decente data la mia inesperienza con i CSS, potete visualizzare quà il mio risultato: http://www.siatec.net/andrea/archivio/menu/menu.html

Vi chiedo un parere sul mio risultato e sull'idea e una manina a sistemare gli ultimi dettagli estetici che non riesco a risolvere da solo...

Le cose che non mi tornano e che vorrei cambiare sono:

1) La disposizione del testo degli elementi nel menu principale (DEMOS, MENU, LAYOUT,...) se vedete a sinistra c'è molto spazio...vorrei ottenere qualcosa come su http://www.siatec.net/andrea/archivio/megattera/ (che fa uso semplicemente del primo tipo di menu) dove i "titoli" di ogni elemento del menu sono ben centrati.

2)Quando si passa il mouse su un elemento del menu si apre una tendina blu verticale con il relativo sotto menu, con i CSS sarebbe possibile renderla lievemente trasparente tale tendina (cioè sempre blu ma con una certa trasparenza che lasci intravedere quello che c'è sotto)

Avete qualche altra idea per migliorarne l'aspetto estetico?

Vi allego il mio codice XHTML e CSS:

XHTML:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu multilivello</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link href="layout.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>

<ul id="menu">
<li>
<dl class="gallery">
	<dt class="one" id="mouse"><a href="../menu/index.html">DEMOS</a></dt>
	<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
	<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
	<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
	<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>

	<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
	<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
	<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
	<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
	<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
</li>

<li>
<dl class="gallery">
	<dt class="two" id="mouse"><a href="index.html">MENUS</a></dt>
	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>

	<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
	<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
</li>

<li>
<dl class="gallery">
	<dt class="three" id="mouse"><a href="../layouts/index.html">LAYOUTS</a></dt>

	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
	<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
</li>

<li>
<dl class="gallery">
	<dt class="four" id="mouse"><a href="../mozilla/index.html">MOZILLA</a></dt>
	<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
	<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
	<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
	<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>

	<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
	<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
	<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
</li>
</ul>

</body>
</html>

CSS:

Codice:

body{
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
}

ul#menu{
    list-style-type:none;
	padding:0;
	float: left;
	width: 760px;
	height: 40px;
    line-height: 40px;
	background: #D4D4D4 url("img/bcbk.png");
}

ul#menu li{
   float: left;
   height: 40px;
   margin: 0 0.2em 0;
   padding: 0;
   background: url("img/bcbk1.png") no-repeat top right;
   color: #777;
   text-decoration: none;
}

ul#menu li:hover{
   background-position: bottom right;
   color: #0876AC;
}

ul#menu li a{
   text-decoration: none;
}

ul#menu li a:visited{
   text-decoration: none;
}

ul#menu li dd{
   display: none;
}

ul#menu li:hover, ul#menu li a:hover{
   border: 0;
}

ul#menu li:hover dd, ul#menu li a:hover dd{
   display: block;
}

ul#menu li:hover dl, ul#menu li a:hover dl{
   padding-bottom: 20px;
}

ul#menu table{
   border-collapse:collapse; 
   padding:0; 
   margin:-1px; 
   font-size:1em;
}

ul#menu dl{
   width: 150px; 
   margin: 0; 
   padding: 0;  
   text-align:center; 
   cursor:pointer;
}

ul#menu dt{
   margin:0; 
   padding: 0; 
   font-size: 1.1em; 
   color: #fff; 
}

ul#menu dd{
   margin: 0; 
   padding: 0;
   color: #FFFFFF 
   font-size: 1em; 
   background: #47a; 
   text-align: left;

}

ul#menu dd.last{
   border-bottom: 1px solid #444;
}

.gallery dt a, .gallery dt a:visited{
   display:block; 
   color:#444;
}

.gallery dd a, .gallery dd a:visited{
   color:#fff; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px;
   background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}

.gallery dd a:hover{
   background: #258 url(arrowr.gif) no-repeat 11px 10px; 
   color:#9cf;
}

Grazie mille
Andrea

isAlreadyInUse · 12-10-2007, 10:19

Codice:

body{
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
}

ul#menu{
    list-style-type:none;
	padding:0;
	float: left;
	width: 760px;
	height: 40px;
    line-height: 40px;
	background: #D4D4D4 url("img/bcbk.png");
}

ul#menu li{
   float: left;
   height: 40px;
   margin: 0 0.2em 0;
   padding: 0;
   background: url("img/bcbk1.png") no-repeat top right;
   color: #777;
   text-decoration: none;
}

ul#menu li:hover{
   background-position: bottom right;
   color: #0876AC;
}

ul#menu li a{
   text-decoration: none;
}

ul#menu li a:visited{
   text-decoration: none;
}

ul#menu li dd{
   display: none;
}

ul#menu li:hover, ul#menu li a:hover{
   border: 0;
}

ul#menu li:hover dd, ul#menu li a:hover dd{
   display: block;
}

ul#menu li:hover dl, ul#menu li a:hover dl{
   padding-bottom: 20px;
}

ul#menu table{
   border-collapse:collapse; 
   padding:0; 
   margin:-1px; 
   font-size:1em;
}

ul#menu dl{
   width: 150px; 
   margin: 0; 
   padding: 0;  
   text-align:center; 
   cursor:pointer;
}

ul#menu dt{
   margin:0; 
   padding: 0; 
   font-size: 1.1em; 
   color: #fff; 
}

ul#menu dd{
   margin: 0; 
   padding: 0;
   color: #FFFFFF 
   font-size: 1em; 
   background: #47a; 
   text-align: left;
   
   filter:alpha(opacity=5);
	-moz-opacity:.5;
	opacity:.5;

}

ul#menu dd.last{
	
   border-bottom: 1px solid #444;
}

.gallery dt a, .gallery dt a:visited{
   display:block; 
   color:#444;
   
}

.gallery dd a, .gallery dd a:visited{
	
   color:#fff; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px;
   background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}

.gallery dd a:hover{
   background: #258 url(arrowr.gif) no-repeat 11px 10px; 
   color:#9cf;
}

D4rkAng3l · 12-10-2007, 10:32

oi grazie, quando torno a casa dall'uni lo provo :-P
cmq come idea che te ne pare?

isAlreadyInUse · 12-10-2007, 10:33

Si carino, bisonga vedere l'effetto nell'insieme...

P.S. Mi riservo il 10% di diritto fisso sui ricavi

D4rkAng3l · 12-10-2007, 10:37

Quote:

Originariamente inviato da isAlreadyInUse

Si carino, bisonga vedere l'effetto nell'insieme...

P.S. Mi riservo il 10% di diritto fisso sui ricavi

ehh guarda rivavi nun ce ne sò perchè più che altro era un mio esperimento dato che ieri non avevo nulla da fare e volevo saggiare le mie effettive capacità (e devo dire che son rimasto soddisfatto perchè non pensavo che sarei riuscito a tirar fuori molto).
Però poi visto che volevo scrivere una piccola guida su come realizzare questo tipo di menu sicuramente ti metterò tra i ringraziamenti, anzi se hai una pagina web e vuoi che te la linko magari mandamela :-)

Ciao e grazie
Andrea

D4rkAng3l · 12-10-2007, 17:32

paticamente perfetto,
questo è il codice che usi per fare la trasparenza?

Codice:

   filter:alpha(opacity=5);
   -moz-opacity:.5;
   opacity:.5;

L'unica cosa...è possibile rendere semi trasparente solo lo sfondo e maggiormente visibile le scritte testuali?

Tnx
Andrea

isAlreadyInUse · 12-10-2007, 18:15

Dovresti metterlo su 2 div diversi

D4rkAng3l · 12-10-2007, 18:28

Quote:

Originariamente inviato da isAlreadyInUse

Dovresti metterlo su 2 div diversi

Intendi il testo in div a se?

isAlreadyInUse · 12-10-2007, 18:32

E si

D4rkAng3l · 12-10-2007, 18:35

per ora basta e avanza così, poi se un giorno avrò altro tempo libero magari provvederò :-)

isAlreadyInUse · 12-10-2007, 18:35

Infatti è comunque leggibile...

D4rkAng3l · 12-10-2007, 19:45

Giurin giurello (mi caschi il pisello) questa è veramente l'ultima cosa che ti chiedo su sto dannato menu.

Ho deciso di inserirlo in un sito che stò facendo perchè si presta bene...prima ne avevo inserito un altro ma questo starebbe molto meglio:
http://www.siatec.net/andrea/archivio/menu/menu.html

Ho dovuto aggiungere una voce...quindi "andava a capo" in modo abbastanza disastroso...allora ho modificato la larghezza degli elementi dl con: width: 120px; invece del vecchio valore he era 150 per farli entrare tutti...ok perfetto.

Ci sono solo due piccolissimi problemi che mi stanno creando problemi.

1)Le scritte: Home, Chi Siamo, Corsi sub, etcetc non sono più centrate e non riesco a centrarle (mi incastro con ste minchiate quando magari ho fatto cose ben più difficili doh

)

2)La tendina del menu a discesa è troppo grande e non sò come diminuirla a 120px come la dimensione del bottone ed in più la barretta più scura sul suo fondo è più corta (credo sia appunto 120 px)...dovrei avere anche la tendina larga 120px...ho provato varie cose ma non hanno avuto effetto.

E dopo di questo se mi dai una mano ti erigerò una statua !!!

D4rkAng3l · 14-10-2007, 18:39

uppino,
son 2 giorni che ci impazzisco e non riesco ad uscirne :-(((

12-10-2007, 17:32	#6
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2688	paticamente perfetto, questo è il codice che usi per fare la trasparenza? Codice: filter:alpha(opacity=5); -moz-opacity:.5; opacity:.5; L'unica cosa...è possibile rendere semi trasparente solo lo sfondo e maggiormente visibile le scritte testuali? Tnx Andrea

12-10-2007, 18:35	#11
isAlreadyInUse Senior Member Iscritto dal: Sep 2007 Messaggi: 754	Infatti è comunque leggibile... __________________ http://www.tevigroup.it/

12-10-2007, 10:32	#3
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2688	oi grazie, quando torno a casa dall'uni lo provo :-P cmq come idea che te ne pare?

12-10-2007, 10:33	#4
isAlreadyInUse Senior Member Iscritto dal: Sep 2007 Messaggi: 754	Si carino, bisonga vedere l'effetto nell'insieme... P.S. Mi riservo il 10% di diritto fisso sui ricavi __________________ http://www.tevigroup.it/

12-10-2007, 18:15	#7
isAlreadyInUse Senior Member Iscritto dal: Sep 2007 Messaggi: 754	Dovresti metterlo su 2 div diversi __________________ http://www.tevigroup.it/

12-10-2007, 18:32	#9
isAlreadyInUse Senior Member Iscritto dal: Sep 2007 Messaggi: 754	E si __________________ http://www.tevigroup.it/

12-10-2007, 19:45	#12
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2688	Giurin giurello (mi caschi il pisello) questa è veramente l'ultima cosa che ti chiedo su sto dannato menu. Ho deciso di inserirlo in un sito che stò facendo perchè si presta bene...prima ne avevo inserito un altro ma questo starebbe molto meglio: http://www.siatec.net/andrea/archivio/menu/menu.html Ho dovuto aggiungere una voce...quindi "andava a capo" in modo abbastanza disastroso...allora ho modificato la larghezza degli elementi dl con: width: 120px; invece del vecchio valore he era 150 per farli entrare tutti...ok perfetto. Ci sono solo due piccolissimi problemi che mi stanno creando problemi. 1)Le scritte: Home, Chi Siamo, Corsi sub, etcetc non sono più centrate e non riesco a centrarle (mi incastro con ste minchiate quando magari ho fatto cose ben più difficili doh ) 2)La tendina del menu a discesa è troppo grande e non sò come diminuirla a 120px come la dimensione del bottone ed in più la barretta più scura sul suo fondo è più corta (credo sia appunto 120 px)...dovrei avere anche la tendina larga 120px...ho provato varie cose ma non hanno avuto effetto. E dopo di questo se mi dai una mano ti erigerò una statua !!!

14-10-2007, 18:39	#13
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2688	uppino, son 2 giorni che ci impazzisco e non riesco ad uscirne :-(((

Strumenti
Mostra una versione stampabile Invia questa pagina per email