Jump to content
php.lv forumi

Izvēlnes izstrādāšana


FIX

Recommended Posts

Laba diena,

 

Cenšos izveidot šādu izvēlni:

menu.png

 

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

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

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)

 

Ekranattels1.png

 

Saite

 

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

 

Ekranattels2.png

 

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

×
×
  • Create New...