Modifica Menu CSS

lunedì 28 aprile 2008 - 17.21

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

squilibrio Profilo | Expert

527 messaggi | Data Invio: lun 28 apr 2008 - 17:21

Ciao a tutti, ho creato un menu di questo tipo

<ul id="Navigation-Main">
<li class="Cur Stile1"><strong href="index.aspx" onmouseover="VisualizzaMenu('',1)">VVVV</strong></li>
<li><a href="..." onmouseover="VisualizzaMenu(this,2)">UUUU</a></li>
<li><a href="..." onmouseover="VisualizzaMenu(this,3)">DDD</a></li>
<li><a href="..." onmouseover="VisualizzaMenu(this,4)">RRR</a></li>
<li><a href="..." onmouseover="VisualizzaMenu(this,5)">GGG</a></li>
<li><a href="... onmouseover="VisualizzaMenu(this,6)">RRRR</a></li>
<li><a href="..." onmouseover="VisualizzaMenu(this,7)">TTT</a></li>
</ul>

<div id="Navigation-Secondary">
<ul style="display: block;" class="ON" id="nav1">
<li><a href="...">Home page</a></li>
<li><a href="...>Login</a></li>
<li><a href="...">Download</a></li>
</ul>

<ul id="nav2">
<li><a href="...">AAA</a></li>
<li><a href="...">BBB</a></li>
<li><a href="...">CCC</a></li>
</ul>

ora mi piacerebbe usare come sfondo la barra (bianca) che trova in corrispodenza dell'articolo a questo link

http://blogs.techrepublic.com.com/opensource/?p=200

(la barra con scritto: EMail, Save, Print, Digg)

Come posso utilizzare quella struttura (bordo grigio arrotondato e sfondo) al mio menu??

Grazie infinite per l'aiuto

Questo è il CSS del mio menu

[PHP]

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Tool bar */
#Navigation-Sponsor {
position:absolute;
display:block;
top:151px;
right:0px;
color:#CCC;
font-size:9px;
font-weight:bold;
}
#Navigation-Sponsor a{
text-decoration:none;
color:#CCC;
}
#Navigation-Sponsor a:hover{
color:#FFF;
}
#Navigation-Main{
clear:both;
margin:0;
padding:0;
height:30px;
margin-top:161px;
background: #000 url(../images_for_css/BKG_Menu-MAIN.gif) repeat-x bottom;
list-style-type: none;
}
#Navigation-Main li{
display:block;
float:left;
margin:0;
padding:0;
background: url(../images_for_css/BKG_Menu-MAIN_SX.gif) no-repeat top left;
white-space: nowrap;
}
#Navigation-Main li.Cur{
color: #fff;
background: url(../images_for_css/BKG_Menu-MAIN_SX-Cur.gif) no-repeat top left;
}
#Navigation-Main li a, #Navigation-Main li strong{
display:block;
float:left;
width:auto;
color:#FFDE00;
padding:5px 30px 11px 30px;
background: url(../images_for_css/BKG_Menu-MAIN_DX.gif) no-repeat top right;
font-size:11px;
font-weight:bold;
text-decoration:none;
}
#Navigation-Main li a:hover{
color:#FFF;
background: url(../images_for_css/BKG_Menu-MAIN_DX-Over.gif) no-repeat top right;
}
#Navigation-Main li.Cur strong{
color: #FFF;
background: url(../images_for_css/BKG_Menu-MAIN_DX-Cur.gif) no-repeat top right;
}
#Navigation-Service {
padding:2px 0 0 0;
margin:0 0 0 -6px;
height:20px;
}
#Navigation-Service li {
display:block;
float:right;
list-style-type: none;
padding: 0 5px;
font-size:10px;
border-right:1px solid #7F7F7F
}
#Navigation-Service li a, #Navigation-Service li strong{
display:block;
float:left;
text-decoration:none;
padding: 3px 0 1px 0;
color:#FFF;
}
#Navigation-Service li a:hover{
color: #FFDE00;
}
#Navigation-Service li strong{
padding-right: 1px;
padding-bottom:1px;
border-bottom:3px solid #A77A5E;
}
#Navigation-Service li a img{
margin:-2px 3px 0 3px;
border:1px solid #666;
vertical-align:middle;
}
#Navigation-Service li a:hover img{
border:1px solid #FFDE00;
}
#Navigation-Service li input {
margin:0;
padding:0 0 0 5px;
width:100px;
height:14px;
border:1px solid #666;
background:#4D4D4D;
color:#FFDE00;
font-size:10px;
vertical-align:middle;
}
#Navigation-Service li input.BlackButton {
width:52px;
height:18px;
margin-left:3px;
border-top: 1px solid #B2B2B2;
border-left: 1px solid #B2B2B2;
border-right:1px solid #666;
border-bottom:1px solid #666;
padding:0;
padding-bottom:1px;
background-color: #000;
background-image: url(../images_for_css/BKG_BlackButton.gif);
background-repeat: repeat-x;
font-size:0.9em;
line-height:0.7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
cursor: pointer;
}
#Navigation-Secondary ul{
clear:both;
display:none;
padding:5px 0 0 0;
margin:0 0 10px 0;
height:41px;
background: transparent url(../images_for_css/BKG_Menu-SECONDARY.gif) repeat-x top;
}
#Navigation-Secondary li {
display:block;
float:left;
list-style-type: none;
padding: 0;
margin:0;
font-size:10px;
border-right:1px solid #BC3338;
white-space: nowrap;
}
#Navigation-Secondary li a, #Navigation-Secondary li strong{
display:block;
width:auto;
text-decoration:none;
padding: 1px 20px 2px 20px;
color:#8B1014;
font-weight:bold;
}
#Navigation-Secondary li a:hover, #Navigation-Secondary ul.ON li a:hover{
color:yellow;
}
#Navigation-Secondary ul.ON{
display:block;
}
#Navigation-Secondary ul.ON li{
border-right:1px solid #FFDE00;
}
#Navigation-Secondary ul.ON li a {
color:#FFF;
}
#Navigation-Secondary li strong{
background-color:#000;
color:#FFF;
}
#Navigation-Level3{
list-style-type: none;
clear:both;
margin:10px 0 0 220px;
padding:0;
height:15px;
background: #E2E2E2 url(../images_for_css/BKG_Menu-LEVEL3_SX.gif) no-repeat top right;
}
#Navigation-Level3 li{
display:block;
float:left;
margin:0;
padding:0;
background: url(../images_for_css/BKG_Menu-LEVEL3_SX.gif) no-repeat top left;
white-space: nowrap;
}
#Navigation-Level3 li.Cur{
color: #fff;
background: url(../images_for_css/BKG_Menu-LEVEL3_SX-Cur.gif) no-repeat top left;
}
#Navigation-Level3 li a, #Navigation-Level3 li strong{
display:block;
float:left;
width:auto;
color:#000;
padding:1px 30px 2px 30px;
background: url(../images_for_css/BKG_Menu-LEVEL3_DX.gif) no-repeat top right;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
#Navigation-Level3 li a:hover{
color:#CB0000;
}
#Navigation-Level3 li.Cur strong{
color: #FFF;
background: url(../images_for_css/BKG_Menu-LEVEL3_DX-Cur.gif) no-repeat top right;
}

[/PHP]

koolmind Profilo | Junior Member

78 messaggi | Data Invio: sab 21 giu 2008 - 17:29

Beh... difficile rispondere in 2 parole... cmq ci provo

Devi intanto prevedere un DIV attorno al tuo menu. Tale Div dovrà essere composto così:

<div class="contenitore">
<div class="sinistra">-- immagine stondata di sinistra</div>
<div class="destra">-- immagine stondata di destra</div>
<ul>....</ul>
</div>

Nel css devi fare in modo che le due classi SINISTRA e DESTRA siano flottanti ossia abbiano l'attributo float:left (right) e il DIV contenitore deve avere lo sfondo sfumato grigio come quello del menu.

Spero di averti dato un'idea del tipo di lavoro... so che a parole è difficile da spiegarsi (e anche farlo non è esattamente un gioco da ragazzi)!

-----------------------------------------------------------------
koolmind
Dice il saggio: Non ci sono domande difficili, solo risposte che non conosciamo.

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !