Lista nie jest przed tekstem

Question

Witam,

moim problemem jest wysuwana lista. @edit Aktualny problem: lista nie jest przed tekstem

http://wklej.org/id/3260854/   HTML

http://wklej.org/id/3260855/ CSS .

Answer 1

Kod jest naprawdę straszny :v

ol służy do wypisywania list numerowanych, a nie menu. Dobrym przykładem wykorzystania ol jest np.: lista kroków. Czy menu jest listą kroków? Moim zdaniem nie - listą owszem, ale każdy element jest w pewnym sensie niezależny i nie następuje po innym.

Swoją drogą, nawigacja powinna wyglądać tak: 

nav.page-nav > ul.menu  > (li.menu-item + (krok ewentualny: ul.submenu>li.submenu...)) * 5 > a.menu-link)

a nie tak:

div.navigation > div.opolskiejnazwie * 5 > ol.klasaniepozwalajacanazrozumieniecoelementrobi > li > h2

Aby kod działał poprawnie, należy wykorzystać pozycjonowanie elementów. Dla .ekranizacje nadaj position: relative - tak, aby bloki w tym divie można było pozycjonować względem niego. Dla listy rozwijanej nadajemy position: absolute oraz width: 100% - dzięki temu elementy, które się pokażą będą działały prawidłowo.

Link do codepena: https://codepen.io/anon/pen/VMbPyv

Answer 2

Co do przerwy to na ten moment wydaje mi się że któryś z borderów jest powodem. Najprościej będzie jeżeli weźmiesz narzędzia developerskie swojej przeglądarki, dasz inspecta na element który Cię interesuje i pobawisz się właściwościami css na podglądzie. Szybko dojdziesz do tego co jest przyczyną. Co do tego że lista nie jest przed tekstem to poczytaj o z-index.

Mały tip na przyszłość nie pisz 4 razy padding-top 20px, padding-right 30px itp tylko padding 20px 30px. Zadbaj o czytelność i prostote kodu

Comments

1.Wpisałem z-index: 100 więc powinno działać , a nie działa.

2. Usunąłem wszystkie border'e jakie były na stronie i odstęp dalej jest.

@edit moja przeglądarka jest (...) i na firefoxie mam margines a na atomie + chrome go już nie mam.

3. Dzięki za tipa.

---

Dorzuć do css normalize:

https://necolas.github.io/normalize.css/

może rozwiąże to Twój problem

---

No odstęp znikł, ale pozostaje kwestia tego z-index, masz może pomysł?

---

Uzywając z-index dodałeś position: relative? Jeżeli to nie zadziałą to wrzuć kod na codepena, będzie prościej

@edit

Widze że dodałeś wiec lipa, zarzuć kod na codepena albo fiddla i ogarniemy

---

W sensie html od A-Z?

---

wrzuć kod html z elementami które nie działają wraz z css

---

No nie działa tylko lista a to jest już kod u góry, a resztę wszystko działa, a CSS:

body
{
  background-color: silver;
    margin: 0;
}

/* ########### HOVER/ <A> ETC ###########  */

a
{
  text-decoration: none;
  color: white;
display: block;
}

a:hover
{
  text-decoration: none;
  color: red;
}

a:active
{
  text-decoration: none;
  color: white;
}

/* #################################################### */



/* ########### TOP ########### */

#wrapper
{
  width: 100%;
  background-color: #303030;
  color: white;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}


.navigation
{
  width: 1062px;
  margin-right: auto;
  margin-left: auto;
height: 65px;
text-align: center;
border-bottom: 1px solid black;
border-top: 1px solid black;
}


.obohaterze
{
    float:left;
    width: 264px;
    border-right: 1px dashed #ddd;
    border-left: 1px dashed  #ddd;
}


.charakterystyka
{
   float: left;
   width: 264px;
   border-right: 1px dashed #ddd;
}


.ekranizacje
{
  float: left;
  width: 264px;
  border-right: 1px dashed #ddd;
  margin-bottom: 0;
}


.ciekawostki
{
  float: left;
  width: 264px;
border-right: 1px dashed #ddd;
}


/* #################### CLOSE TOP #################### */




/* #################### LIST #################### */


.list-ol
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}


.list-ol>li:hover
{
  cursor: pointer;
}

.list-ol:hover >.list-ul
{
  display: block;
}


.list-ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
 display: none;
}


.list-ul>li
{
  background-color: #303030;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
 position: relative;
  z-index: 2;
 border-bottom: 2px dashed black;
}


.list-ul>li:first-child
{
  border-bottom:  2px dashed black;
}


/* ########### CLOSE LIST ########### */




/* ########### CONTENT ########### */

.container
{
  width: 940px;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  text-align: justify;
  min-height: 1000px;
  padding-right: 60px;
  padding-left: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid white;
  font-size: 20px;
}

#slider>center>img
{
  width: 800px;
  height: 497px;
  border: 2px solid black;
}

.bookmark>a
{
  color: orange;
  width: 100px;
  display: inline-block;
}

.bookmark>a:hover
{
   color: blue;
}



/* ########### FOOTER ########### */

.footer
{
  width: 100%;
  background-color: #303030;
  height: 50px;
  padding-top: 10px;
}


/* ########### LIST CIEKAWOSTKI ########### */


.ul-ciekawostki>li
{
  font-size: 18px;
}

.ul-ciekawostki>li>center>img
{
  width: 500px;
  height: 311px;
  margin-top: 15px;
  margin-bottom: 15px;
}


/* ########################################################### */

 

---

Miałeś to wrzucić na codepena, tak żebym mógł odpalić sobie to w przeglądarce, zrobić inspekta i rozwiązać Twój problem w 2 minuty.