Skocz do zawartości
  • 0

Wycentrowanie menu w poziomie


Roko85

Pytanie

czesc, juz ponad godzine glowkuje nad moim problemem, nigdy tak nie mialem, wiec stwierdzilem ze zrobie post na forum, a mianowicie nie moge wycentrowac poziomego menu, kod css:

Cytat

 

.menu
{
  list-style-type: none;
}

.menu a
{
  text-decoration: none;
  color: #FFFFFF;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.menu a:hover
{
  color: #32CD32;

  transition: 2s;
}
 

 

probowalem display: block; i text-align center, nie dziala, nie wiem, dostalem zacmienai
 

Odnośnik do komentarza
Udostępnij na innych stronach

7 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

Nie napisałeś konkretnie jakiego efektu oczekujesz, ale zgaduję, że takiego czegoś. Podejść jest wiele, jakie zastosujesz i jak ma wygladac projekt wiesz tylko ty i sam musisz wybrac odpowiednie.

 

Opcja 1. 

.menu {
    list-style-type: none;
    display: block;
    text-align: center;
}

Nastepnie modyfikujesz styl dla dziedziczonych hiperłącz po klasie menu, a dokladnie to wywalasz stamtąd float: left

Opcja 2.

.menu {
    list-style-type: none;
    display: table;
    margin: 0 auto;
}

Opcja 3.

Jeśli klasa menu będzie miała stałą szerokość, to możesz użyć margin: 0 auto; bez display: table.

 

  • Usługi webmasterskie (front & back)
  • Administracja systemami baz danych (SQL & noSQL)
  • Administracja serwerami Unix/BSD
  • Administracja & konfiguracja CMS (Wordpress itp)
  • Administracja & konfiguracja silników for (IPBoard / MyBB itp)

< Klik >

Odnośnik do komentarza
Udostępnij na innych stronach

13 minut temu, bleSS. napisał:

Nie napisałeś konkretnie jakiego efektu oczekujesz, ale zgaduję, że takiego czegoś. Podejść jest wiele, jakie zastosujesz i jak ma wygladac projekt wiesz tylko ty i sam musisz wybrac odpowiednie.

 

Opcja 1. 


.menu {
    list-style-type: none;
    display: block;
    text-align: center;
}

Nastepnie modyfikujesz styl dla dziedziczonych hiperłącz po klasie menu, a dokladnie to wywalasz stamtąd float: left

Opcja 2.


.menu {
    list-style-type: none;
    display: table;
    margin: 0 auto;
}

Opcja 3.

Jeśli klasa menu będzie miała stałą szerokość, to możesz użyć margin: 0 auto; bez display: table.

 

Opcja 1 w ogole nie dziala, a opcja 2 powoduje stackowanie sie elementow na srodku i wyswietlania ich pionowo pod soba, opcja 3 rowniez nie dziala

Odnośnik do komentarza
Udostępnij na innych stronach

13 minut temu, Roko85 napisał:

Opcja 1 w ogole nie dziala, a opcja 2 powoduje stackowanie sie elementow na srodku i wyswietlania ich pionowo pod soba, opcja 3 rowniez nie dziala

Napisz dokładnie co chcesz uzyskać i pokaż ss`a co otrzymujesz w swoim kodzie.

Odnośnik do komentarza
Udostępnij na innych stronach

To niestety nikt tutaj szklanej kuli nie ma i zgadywanie dalszej części kodu nie ma najmniejszego sensu.
Udostępnij większą ilość kodu, opisz co chcesz uzyskać, podaj jakieś screeny, cokolwiek. Wrzuć na jakiegoś fiddle'a - jsfiddle/fiddlesalad.
Bez tego nikt ci raczej nie pomoże.

  • Usługi webmasterskie (front & back)
  • Administracja systemami baz danych (SQL & noSQL)
  • Administracja serwerami Unix/BSD
  • Administracja & konfiguracja CMS (Wordpress itp)
  • Administracja & konfiguracja silników for (IPBoard / MyBB itp)

< Klik >

Odnośnik do komentarza
Udostępnij na innych stronach

aaaaaaaaa.png

Cytat

    <nav id="top-nav">

      <ul class="menu">
        <li><a href="index.php"><i class="icon-home"></i>Home</a></li>
        <li><a href="index.php"><i class="icon-basket"></i>Sklep</a></li>
        <li><a href="index.php"><i class="icon-award"></i>Top</a></li>
        <li><a href="index.php"><i class="icon-list-numbered"></i>Regulamin</a></li>
        <li><a href="index.php"><i class="icon-user"></i>Panel gracza</a></li>
      </ul>

    </nav>

Cytat

body
{
  margin: 0 !important;
  font-family: 'Open Sans Condensed', sans-serif !important;
}

#top-nav
{
  background-color: #2F4F4F;
  border-top: #32CD32 5px solid;
  height: 75px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.menu
{
  list-style-type: none;
}

.menu a
{
  text-decoration: none;
  color: #FFFFFF;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.menu a:hover
{
  color: #32CD32;
  transition: 2s;
}
 

 

Odnośnik do komentarza
Udostępnij na innych stronach

17 minut temu, Roko85 napisał:

aaaaaaaaa.png

 

body
{
  margin: 0 !important;
  font-family: 'Open Sans Condensed', sans-serif !important;
}

#top-nav
{
  background-color: #2F4F4F;
  border-top: #32CD32 5px solid;
  height: 75px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

ul{
  -webkit-padding-start: unset;
}

.menu
{
  list-style-type: none;
  display: table;
  margin-left: auto;
  margin-right: auto;

}

li{
  float: left;
}

.menu a
{
  text-decoration: none;
  color: #FFFFFF;
  padding-left: 10px;
  padding-right: 10px;
}

.menu a:hover
{
  color: #32CD32;
  transition: 2s;
}
 

Liczę na +.

Odnośnik do komentarza
Udostępnij na innych stronach

14 minut temu, ανєχυ napisał:

body
{
  margin: 0 !important;
  font-family: 'Open Sans Condensed', sans-serif !important;
}

#top-nav
{
  background-color: #2F4F4F;
  border-top: #32CD32 5px solid;
  height: 75px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

ul{
  -webkit-padding-start: unset;
}

.menu
{
  list-style-type: none;
  display: table;
  margin-left: auto;
  margin-right: auto;

}

li{
  float: left;
}

.menu a
{
  text-decoration: none;
  color: #FFFFFF;
  padding-left: 10px;
  padding-right: 10px;
}

.menu a:hover
{
  color: #32CD32;
  transition: 2s;
}
 

Liczę na +.

dobra, dziala, wielkie dzieki, jak powiesz mi jak ci dac + to jasne, ze ci go dam

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

  • Ostatnio przeglądający forum Wycentrowanie menu w poziomie   0 użytkowników
    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...