• A
    User Attivo •

    Menu: Pulizia codice e soluzione a dei bug

    Ciao ragazzi

    Premetto che con i css sto inziando ora a lavorarci un pò, quindi sono assolutamente bianco in materia. Volevo utilizzare questo menù già pronto:

    cssplay.co.uk/menus/pro_dropline2-5.html

    Il problema è che, vorrei togliere tutto il css che riguarda i submenu, perchè non mi servono. A me serve solamente la barra principale e l'effetto al passaggio del mouse.
    Inoltre, come dice anche l'autore, questo menu da qualche problema ed in particolare: non può essere centrato nella pagina e i bug sono frequenti (come ho testato anch'io) se si aggiunge qualche link in più.

    C'è il modo di renderlo il più semplice possibile ed eliminare questi problemi?? Se avete altri esempi di questo tipo, ve ne sarei molto grato.

    Ultima domanda: come posso rendere i bordi laterali di questa barra arrotondati? (come il menu di giorgiotave.it). Non è necessario ma è anche per curiosità mia.

    Vi posto il codice del menu:

    CSS

    
.pro_line3 {
height:36px; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:11px;
z-index:500;
}

.pro_line3 .select {
margin:0; 
padding:0 0 0 20px; 
list-style:none; 
white-space:nowrap;
}

.pro_line3 li {
float:left;
background:url(line/blank_over_bw.gif);
}

.pro_line3 .select a {
display:block; 
height:36px; 
float:left; 
background: url(line/blank_bw.gif); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:25px; 
white-space:nowrap; 
color:#ddd;
}

.pro_line3 .select a b {
display:block; 
padding:0 30px 10px 15px; 
background:url(line/blank_bw.gif) right top;
}

.pro_line3 .select a:hover, 
.pro_line3 .select li:hover a {
background: url(line/blank_over_bw.gif); 
padding:0 0 0 15px;
line-height:27px;
cursor:pointer; 
color:#fff;
}

.pro_line3 .select a:hover b, 
.pro_line3 .select li:hover a b {
display:block; 
padding:0 30px 9px 15px; 
background:url(line/blank_over_bw.gif) right top; 
cursor:pointer;
}

.pro_line3 .sub {
display:none;
}

/* IE6 only */
.pro_line3 table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.pro_line3 .sub {
margin:0; 
padding:0 0 0 60px;
list-style:none;
}
.pro_line3 .sub li {background:transparent;}

.pro_line3 .select :hover .sub {
height:18px;
display:block; 
position:absolute;
float:left;
width:750px;
top:28px; 
left:0; 
text-align:center;
}

.pro_line3 .select :hover .sub li a 
{display:block;height:18px; line-height:16px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;}

.pro_line3 .select :hover .sub li a:hover 
{color:#000; background:#e8e8e8; border-color: #fff #333; line-height:15px;}
```HTML
[html]<div class="pro_line3">
<ul class="select"><li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="#nogo">Fishermen at Sea</a></li>
        <li><a href="#nogo">The Shipwreck</a></li>
        <li><a href="#nogo">The Vale of Ashburnham</a></li>
        <li><a href="#nogo">Crossing the Brook</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="#nogo">The Hay Wain</a></li>
        <li><a href="#nogo">Brighton Beach</a></li>
        <li><a href="#nogo">Malvern Hall</a></li>
        <li><a href="#nogo">Salisbury Cathedral</a></li>
        <li><a href="#nogo">Weymouth Bay</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="#nogo">The Girl with Green Eyes</a></li>
        <li><a href="#nogo">The Dream</a></li>
        <li><a href="#nogo">Woman in Blue</a></li>
        <li><a href="#nogo">The Yellow Dress</a></li>
        <li><a href="#nogo">The Piano Lesson</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="#nogo">The Large Bathers</a></li>
        <li><a href="#nogo">Onions and Bottles</a></li>
        <li><a href="#nogo">Mardi Gras</a></li>
        <li><a href="#nogo">Still Life</a></li>
        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>[/html]

Grazie in anticipo :)
    0
  • B
    User Attivo •

    Secondo me è molto meglio se crei il menu da solo partendo da zero.
    E' un semplice menu orizzontale fatto attraverso una lista e con delle immagini di sfondo (se proprio le immagini prendile da quel sito...).
    Se vuoi i bordi arrotondati dovrai modificare le immagini di background e renderle arrotondate.
    Un tutorial per il menu lau.csi.it/realizzare/accessibilita/fogli_di_stile/liste/lista_vs_menu.shtml

    0
Effettua l'accesso per rispondere