Na wstępie chciałbym zaznaczyć, że nawet nie wiem dokładnie jak sformułować pytanie. Z tego względu przepraszam jeśli nazwa tematu kogoś zmyliła. Jestem osobą uczącą się CSS/HTML i od jakiegoś czasu kopiuję sobie "od zera" różne strony internetowe, żeby nabyć nieco umiejętności. W tej chwili próbuję skopiować stronę "Kwasowa grota". Niestety już na wstępie natrafiłem na bardzo upierdliwy problem, z którym już od dobrych paru godzin nie potrafię sobie poradzić i nie mam bladego pojęcia z czego on wynika. Na początek przedstawię swój kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="icon" href="http://www.acidcave.net/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<title>Kwasowa Grota</title>
</head>
<body>
<div id="container">
<!--Górne menu-->
<div id="bar_container">
<nav id="menu_gorne">
<a class="menu_gorne pasek Kwasowa" href="#"><img src="eye_22.png">Kwasowa Grota<span>▼</span>
<nav id="Kwasowa_rozwiniety">
<a class="rozwiniety_pasek" href="#">Strona główna, Niusy</a>
<a class="rozwiniety_pasek padding" href="#">Smocze forum</a>
<a class="rozwiniety_pasek" href="#">Heroes VII</a>
<a class="rozwiniety_pasek" href="#">Heroes VI</a>
<a class="rozwiniety_pasek" href="#">Heroes V</a>
<a class="rozwiniety_pasek" href="#">Heroes IV</a>
<a class="rozwiniety_pasek" href="#">Heroes III</a>
<a class="rozwiniety_pasek" href="#">Heroes II</a>
<a class="rozwiniety_pasek padding" href="#">Heroes I</a>
<a class="rozwiniety_pasek" href="#">Might & Magic X</a>
<a class="rozwiniety_pasek" href="#">Might & Magic IX</a>
<a class="rozwiniety_pasek" href="#">Might & Magic VI-VIII</a>
<a class="rozwiniety_pasek" href="#">Might & Magic II</a>
<a class="rozwiniety_pasek padding" href="#">Might & Magic I</a>
<a class="rozwiniety_pasek" href="#">Dark Messiah</a>
<a class="rozwiniety_pasek" href="#">Duel of Champions</a>
<a class="rozwiniety_pasek" href="#">Heroes Kingdoms</a>
<a class="rozwiniety_pasek" href="#">Clash of Heroes</a>
<a class="rozwiniety_pasek" href="#">Legends</a>
<a class="rozwiniety_pasek" href="#">Warriors</a>
<a class="rozwiniety_pasek" href="#">Crusaders</a>
<a class="rozwiniety_pasek" href="#">Arcomage</a>
<a class="rozwiniety_pasek" href="#">Heroes Chronicles</a>
<a class="rozwiniety_pasek padding" href="#">King's Bounty</a>
<a class="rozwiniety_pasek" href="#">Horn of the Abyss</a>
<a class="rozwiniety_pasek" href="#">In The Wake of Gods</a>
<a class="rozwiniety_pasek" href="#">VCMI</a>
<a class="rozwiniety_pasek padding" href="#">Equilibris</a>
<a class="rozwiniety_pasek" href="#">Historia światów MM</a>
<a class="rozwiniety_pasek padding" href="#">Czytelnia</a>
<a class="rozwiniety_pasek" href="#">Ciekawostki</a>
<a class="rozwiniety_pasek" href="#">Raiders</a>
<a class="rozwiniety_pasek" href="#">Wielki Leksykon Smoków</a>
<a class="rozwiniety_pasek padding" href="#">Forge</a>
<a class="rozwiniety_pasek" href="#">Skarbiec</a>
<a class="rozwiniety_pasek" href="#">Mapy</a>
<a class="rozwiniety_pasek" href="#">Kanał na YouTube</a>
<a class="rozwiniety_pasek" href="#">Portale</a>
<a class="rozwiniety_pasek padding" href="#">Redakcja, Kontakt</a>
</nav>
</a>
<a class="menu_gorne pasek" href="#">Heroes VII</a>
<a class="menu_gorne pasek" href="#">Might & Magic X</a>
<a class="menu_gorne pasek" href="#">Dark Messiah</a>
<a class="menu_gorne pasek" href="#">Horn of the Abyss</a>
<a class="menu_gorne pasek" href="#">Historia Światów MM</a>
<a class="menu_gorne pasek Skarbiec" href="#">Skarbiec
<div id="Skarbiec_rozwiniety">
<a class="rozwiniety_pasek" href="#">Gry</a>
<a class="rozwiniety_pasek" href="#">WoG, HotA, VCMI</a>
<a class="rozwiniety_pasek" href="#">Programy, Patche</a>
<a class="rozwiniety_pasek" href="#">Modyfikacje do gier</a>
<a class="rozwiniety_pasek" href="#">Poradniki, Dokumenty</a>
<a class="rozwiniety_pasek padding" href="#">Inne Skarby</a>
</div>
</a>
<a class="menu_gorne pasek Czat" href="#"><img src="cemet.png">Czat
<ul><p class="padding">Po cmentarzu włóczą się:</p>
<li>Andruids</li>
<li>Belegor</li>
<li>Hobbit</li>
<li>Irhak</li>
<li>Kastore</li>
<li class="padding">Lord Xeen</li>
</ul>
</a>
</nav>
<form action="#" method="post">
<div id="pasek_wyszukiwania">
<input class="input_text" type="text" name="Wyszukaj...">
<input class="submit_button" type="submit" value="zapisuje się">
</div>
</form>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
body {
background-image: url(backmain8.jpg);
background-position: center;
background-attachment: fixed;
}
a {
text-decoration: none;
}
/*GÓRNE MENU*/
#bar_container {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
width: 100%;
height: 30px;
z-index: 10000;
text-align: center;
}
@media (max-width: 800px) {
#bar_container {
height: 60px;
}
}
#menu_gorne {
float: left;
position: relative;
margin-left: 100px;
}
.menu_gorne.pasek {
position: relative;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
color: #BACB44;
padding: 8px 8px 0px;
bottom: 2px;
float: left;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 24px;
}
.menu_gorne.pasek.Kwasowa img,
.Czat img {
position: relative;
top: -1px;
padding-right: 3px;
float: left;
}
.menu_gorne.pasek.pierwszy span {
padding-left: 4px;
}
.menu_gorne.pasek:hover {
background-color: #1F1F1F;
color: #CFF280;
}
/*Rozwijane Menu Górne KWASOWA GROTA, SKARBIEC i CZAT*/
#Kwasowa_rozwiniety {
position: absolute;
width: 170px;
background-color: white;
top: 33px;
left: 0px;
display: non;
}
#Skarbiec_rozwiniety {
width: 170px;
background-color: white;
top: 33px;
left: 300px;
display: noe;
position: absolute;
}
.menu_gorne.pasek:hover #Kwasowa_rozwiniety, .menu_gorne.pasek:hover #Skarbiec_rozwiniety {
display: block;
}
.menu_gorne.pasek.Czat ul {
list-style-type: none;
}
.rozwiniety_pasek {
color: #BACB44;
display: block;
text-align: left;
padding: 1px 5px 0 12px;
}
.padding {
padding-bottom: 8px;
}
.rozwiniety_pasek:hover {
background-color: #1F1F1F;
color: #CFF280;
}
.Czat ul {
position: absolute;
width: 170px;
background-color: red;
top: 33px;
left: 0px;
display: noe;
color: white;
text-align: left;
padding: 1px 5px 0 20px;
}
.menu_gorne.pasek.Czat ul p {
margin-left: -10px;
}
/*Koniec Rozwijane Menu Górne KWASOWA GROTA*/
#pasek_wyszukiwania {
position: relative;
top: 4px;
float: left;
margin-left: 25px;
}
@media (max-width: 1100px) {
#pasek_wyszukiwania {
display: none;
}
}
.input_text {
width: 138px;
height: 22px;
border: 0.5px solid #4D723C;
}
.submit_button {
width: 57px;
height: 22px;
background-color: #4D723C;
border-radius: 5%;
border: 0.5px solid #444444;
}
/**/
Problem występuje w polu "Kwasowa Grota" i "Skarbiec" na pasku menu górnego. Z nieznanego powodu pojawił się po lewej stronie menu dodatkowy "element", padding, margin, czy diabli wiedzą co to, który wszystko psuje. Przede wszystkim rozwijane menu pozycjonuje się względem tego elementu, no i dodatkowo pojawiło się siłą rzeczy niewielkie wcięcie. Problem nie występuje w polu "Czat". Co ciekawe gdy zmieniam tag nav "Kwasowa_rozwiniety" na div, lub tag div "Skarbiec_rozwiniety" na nav (i na odwrót), to element znika i wszystko jest w porządku. Przynajmniej do czasu zapisania kodu i odświeżenia strony - wtedy problem wraca. Tak więc nie wiem czy jest to jakaś zależność html albo css, której nie rozumiem, czy mi po prostu program w jakiś sposób formatuje kod, bądź zwyczajnie bug'uje (korzystam z Bracketsa). Ciężko jest to opisać więc załączam screeny.
W ostatnim przypadku zmieniłem div na nav w "Skarbiec" i nav na div w "Kwasowa Grota" (używam na przemian div i nav, bo się uczę i sprawdzam różnice między tagami, dodatkowo w tej sytuacji próbowałem różnych możliwości, żeby naprawić błąd) i wszystko wyświetla się prawidłowo, lecz tylko do czasu odświeżenia strony. Dodam jeszcze, że ten dziwny "element" da się normalnie edytować, ale nie potrafię go usunąć. Bardzo proszę o pomoc.
Jeśli ktoś ma jeszcze jakieś wskazówki odnośnie kodu, to też chętnie przyjmę wszelkie porady.
Screeny są kiepskiej jakość. Na pierwszym screenie "element" ma nazwę a.menu_gorne.pasek.Kwasowa a drugi a.menu_gorne.pasek.Skarbiec (mają wielkość 15.99 na 31.99).