Izvēlnes izstrādāšana

[FIX]

Laba diena,

 

Cenšos izveidot šādu izvēlni:

 

Ja nerādās attēls, tad: Saite

 

Problēma ir tāda, ka vēl neesmu atradis risinājumu (skatīt zemāk mēģinājumus), kas strādātu tā, kā iecerēts un uz visiem pārlūkiem.

 

Svarīgas piebildes:

1. Pogām NAV fiksēts izmērs, tās staipās atbilstoši teksta izmēram:

2. Tekstam pogā jābūt novietotam apakšā

3. Uzejot ar bultiņu uz pogas, zem tās parādās apakšizvēlne

 

Nedaudz par risinājumiem, kurus esmu mēģinājis.

 

1. Risinājums bez tabulām (<table>), izskatās aptuveni šādi:

 

<ul id="menu">
  <li id="button"><a ...><div ...>Poga 1</div></a></li>
  ...
  <li id="button">
   <a ...><div ...>Ļoti liela poga 3</div></a>
   <ul id="submenu3">
	   <li>... 3.1 ...</li>
	   <li>... 3.2 ...</li>
   </u>
  </li>
</ul>

 

Šeit vislielākā grūtības sagādā pogas teksta novietošana apakšā.

Var izmantot <a> tagam "display:table-cell" + "vertical-align:bottom", taču Internet Explorer <= 7. versiju neatbalsta 'display: table ...'

 

<a> tagam uzliekot 'position:relative;' un tekstam 'position:absolute;bottom:0;' novieto tekstu apakšā, taču tad tas vairs nestaipa pogu un iet pāri robežām.

 

2. Variants - tabula, apmēram šādi:

<table>
<tr>
<td>...pogas 3 kreisā mala...</td>
<td>
	...pogas 3 vidus...
   <ul id="submenu3"></ul>
</td>
<td>...pogas 3 labā mala...</td>
....
</tr>
</table>

 

Taču šeit rodas problēmas ar apakšizvēlnes novietošanu zem attiecīgās pogas ...

 

Varbūt kāds ir veidojis kaut ko līdzīgu un var padalīties ar idejām?

Edited August 20, 2008 by FIX

[marcis]

<ul id="menu">
<li><a href="#"><span>Sadaļa</span></a></li>
<li><a href="#"><span>Sadaļa</span></a></li>
<li><a href="#"><span>Sadaļa</span></a></li>
</ul>

#menu span {
 position: absolute;
 bottom: 0;
}

Ja tev šitāds nestrādā tad kautkur, kautkas līks tev tur ir...

 

P.S. Kapēc tev ir vairāki elementi ar vienādiem id?

 

EDIT:

kautkur iepriekš tev kautkur līks

P.P.S. Jā, zinu, daudz "kautkur", "kautkas"

Edited August 20, 2008 by marcis

[FIX]

Paldies par ātro atbildi!

 

Es pamēģināju tavējo kodu, taču tas teksts iet pāri pogas robežām, ja tās novieto horizontāli (float:left tagam <li>)

 

Šādi izskatās, ja <li> tagam ir fiksēts izmērs (vajag tā, lai poga ir elastīga - tik liela, cik teksts)

 

 

Saite

 

Un šādi, ja <li> tagam nav uzlikts izmērs, lai tas "itkā" būtu tik liels, kā saturs

 

 

Saite

 

Te arī kods:

 

<ul id="menu">
<li><a href="#"><span>Sadaļa1</span></a></li>
<li><a href="#"><span>Sadaļa2</span></a></li>
<li><a href="#"><span>Sadaļa3</span></a></li>
</ul>

 

	#menu {
	border:1px solid #000033;
}

#menu a {
	position: relative;
	display:block;
	height:100px;			
	background-color:#ccc;	
	[b]width:300px;	[/b]
}

#menu li {
	border:1px solid #006600;
	float:left;		
}

#menu span {
	  position: absolute;
	  bottom: 0;

}

Edited August 20, 2008 by FIX