Nadanie tła w headerze

wersja skryptu MyBB: 1.8
adres forum: aykrasz.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Na forum jest pokazany aktualnie mój header, tylko tam gdzie jest #menu to chciałbym by linki były na takim tle jak jest na zdjęciu. Czy jest to możliwe? Jak tak to bym prosił wskazówki, dodanie do .menu background i zmiana height tego rozwala forum oraz zmieniala polozenie napisów, licze na pomoc. Pozdrawiam

---

Jak by co nie chodzi o te białe tło na zdjęciu bo to już jest, tylko o te szare by całe tło pokrywało kawałek szerokości headera i cała wysokość.

Jeśli dobrze zrozumiałem, to:
custom.css →

.menu {
    background: #ffffff;
    float: right;
    margin-top: 20px;
}

.menu ul {
    margin: 0;
    padding: 0;
}

zamień na:

.menu {
    background: #ccc;
    float: right;
    height: 70px;    
}

.menu ul {
    margin: 20px 0 0 0;
    background: #fff;
    padding: 0;
}

.menu {
    background: #ccc;
    float: right;
    height: 70px;
    margin-right: -7px;
}

.menu ul {
    margin: 20px 0 0 0;
    background: #fff;
    padding: 2;
    margin-right: 10px;
}

Zmodyfikowałem go tak by odstęp od krawędzi miał właśnie tyle ile jest podane w kodzie. Ale spójrz na "coś". Tam jest zbyt duża odległość, dlaczego? Bo to są odległości między tymi linkami jak pewnie wiesz. Czy da zmienić ten odstęp tylko od lewej strony tego linku "coś"?

Nie możesz użyć czystej wartości bez jednostki (po za 0). Użyj np. px czy coś. Chcesz całe menu przesunąć w lewo?

Chciałbym zlikwidować ten odstęp przed pierwszym linkiem

---

Do tego dodałem strzałkę
9 linijka - header

<div class="wrapper">
    <div id="header" class="clearfix">
<div class="logo">
            <img src="images/xstyled/logo.png" alt="XSTYLED Logo" />
        </div><div class="description"><span class="special">AYKRASZ</span>xstyled edit</div>
        <div class="menu">
            
            <ul>    
                <li class="triangle"</li>
                <li><a href="">Home</a></li>
                <li class="selector"><a href="forum/index.php">Community</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

<div id="container">
    <div id="content">
        <div id="fullimg">
            <ul class="bxslider">
                <li><img src="{$mybb->settings['bburl']}/images/xstyled/slider/1.png" /></li>
                <li><img src="{$mybb->settings['bburl']}/images/xstyled/slider/2.png" /></li>
                <li><img src="{$mybb->settings['bburl']}/images/xstyled/slider/3.png" /></li>
            </ul>
            <div class="wrapper" style="margin-top:45px">
                <div class="clearfix">
                    <div id="user" class="clearfix">
                        <div class="news">
                            <div class="announcements"><i title="Announcements" style="font-size: 16px;" class="fa fa-microphone fa-fw"></i></div>
                            <div class="automsg">
                                <ul>
                                    <li class="quotes">Tutaj są fajne ogłoszenia</li>
                                    <li class="quotes">Tu też.......</li>
                                </ul>
                            </div>
                        </div>
                        <div class="member">{$welcomeblock}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            {$awaitingusers}
            <br />

.triangle {
    margin-left: -9px;
    margin-top: -7px;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-width: 20px;
border-top-width: 20px;
border-left: 20px solid #405770;
}

Ale linki poszły w dół

custom.css → #header dopisz position: relative;

Oraz

.triangle {
    margin-left: -9px;
    margin-top: -7px;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-width: 20px;
border-top-width: 20px;
border-left: 20px solid #405770;
}

zamień na:

.triangle {
    position: absolute;
    top: 15px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 20px;
    border-top-width: 20px;
    border-left: 20px solid #405770;
}

, albo

.menu ul li:first-child {
    position: absolute;
    top: 15px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 20px;
    border-top-width: 20px;
    border-left: 20px solid #405770;
}

.menu ul li:first-child {
    position: absolute;
    top: 15px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 20px;
    border-top-width: 20px;
    border-left: 20px solid #405770;
}

Zadziałałó! ^^ A z tym odstępem po lewej od home da się coś zrobić?

Dać się da, ale będzie to się nakładać na przycisk "home", co spowoduje niemożliwość kliknięcia w niego. Póki co nie mam pomysłu na to. A coś z z-index nie mogę wykombinować.

Nie ma problemu, i tak mi dużo pomogłeś... dzięki Ci bardoz
a co do tego problemu zmniejsze odległość między linkami i nie bedziem i to przeszkadzalo