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

Problem z wycentrowaniem menu rozwijanego, HTML/CSS

VPS Starter Arubacloud
0 głosów
178 wizyt
pytanie zadane 16 czerwca 2018 w HTML i CSS przez przemek11 Nowicjusz (150 p.)

Dzień dobry, od ponad 45 minut męczę się z wycentrowaniem menu rozwijanego na stronie - jedyne co mi działa, to zrobienie tego za pomocą "margin-left x%", ale to nie ma sensu, bo ktoś odpali stronę na telefonie/laptopie/czymkolwiek innym i już będzie widział, że to jest krzywo. Bardzo proszę o pomoc, jestem totalnym warzywem w te klocki, a potrzebuję wykonać prostą stronę z menu na zaliczenie. Nie musi to wyglądać nie wiadomo jak pięknie, ważne, by u każdego było na środku, pod bannerem. Pozdrawiam i z góry dziękuję.
Menu jest zbudowane tak:

        <div id="menu">
            <ol>
            <li><a href="na 5.html">Strona główna</a></li>
            <li><a href="#">Szkoła</a>                           
                <ul>
                    <li><a href="#">Dyrekcja</a></li>
                    <li><a href="#">Nauczyciele</a></li>
                    <li><a href="#">Historia</a></li>               
                </ul></li>
            <li><a href="#">Uczniowie</a>
                <ul>
                    <li><a href="#">Samorząd uczniowski</a></li>
                    <li><a href="#">Dziennik elektroniczny</a></li>
                    <li><a href="#">Sukcesy</a></li>
                    <li><a href="#">Szczęśliwy numerek</a></li>         
                </ul></li>
            <li><a href="#">Archiwum</a>
                <ul>
                    <li><a href="#">2017</a></li>
                    <li><a href="#">2016</a></li>             
                </ul></li>
            <li><a href="#">Kontakt</a></li>
                </ol>
           </div

a styl do niego tak:

ol {
  list-style-type:none;
  padding:0;
  margin:0;
  font-size:17px;
  line-height:2em;
  text-align:center;
}

ol > li {
  float:left;
  background-color:#000;
  width:280.4px;
  text-align:center;
}

ol a {
  display:block;
  color:#CECECE;
  text-decoration:none;
  padding:0 5px;
}

ol > li:hover > a {
  color:#FFF;
}

ol > li:hover {
  background-color:#327DFF;
}

ol > li > ul {
  list-style-type:none;
  padding:0;
  margin:0;
}




ol > li > ul > li {
  background-color:#A0A0A0;
}

ol > li > ul > li:hover {
  background-color:#BBB;
}

ol > li > ul > li:hover a {
  color:#09C;
}

ol > li > ul {
  display:none;
}

ol > li:hover > ul {
  display:block;
}

#menu {
    margin-left: 13.1%;
}

1 odpowiedź

+1 głos
odpowiedź 16 czerwca 2018 przez michh123 Bywalec (2,790 p.)
wybrane 16 czerwca 2018 przez przemek11
 
Najlepsza

Zamiast margin-left: x% w CSS divowi 'menu' musisz nadać szerokość (w Twoim przypadku coś ok. 1405px, ale sprawdź dokładnie), a następnie dodać margin: 0 auto;

 

Podobne pytania

0 głosów
3 odpowiedzi 1,130 wizyt
0 głosów
1 odpowiedź 448 wizyt
pytanie zadane 18 stycznia 2019 w JavaScript przez Helio Dor Nowicjusz (230 p.)
0 głosów
2 odpowiedzi 725 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)

92,768 zapytań

141,690 odpowiedzi

320,506 komentarzy

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

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!

...