Kaklz Posted December 28, 2003 Report Share Posted December 28, 2003 Gribu panākt šādu skatu: ar aptuveni šādu kodu: <ul> <li>1. izvelne</li> <li>2. izvelne</li> <li>3. izvelne</li> <li class="sub"> <ul> <li>apaksizvelne</li> </ul></li> <li>4. izvelne</li> </ul> un attiecīgo CSS kodu: #menu ul { margin: 0px 15px 0px 0px; padding: 0px 0px 0px 5px; list-style-type:none; } #menu ul li { background-color: #FFCC33; border: 1px solid #FF9900; margin-top: 2px; } #menu ul li ul { margin: 0px 0px 0px 10px; padding: 0px; } #menu ul li ul li { margin: 0px; padding: 0px; } #menu ul li.sub { background-color: #FFFED0; border: 0px; } Uz Mozilla, Opera viss ir vislabākajā kārtībā, taču uz IE tas izskatās aptuveni šādi: Vai kādam ir kādas idejas, kā uz IE panākt vēlamo efektu? Paldies jau iepriekš ;) Link to comment Share on other sites More sharing options...
Aleksejs Posted December 28, 2003 Report Share Posted December 28, 2003 Manuprāt apakšizvēlni nevajag ietvert LI tagā (jautājums: vai li ir inline, vai block elements?) ja raksta šādi: <ul> <li>1. izvelne</li> <li>2. izvelne</li> <li>3. izvelne</li> <ul> <li>apaksizvelne</li> </ul> <li>4. izvelne</li> </ul> tad visam būtu jābūt ok. Link to comment Share on other sites More sharing options...
Kaklz Posted December 28, 2003 Author Report Share Posted December 28, 2003 Manuprāt apakšizvēlni nevajag ietvert LI tagā (jautājums: vai li ir inline, vai block elements?)ja raksta šādi: <ul> <li>1. izvelne</li> <li>2. izvelne</li> <li>3. izvelne</li> <ul> <li>apaksizvelne</li> </ul> <li>4. izvelne</li> </ul> tad visam būtu jābūt ok. Nu ir taada probleema, ka tas neatbilst XHTML specenei .. :( XHTML pieprasa, lai iekshaa esoshais UL buutu ieksh LI Link to comment Share on other sites More sharing options...
jb4 Posted December 29, 2003 Report Share Posted December 29, 2003 1) Lai taupītu baitus, aiz nulles (0) nav jāraksta nekādi px, jo 0px ir tikpat cik 0mm un 0em. Nulle ir un paliek nulle. 2) Aleksej, tur pat "specene" nav jālasa: padomā ko esi uzrakstījis - ul satur ul. Tā jau mēs sirmus matus dabūsim. ul pa tiešo nedrīkst saturēt ul, jo ul apzīmē līdzīgu elementu listi, bet ul nav līdzīgs li. 3) Vispirms uzraksti: ul, li { padding: 0; margin: 0; } Jo pārlūki piemaharē visādas atkāpes katrs pa savam. Un kas tālāk? Tālāk raksti ko vaig li ul li { padding-left: 20px; } 4) Un domā, ka ir līdzēts? Nea. Problēma ir iekš tā, ka ul ir block level elements un block level pēc noklusējuma tiek renderēti jaunā rindā. IE norenderē tavu patukšo li un sāk renderēt ul jaunā rindā tāpēc ir tā šķirba. Nezinu kā ir pareizi, bet IE rīkojas visnotaļ loģiski. 5) risinājums ir: li ul { float: left; } 6) Tātad viss kods: <html> <head> <style type="text/css"> ul, li { padding: 0; margin: 0; } li ul { float: left; } li ul li { padding-left: 20px; } </style> </head> <body> <ul> <li>1. izvelne</li> <li>2. izvelne</li> <li>3. izvelne</li> <li class="sub"> <ul> <li>apaksizvelne</li> </ul></li> <li>4. izvelne</li> </ul> </body> </html> Link to comment Share on other sites More sharing options...
Kaklz Posted December 29, 2003 Author Report Share Posted December 29, 2003 1) Lai taupītu baitus, aiz nulles (0) nav jāraksta nekādi px, jo 0px ir tikpat cik 0mm un 0em. Nulle ir un paliek nulle.2) Aleksej, tur pat "specene" nav jālasa: padomā ko esi uzrakstījis - ul satur ul. Tā jau mēs sirmus matus dabūsim. ul pa tiešo nedrīkst saturēt ul, jo ul apzīmē līdzīgu elementu listi, bet ul nav līdzīgs li. 3) Vispirms uzraksti: ul, li { padding: 0; margin: 0; } Jo pārlūki piemaharē visādas atkāpes katrs pa savam. Un kas tālāk? Tālāk raksti ko vaig li ul li { padding-left: 20px; } 4) Un domā, ka ir līdzēts? Nea. Problēma ir iekš tā, ka ul ir block level elements un block level pēc noklusējuma tiek renderēti jaunā rindā. IE norenderē tavu patukšo li un sāk renderēt ul jaunā rindā tāpēc ir tā šķirba. Nezinu kā ir pareizi, bet IE rīkojas visnotaļ loģiski. 5) risinājums ir: li ul { float: left; } 6) Tātad viss kods: <html> <head> <style type="text/css"> ul, li { padding: 0; margin: 0; } li ul { float: left; } li ul li { padding-left: 20px; } </style> </head> <body> <ul> <li>1. izvelne</li> <li>2. izvelne</li> <li>3. izvelne</li> <li class="sub"> <ul> <li>apaksizvelne</li> </ul></li> <li>4. izvelne</li> </ul> </body> </html> Lielumlielais paldies :) Link to comment Share on other sites More sharing options...
Kaklz Posted December 29, 2003 Author Report Share Posted December 29, 2003 (edited) Vēl pāris lietas, kas būs jāpieliek: Cik saprotu, tad elementi ar float atribūtu pēc noklusējuma nav 100% plati, līdz ar to, noformējot attiecīgo sarakstu, pieliekot border, rodas tāds ne īpaši smuks skats nākamajai izvēlnei aiz apakšizvēlnes, kas bildē redzama kā 4. izvelne Attiecīgi, ja nu gadījumā ir doma pielikt border, tad li.sub šis rāmis ir jānovāc, lai nebūtu rāmis iekš rāmja. Ja nu ir doma pielikt fona krāsu, tad jālieto margin, nevis padding, (lai panāktu attēlā redzamos efektus ar apakšizvēlnēm) nu īsāk izsakoties, sanāca apmēram: <html> <head> <style type="text/css"> ul {list-style-type: none;} ul, li { padding: 0; margin: 0; } li ul { float: left; width: 100%} li ul li { margin-left: 20px; } li {background-color: silver;border: 1px solid black; margin-top: 2px;} li.sub {border: 0; margin: 0;} </style> </head> <body> <ul> <li>1. izvelne</li> <li>2. izvelne</li> <li>3. izvelne</li> <li class="sub"> <ul> <li>apaksizvelne</li> </ul></li> <li>4. izvelne</li> </ul> </body> </html> kaut gan kuru tas interesē .. :D Edited December 29, 2003 by Kaklz Link to comment Share on other sites More sharing options...
Recommended Posts