Rozwijane menu...problem

Wszystko o tworzeniu stron w języku X(HTML) i CSS
jawa
Bywalec
Bywalec
Posty: 43
Dołączył(a): sobota, 17 grudnia 2011, 13:23

Rozwijane menu...problem

Post przez jawa »

Witam...rozsypalo mi sie menu i nie wiem co jest grane..kombinowalem, sprawdzalem i nie wychodzi mi. Probujac zrobic rozwijane menu dla sprawdzenia...tak jak w kursie wpisywalem sobie kilka razy text z </br> i juz tutaj pojawily sie problemy bo zostal on wyswietlony nap a nie pod linkiem z glownego menu....po stworzeniu listy nastapil koniec swiata..rozsypalo sie.myslalem ze to cos moze z wczesniejszymi display:inline-block...zamienialem je na rozne sposoby i nic....Prosze o pomoc:

Code: Zaznacz cały

		<style type="text/css">
			/*<![CDATA[*/
				*
				{
					margin:0px;
					padding:0px;
				}
				body
				{
					background-image: url('obrazki/vk_tlo.jpg');
							
				}
				#kontener
				{
					width:1004px; 
					margin:0px auto;
					
				}
				#gorna_cz_kontenera
				{
					position:relative; 
					background-image:url('obrazki/logo_tlo.gif');
					width:944px;
					height:150px;
				}
				img.logo
				{
					position:absolute; 
					left:20px;
					top:50px;
				}
				#kontakt_box
				{
					position:absolute;
					font-family:"Trebuchet MS", Helvetica, sans-serif;
					font-size:12px;
					color:grey;
					line-height:120%;
					top:30px;
					right:30px;
				}
				a
				{
					color:teal;
					text-decoration:none;
				}
				a:hover
				{
					color:#0000FF;
				}
				th
				{
					color:teal;
				}
				/*MENU GORNE*/
				#gorne_menu
				{
					position:absolute;
					left:30px;
					bottom:0px;
				}
				
				{
					list-style-type:none;
					float:left;
					border-right:2px solid black;
				}
				#wlasciwe_gorne_menu a
				{
					background-image:url('obrazki/gorne_menu.png');
					height:32px;
					border:none;
					display:block;
					float:left; /*dla pewnosci*/
					padding:0px 10px; 
					font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
					font-size:10px;
					font-weight:bold;
					color:white;
				}
			
				span.link
				{
					display:block;
					margin-top:10px;
				}
				#wlasciwe_gorne_menu li a:hover
				{
					background-image:url('obrazki/hover_gorne_menuu.gif');
					color:#808080;
				}
				#srodkowe_menu
				{
					background-image:url('obrazki/sm_tlo.gif');
					width:944px;
					height:32px;
					
				
				}
				#srodkowe_menu li
				{
					list-style-type:none;
					float:left;
					font-family:"Trebuchet MS", Helvetica, sans-serif;
					font-style:italic;
					color:white;
					padding:0px 10px;
					
				}
				#srodkowe_menu li span.link2
				{
					display:block;
					margin-top:7px;
				}
				#srodkowe_menu li span.odstepik
				{
					display:block;
					margin-top:7px;
				}
				#pierwszy_poziom
				{
					margin-left:30px;				
				}
				#srodkowe_menu span.odstepik
				{
					display:block;
					margin:5px 10px 0px 10px;
					color:teal;
				}
				#srodkowe_menu li a:hover
				{
					color:white;
				}
				/*MENU ROZWIJANE*/
				
				#pierwszy_poziom li .drugi_poziom
				{
					display:none;
				}
				
			/*]]>*/
		</style>
	</head>
	<body>
		<div align="center"> 
			<div id="kontener">
				<div id="gorna_cz_kontenera">
					
					<img class="logo" src="obrazki/video-kurs-logo.gif.png" alt="logo"/>
					
					<div id="kontakt_box">
						<table>
								<th>Kontakt:</th>
								<tr><td>xxxxxxxx</td></tr>
								<tr><td>xxx Gairn road</td></tr>
								<tr><td>xxxxx Aberdeen</td></tr>
								<tr><td>Mobile:xxxxxxxxx</td></tr>
								<tr><td>e-mail:<a href="mailto:xxxxxx">xxxxxxxx</a></td></tr>
							
						</table>
						
					</div>
					<!--koniec kontakt box-->
					<div id="gorne_menu">
							<ul id="wlasciwe_gorne_menu">
								<li style="border-left:3px solid black;"><a href="#"><span class="link">Video Kursy</span></a></li>
								<li><a href="#"><span class="link">Darmowe Lekcje</span></a></li>
								<li><a href="#"><span class="link">Współpraca</span></a></li>
								<li><a href="#"><span class="link">Forum</span></a></li>
								<li><a href="#"><span class="link">Blog</span></a></li>
								<li><a href="#"><span class="link">Sklep</span></a></li>
							</ul>
						</div>
						<!--koniec gorne menu-->		
				</div>
				<!--koniec gorna cz kontenera-->
				<div id="srodkowe_menu">
							<ul id="pierwszy_poziom">
								<li><a href="#"><span class="link2">Czym są Video Kursy</span></a></li>
									sdfsdsdg</br>
									sdfsdsdg</br>
									sdfsdsdg</br>
									sdfsdsdg</br>
								<li><span class="odstepik">:-:</span></li>
								<li><a href="#"><span class="link2">Kursy Tworzenia stron WWW</span></a></li>
								
								<ul class="drugi_poziom">
										<li><a href="#"> HTML i CSS </a></li>
										<li><a href="#"> PHP </a></li>
										<li><a href="#"> MySQL </a></li>
										<li><a href="#"> JavaScript </a></li>
										<li><a href="#"> XML i DTD </a></li>
										<li><a href="#"> Smarty </a></li>
									</ul>
								
								<li><span class="odstepik">:-:</span></li>
								<li><a href="#"><span class="link2">Kursy Programowania</span></a></li>
								<li><span class="odstepik">:-:</span></li>
								<li><a href="#"><span class="link2">Kursy Matematyki</span></a></li>
							</ul>
						</div>
		
			</div>
		<!--koniec kontener-->	
		</div>
		<!--koniec align=center-->
		
		
	</body>
</html>
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Rozwijane menu...problem

Post przez Morfidon »

Nie możesz dać jakichś innych elementów niż li w ul. Jeśli mają być to jakieś tagi to muszą być wewnątrz li.
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Rozwijane menu...problem

Post przez tajger »

Nie możesz pisać dowolnego tekstu w <li> jak chcesz... nie wolno ci stosować <br /> chodź to działa dlatego też może wysypywać.. nawet źle zapisujesz <br />... kolejna sprawa to błąd w stylach.. zapomniałeś dyrektywy czyli nazewnicta danego bloku stylowego.. jest puste:

Code: Zaznacz cały

 {
               list-style-type:none;
               float:left;
               border-right:2px solid black;
            }
..odpal to sobie w netbeansie to zobaczysz trochę błędów.. staraj się dobrze ogarnąć cssa to potem łatwo będzie szło (droga z górki) i na metodach cześto prób i błędów..
Zawsze walcz do końca i nigdy się nie poddawaj!
jawa
Bywalec
Bywalec
Posty: 43
Dołączył(a): sobota, 17 grudnia 2011, 13:23

Re: Rozwijane menu...problem

Post przez jawa »

Witam:-) Jesli chodzi o text w Li to wrzucilem go po ty jak sie rozsypalo,zeby sprawdzic czy bedzie tak jak na videokursie.....na filmie autorowi wyswietla sie pod elementami pierwszego poziomu menu a u mnie z boku..? Co do dyrektyw...to nie wiem czemu sie nie wkleily...w kodzie sa: zamieszczam jeszcze raz: pomozcie

Code: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
	<head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	  <meta http-equiv="content-language" content="pl" />
	     
      <meta name="author" content="xxxxxxx" />
	  <meta name="robots" content="index, follow" />
	  <meta name="copyright" content="xxxxxxxx" />
		<title>Webmaster</title>
	  <meta name="description" content="xxxxxxx" />

	  <meta name="keywords" content="xxxxxxx" />	
	  	
		<style type="text/css">
			/*<![CDATA[*/
				*
				{
					margin:0px;
					padding:0px;
				}
				body
				{
					background-image: url('obrazki/vk_tlo.jpg');
							
				}
				#kontener
				{
					width:1004px; 
					margin:0px auto;
					
				}
				#gorna_cz_kontenera
				{
					position:relative; 
					background-image:url('obrazki/logo_tlo.gif');
					width:944px;
					height:150px;
				}
				img.logo
				{
					position:absolute; 
					left:20px;
					top:50px;
				}
				#kontakt_box
				{
					position:absolute;
					font-family:"Trebuchet MS", Helvetica, sans-serif;
					font-size:12px;
					color:grey;
					line-height:120%;
					top:30px;
					right:30px;
				}
				a
				{
					color:teal;
					text-decoration:none;
				}
				a:hover
				{
					color:#0000FF;
				}
				th
				{
					color:teal;
				}
				/*MENU GORNE*/
				#gorne_menu
				{
					position:absolute;
					left:30px;
					bottom:0px;
				}
				#wlasciwe_gorne_menu li
			
				{
					list-style-type:none;
					float:left;
					border-right:2px solid black;
				}
				#wlasciwe_gorne_menu a
				{
					background-image:url('obrazki/gorne_menu.png');
					height:32px;
					border:none;
					display:block;
					float:left; 
					padding:0px 10px;
					font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
					font-size:10px;
					font-weight:bold;
					color:white;
				}
			
				span.link
				{
					display:block;
					margin-top:10px;
				}
				#wlasciwe_gorne_menu li a:hover
				{
					background-image:url('obrazki/hover_gorne_menuu.gif');
					color:#808080;
				}
				#srodkowe_menu
				{
					background-image:url('obrazki/sm_tlo.gif');
					width:944px;
					height:32px;
					
				
				}
				#srodkowe_menu li
				{
					list-style-type:none;
					float:left;
					font-family:"Trebuchet MS", Helvetica, sans-serif;
					font-style:italic;
					color:white;
					padding:0px 10px;
					
				}
				#srodkowe_menu li span.link2
				{
					display:block;
					margin-top:7px;
				}
				#srodkowe_menu li span.odstepik
				{
					display:block;
					margin-top:7px;
				}
				#pierwszy_poziom
				{
					margin-left:30px;				
				}
				#srodkowe_menu span.odstepik
				{
					display:block;
					margin:5px 10px 0px 10px;
					color:teal;
				}
				#srodkowe_menu li a:hover
				{
					color:white;
				}
				/*MENU ROZWIJANE*/
				
				#pierwszy_poziom li .drugi_poziom
				{
					display:none;
				}
				
			/*]]>*/
		</style>
	</head>
	<body>
		<div align="center"> 
			<div id="kontener">
				<div id="gorna_cz_kontenera">
					
					<img class="logo" src="obrazki/video-kurs-logo.gif.png" alt="logo"/>
					
					<div id="kontakt_box">
						<table>
								<th>Kontakt:</th>
								<tr><td>xxxxxxx</td></tr>
								<tr><td>xxxxx road</td></tr>
								<tr><td>xxxxxAberdeen</td></tr>
								<tr><td>Mobile:xxxxxx</td></tr>
								<tr><td>e-mail:<a href="mailto:xxxx@o2.pl">xxxx@o2.pl</a></td></tr>
							
						</table>
						
					</div>
					<!--koniec kontakt box-->
					<div id="gorne_menu">
							<ul id="wlasciwe_gorne_menu">
								<li style="border-left:3px solid black;"><a href="#"><span class="link">Video Kursy</span></a></li>
								<li><a href="#"><span class="link">Darmowe Lekcje</span></a></li>
								<li><a href="#"><span class="link">Współpraca</span></a></li>
								<li><a href="#"><span class="link">Forum</span></a></li>
								<li><a href="#"><span class="link">Blog</span></a></li>
								<li><a href="#"><span class="link">Sklep</span></a></li>
							</ul>
						</div>
						<!--koniec gorne menu-->		
				</div>
				<!--koniec gorna cz kontenera-->
				<div id="srodkowe_menu">
							<ul id="pierwszy_poziom">
								<li><a href="#"><span class="link2">Czym są Video Kursy</span></a></li>
								<li><span class="odstepik">:-:</span></li>
								<li><a href="#"><span class="link2">Kursy Tworzenia stron WWW</span></a></li>
								
								<ul class="drugi_poziom">
										<li><a href="#"> HTML i CSS </a></li>
										<li><a href="#"> PHP </a></li>
										<li><a href="#"> MySQL </a></li>
										<li><a href="#"> JavaScript </a></li>
										<li><a href="#"> XML i DTD </a></li>
										<li><a href="#"> Smarty </a></li>
									</ul>
								
								<li><span class="odstepik">:-:</span></li>
								<li><a href="#"><span class="link2">Kursy Programowania</span></a></li>
								<li><span class="odstepik">:-:</span></li>
								<li><a href="#"><span class="link2">Kursy Matematyki</span></a></li>
							</ul>
						</div>
		
			</div>
		<!--koniec kontener-->	
		</div>
		<!--koniec align=center-->
		
		
	</body>
</html>
Korzystaj ze znacznika code. Znacznik dodany
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Rozwijane menu...problem

Post przez tajger »

Mam do ciebie radę.. rób wszystko powoli i po kolei dodając element po elemencie i sprawdź kiedy się zacznie sypać.. generalnie to tu nie mam plików źródłowych więc ciężko byłoby mi określić
Zawsze walcz do końca i nigdy się nie poddawaj!
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Rozwijane menu...problem

Post przez Morfidon »

Masz dodane do każdej lekcji pliki źródłowe. Jeśli coś się różni to logiczne, że zadziała to inaczej. Często może być to wina głupiej spacji, literówki. Za Ciebie nikt tego nie będzie szukał. Musisz zrozumieć, że wina podczas gdy piszesz kod leży zawsze na Tobie, nie na komputerze. On interpretuje zawsze TAK jak być powinno.
jawa
Bywalec
Bywalec
Posty: 43
Dołączył(a): sobota, 17 grudnia 2011, 13:23

Re: Rozwijane menu...problem

Post przez jawa »

Witam....po dlugiej nieobecnosci wrocilem znow do pisania kodu.....niestety nie oge sie uporac z tym menu!!!
Nie moge sie sugerowac dokladnie lekcja bo to toszeczke inne menu rozwijane niz tam. U mnie po najechaniu myszka zmienia sie tlo co wywarza efekt wcisniecia sie elementu menu oraz ma sie rozwijac i to wszystko bez klikniecia.
Problem polega na tym ze LI drugiego poziomu menu nie jest pod spodem tylko z boku...

Code: Zaznacz cały

*
{
    margin: 0px;
    padding: 0px;
}
a
{
    text-decoration: none;
}
#menu
{
    background-image: url('pictures/menu11.gif');
    height: 40px;
    width: 1004px;
    margin:0px auto;
}
#menu li
{
    list-style-type: none;  
    float: left;
}
#menu li a
{
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    color: yellow;
    display:block;
    padding:10px 20px;
    
}
#menu li a:hover
{
    background-image: url('pictures/11hover.gif');
    
}
#menu #FirstLevel
{
    margin-left: 20px;
}

Code: Zaznacz cały

<div id="menu">
            <ul id="FirstLevel">
                <li><a href="#"><span class="links">Pierwszy_element_menu</span></a></li>
                      <ul id="SecondLevel">
                           <li>kjasbkjsb</li>
                      </ul>
                <li><a href="#"><span class="links">XXXX</span></a></li>
                <li><a href="#"><span class="links">XXXX</span></a></li>
                <li><a href="#"><span class="links">XXXX</span></a></li>
                <li><a href="#"><span class="links">XXXX</span></a></li>
                <li><a href="#"><span class="links">XXXX</span></a></li>
            </ul>
</div>
Tam gdzie wpisalem....float left ...probowalem zmienic ...#menu li...na #menu #FirstLevel li...albo na.... #FirstLevel li...Probowalem nawet czyscić cale SecondLevel z lewej....wtedy Li drugiego poziomu zjechalo pod Pierwszy element menu ale wraz z nim reszta menu pierwszego poziomu.....moglby mnie ktos oswiecic co jest nie tak??
Post Reply