Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Jak zrobić navbar bez użycia ul li

MsDaniel55

Rekomendowane odpowiedzi

MsDaniel55 Budowniczy

MsDaniel55

Opublikowano
Budowniczy

MsDaniel55

Opublikowano

Cześć, mam pytanie: jak zrobic navbar od lewej strony tak aby nie uzywac w css li i ul bo kolejne elementy strony tych parametrów wymagają co są :/ ss który pomoże zrozumieć [może]: http://scr.hu/7ml5/agy9y

i chciałbym aby elementy które bd np potem nie przesuwały się- bo zwykle jak ja to robię to wszystko jest dopiero pod menu.

Writen Rekrut

Writen

Opublikowano
Rekrut

Writen

Opublikowano

Co? Nie używać li i ul, bo coś tam innego z tego korzysta? A o klasach słyszałeś?

Może zacznij naukę od prostych rzeczy, bo widzę, że to Cię przerasta.

gamedevmania.com

Mezawari Uczeń

Mezawari

Opublikowano
Uczeń

Mezawari

Opublikowano

...

Bez tego to bez albo daj jakąś klase podobną do tych wartości. Jestem początkujący więc jeśli mógłbyś to ucisz się :)

 

I chcesz zacząć od popełniania błędów? Użyj klas.

MsDaniel55 Budowniczy

MsDaniel55

Opublikowano
Budowniczy

MsDaniel55

  • Autor
Opublikowano

użyłem, mam problem- U mnie to wygląda normalnie ale u innych menu zaslania inne obiekty. Moje ss: http://scr.hu/7ml5/6dha1
ss innej osoby: http://scr.hu/3u9h/8dzbx

Szerokość jest podana w % więc nwm czemu tak się dzieje :/

kod:

css:

 

}
.sidebar-left {
    /*float: left;*/
    /*;*/
    margin-top: -5px;
    width: 15%;
    \\background: #f0f3f7;
    background: url(http://365psd.ru/images/backgrounds/blackmamba.png);
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 12px;
    height: 100%;
    min-height: 816px;
}
.navigation {
    margin-bottom: 0px;
}
.navigation>.title {
    text-align: center;
    color: #fff;
    border-radius: 3px 3px 0 0;
    background: #233238;
    background: #5687bb;
    padding: 11px 5px 14px;
    font-family: 'pf_square_sans_proregular';
    display: none;
}
.navigation-list {
    font-size: 13px;
    line-height: 44px;
    \\border-right: 1px solid #e9e9e9;
    /*font-family: 'pf_square_sans_proregular';*/
}
.navigation-list li {
    position: relative;
}
.navigation-list > li {
    border-bottom: 1px solid #525151;
}
.navigation-list li+li {
    padding-top: 1px;
}
.navigation-list li.parent:after {
    content: '';
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: 20px;
    top: 19px;
    /*margin-top: -4px;*/
    border-left: 5px solid #d6dce4;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
}
.navigation-list li.parent.open:after {
    border-top: 5px solid #d6dce4;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    top: 21px;
}
.navigation-list li.parent.open,
.navigation-list li.parent.active {
    background: #f4f6f9;
}
.navigation-list li.parent .submenu {
    display: none;
    padding-left: 60px;
}
.navigation-list li.parent.active .submenu {
    display: block;
}
.navigation-list li a,
.navigation-list li>span {
    /*background: #fff;*/
     /*background: url(../img/last.png);*/
    color: #828890;
    text-decoration: none;
    display: block;
    height: 44px;
    line-height: 44px;
    padding: 12px 5px 12px 14px;
}
.navigation-list li a:hover,
.navigation-list li.current>span {
    /*background: url(../img/last1.png);*/
    color: #f35f1a;
}
.navigation-list > li > a {
    display: block;
    width: auto;
    position: relative;
    padding: 0 12px 0 0px;
}
.navigation-list > li > a:before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background: url('../img/bg1.png') no-repeat;
    vertical-align: middle;
    margin: 0 20px;
}
.navigation-list li a.nav-li-1:before {background-position: 0 0;}
.navigation-list li a.nav-li-1:hover:before, .navigation-list li.active a.nav-li-1:before {background-position: -20px 0;}
.navigation-list li a.nav-li-2:before {background-position: -40px 0;}
.navigation-list li a.nav-li-2:hover:before, .navigation-list li.active a.nav-li-2:before {background-position: -60px 0;}
.navigation-list li a.nav-li-3:before {background-position: -80px 0;}
.navigation-list li a.nav-li-3:hover:before, .navigation-list li.active a.nav-li-3:before {background-position: -100px 0;}
.navigation-list li a.nav-li-4:before {background-position: -120px 0;}
.navigation-list li a.nav-li-4:hover:before, .navigation-list li.active a.nav-li-4:before {background-position: -140px 0;}
.navigation-list li a.nav-li-5:before {background-position: -160px 0;}
.navigation-list li a.nav-li-5:hover:before, .navigation-list li.active a.nav-li-5:before {background-position: -180px 0;}
.navigation-list li a.nav-li-6:before {background-position: -200px 0;}
.navigation-list li a.nav-li-6:hover:before, .navigation-list li.active a.nav-li-6:before {background-position: -220px 0;}
.navigation-list li a.nav-li-7:before {background-position: -240px 0;}
.navigation-list li a.nav-li-7:hover:before, .navigation-list li.active a.nav-li-7:before {background-position: -260px 0;}
.navigation-list li a.nav-li-8:before {background-position: -280px 0;}
.navigation-list li a.nav-li-8:hover:before, .navigation-list li.active a.nav-li-8:before {background-position: -300px 0;}

.navigation-list > li.active > a {
    color: #f35f1a;
    position: relative;
}
.navigation-list > li.active > a:after {
    content: '';
    display: block;
    height: 44px;
    width: 5px;
    right: -5px;
    top: 0;
    position: absolute;
    background: #535353;
}

.navigation-list li.parent .submenu li {
    margin-bottom: 6px;
}
.navigation-list li.parent .submenu li a {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    padding: 0 0 0 22px;
}
.navigation-list li.parent .submenu li a:hover {
    color: #f36d37;
}
.navigation-list li.parent .submenu li.active a,
.navigation-list li.parent .submenu li.active a:hover {
    border-radius: 11px 0 0 11px;
    background: #f36d37;
    color: #fff;
}

.navigation-list li .image {
    vertical-align: middle;
    width: 28px;
    margin: 0 8px 0 0;
    text-align: center;
}
.navigation-list li .text {
    vertical-align: middle;
    width: 170px;
}
.navigation-list li .image,
.navigation-list li .text,

a to w index:

 

<aside class="sidebar-left" role="complementary">
    <!-- navigation  -->
    <nav class="navigation">
        <div class="title">Menu</div>
        <ul class="navigation-list">
            <li><a href="/" class="nav-li-1">Play</a></li>
            <li><a href="/about-game.php"  class="nav-li-2">Rules</a></li>
            <li><a href="/top.php"  class="nav-li-3">Top</a></li>
            <li><a href="/history.php" class="nav-li-4">History</a></li>
            <li><a href="/settings-page.php" class="nav-li-5">Settings</a></li>
            <li><a href="/steamauth/logout.php" class="nav-li-8">Log out</a></li>
        </ul>
    </nav>
console. Pomocnik

console.

Opublikowano
Pomocnik

console.

Opublikowano

...

Bez tego to bez albo daj jakąś klase podobną do tych wartości. Jestem początkujący więc jeśli mógłbyś to ucisz się :)

 

Zacznijmy od tego, że powinieneś okazać trochę szacunku dla ludzi posiadających dużo więcej wiedzy na dany temat.

Dodatkowo jeśli ktoś Ci zwraca uwagę, że czegoś nie potrafisz to pomyśl czy przypadkiem tak nie jest.

Writen ma racje, piszesz głupoty dlatego taka opinia na Twój temat.

 

#Topic

Może przykrywa im elementy bo mają mniejszą rozdziałkę

 

­

MsDaniel55 Budowniczy

MsDaniel55

Opublikowano
Budowniczy

MsDaniel55

  • Autor
Opublikowano

mam takie coś:

                <?php
                if(isset($_SESSION["steamid"])) {
                    echo '';
                    echo '<li><img src="'.$steamprofile['avatar'].'">';
                    echo '<ul>';
                    echo '<li><a href="settings.php" style="color: white;">Settings</a></li>';
                    echo '<li><a href="steamauth/logout.php" style="color: white;">Logout</a></li>';
                    echo '<li><a href="#">link - 1</a></li>';
                    echo '</ul></li>';
                }
                ?>

i css:

/* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */

/* wygląd głównego elementu - ol */
ol {
list-style-type:none;
padding:0;
margin:0;
background-color:#FFF;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
}

/* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
ol a {
display:block;
text-decoration:none;
color:#000;
padding:0 5px;
}

/* wygląd elementów - li - wszystkich dzieci elementu - ol */
ol > li {
float:left;
width:150px;
margin-left:1px;
background-color:#FDD700;
height:2em;
}

/* wygląd elementu - li - pierwszego dziecka elementu - ol */
ol > li:first-child {
margin-left:0;
}

/* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover {
background-color:#EEE;
}

/* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > a {
color:#09C;
}

/* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > ul {
display:block;
}

/* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */

/* wygląd głównych rozwijanych elementów - ul */
ol > li > ul {
display:none;
list-style-type:none;
padding:0;
margin:0;
}

/* wygląd elementu - li - w części rozwijanej */
ol > li > ul > li {
position:relative;
background-color:#EEE;
}

/* wygląd elementu - a - w części rozwijanej */
ol > li > ul > li > a {
border-top:1px solid #FFF;
}

/* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
ol > li > ul > li:hover {
background-color:#DDD;
}

/* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
ol > li > ul > li:hover > a {
color:#09C;
}

I nie pokazuje mi w menu rozwijanym logout i link 1. Czemu?

edit: i jak zrobic aby te linki nie byly podkreślone jak na nie najade xD

Mezawari Uczeń

Mezawari

Opublikowano
Uczeń

Mezawari

Opublikowano

mam takie coś:

                <?php
                if(isset($_SESSION["steamid"])) {
                    echo '';
                    echo '<li><img src="'.$steamprofile['avatar'].'">';
                    echo '<ul>';
                    echo '<li><a href="settings.php" style="color: white;">Settings</a></li>';
                    echo '<li><a href="steamauth/logout.php" style="color: white;">Logout</a></li>';
                    echo '<li><a href="#">link - 1</a></li>';
                    echo '</ul></li>';
                }
                ?>

i css:

/* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */

/* wygląd głównego elementu - ol */
ol {
list-style-type:none;
padding:0;
margin:0;
background-color:#FFF;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
}

/* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
ol a {
display:block;
text-decoration:none;
color:#000;
padding:0 5px;
}

/* wygląd elementów - li - wszystkich dzieci elementu - ol */
ol > li {
float:left;
width:150px;
margin-left:1px;
background-color:#FDD700;
height:2em;
}

/* wygląd elementu - li - pierwszego dziecka elementu - ol */
ol > li:first-child {
margin-left:0;
}

/* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover {
background-color:#EEE;
}

/* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > a {
color:#09C;
}

/* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > ul {
display:block;
}

/* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */

/* wygląd głównych rozwijanych elementów - ul */
ol > li > ul {
display:none;
list-style-type:none;
padding:0;
margin:0;
}

/* wygląd elementu - li - w części rozwijanej */
ol > li > ul > li {
position:relative;
background-color:#EEE;
}

/* wygląd elementu - a - w części rozwijanej */
ol > li > ul > li > a {
border-top:1px solid #FFF;
}

/* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
ol > li > ul > li:hover {
background-color:#DDD;
}

/* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
ol > li > ul > li:hover > a {
color:#09C;
}

I nie pokazuje mi w menu rozwijanym logout i link 1. Czemu?

edit: i jak zrobic aby te linki nie byly podkreślone jak na nie najade xD

 

text-decoration: none;

Zarchiwizowany

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

Tematy
×
×
  • Dodaj nową pozycję...