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

question-closed Wyśrodkowanie menu strony

Aruba Cloud - Virtual Private Server VPS
0 głosów
375 wizyt
pytanie zadane 2 listopada 2017 w HTML i CSS przez Borówa Dyskutant (8,370 p.)
zamknięte 2 listopada 2017 przez Borówa

Cześć,

próbuje wyśrodkować menu, obecnie wygląda to tak:

HTML:

<body>
  <div id="menu">
          <nav>
           <a class="menu active" href="index.html">O mnie</a>
           <a class="menu" href="umiejetnosci.html">Umiejętności</a>
           <a class="menu" href="projekty.html">Projekty</a>
           <a class="menu" href="kontakt.html">Kontakt</a>
           </nav>
    </div>
</body>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
}

#menu {
    max-width: 100%;
    height: 50px;
    background-color:dimgray;
}

nav {
    background-color:dimgray;
    width: 1000px;
}

nav a {
    display: block;
    width: 25%;
    height: 50px;
    float:left;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    color: white;
    background-color: dimgray;
    padding: 15px 30px;
    transition: all 1s ease;
    
    
}

.active {
    background-color:darkturquoise; 
}

a.menu:hover {
    background-color:darkturquoise;
}

 

Problem w tym, że pasek ma być na całą szerokość ekranu ale samo menu na 1000px i samo menu ma być wyśrodkowane, a nie do lewej jak w tym momencie. Jak to najlepiej zrobić?

komentarz zamknięcia: Udzielono odpowiedzi.

3 odpowiedzi

+2 głosów
odpowiedź 2 listopada 2017 przez Tomek Sochacki Ekspert (227,490 p.)
wybrane 2 listopada 2017 przez Borówa
 
Najlepsza

Dopisz:

margin: 0 auto;

dla elementu <nav>. Menu po dodaniu tego zapisu: CODEPEN.

Jednakże kilka małych uwag na początek:

  1. Nie styluj po ID i tagach, tylko po klasach,
  2. Unikaj określania wymiarów w PX. Lepiej operować procentami lub np. jednostką rem/em dla tekstu, marginesów itp.
  3. Poczytaj o flexbox i przerób ten przykład na flexa, a sam zobaczysz jak fajnie i łatwo modyfikować elementy i ich położenie :)

I taka uwaga końcowa - staraj się nie myśleć w kategoriach najpierw PC, potem mobilki itp. Dynamicznie zmienne szerokości, marginesy itp. umożliwiają od razu projektowanie kompleksowo i jedynie w razie potrzeby poszczególne elementy obrobisz sobie w @media. Flex tutaj również daje szerokie możliwości przyjemnego stylowania całego layoutu.

komentarz 2 listopada 2017 przez Borówa Dyskutant (8,370 p.)
Dzięki za uwagi, poczytam.
0 głosów
odpowiedź 2 listopada 2017 przez zgrybus Pasjonat (24,860 p.)
Dodaj do nav { display: flex; justify-content: center; } i wywal z nav a { float: left; }
komentarz 2 listopada 2017 przez Borówa Dyskutant (8,370 p.)

Nic się nie zmieniło.

komentarz 3 listopada 2017 przez zgrybus Pasjonat (24,860 p.)
W sumie nie miało prawa działać, bo a miało width: 25%; :P
0 głosów
odpowiedź 2 listopada 2017 przez pablop76 VIP (123,540 p.)
edycja 2 listopada 2017 przez pablop76
Elementowi zawierającemu menu (#menu) daj styl text-align:center; a nav display:inline-block; spowoduje to ustawienie belki centralnie w kontenerze (#menu)

Ale jest dużo błędów w twoim projekcie.

Podobne pytania

0 głosów
0 odpowiedzi 177 wizyt
pytanie zadane 1 marca 2019 w HTML i CSS przez bugs55 Obywatel (1,090 p.)
0 głosów
1 odpowiedź 644 wizyt
pytanie zadane 10 kwietnia 2017 w HTML i CSS przez prominepl Bywalec (2,440 p.)
+1 głos
3 odpowiedzi 1,662 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

93,336 zapytań

142,332 odpowiedzi

322,418 komentarzy

62,672 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...