Úprava Z-indexu

Rech25

Ako mám zmeniť nasledujúci kód, tak bol bol prvok na zavretie /krížik/ vždy nad flash bannerom. Kde z-index pridat alebo upravit.

Kód: Vybrať všetko

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function closeCommercial()
{
$('#navigation').addClass('none');
}
</script>

<style>
html, body {
  height: 100%;
}
 
body {
  position: relative; 
}
 
#container, #navigation {
  position: relative; 
}
 
#container {
  min-height: 100%;
  font: normal 1em/1.5em arial, helvetica, sans-serif;
}
* html #container {
  height: 100%; 
}

#navigation {
  width: 0px;;
  background-color: #fffff;
  border-top: 0px solid #fff;
  position: fixed; 
  bottom: 0;
  left: 0;
  right: 0;
   padding: 0px 0px 0px 0px;
}

* html #navigation {
  position: absolute;
  width: 2px;/*IE5.5*/
  bottom: 2;
  left: 2;
   padding: 2px 2px 2px 2px;
  overflow: visible; 
  top: expression(eval(document.compatMode  document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
* html .close
 {
 left: 0px;
 }
 
.close
  {
  position: absolute;
  left: 223px; 
  top: 8px; 
  border: none;
  z-index: 1000;
 }
  
.none
  {
  display: none;
  } 
  </style>
  
<body>
  <div id="navigation">
   <a href="javascript:void(0);" onclick='closeCommercial()'><img src='krbiely.png' alt='close' class='close' ></a>
  REKLAMNY SCRIPT
  </div>

z-index z toho close daj na class navigation, a ten flash daj tiež do divu, ktorý bude mať ale z-index menší ako 1000

Rech25

audiotrack napísal:z-index z toho close daj na class navigation, a ten flash daj tiež do divu, ktorý bude mať ale z-index menší ako 1000

JJ ten začiatok celkom chápem, ale čo myslíš za divovať. Nemozes my napisať cely kod.

<div style="z-index:1"> tu bude ten flash </div>

a to čo chceš aby bolo nad ním, bude v inom dive ktoré má z-index vyššie.

Príspevok od používateľa **Grim** » 23 sep 2010, 11:52

...akurát treba v dive so z-indexom nastaviť position: absolute, inak ti to nebude fungovať a potom ti to bude v rôznych prehliadačoch lietať ako šarkan, v IE to bude trocha inde a tak budeš musieť vytvoriť css zvlášť pre IE...je to celkom prplačka...

Rech25

Pls mozete mi napisat cely ten kod a ja si ho iba skopirujem. lebo vymyslel som nieco taketo, ale nefunguje mi to.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script>
function closeCommercial()
{
$('#navigation').addClass('none');
}
</script>

<style>
html, body {
height: 100%;
}

body {
position: relative;
}

#container, #navigation {
position: relative;
}

#container {
min-height: 100%;
font: normal 1em/1.5em arial, helvetica, sans-serif;
}
* html #container {
height: 100%;
}

#navigation {
width: 0px;;
background-color: #fffff;
border-top: 0px solid #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0px 0px 0px 0px;
}

* html #navigation {
position: absolute;
width: 2px;/*IE5.5*/
bottom: 2;
left: 2;
padding: 2px 2px 2px 2px;
overflow: visible;
top: expression(eval(document.compatMode document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
* html .close
{
left: 0px;
}

.close
{
position: absolute;
left: 223px;
top: 8px;
border: none;
}

.none
{
display: none;
}
</style>

<body>
<div id="navigation">
<a href="javascript:void(0);" onclick='closeCommercial()'><img src='krbiely.jpg' alt='close' class='close' ></a>
<div style="z-index:1">
<script type='text/javascript' src='http://ad.sitelement.sk/www/delivery/sp ... '></script>
<script type='text/javascript'></script><noscript><a target='_blank' href='http://ad.sitelement.sk/www/delivery/ck ... 80ef'><img border='0' alt='' src='http://ad.sitelement.sk/www/delivery/av ... &n=bbf80ef' /></a></noscript>
</div>
</div>

Grim-Reaperka napísal:...akurát treba v dive so z-indexom nastaviť position: absolute, inak ti to nebude fungovať a potom ti to bude v rôznych prehliadačoch lietať ako šarkan, v IE to bude trocha inde a tak budeš musieť vytvoriť css zvlášť pre IE...je to celkom prplačka...

toto neviem kde si nabral, keď w3schools definuje:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Príspevok od používateľa **Grim** » 23 sep 2010, 21:33

...mne to nefugovalo...resp. vždy to divne skákalo okolo ostatných divov...

Ehm.. Skúšali ste to niekedy niekto? Mne sa to ešte nepodarilo. Dať dáky DIV nad flash. Flash je ako keby vždy nadradený (ako keby naň neplatil z-index). Ja som to riešil tak (zrejme tam máš ten krížik na to, aby sa ti zatvoril DIV stým flashom), že som ten krížik dal do toho flashu a z flashu som volal JavaScript na zatvorenie DIVu.

Grim-Reaperka napísal:...mne to nefugovalo...resp. vždy to divne skákalo okolo ostatných divov...

weroro napísal:Ehm.. Skúšali ste to niekedy niekto? Mne sa to ešte nepodarilo. Dať dáky DIV nad flash. Flash je ako keby vždy nadradený (ako keby naň neplatil z-index). Ja som to riešil tak (zrejme tam máš ten krížik na to, aby sa ti zatvoril DIV stým flashom), že som ten krížik dal do toho flashu a z flashu som volal JavaScript na zatvorenie DIVu.

tak to neviem čo ste porábali, keď sa vám to nepodarilo. A tiež neviem čo zač je autor témy, keď nevie pochopiť to čo som mu niekoľkokrát napísal. Flash do jedného divu, ktorý bude mať menší z-index ako div s textom/javascriptom. Pre ukážku dávam hneď dva spôsoby. Celá veda:

Kód: Vybrať všetko

<!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" lang="en" xml:lang="en">
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<style>
		.div{
			position:relative; 
			top:150px; 
			left:50px;
			background-color:#003399; 
			font-weight:bold; 
			color:#FFFF00;
			width:170px;
			z-index:100;
		}
	</style>
</head>

	<body>
	Pomocou z-index:
	<div class="div">	
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
	</div>
	<div style="width:550px; height:400px; z-index:1">
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="550" height="400">
		<param name="movie" value="/games/i6games/Mini-Moto-Challenge/Mini-Moto-Challenge.swf"/>
		<param name="quality" value="high"/>
		<param name="allownetworking" value="internal"/>
		<embed src="http://www.i6.com/games/i6games/Mini-Moto-Challenge/Mini-Moto-Challenge.swf" width="550" height="400" pluginspace="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" allownetworking='internal'/>
  		</object>
	</div>

	<hr />
	Pomocou googleapi:
		<div class="div">	
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
			toto je text nejakého divu<br />
		</div>
	
	<script type="text/javascript">
		var flashvars = {};
		var params = {};
		params.menu = "false";
		params.quality = "high";
		params.scale = "showAll";
		params.wmode = "transparent";
		params.scale = "noborder";
		params.menu = "menu";
		params.oop = "false";
		var attributes = {};
		swfobject.embedSWF("http://www.i6.com/games/i6games/Mini-Moto-Challenge/Mini-Moto-Challenge.swf", "flashDiv", "550", "400", "9.0.0","", flashvars, params, attributes);
	</script>
	  <div id="flashDiv"></div>
	
	
	
	</body>
</html>

</html>

Príspevok od používateľa **Grim** » 24 sep 2010, 19:26

...vieš audio, ono nejde ani tak o to čo hovorí nejaký w3schools či čo...skôr ide o to ako to pochopia prehliadače, tie diktujú, čo použiť môžeš a čo nie...darmo to bude zadefinované v teoretickej rovine, keď to prehliadače odignorujú, resp. prečítajú tak, že je to nepoužiteľné...

Rech25

audiotrack:sorry ale nešlo to ani ten tvoj kód. Nakoniec bola chyba v dodáveteľovi nakoľko on mal vysokú výšku Flashu. Takže teraz je to už dobré.

A keď chcem vycentrovať tento prvok presne na stred stránky ??? kde dám margin

čo je "tento prvok"? Ten div s textom, alebo flash, alebo celá stránka...

Rech25

No veď script je na načítavanie flashu s tým, že sa zobrazuje cross na zavretie obrazka. Lenže teraz sa zobrazuje uplne v lavom dolnom rohu a zaujimalo by ma ako to vycentrujem presne na stred otvorenej stránky.

//autoeditácia príspevku (05 Okt 2010, 1:36)
A prosim to vycentrovanie na stred prehliadaca dosiahnem ako?

.trieda{position:absolute; left:50%; top:50%}

Úprava Z-indexu

Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu

Re: Úprava Z-indexu