Dopasowanie paska menu

Założony przez  nicer.

wersja skryptu MyBB:1.6.14
adres forum:kbhl.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):Witam, po dodaniu ikonek font awesome, mój pasek menu (mam na myśli ten będący najwyżej) trochę się poszerzył i jakby 'rozregulował'. Rozumiem, że za to odpowiada global.css, proszę mi napisać tylko, które linijki zmienić i na jakie, aby wyglądał ładnie i równo (tak, jak tutaj: klik)

/* CSS3 menu */
.css3-menu{
    
background
url(images/leaf/menu_bg.png);   margin0 0 0 -4px
 
font-size13pxfont-familyTahomafont-weightbold
}

.
css3-menu>ul{
    
line-height40px;
    
padding0 0 0 4px;
}

.
css3-menu>ul>li{
    list-
stylenone;
    
displayinline;
    
margin0 0 0 -4px;
    
positionrelative;
}

.
css3-menu>ul>li>a>i{
    
font-size13px;
}

.
css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
    
displayinline-block;
    
padding5px 18px;
    
height40px;
    
color#EFEFEF;
    
text-decorationnone;
}

.
css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    
background#032e02;    color: #fff;
    
displayinline;
    
padding18px;
}

.
dropdown{
    
displaynone;
    
positionabsolute;
    
left0;
    
top36px;
    
background#262626;
    
font-size13px;
}

.
dropdown>li{
    
displayblock;
    list-
stylenone;
}

.
dropdown>li>a:link, .dropdown>li>a:visited{
    
displayblock;
    
color#EFEFEF;
    
width140px;
    
text-decorationnone;
    
padding3px 15px;
    
border-bottomdashed 1px #676767;
}

.
dropdown>li>a:hover, .dropdown>li>a:active{
    
background#032e02;
    
color#fff;
    
border-bottomsolid 1px #032e02;
}

.
dropdown2 {
    
displaynone;
    
positionabsolute;
    
left0;
    
top36px;
    
background#262626;
    
font-size16px;
}

.
dropdown2>li{
    
displayblock;
    list-
stylenone;

.
css3-menu>ul>li.resp-menu{
displaynone !important;
}

/* Media Queries */
@media only screen and (min-width 580px) and (max-width 800px){
    
htmlbody{
        
font-size18px;
}

.
container{
        
width96%;
        
min-width580px;
        
margin10px auto;
}

/* CSS3 menu */
    
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        
padding0 12px;
}

.
dropdown{
        
top30px;
        
font-size16px;
}

.
dropdown>li>a:link, .dropdown>li>a:visited{
        
padding0 10px;
}


}

@
media only screen and (min-width 1px) and (max-width 579px){
    
htmlbody{
        
font-size16px;
}

.
container{
        
width99%;
        
min-width177px;
        
margin5px auto;
}

/* CSS3 menu */
    
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        
padding0 16px;
}

.
dropdown{
        
top28px;
        
font-size16px;
}

.
dropdown>li>a:link, .dropdown>li>a:visited{
        
width100px;
        
padding0px 10px;
        
line-height25px;
}

.
css3-menu>ul>li.menu-li{
displaynone;
}

.
css3-menu>ul>li.resp-menu{
displayinline !important;


Mój wcześniejszy wątek, na podobny temat: klik, może się przyda, pozdrawiam.
Znajdź w global.css klasę .css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited i dodaj do niej atrybut:
vertical-align: middle;
Spowoduje to wyrównanie odwiedzonego linka w pionie.

Następnie w pliku font-awesome.css znajdź klasę .fa i usuń z niej atrybut
line-height: 1;
Bo przez niego ikonka domu w przycisku jest wyrównana do góry, zamiast do środka.

Ponadto w global.css w klasie .dropdown polecam zmienić wartość atrybutu Top z 36px na 34px, bo aktualnie masz przerwę mjiędzy przyciskiem Regulaminy a rozwijanym menu.

Tak powinien wyglądać efekt końcowy: http://screencloud.net/v/umf9
:: Akcja DZIĘKUJĘ ZA POMOC ::
Pomocy udzielam jedynie na forum. Wszystkie rzeczy wykraczające poza tą dziedzinę wykonuję odpłatnie.
Wcześniej kombinowałem na własną rękę i po ukończeniu wszystkich kroków, jakie podałeś, wygląda tak, że podświetlenie nieco wystaje, co mnie lekko irytuje. Mógłbym prosić o pomoc, nt. tego, jak je wyrównać?
Edit: w dodatku to podświetlenie ikonki 'home' jest jakieś węższe
menu.css →
.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active
zamień na:
.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    
background#032e02;
    
color#fff;
    
displayinline-block;
    
padding5px 18px;
    
height40px;


Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.



Użytkownicy przeglądający ten wątek:

1 gości