Próbuję wyśrodkować linki w navbar ale nic z tego nie wychodzi. Gdzie tkwi błąd?
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
box-shadow: 0px 1px 10px #333;
width: 100%;
}
.navbar a {
float: left;
display: inline-block;
color: #ffffff;
text-align: center;
font-family: Calibri;
padding: 15px 20px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
color: gold;
}
z góry dzięki za pomoc 
Może w tym.
raczej nie bo jak zmieniam na „center” to nic się nie zmienia, a dodatkowo rozjeżdża mi się cały navbar…
Ale są tylko 3 stany:
Stany -start i -end można powiedzieć, że są pod uniwersalność RTL (np. arabski, perski).
tylko left sprawia że wszystko wygląda normalnie - center nic mi nie wyśrodkowuje, a sprawia że navbar staje się grubszy i zjeżdża w dół…
To na szybko można navbar środkować:
.navbar {
text-align: center;
}
a dla „<a>” zrezygnować z float i przetestować wyświetlanie liniowo-blokowe:
.navbar a {
display: inline-block;
}
ok, dzięki, teraz działa, tylko pojawił się jeszcze jeden malutki problem - otóż w navbarze mam logo i chcę aby było ono po lewej stronie, więc daję float: left;, ale wtedy między logiem a linkami w navbarze zostaje jakaś dziwna luka, której nie mogę zlikwidować, albo chociaż zmniejszyć - tutaj screen jak to wygląda: https://iv.pl/images/22c0d9898f008cc79bd71da1d0911ffa.png
css dla loga wygląda tak:
.logo {
float: left;
margin-top: -10px;
height: 30px;
}
navbar i reszta jest dokładnie taka jak podałeś, ale zostaje ta luka, w której po wycentrowaniu było logo…
Np za pomocą CSS Grid: Edit fiddle - JSFiddle - Code Playground
Generalnie mogłeś od razu dać jakąś grafikę z efektem jaki chciałeś uzyskać wtedy dostałbyś od razu dokładniejszą pomoc.
a innego rozwiązania nie ma? nie chcę zmieniać navbara na stały header…
Grid to przyszłość jak nie masz odwiedzających z XP i Vistą, gdzie nie każdy instaluje chińskie forki Chromium 78-87 lub MyPal 68.
Do kodu Fizydy lub randomowego z internetu (wykryłem </img>), można dodać:
position: sticky;
top: 0;
Możesz użyć starej techniki bazującej na display: overflow i float
Ale takie coś nie ma dokumentacji:
brak overflow.
ok, chyba udało mi się znaleźć rozwiązanie tutaj - How To Create Centered Menu Links
a konkretnie ta część kodu:
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
działać działa, tyle tylko że pogrubia mi to navbar i część linków przeskakuje na dół i tworzą się dwie linijki przez co niektóre odnośniki są niewidoczne - da się temu jakoś zaradzić? jak usuwam jeden link to jest ok i wszystko jest ładnie wyśrodkowane, ale gdy jest ich ciut więcej to mam dwa wiersze…
zmiana wartości procentów niby to rozwiązuje, ale przy zmianie rozdzielczości ekranu już tak fajnie to nie wygląda…
niektórzy skalują body by było mniejsze i nagle mieści się więcej ale potem na takiej stronie źle działa element picker i zapper z uBlock Origin.
https://web.archive.org/web/20190212164309/http://muzykabezkabli.pl/
nie mam już więcej pomysłów jak to zrobić, bo nie chcę tworzyć nowego navbara - ten jest ok, tylko między logiem a linkami jest jakaś dziwna niedająca się zlikwidować przerwa, przez którą nie mogę wyśrodkować tych linków - wszystko jest zbyt mocno przesunięte w prawą stronę z powodu tej luki…
może w kodzie loga czegoś brakuje?
.logo {
float: left;
margin-top: -10px;
height: 30px;
}
Zmęczenie materiału, chodziło o overflow: hidden w połączeniu z float
@Stalker to podrzuć jaki masz html i coś się wymyśli, z drugiej strony to też nie jest jakoś dużo kodu żeby tego nie przepisywać.
nie wiem czemu (albo nie wiem jak) ale nie mogę wstawić kodu html tu na forum więc podsyłam w formie screena jak wygląda html navbara - https://iv.pl/images/9fac7bc6aae8dd8b0e5707327151e5bb.png
takim przyciskiem:
</>
lub nauczyć się markdown - wystarczy nad kod i pod wstawić trzy: ```.
```
TU KOD
```
ok, w takim razie wklejam kod html jeszcze raz:
<div class="navbar">
<a class="logo" href="index.htm"><img src="styles/logo.png"></a>
<div class="navbar-center">
<a href="link.htm">link</a>
<a href="link.htm">link</a>
<a href="link.htm">link</a>
<a href="link.htm">link</a>
<a href="link.htm">link</a>
<a href="link.htm">link</a>
<a href="link.htm">link</a>
<a href="link.htm">link</a>
</div>
</div>
jeśli jest jakiś sposób na to żeby zlikwidować tą lukę między logiem a pierwszym linkiem i wycentrować resztę odnośników to byłoby dobrze - jeśli nie to zostawię to tak jak jest i już za dużo kombinowania jak na tak prosty navbar