Edycja CSS / HTML, CSS - Brak reakcji.

pytanie zadane 26 października 2016 w HTML i CSS przez Lukash4k1 Nowicjusz (120 p.)
edycja 26 października 2016 przez Lukash4k1

Witam, spotkałem się z dziwnym problemem, a mianowicie podczas edycji CSS, na stronie (localhost) nie widzę żadnych zmian... Piszę stronkę już ponad miesiąc (uczę się), no i przyszedł czas na poprawę całego kodu, chciałem zacząć od uporządkowania właśnie kodu CSS'a (pozmieniać nazwy klas (uporządkować je), zredukować kod do granic moich możliwości), i na dzień dobry, problemy :)

myślę że warto wspomnieć o tym że gdy usuwałem kawałek kodu CSS, tak aby sprawdzić co się stanie, to na stronie po odświeżeniu nie było żadnych zmian... dopiero jak zmieniłem nazwę klasy w HTML'u to styl się popsuł, ale gdy zmieniłem nazwę na starą to wszystko wróciło do normy, mimo tego że w CSS nie było już tej klasy... Dopiero następnego dnia, jak sprawdzałem stronkę to zadziałał brak tego kawałka kodu CSS, i na stronie miałem kolokwialnie mówiąc "syf", CSS mam rozdzielony na kilka plików, wszystko dobrze polinkowane... gdy usuwam "menu.css" to menu się sypie, ale jak coś w tym pliku zmieniam, to nie ma reakcji, tak jak wyżej pisałem..."

Pomocy :D
PS kod ma tak z 7k linijek kodu (wliczając wszystko) nie mogę się doczekać jak to wszystko ogarnę :D tak aby było jak najmniej :)

3 odpowiedzi

odpowiedź 26 października 2016 przez Ivan Maniak (60,650 p.)

Stawiam, że to wina cache przeglądarki. Usuń je/skorzystaj z trybu incognito.

Aby usunąć cache w Chrome przejdź do ustawień -> prywatność -> wyczyść dane przeglądania

P.S. Jeżeli jesteś leniwy i nie chce Ci się wchodzić w ustawienia przeglądarki możesz za każdym razem wyłączać i włączać komputer - jak kto woli :)

komentarz 26 października 2016 przez Lukash4k1 Nowicjusz (120 p.)

Ok, dzięki wielkie :) Pomogło, idzie to jakoś ogarnąć, żebym nie musiał tego usuwać nontoper? Dobrze zrozumiałem w trybie Incognito będzie ok?

Pytanie bonus mam :)

nie mogę użyć klasy przy ikonach fontello które są elementem listy ol > li

klasa zwie się .MENU_ICON, z id działa, ale chciał bym to ustawić jako jedną klasę, ale coś nie załapuje, błąd w zapisie? próbowałem różnych zapisów. można zerknąć w kod.

KOD: mojego pliku header.php

<?php
    session_start();
    ini_set('default_charset', 'UTF-8');
?>
<!DOCTYPE HTML>
<html lang="pl">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
 <title></title>
 <script src='https://www.google.com/recaptcha/api.js'></script>
 
 <meta  name="description" content=""/>
 <meta name="keywords" content="" />
 
 <link rel="stylesheet" href="media/css/reset.css" type="text/css" />
 <link rel="stylesheet" href="media/css/style.css" type="text/css" />
 
 <link rel="stylesheet" href="media/css/logo.css" type="text/css" />
 
 <link rel="stylesheet" href="media/css/menu.css" type="text/css" />
 <link rel="stylesheet" href="media/css/register.css" type="text/css" />
 
 <!-- CSS PODZIELONY PO Menu Navigacyjnym-->
 <link rel="stylesheet" href="media/css/postac.css" type="text/css" />
 <link rel="stylesheet" href="media/css/gildia.css" type="text/css" />
 <link rel="stylesheet" href="media/css/errors.css" type="text/css" />
 <link rel="stylesheet" href="media/css/konto.css" type="text/css" />
 <link rel="stylesheet" href="media/css/zarzad.css" type="text/css" />
 <link rel="stylesheet" href="media/js/lightbox2-master/dist/css/lightbox.min.css" type="text/css" />
 
 <link rel="stylesheet" href="css/fontello.css" type="text/css" />
 <link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' />
 
</head>
<body>
    <div class="wrapper">
       
        <div class="nav">
            <ol class="Navv">
 
                <li><a href="?page=home">Home</a></li>
                <li class="NAVdown"><a href="#">Postać</a>
                    <ul>
                        <li class="NAVright"><a href="#">Klasy</a>
                            <ol>
                                <li><a href="?page=p-kl-warrior">Warrior</a></li>
                                <li><a href="?page=p-kl-elementalist">Elementalist</a></li>
                                <li><a href="?page=p-kl-thief">Thief</a></li>
                                <li><a href="?page=p-kl-guardian">Guardian</a></li>
                                <li><a href="?page=p-kl-ranger">Ranger</a></li>
                                <li><a href="?page=p-kl-engineer">Engineer</a></li>
                            </ol>
                        </li>
                        <li class="NAVright"><a href="#">Frakcje</a>
                            <ol>
                                <li><a href="?page=p-fr-ludzie">Ludzie</a></li>
                                <li><a href="?page=p-fr-elfy">Elfy</a></li>
                                <li><a href="?page=p-fr-krasnoludy">Krasnoludy</a></li>
                            </ol>
                        </li>
                    </ul>
                </li>
                <li class="NAVdown"><a href="#">Inne</a>
                    <ul>
                        <li><a href="?page=dnl-poczatek">Poczatek</a></li>
                        <li><a href="?page=dnl-zdj">Zdjecia</a></li>
                        <li><a href="?page=dnl-oswajanie">Oswajanie</a></li>
                        <li><a href="?page=dnl-budowanie">Budowanie</a></li>
                        <li><a href="?page=dnl-socialxp">Social XP</a></li>
                    </ul>
                </li>
                <?php
                if(isset($_SESSION['dostep']))
                {
                echo    '<li class="NAVdown"><a href="#">Gildia</a>';
                echo        '<ul>';
                echo            '<li><a href="?page=g-nowinki">Nowinki</a></li>';
                echo            '<li class="NAVright"><a href="#">Zdjęcia</a>';
                echo                '<ol>';
                echo                    '<li><a href="?page=g-zdj-eventy">Eventy Gildii</a></li>';
                echo                    '<li><a href="?page=g-zdj-walki">Walki</a></li>';
                echo                    '<li><a href="?page=g-zdj-rozne">Różne</a></li>';
                echo                '</ol>';
                echo            '</li>';
                echo            '<li><a href="?page=g-wypady">Wypady</a></li>';
                echo            '<li><a href="?page=g-forum">Forum</a></li>';
                echo            '<li><a href="?page=g-czlonkowie">Czlonkowie</a></li>';
                echo            '<li><a href="?page=g-rangi">Rangi</a></li>';  
                echo        '</ul>';
                echo    '</li>';
                }
               
                echo '<li><a href="?page=regulamin">Regulamin</a></li>';
               
                if((isset($_SESSION['dostep'])) && ($_SESSION['dostep']>=90))
                {
                echo    '<li class="NAVdown"><a href="#">Zarządzaj</a>';
                echo        '<ul>';
                echo            '<li class="NAVright"><a href="#">Członkowie</a>';
                echo                '<ol>';
                echo                    '<li><a href="?page=z-weryfikacja">Weryfikacja</a></li>';
                echo                    '<li><a href="?page=AD_awans">Awans</a></li>';
                echo                    '<li><a href="?page=AD_zmien_nick">Zmień Nick</a></li>';
                echo                    '<li><a href="#">###</a></li>';
                echo                    '<li><a href="?page=AD_usun_konto">Usuń Konto</a></li>';
                echo                '</ol>';
                echo            '</li>';
                echo            '<li class="NAVright"><a href="#">Ustawienia</a>';
                echo                '<ol>';
                echo                    '<li><a href="#">###</a></li>';
                echo                    '<li><a href="?page=AD_ustaw_rangi">Ustaw Rangi</a></li>';
                echo                '</ol>';
                echo            '</li>';
                echo            '<li><a href="?page=rekrutacja">Rekrutacja</a></li>';
                echo        '</ul>';
                echo    '</li>';
                }
                else
                {
                    echo '<li><a href="?page=rekrutacja">Rekrutacja</a></li>';
                }
               
                if((isset($_SESSION['zalogowany'])) && ($_SESSION['zalogowany']==true))
                {
                    echo '<li id="settings-icon"><a href="?page=settings"><i class="icon-wrench"></i></a></li>';
                    echo '<li class="MENU_ICON"><a href="?page=logout"><i class="icon-logout"></i></a></li>';
                }
                else
                {
                    echo '<li id="login-set-icon"><a href="?page=login"><i class="icon-off"></i></a></li>';
                }
                ?>
                <div style="clear: both;"></div>
            </ol>
        </div>
    </div>
       
        <div class="header">
            <div class="logo">
                <div class="logoIMG"></div>
                <div class="logoTXT">Equites<span style="color: #D61E33;">Apocalipsis.pl</span></div>
                <div style="clear: both;"></div>
            </div>
           
        </div>

KOD CSS odpowiedzialny za menu:

/* STYLIZACJA MENU (NAVI) =============================================================*/
.wrapper
{
	height:60px;
}
.nav
{
	width: 100%;
	padding: 10px 0;
	text-align: center;
	background-color: black;
	color: black;
	border-bottom: 1px solid white;
	height: 40px;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

.Navv .NAVdown
{

	background-image:url('../img/down.png');
	background-repeat:no-repeat;
	background-position:90% 40%;

}

.Navv .NAVright
{
	background-image:url('../img/right.png');
	background-repeat:no-repeat;
	background-position:95% center;
}
.MENU-ICON
{
	width: 50px;
	border-right: none;
}
/* GŁÓWNY PASEK MENU - Nawigacja górna */
.Navv
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display:inline-block;
}
.Navv a
{
	color: white;
	text-decoration: none;
	display: block;
}
.Navv > li
{
	width: 150px;
	max-width: 150px;
	height: 40px;
	border-right: 1px dashed white;
	float: left;
}
.Navv > li:first-child
{
	border-left: 1px dashed white;
}
.Navv > li:hover > a
{
	color: orange;
}
.MENU-ICON        /* klasa nie działa a id tak.. */
{
	border-right: none;
	width: 55;
}
#settings-icon,#login-set-icon,#logout-set-icon/* Ikony w Menu 'Log-in, Log-out, Settings' */
{
	width: 50px;
	border-right: none;
}
/* PIERWSZY POZIOM ROZWIJANEGO MENU \KLASY --> 'ELEMENT' */
.Navv > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}

.Navv > li > ul > li
{
	background-color: #111;
	border-radius: 10px;
	border-top: 2px solid white;
	position: relative;
	z-index: 100;
}
.Navv > li > ul > li:hover > a
{
	 color: orange;
}
.Navv > li:hover > ul
{
	display: block;
}
/* DRUGI POZIOM ROZWIJANEGO MENU \POSTAC --> KLASY --> 'ELEMENT' */
.Navv > li > ul > li > ol 
{
	display:none;
	position:absolute;
	left:100%;
	width:100%;
	margin-top:-2.1em;
}
.Navv > li > ul > li > ol > li 
{
	border-right: none;
	background-color: #111;
	border-radius: 10px;
	border-top: 2px solid white;
	
}
.Navv > li > ul > li > ol > li:hover > a
{
	color: orange;
}
.Navv > li > ul > li:hover > ol 
{
	display:block;
}

EDIT: Teraz zobaczyłem że jest opcja "zadaj pytanie, do tej wypowiedzi'
PS jak dać+? albo coś w tym stylu? ocena w górę wystarczy? :D

komentarz 26 października 2016 przez jpacanowski VIP (101,940 p.)
edycja 26 października 2016 przez jpacanowski

P.S. Jeżeli jesteś leniwy i nie chce Ci się wchodzić w ustawienia przeglądarki możesz za każdym razem wyłączać i włączać komputer - jak kto woli :)

O, tak... uruchamianie na nowo komputera co zmianę w kodzie to bardzo świetne rozwiązanie.

Nigdy nie miałem takiego problemu, że po zmianie trzeba było czyścić cache przeglądarki, gdyż w Chrome wystarczy 2 razy pod rząd odświeżyć stronę. Tzn. gdy nie wyświetlały mi się zmiany, to wystarczy 2 razy pod rząd odświeżyć stronę.

2	komentarz 26 października 2016 przez writen Nałogowiec (29,060 p.) Takie magiczne CTRL + F5

1	komentarz 26 października 2016 przez Pietrak Pasjonat (18,850 p.) Wchodząc przez chrome to F12->Network->Disable cache i przy włączonych DevTool nie będzie się zapisywać.

komentarz 27 października 2016 przez Lukash4k1 Nowicjusz (120 p.)

Faktycznie magiczne :) Dzięki! Opcja CTRL + f5 zarąbista
-----
F12 -> networ -> disable cache tez jest mega :)
Dzięki za pomoc!

Ale nurtuje mnie jeszcze czemu nie mogę użyć classy tylko musze używać id w tym jednym w/w przypadku. :) Ale to już mi w niczym specialnie nie przeszkadza (kwestia dociekliwości, bo mimo wszystko wolę użyć w tym przypadku klasy [bo wydaje mi się że mogę.])