Witajcie,
Mam pewien problem…
…chciałbym mieć na na swojej stronie takie menu:
Nie wiem jak uzyskałeś pokazany efekt, ale jeśli dolny kolor jest częścią oddzielną elementów, a nie wspólną, to wystarczy tym elementom nadać klasy i nimi operować przy określaniu koloru.
Menu /HTML:
<section>
<div class="menu">
<nav>
<ul>
<li><a href="#"><span>Tex1</span></a></li>
<li><a href="#"><span>Tex2</span></a></li>
<li><a href="#"><span>Tex3</span></a></li>
<li><a href="#"><span>Tex4</span></a></li>
<li><a href="#"><span>Tex5</span></a></li>
<li><a href="#"><span>Tex6</span></a></li>
<li><a href="#"><span>Tex7</span></a></li>
<li><a href="#"><span>Tex8</span></a></li>
</ul>
</nav>
</div>
</section>
Menu /CSS:
.menu nav {
background: #7f003f;
}
.menu nav a {
padding: 0.25em 0 0.5em;
border-left: 2px solid #ffffff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.menu nav li:last-child a {
border-right: 2px solid #ffffff;
}
.menu nav li a::after {
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 12px;
background: #940000;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translate3d(0,150%,0);
transform: translate3d(0,150%,0);
}
.menu nav a span {
font-weight: 700;
}
Sekcja “.menu nav li a::after” w CSS jest odpowiedzialna za kolor dołu buttona a dokładnie to linijka “background: #940000;”… chyba, że się mylę 
Pomożesz?
Gdybym miał jak, sprawdziłbym poniższe rozwiązanie:
-dla każdego linku dopisałbym “odpowiednie” klasy według schematu:
<a class="tex1" href="#"><span>Tex1</span></a>
<a class="tex2" href="#"><span>Tex2</span></a>
<a class="tex3" href="#"><span>Tex3</span></a>...
-usunąłbym tło z “.menu nav li a::after”
-nadałbym tła dla dodanych klas według schematu:
.tex1::after {background-color: #940000;}
.tex2::after {background-color: #555000;}
.tex3::after {background-color: #999000;}
Powinno zadziałać… jeśli się nie mylę. 
Działa 
Jesteś wielki, dzięki 
Ale gdybym mógł jeszcze skorzystać z Twojej pomocy to byłym bardzo wdzięczny…
…mam jeszcze jeden problem, ale już nie z menu, zatem…
Mam obrazek (to ten kolor różowo/bordowo/magenta w tle) - jak się na jego najedzie to na tym obrazku pojawia się napis z tłem:
…lecz chciałbym uzyskać taki efekt by tło było rozciągnięte do prawego i lewego boku obrazka a na górze jak i na dole napisu było trochę więcej przestrzeni tła… tak chce, by to wyglądało:
Kod /HTML:
figure class="obrazek1"
img src="obrazek/dolina.png" alt="dolina"/
figcaption
p class="description"Lorem Impus Lorem Impus Lorem Impus Lorem Impus Lorem Impus/p
/figcaption
/figure
Kod /CSS:
figure.obrazek1 p.description {
position: relative;
bottom: 9em;
color: #ffffff;
background: #2f2a2d;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden;
}
Próbuje i próbuje i nic nie mogę wykombinować 
How to do it?
W tym wypadku pewnie będą jakieś zależności od kodu css, którego nie podałeś (+ pozycjonowanie elementu), ale sprawdź:
-dopisz padding: Xpx; (za X wpisz jakąś liczbę)
lub
-dopisz margin: auto 0; i padding: Xpx 0; (to samo co poprzednio, a zero możesz w dopełnieniu pominąć jeśli “X” ma dotyczyć również boków), do tego powinno się usunąć pozycjonowanie i bottom, który nie jest wtedy potrzebny.
Jeśli nie zadziała, być może dopisanie dodatkowo display: block; pmoże.
Niestety nie uzyskałem do końca tego czego planowałem…
…u góry i na dole napisu robi się więcej przestrzeni dla tła, ale już do prawego i lewego boku nie dochodzi, lecz dodaje taką samą przestrzeń jak u góry i na dole albo wgl nie dodaje
Czego to może być wina?
Czegoś najwyraźniej brakuje, np. kodu zależnego od tego podanego przez Ciebie.
Żeby nie przynudzać o zależnościach (np. pozycjonowaniu dziecka i rodzica) i zgadywać gdzie tkwi problem (być może jest nim sam tag “p” i próba jego stylowania zamiast “figcaption”…), w poniższym linku znajdziesz kilka rozwiązań na zastosowanych przez Ciebie tagach html (kod możliwy doprzepisania lub pobrania).
Wejdź w demo, znajdziesz tam podobny przykład do swojego, gdzie opis jest wyświetlany na całej szerokości zdjęcia (po usunięciu i przerobieniu części podanego tam kodu, uzyskasz swój efekt, raczej nie będziesz mieć z tym problemów, a jeśli jednak będą, spróbuję Tobie to rozpisać, “na sucho”).
Kod CSS /figcaption"
.grid figure figcaption {
padding: 3em;
color: #A52A2A;
text-transform: uppercase;
font-size: 1.10em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
i
figure.obrazek1 figcaption {
top: auto;
bottom: 0;
padding: 2em;
height: 2.20em;
background: #DEB887;
color: #A9A9A9;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
I co tu może być nie tak?
PS: Próbuje coś uzyskać dzięki temu poradnikowi, który mi podesłałeś, ale nie mogę niestety nic wskórać
Rozpiska/schemat na podstawie rozwiązania z linku:
Html
<figure>
<img src="obrazek/dolina.png" alt="dolina"/>
<figcaption>
Lorem Impus Lorem Impus Lorem Impus Lorem Impus Lorem Impus
</figcaption>
</figure>
Css
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {
position: absolute;
left: 0;
bottom: 9em;
background: #DEB887;
color: #A52A2A;
text-transform: uppercase;
font-size: 1.10em;
padding: 10px 20px;
opacity: 0;
transition: all 0.6s ease;
/*Nie pamiętam, czy jeszcze trzeba używać prefiksów dla "transition" ;P*/
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
}
Powyższe jest kodem ogólnym dla elementów “figure” i “figcaption”, więc będzie się gryzło z tym co masz w swoim stylu (żeby zagrało, musisz “wyłączyć” powiązany z tymi elementami css, np. komentarza, jak jest to zdobione w powyższym kodzie, tyle że obejmujesz całe reguły).
W skrócie, powyższy kod ma za zadanie wyświetlić tekst, wraz z animacją (po najechaniu kursorem na obrazek) na wysokości “9em”, licząc od dołu (przynajmniej tak zakładam, zapisane jest bez testu ;))
Z tego co się domyślam, nie masz u siebie nadanego pozycjonowania dla “figure” i “figcaption”, co jest w sumie podstawą do “wstawienia” opisu na grafikę w tym przypadku (nie wiem czemu operujesz tu na paragrafie do uzyskania opisu na środku). Jeżeli rodzicem “figure.obrazek1 figcaption” jest .grid, to oba ostatnie kody css się gryzą z kolorem tekstu i dopełnieniu. Auto dla top jest wartością domyślną, chyba że chce się ją w bliźniaczym elemencie przywrócić…
W sumie to posłużyłem się trochę tym poradnikiem (który podałeś) i kombinowałem, aż doszedłem do efektu, którego chciałem uzyskać
…jak stworzyć do tego “box”, który będzie na dole obrazka i który będzie tam na stałe, a nie żeby był “hover’em”?
Na tej samej zasadzie co z “figcaption” (z ostatnio podanego kodu lub jak Ty to tam wykombinowałeś) możesz przerobić np. znacznik “label” (w html wpisując go pod “figcaption”), z tym że dla bottom dajesz zero…
A mógłbyś mi to rozpisać bardziej dokładniej?
Nie ukrywam, że nie zaliczam się do dobrych Webmasterów… umiem “co nie co”, ale przychodzi mi to z dużą trudnością… pocieszeniem jest to, że stale się uczę być lepszym i dzięki takim ludziom jak Ty mam na to szansę
Html
<figure>
<img src="obrazek/dolina.png" alt="dolina"/>
<figcaption>
Lorem Impus Lorem Impus Lorem Impus Lorem Impus Lorem Impus
</figcaption>
<label class="tx">Tekst</label>
</figure>
Css
.tx {
position: absolute;
left: 0;
bottom: 0;
background: #DEB887;
color: #A52A2A;
text-transform: uppercase;
font-size: 1.10em;
padding: 10px 20px;
}
Ogółem, według specyfikacji w3c w znacznik “figure” możesz wsadzić “pływającą zawartość” (lista flow content), jednym z nich jest podany w przykładzie “label”…
PS. Jeśli treść elementu pod grafiką, czy tym “lorem’em” miałby być niezmienny dla wszystkich grafik, możesz zamiast powyższego wykorzystać pseudo-element “after” lub “before” w css’ie (w linku z rozwiązaniem masz jego zastosowanie dla wyświetlenia grafiki lupki, ale można też tekst wyświetlić wypełniając "content: “coś tam do przeczytania”…).
Po części działa twój kod, lecz…
-
Box ten zajmuje miejsce na dole na obrazku (przysłaniając go od dołu) a nie jest pod obrazkiem (już go rozwiązałem)
-
Box ten jeżeli nie jest rozciągnięty od lewej do prawej strony to napis w nim jest w jednej linijce, lecz jak już rozciągnę go od lewej do prawej strony (czyli zajmuje 100% szerokości) to napis przekształca się w dwie linijki (na górze jest ABCDE a na dole FG) a chciałbym by było to w jednej linijce.
Kombinowałem różnymi dodatkowymi funkcjami lecz nie ma efektu, który chciałbym uzyskać… POMOŻESZ?
PS: Przepraszam, że stale Cię o coś proszę i zabieram zapewne Twój cenny czas, ale jeżeli ten projekt wystartuje to na pewno będą z niego zyski i wtedy będę mógł Ci się odwdzięczyć jakimś datkiem
Nie wiem czemu, ale myślałem że ma być na obrazku.
W poniższym linku masz pełny kod z poprawkami (pewne rzeczy musisz w nim zmienić, np. kolory):
http://codepen.io/anon/pen/NPmVqR
Co do pkt. 2-go, lepiej jest nie przekraczać szerokości obrazka… w poprawionym kodzie dałem ograniczenie dla dolnego napisu (zbyt długi jest zwijany), inaczej napisy z “figcaption” uzyskają szerokość tego dolnego (ewentualnie możesz zmienić miejsce szerokości i wstawić ją dla “cap0”, ale wtedy dolny napis zacznie wychodzić poza szerokość obrazka). Tak czy inaczej, bez ograniczenia na szerokość, w poprawionym kodzie dojdzie do “rozjechania” box’ów, a naniesienie poprawki zapobiegającej zmiany szerokości i zawijania zbyt długiego tekstu spowoduje zakrycie jego części, a ja nie wiem za bardzo o jaki efekt w tym momencie chodzi.
PS. Jeśli do podanego kodu chcesz dodać dla dolnego napisu brak zawijania i go dodatkowo ucinać na końcu, dopisz poniższe do “.tx”:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Zadziałało
Nie wiem jak Ci dziękować za pomoc… naprawdę
A czy jest możliwość nawiązania z Tobą współpracy na takiej samej zasadzie jak pomagałeś mi na forum?.. oczywiście nie za darmo