Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Kolor tła dla aktywnej podstron [CSS i HTML]
#1
Mam problem związany z tłem dla aktywnej podstrony. Gdy najeżdżam myszką na podstronę to wszystko działa , tło się pojawia , ale gdy kliknę w podstronę to tego tła już nie ma.
Proszę o pomoc, bo już drugi dzień się z tym męczę.
Tutaj podaję link do strony gdzie możecie zobaczyć jak to działa ( działają dwie podstrony "główna i o serialu")

Strona:
http://www.twdinform.aq.pl/

HTML:
Kod:
<div class="container">

   <ul id="nav">
                <li><a href="index.html" >Główna</a></li>
                <li><a href="oserialu.html">O serialu</a>
                </li>
                <li><a class="hsubs" href="index.">Galeria +</a>
                  <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a href="#">Postacie</a>
                </li>
                <li><a class="hsubs"  href="#"> Gry + </a>
                  <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a href="#">Wideo</a></li>
                <div id="lavalamp"></div>
            </ul>

        </div>

CSS:
Kod:
#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

}
#nav li {
    background: url('menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:href, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 16px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}

#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 16px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 103px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 193px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

Drugi CSS:
Kod:
*{
    margin:0;
    padding:0;
}
body {
    font:14px/1.3 Arial,sans-serif;
    background-color:#212121;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    color:#fff;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    height: 571px;
    margin: 10px auto;
    width: 957px;
}
Odpowiedz
#2
Masz style dla :hover. Musisz takie same stworzyć dla klasy np. .active i po przejściu na daną podstronę dodawać ją do danego linka.

Kod:
#nav li.active > a {
    color: #00B4FF;
}
#nav li:nth-of-type(1).active ~ #lavalamp {
    left: 16px;
}
...
Odpowiedz
#3
Dodałem te klasy do CSS, dodałem klase do podstrony i nic... Czyli zrobiłem tak:

Dodałem to:
Kod:
#nav li:active > a {
    color: #00B4FF;
}
#nav li:nth-of-type(1).active ~ #lavalamp {
    left: 16px;
}

W HTML zrobiłem tak:
Kod:
<li><a href="index.html" class="active">Główna</a></li>

Kolor podstrony w menu zmienia się tylko wtedy jak kliknę na np"Główna" i przeciągnę poza menu. Kolor znika jak kliknę w byle jakie miejsce na stronie.
Odpowiedz
#4
Źle.
1) Do LI dodałeś active po : a nie po .
2) Klasę active nadałeś na LI, a w kodzie html dodałeś ją do A
Odpowiedz
#5
Dzięki kolego za pomoc, bardzo mi pomogłeś ! Smile)

A jak już jesteś taki pomocny to mógłbyś mi podpowiedzieć jak zrobić żeby ten suwak się zatrzymywał na podstronie.
Dla przykładu jeśli wpiszę do CSS coś takiego to owszem suwak się zatrzymuje, ale wtedy już nie chce się ruszać (nie chodzi za kursorem myszki), zmienia pozycje tylko wtedy jak wejdę na inną podstronę. "Lavalamp to ten suwak"

Kod:
#nav li:nth-of-type(1).active ~ #lavalamp {
    left: 16px;
}
#nav li:nth-of-type(2).active ~ #lavalamp {
    left: 90px;
}
#nav li:nth-of-type(3).active ~ #lavalamp {
    left: 170px;
}
#nav li:nth-of-type(4).active ~ #lavalamp {
    left: 250px;
}
Odpowiedz
#6
Może pomorze dodanie !important dla deklaracji z hover
Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Kursy (x)HTML/CSS DoGeR 9 18,338 18-01-2017, 21:55
Ostatni post: Michael
Sad HTML/CSS/JQUERY - Potrzebuje pomocy / Bezradność jokerblitzz 10 5,021 28-04-2016, 00:24
Ostatni post: mubi
  [CSS]+[HTML] Pozycjonowanie slidera. Youras 2 2,844 16-01-2016, 23:11
Ostatni post: Szymon Słowik
  [problem][html] cutenews i szablon kawadodek2000 1 1,548 13-08-2013, 16:49
Ostatni post: mateo
  [HTML][CSS] Powtarzanie nagłówka tabeli. ILIES 1 1,634 12-08-2013, 22:42
Ostatni post: Kartofelek

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele