Jump to content
php.lv forumi

Unordered lists


Kaklz

Recommended Posts

Gribu panākt šādu skatu:

hlp.gif

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:

 

hlp1.gif

 

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

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

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

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

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

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 by Kaklz
Link to comment
Share on other sites

×
×
  • Create New...