• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z listą numerowaną

Cloud VPS
0 głosów
1,362 wizyt
pytanie zadane 6 września 2015 w HTML i CSS przez Lukasz Bywalec (2,320 p.)

Witam mam problem z listą numerowaną gdzy ją rozwijam (menu troche podobe jak w 3 odcinku z CSS)

to zamiast lista zasłonic mi tekst to zsuwa go w dół. szukam i nie widze problemu

Tutaj wycinek z HTML

<div class="nav">
		<ol>
			<li><a href="serwis.php">Strona główna</a></li>
			<li><a href="#">Kalendarz</a>
				<ul>
					<li><a href="#">Zwykły</a></li>
					<li><a href="#">Plan tygodniowy</a></li>
					<li><a href="#">Dodaj</a></li>
				</ul>
			</li>			
			<li><a href="#">Wydarzenia</a>
				<ul>
					<li><a href="#">Swięta</a></li>
					<li><a href="#">Dodaj</a></li>
				</ul>
			</li>
			<li><a href="#">Profil</a>
				<ul>
					<li><a href="#">Profil</a></li>
					<li><a href="#">Ustawienia</a></li>
					<li><a href="wyloguj.php">Wyloguj</a></li>
				</ul>
			</li>
		</ol>
	</div>

 

A tutaj CSS

#body .nav
{
	min-height:40px;
	margin:10px 0 10px 0;
	padding:0;
	background-color:#ededed;
}
.sticky
{
	width: 1030px;
	position: fixed;
	top:0;
	margin-left:auto;
	margin-right:auto;
}
#body .nav ol
{
	list-style:none;
	margin:0;
	padding:0;
}
#body .nav ol>li
{
	float:left;
	width: 100px;
	min-height:20px;
	padding:5px;
	margin:5px;
	text-align:center;
}
#body .nav ol>li:last-child
{
	float:right;
}
#body .nav ol>li a
{
	color:#000;
	text-decoration:none;
}
#body .nav ol>li>ul
{
	list-style-type: none;
	padding:0;
	margin:10px 0 5px 0;
	display: none;
	text-align:center;
}
#body .nav ol>li:hover>ul
{
	display:block;
}
#body .nav ol>li>ul>li
{
	padding:0;
	margin:0;
	line-height:25px;
	border-bottom: 2px dashed #ddd;
	z-index:100;
}
#body .nav ol>li>ul>li:first-child
{
	border-top: 2px dashed #ddd;
}

 

3 odpowiedzi

+1 głos
odpowiedź 6 września 2015 przez WWOTEX Mądrala (6,200 p.)
wybrane 6 września 2015 przez Lukasz
 
Najlepsza

Spróbuj ul zamienić na absolute. Czyli w ol > li > ul dodaj parametr: 

position: absolute;

jego miejsce wtedy dopasuj parametrami: 

top:pozycja od góry;
left:pozycja od lewej;

Powinno wtedy działać

ale te wszystkie 

#body ...

są podejrzane. Jeśli to takie id to takich nie dodawaj bo przeglądarka może to mylić z tagiem 

<body>

a jeśli tobie właśnie chodzi o ten tag to zamień 

#body 

na 

body

 

komentarz 6 września 2015 przez Lukasz Bywalec (2,320 p.)
#body to mam jako normalny div wstawiony
komentarz 6 września 2015 przez WWOTEX Mądrala (6,200 p.)
a pozycjonowanie absolutne coś dało?
komentarz 6 września 2015 przez Lukasz Bywalec (2,320 p.)

Spróbuj ul zamienić na absolute. Czyli w ol > li > ul dodaj parametr: 

?

1

position: absolute;

Właśnie tego brakowało, dzięki 

 

 

Ale za to teraz ja najade na jakiś ol > li czyli napis profil albo inny to mi sie ładnie rozwija i gdy chce kliknąc którąś z opcji która sie rozwineła to ta opcja znika i sie chowe ode mnie ;/

komentarz 6 września 2015 przez WWOTEX Mądrala (6,200 p.)
Tego to już nie rozumiem bo gdy wklejam zaledwie ten kod co pokazałeś to u mnie działa jak trzeba.
komentarz 6 września 2015 przez WWOTEX Mądrala (6,200 p.)
Faktyczniee.. zaraz spróbuję to obczaić
komentarz 6 września 2015 przez WWOTEX Mądrala (6,200 p.)

Już widzę w czym tkwi problem. Lista wewnętrzna istnieje tylko gdy najeżdżamy myszką na element listy zewnętrznej a pomiędzy nimi jest przerwa i gdy myszka przechodzi w dół to wchodzi na przerwę i już nie występuje HOVER więc aby wszystko było spoko zamień to :

#body .nav ol>li>ul
{
    margin:10px 0 5px 0;
}

na to: 


#body .nav ol>li>ul
{
    margin-bottom:5px;
}

a potem to:

#body .nav ol>li>ul>li:first-child
{
    border-top: 2px dashed #ddd;
}

na to:


.nav ol>li>ul>li:first-child
{
	margin-top:10px;
        border-top: 2px dashed #ddd;
}​

Mam nadzieję,  że pomogłem :D jeśli czegoś nie rozumiesz to daj znać

komentarz 6 września 2015 przez Lukasz Bywalec (2,320 p.)
Tak pomogłeś myslalem ze tutaj jest bład ale byłem zbyt zmęczony zeby poprawić samemu
komentarz 6 września 2015 przez WWOTEX Mądrala (6,200 p.)
To spoko polecam się na przyszłość.
+1 głos
odpowiedź 6 września 2015 przez Czort Nałogowiec (32,500 p.)
Może to #body sprawia problemy bo w html tego nie widać.
0 głosów
odpowiedź 6 września 2015 przez Comandeer Guru (607,060 p.)
Menu powinno być pozycjonowane absolutnie, żeby było wyciągnięte z normalnego obiegu strony.
komentarz 6 września 2015 przez Lukasz Bywalec (2,320 p.)
Zrobiłem absolute i pod menu mam tekst który był pod spodem i całe menu się zwężyło
komentarz 6 września 2015 przez Czort Nałogowiec (32,500 p.)

Musisz width ustawić, np.

width: 100%;

 

Podobne pytania

0 głosów
1 odpowiedź 407 wizyt
pytanie zadane 2 listopada 2015 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 1,599 wizyt
pytanie zadane 8 grudnia 2016 w PHP przez wanderer Gaduła (3,710 p.)
0 głosów
2 odpowiedzi 521 wizyt
pytanie zadane 2 listopada 2015 w Java przez Hinaru Początkujący (310 p.)

93,460 zapytań

142,454 odpowiedzi

322,724 komentarzy

62,838 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...