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

Dopasowanie divów

VPS Starter Arubacloud
0 głosów
402 wizyt
pytanie zadane 29 lipca 2019 w HTML i CSS przez MAXIM7 Obywatel (1,990 p.)

Cześć, mam pewien problem z ułożeniem divów. Chciałbym, aby wszystkie opcje listy oraz "zaloguj się" i "zarejestruj się" były po prawej stronie czarnego tła zamiast po lewej. Próbowałem coś z tym zrobić, ale nie udało mi się. Oczywiście, wiem, że mógłbym dodać po prostu padding po lewej stronie, ale czy istnieje jakaś komenda, która automatycznie przyczepi divy zawierające te opcje do prawej strony?

Poniżej zamieszczam kod html i css:

<nav id="topnav">
				<ul class="menuA">
					<li><a href="#">AAA</a></li>
					<li><a href="#">BBB</a></li>
					<li><a href="#">CCC</a></li>
					<li><a href="#">DDD</a></li>
					<li><a href="#">EEE</a></li>
					<li><a href="#">FFF</a></li>
					<li><a href="#">GGG</a></li>
				</ul>
				<div class="menuB">
					<a href="#"><div id="zaloguj">Zaloguj się</div></a>
					<a href="#"><div id="zarejestruj">Zarejestruj się</div></a>
					<div style="clear:both"></div>
				</div>
</nav>
#topnav
{
	background-color: #191919;
	align-items: right;
}

.menuA
{
	list-style-type: none;
	margin: 0;
	padding: 10px;
	font-size: 18px;
	min-height: 38px;
	line-height: 200%;
	float:left;
}

.menuA > li
{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
}

.menuA a
{
	color: #FFF;
	text-decoration: none;
}

.menuA a:hover
{
	color: #FFA800;
}

#zaloguj
{
	font-family: 'Mukta', sans-serif;
	font-weight: 600;
	font-size: 15px;
	border: 2px solid #FFF;
	border-radius: 25px;
	border-color: #FF0D0D;
	float: left;
	padding: 5px;
	margin-right: 10px;
}

#zarejestruj
{
	font-family: 'Mukta', sans-serif;
	font-weight: 600;
	font-size: 15px;
	border: 2px solid #FFF;
	border-radius: 25px;
	border-color: #FFAC0D;
	float: left;
	padding: 5px;
}

1
komentarz 30 lipca 2019 przez cz3ran Stary wyjadacz (13,380 p.)

Proponuje Ci się zapoznać z flex-boxem (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). 

Żeby osiągnąc taki rezultat, musisz stworzyć nastepującą strukturę:
 

<div class="parent">
  <div class="menu">
  </div>
  <div class="links">
  </div>
</div>

Dla parenta dajesz style:
 

.parent {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

najważniejszy tutaj jest styl justify-content: space-between - dzięki niemu, dwa bloki (w naszym przypadku menu i links) wypełnią cała dostępną przestrzeń, tworząc między sobą wolną przestrzeń (dzięki czemu uzyskacz interesujący Cię efekt). Zamiast space-between, możesz użyć space-around - wtedy dodatkowo powstaną jeszcze odstępy po bokach tych bloków. Polecam zapoznać się ze wszystkimi możliwościami jakie niesie flexbox, ponieważ jest to naprawdę potężne narzędzie. Daj znać czy się udało :)

pzdr

komentarz 30 lipca 2019 przez MAXIM7 Obywatel (1,990 p.)
Jest prawie dobrze, tzn. opcje "zaloguj się" oraz "zarejestruj się" rzeczywiście przyczepiły się teraz do prawej strony, ale chodziło mi o to, aby zarówno lista opcji w menu jak i "zaloguj się" oraz "zarejestruj się" razem przeniosły się na prawą stronę. W przyszłości dodam po lewej stronie tego czarnego paska jakieś logo. W każdym razie dziękuje bardzo za pomoc. ;)
komentarz 30 lipca 2019 przez MAXIM7 Obywatel (1,990 p.)
Ale już sobie poradziłem. :D Znalazłem na podanej przez Ciebie stronie: flex-end; Dzięki wielkie!

2 odpowiedzi

+1 głos
odpowiedź 30 lipca 2019 przez Eimens Maniak (69,240 p.)
wybrane 30 lipca 2019 przez MAXIM7
 
Najlepsza

Cześć. 

Na początku przygody z tworzeniem stron www powinieneś troszkę przestawić myślenie i tworząc stronę wyobrażać sobie bloki, z których strona jest zbudowana. Pomoże ci w tym "DevTools" czyli prawy przycisk myszy i "Zbadaj element" to zależy od przeglądarki. To narzędzie powinieneś poznać już teraz. Dzięki temu w czasie rzeczywistym będziesz mógł sprawdzać różne właściwości css i w dużo szybszy sposób dojdziesz do rozwiązania swojego problemu. 

 1. <div style="clear:both"></div> takich divów się nie robi. To słaba praktyka. Zaleca się dodanie tego dla pseudoklasy :after, czytaj to.

2. Nie styluje się elementów po ID. Teraz możesz nie widzisz różnicy, ale uwierz mi na słowo - styluj tylko po classie, ID jest unikalne,

3. Poczytaj o flexboxie i o BEM, 

Najpierw zapoznaj się z właściwościami Css'a żebyś wiedział co do czego służy. Na pewno szybciej zrozumiem jak to wszystko działa :) 

 

komentarz 30 lipca 2019 przez MAXIM7 Obywatel (1,990 p.)
Dzięki wielkie za rady. :) Przy okazji mam dwa pytania:

1. Czy stosowanie float: left; zamiast display: inline-block; to zła praktyka, czy zależy to od sytuacji w jakiej to używamy? np. ja używam float: left; w sytuacji, gdy chcę, aby między divami nie było żadnej przerwy, ponieważ display: inline-block; jednak tworzy taką małą spację.

2. Jeżeli chodzi o stosowanie id i class to słyszałem o tej zasadzie, że id należy stosować do unikalnych rzeczy. Użyłem je powyżej, ponieważ taka nawigacja będzie tylko jedna na stronie, więc będzie unikatowa. Jakbyś mógł to podaj jakiś przykład poprawnego zastosowania id.
komentarz 4 sierpnia 2019 przez Eimens Maniak (69,240 p.)
1. Display inline tworzy małą przerwę i jest to biały znak - czyli spacja pomiędzy elementami w kodzie. Float: left nie używam. Korzystam tak naprawdę ciągle z flex box'a.
 

2. Id przydaje się do tworzenia kotwic. Możesz za pomocą ID oznaczyć dany element i przypisać dla niego jakąś funkcję JS - jest sporo możliwości dużo by gadać.
–1 głos
odpowiedź 30 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Probowałeś bawić się bootstrapem? Jest bardzo prosty i popularny, dziś każdy go używa. Tutaj masz dokumentacje do menu i myślę, że to będzie najlepsze rozwiązanie Twojego problemu 

Podobne pytania

0 głosów
1 odpowiedź 100 wizyt
pytanie zadane 27 lipca 2019 w HTML i CSS przez MAXIM7 Obywatel (1,990 p.)
0 głosów
5 odpowiedzi 1,451 wizyt
pytanie zadane 4 listopada 2015 w HTML i CSS przez grze848 Początkujący (480 p.)
+2 głosów
4 odpowiedzi 14,425 wizyt
pytanie zadane 28 lipca 2015 w HTML i CSS przez ewelina.r Nowicjusz (210 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...