• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Poziomy pasek menu z trapezów jak ustawić tekst ? / Geometria w CSS help

Object Storage Arubacloud
0 głosów
551 wizyt
pytanie zadane 21 maja 2020 w HTML i CSS przez marsoonn Początkujący (460 p.)

Siemka,

1.
Tworzę stronę internetową u góry chciałbym zrobić (od lewej) logo, a następnie menu z trapezów.
Niestety tekst nie chce ze mną współpracować jak widać na zdjęciu poniżej.
Jak mogę ustawić tekst aby znajdował się on pośrodku trapezu? 

2.
Jak widzicie między trapezami tworzą się równoległoboki, 
ponieważ np koniec dolnej podstawy trapezu "o nas" styka sie z początkiem górnej podstawy trapezu "Galeria"
Jak mogę skrócić odległość między trapezami, aby te niebieskie równoległoboki były mniejsze?

Z góry dzięki za odpowiedź,
Michał

<div class="trapez1">O nas</div>
<div class="trapez2">Galeria</div>
<div class="trapez3">Oferta</div>
<div class="trapez2">Cennik</div>
<div class="trapez4">Kontakt</div>
.trapez1
{
	width: 80px;
	height: 0;
	border-left: 0px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 100px solid #F34A53;
	/*margin: 40px auto 0;*/
	float: left;
}
.trapez2
{
	width: 80px;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 100px solid #F34A53;
	/*margin: 40px auto 0;*/
	float: left;
	text-align:center;
}
.trapez3
{
	width: 80px;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 100px solid #F34A53;
	/*margin: 40px auto 0;*/
	float: left;
}

 

1 odpowiedź

0 głosów
odpowiedź 21 maja 2020 przez Landu Stary wyjadacz (11,880 p.)

Powiem Ci tak, nie mam pojęcia jak będą się zachowywać te divy, ale spróbuj do każdego trapeza wrzucić
 

display: flex;
justify-content: center;
align-items: center;

 

P.S. Jeżeli to jest strona, która faktycznie będzie gdzieś wykorzystywana, to radziłbym zapoznać się z tematem Bootstrapa, bo strona którą tworzysz będzie źle wyświetlać się na różnych monitorach, a co dopiero na telefonach.

Podobne pytania

0 głosów
1 odpowiedź 415 wizyt
pytanie zadane 7 maja 2016 w HTML i CSS przez artix132 Użytkownik (870 p.)
0 głosów
2 odpowiedzi 146 wizyt
pytanie zadane 29 lutego w HTML i CSS przez whiteman808 Obywatel (1,900 p.)
0 głosów
1 odpowiedź 272 wizyt
pytanie zadane 7 czerwca 2020 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)

92,660 zapytań

141,553 odpowiedzi

319,993 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...