Top menu - problem z kolorami - jak?


(Per Sprinter) #1

Witajcie,

 

Mam pewien problem…

…chciałbym mieć na na swojej stronie takie menu:


(manieKMP) #2

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.


(Per Sprinter) #3

 

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ę :stuck_out_tongue:

Pomożesz?


(manieKMP) #4

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ę. :wink:


(Per Sprinter) #5

 

Działa :smiley:

Jesteś wielki, dzięki :slight_smile:

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ć :frowning:

How to do it?

 


(manieKMP) #6

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.


(Per Sprinter) #7

 

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 :frowning:

Czego to może być wina?


(manieKMP) #8

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”).

https://css-tricks.com/slide-in-image-captions/


(Per Sprinter) #9

 

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ć :frowning:


(manieKMP) #10

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ć…


(Per Sprinter) #11

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ć :smiley:

…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”?


(manieKMP) #12

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…


(Per Sprinter) #13

 

A mógłbyś mi to rozpisać bardziej dokładniej? :stuck_out_tongue:

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ę :wink:


(manieKMP) #14

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”…).


(Per Sprinter) #15

 

Po części działa twój kod, lecz…

  1. 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)

  2. 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? :frowning:

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 :wink:


(manieKMP) #16

Nie wiem czemu, ale myślałem że ma być na obrazku. :stuck_out_tongue:

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;

(Per Sprinter) #17

 

Zadziałało :wink:

Nie wiem jak Ci dziękować za pomoc… naprawdę :smiley:

 

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 :wink: