[CSS] DIV-Container overflow:hidden;

RedLord

Cadet 3rd Year
Registriert
Aug. 2004
Beiträge
38
Ich habe einen DIV-Container mit 4x19 Bilder, diese mit position relativ so ausgerichtet wie ich es haben wollte, so dass 3 Bilder auf einem von oben nach unten liegen und eine Einheit Bilden. Nach etlichen anläufen habe ich IE und Mozilla zu einer gleichen Lösung bringen können in der Ausrichtung, alles sieht wunderbar aus und ich kann den Container hin und her verschieben um ihn rum arbeiten etc.

Ich habe den Container mit "overflow:hidden;" versehen so wird dass angezeigt was auch zu sehen sein soll, nur im FireFox wenn ich die Bilder markiere und nach unten ziehe scrollt er die verstecke Fläche ab in der nichts ist, im IE macht er dies zum Glück nicht (kA wieso) aber kann ich das im FF irgendwie unterbinden?

Die leere Fläche unter dem Mosaik kommt von den Bildern selbst, sie wären nämlcih dort wenn ich sie nicht mit "position:relativ;" ausgerichtet hätte.

Mir fällt auch keine alternative zu meinen Mosaik mit z-layern ein, weil alle vier Bilder Variable sind und somit ein background pic und ein vordergrundbild welches gemapped wird nicht funktionieren würden wie ich es gerne haben würde.

Danke für Ihr Interesse.

MfG Red
 
Hmm andscheinend keine möglichkeit dass Problem zu beheben,
vielleicht kann mir ja jemand sagen ob man das folgende auch anders ausdrücken kann
es soll später aber php code sein der die img src pfade variable angibt
also das Problem ist nicht php(!) es geht um die darstellung der Bilder im Browser!

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>FightGame</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<style type="text/css">
<!--
img.pic01 {position:relative; top:0px; left:44px; z-index:1;}
img.pic02 {position:relative; top:0px; left:-52px; z-index:1;}
img.pic03 {position:relative; top:-74px; left:60px; z-index:1;}
img.pic04 {position:relative; top:-97px; left:22px; z-index:1;}
img.pic05 {position:relative; top:-97px; left:-74px; z-index:1;}
img.pic06 {position:relative; top:-171px; left:38px; z-index:1;}
img.pic07 {position:relative; top:-245px; left:154px; z-index:1;}
img.pic08 {position:relative; top:-194px; left:-140px; z-index:1;}
img.pic09 {position:relative; top:-268px; left:-28px; z-index:1;}
img.pic10 {position:relative; top:-342px; left:88px; z-index:1;}
img.pic11 {position:relative; top:-342px; left:-8px; z-index:1;}
img.pic12 {position:relative; top:-416px; left:104px; z-index:1;}
img.pic13 {position:relative; top:-439px; left:22px; z-index:1;}
img.pic14 {position:relative; top:-439px; left:-74px; z-index:1;}
img.pic15 {position:relative; top:-513px; left:38px; z-index:1;}
img.pic16 {position:relative; top:-587px; left:154px; z-index:1;}
img.pic17 {position:relative; top:-536px; left:-96px; z-index:1;}
img.pic18 {position:relative; top:-610px; left:16px; z-index:1;}
img.pic19 {position:relative; top:-684px; left:132px; z-index:1;}

img.inf01 {position:relative; top:-51px; left:10px; z-index:2;}
img.inf02 {position:relative; top:-51px; left:-86px; z-index:2;}
img.inf03 {position:relative; top:-125px; left:26px; z-index:2;}
img.inf04 {position:relative; top:-148px; left:-12px; z-index:2;}
img.inf05 {position:relative; top:-148px; left:-108px; z-index:2;}
img.inf06 {position:relative; top:-222px; left:4px; z-index:2;}
img.inf07 {position:relative; top:-296px; left:120px; z-index:2;}
img.inf08 {position:relative; top:-245px; left:-174px; z-index:2;}
img.inf09 {position:relative; top:-319px; left:-62px; z-index:2;}
img.inf10 {position:relative; top:-393px; left:54px; z-index:2;}
img.inf11 {position:relative; top:-393px; left:-42px; z-index:2;}
img.inf12 {position:relative; top:-467px; left:70px; z-index:2;}
img.inf13 {position:relative; top:-490px; left:-12px; z-index:2;}
img.inf14 {position:relative; top:-490px; left:-108px; z-index:2;}
img.inf15 {position:relative; top:-564px; left:4px; z-index:2;}
img.inf16 {position:relative; top:-638px; left:120px; z-index:2;}
img.inf17 {position:relative; top:-587px; left:-130px; z-index:2;}
img.inf18 {position:relative; top:-661px; left:-18px; z-index:2;}
img.inf19 {position:relative; top:-735px; left:98px; z-index:2;}

img.tag01 {position:relative; top:-21px; left:-22px; z-index:2;}
img.tag02 {position:relative; top:-95px; left:90px; z-index:2;}
img.tag03 {position:relative; top:-95px; left:-6px; z-index:2;}
img.tag04 {position:relative; top:-118px; left:-44px; z-index:2;}
img.tag05 {position:relative; top:-192px; left:68px; z-index:2;}
img.tag06 {position:relative; top:-192px; left:-28px; z-index:2;}
img.tag07 {position:relative; top:-266px; left:88px; z-index:2;}
img.tag08 {position:relative; top:-289px; left:2px; z-index:2;}
img.tag09 {position:relative; top:-289px; left:-94px; z-index:2;}
img.tag10 {position:relative; top:-363px; left:22px; z-index:2;}
img.tag11 {position:relative; top:-437px; left:134px; z-index:2;}
img.tag12 {position:relative; top:-437px; left:38px; z-index:2;}
img.tag13 {position:relative; top:-460px; left:-44px; z-index:2;}
img.tag14 {position:relative; top:-534px; left:68px; z-index:2;}
img.tag15 {position:relative; top:-534px; left:-28px; z-index:2;}
img.tag16 {position:relative; top:-608px; left:88px; z-index:2;}
img.tag17 {position:relative; top:-631px; left:46px; z-index:2;}
img.tag18 {position:relative; top:-631px; left:-50px; z-index:2;}
img.tag19 {position:relative; top:-705px; left:66px; z-index:2;}

img.lev01 {position:relative; top:-12px; left:-58px; z-index:2;}
img.lev02 {position:relative; top:-86px; left:58px; z-index:2;}
img.lev03 {position:relative; top:-86px; left:-42px; z-index:2;}
img.lev04 {position:relative; top:-109px; left:-80px; z-index:2;}
img.lev05 {position:relative; top:-183px; left:32px; z-index:2;}
img.lev06 {position:relative; top:-183px; left:-65px; z-index:2;}
img.lev07 {position:relative; top:-257px; left:52px; z-index:2;}
img.lev08 {position:relative; top:-280px; left:-34px; z-index:2;}
img.lev09 {position:relative; top:-280px; left:-130px; z-index:2;}
img.lev10 {position:relative; top:-354px; left:-14px; z-index:2;}
img.lev11 {position:relative; top:-428px; left:98px; z-index:2;}
img.lev12 {position:relative; top:-428px; left:2px; z-index:2;}
img.lev13 {position:relative; top:-451px; left:-80px; z-index:2;}
img.lev14 {position:relative; top:-525px; left:32px; z-index:2;}
img.lev15 {position:relative; top:-525px; left:-64px; z-index:2;}
img.lev16 {position:relative; top:-599px; left:52px; z-index:2;}
img.lev17 {position:relative; top:-622px; left:10px; z-index:2;}
img.lev18 {position:relative; top:-622px; left:-86px; z-index:2;}
img.lev19 {position:relative; top:-696px; left:30px; z-index:2;}
</style>
</head>

<body>

<div id="map">

<img class="pic01" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf01" src="./gfx/info.gif" />
	<img class="tag01" src="./gfx/logo.gif" width="40px" height="30px" />
	<img class="lev01" src="./gfx/level.gif" />
</a>
<img class="pic02" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf02" src="./gfx/info.gif" />
	<img class="tag02" src="./gfx/logo.gif" />
	<img class="lev02" src="./gfx/level.gif" />
</a>
<img class="pic03" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf03" src="./gfx/info.gif" />
	<img class="tag03" src="./gfx/logo.gif" />
	<img class="lev03" src="./gfx/level.gif" />
</a>
<img class="pic04" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf04" src="./gfx/info.gif" />
	<img class="tag04" src="./gfx/logo.gif" />
	<img class="lev04" src="./gfx/level.gif" />
</a>
<img class="pic05" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf05" src="./gfx/info.gif" />
	<img class="tag05" src="./gfx/logo.gif" />
	<img class="lev05" src="./gfx/level.gif" />
</a>
<img class="pic06" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf06" src="./gfx/info.gif" />
	<img class="tag06" src="./gfx/logo.gif" />
	<img class="lev06" src="./gfx/level.gif" />
</a>
<img class="pic07" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf07" src="./gfx/info.gif" />
	<img class="tag07" src="./gfx/logo.gif" />
	<img class="lev07" src="./gfx/level.gif" />
</a>
<img class="pic08" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf08" src="./gfx/info.gif" />
	<img class="tag08" src="./gfx/logo.gif" />
	<img class="lev08" src="./gfx/level.gif" />
</a>
<img class="pic09" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf09" src="./gfx/info.gif" />
	<img class="tag09" src="./gfx/logo.gif" />
	<img class="lev09" src="./gfx/level.gif" />
</a>
<img class="pic10" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf10" src="./gfx/info.gif" />
	<img class="tag10" src="./gfx/logo.gif" />
	<img class="lev10" src="./gfx/level.gif" />
</a>
<img class="pic11" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf11" src="./gfx/info.gif" />
	<img class="tag11" src="./gfx/logo.gif" />
	<img class="lev11" src="./gfx/level.gif" />
</a>
<img class="pic12" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf12" src="./gfx/info.gif" />
	<img class="tag12" src="./gfx/logo.gif" />
	<img class="lev12" src="./gfx/level.gif" />
</a>
<img class="pic13" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf13" src="./gfx/info.gif" />
	<img class="tag13" src="./gfx/logo.gif" />
	<img class="lev13" src="./gfx/level.gif" />
</a>
<img class="pic14" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf14" src="./gfx/info.gif" />
	<img class="tag14" src="./gfx/logo.gif" />
	<img class="lev14" src="./gfx/level.gif" />
</a>
<img class="pic15" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf15" src="./gfx/info.gif" />
	<img class="tag15" src="./gfx/logo.gif" />
	<img class="lev15" src="./gfx/level.gif" />
</a>
<img class="pic16" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf16" src="./gfx/info.gif" />
	<img class="tag16" src="./gfx/logo.gif" />
	<img class="lev16" src="./gfx/level.gif" />
</a>
<img class="pic17" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf17" src="./gfx/info.gif" />
	<img class="tag17" src="./gfx/logo.gif" />
	<img class="lev17" src="./gfx/level.gif" />
</a>
<img class="pic18" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf18" src="./gfx/info.gif" />
	<img class="tag18" src="./gfx/logo.gif" />
	<img class="lev18" src="./gfx/level.gif" />
</a>
<img class="pic19" src="./gfx/zelle.gif" />
<a href="#">
	<img class="inf19" src="./gfx/info.gif" />
	<img class="tag19" src="./gfx/logo.gif" />
	<img class="lev19" src="./gfx/level.gif" />
</a>

</div>

</body>
</html>


P.S.: Hier die Bilder falls man es visuell mal ankucken will wie es momentan aussieht und aussehen soll!
 
Zuletzt bearbeitet:
Hab grad nen Fehler gefunden

img.lev02 {position:relative; top:-86px; left:58px; z-index:2;}

sollte

img.lev02 {position:relative; top:-86px; left:54px; z-index:2;}

sein.

BTW kann mir den keiner sagen ob ich gegebenes Problem nicht anders lösen kann?
 
Zurück
Oben