überlappende divs an bildschirmzentrierten positionen

[heri]

hi,
gleich vorweg: ich gebe zu, dass man sich unter dem themenname kaum etwas vorstellen kann. :)

mein problem:
ich habe ne imagemap, die je nach ausgewähltem bereich eine andere div sichtbar machen soll.

ich schaffe es zwar die divs an einer absoluten position und übereinander zu schichten oder zentriert und untereinander, aber leider weiß ich nicht wie ich die gewünschte kombination aus beiden realisieren soll, nämlich:

zentriert und übereinander.

hier ein link zu der seite, damit ihr euch ein besseres bild machen könnt: http://www.mikfey.com/sites/00_group/13_g_history.htm

dort ist momentan die version zentriert und untereinander drauf.

[Maxx]

Hallo,

ich schaffe es zwar die divs an einer absoluten position und übereinander zu schichten oder zentriert und untereinander, aber leider weiß ich nicht wie ich die gewünschte kombination aus beiden realisieren soll, nämlich:

zentriert und übereinander.

ein nicht "static" positioniertes <div> (das zentrierte)
Und hierin wiederum je Jahr ein relativ positioniertes (mit top, left 0)

HTH

Jochen

[heri]

die divs werden leider untereinander angeordnet. position:relativ; top:0px; left:0px; entspricht dann leider genau der anordnung untereinander.

wenn ich für die coord, dann negative werte eintrage geht es, erscheint mir aber ein bisschen unschön gelöst(weil ich dann für jedes div eigens den style definieren muss). gehts noch irgendwie anders zu lösen?

[MudGuard]

Hi,

die divs werden leider untereinander angeordnet. position:relativ; top:0px; left:0px; entspricht dann leider genau der anordnung untereinander.

relativ oder relative?

cu,
Andreas

[heri]

relative :)

war hier ein typo meinerseits

[Maxx]

Hi heri,

ein nicht "static" positioniertes <div> (das zentrierte)
Und hierin wiederum je Jahr ein relativ positioniertes (mit top, left 0)

^^^^^^^

Sorry, das sollte natürlich absolut sein.

HTH

Jochen

[Ashura]

Hallo heri.

hier ein link zu der seite, damit ihr euch ein besseres bild machen könnt: http://www.mikfey.com/sites/00_group/13_g_history.htm

Nö, das hier ist ein Link: http://www.mikfey.com/sites/00_group/13_g_history.htm

/faq/#Q-19 ;)

dort ist momentan die version zentriert und untereinander drauf.

Nunja, du hast den Divs ja auch keine Position vorgeschrieben, soweit ich das sehen kann.

Gruß, Ashura

[heri]

thx für den tipp mit den links :)

nun ja, wenn ich den divs positionen zuordne, dann bekomm ich sie zwar auf absolute positionen aber leider nicht zentriert(relativ zur browsersize)

[Ashura]

Hallo heri.

nun ja, wenn ich den divs positionen zuordne, dann bekomm ich sie zwar auf absolute positionen aber leider nicht zentriert(relativ zur browsersize)

Schon einmal mit margin-left und margin-right probiert? Ab einem Wert um die 25% (ausprobieren hilft!) wird das DIV immer genau zentriert dargestellt. (Dann aber bitte das align="center" entfernen).

Gruß, Ashura

[heri]

ja margin funktioniert, ich hab es jetzt etwas anders gelöst, weil das auch ohne ausprobieren immer zentriert ist und auch noch unabhängig vom inhalt :)

<style type="text/css">
.textMedium {
    position:relative;
    visibility:hidden;
   }
</style>

<div align="center">
  <div class="textMedium" id="2001"><font color="#0000FF" font size="1">2001</font></div>
  <div class="textMedium" id="2002" style="top:-19px"><font color="#0000FF" font size="1">2002</font></div>
  <div class="textMedium" id="2003" style="top:-38px"><font color="#0000FF" font size="1">2003</font></div>
  <div class="textMedium" id="2004" style="top:-57px"><font color="#0000FF" font size="1">2004</font></div>
  <div class="textMedium" id="2005" style="top:-76px"><font color="#0000FF" font size="1">2005</font></div>
</div>

div im div wie es maxx vorgeschlagen hat. einziger schönheitsfehler, den es hat ist, dass man die höhe halt noch für jedes extra angeben muss da sich relative immer auf die ursprüngliche position der div bezieht und nicht relativ zum übergeordneten element ist, wie ich ursprünglich angenommen hab :)

[wahsaga]

hi,

div im div wie es maxx vorgeschlagen hat.

obwohl das natürlich eigentlich ein klassischer anwendungsfall für eine liste sein dürfte ...

einziger schönheitsfehler, den es hat ist, dass man die höhe halt noch für jedes extra angeben muss da sich relative immer auf die ursprüngliche position der div bezieht und nicht relativ zum übergeordneten element ist, wie ich ursprünglich angenommen hab :)

du willst doch offenbar sowieso immer nur eines dieser elemente einblenden, und die anderen ausgeblendet lassen - wieso verwendest du dann statt der nicht-anzeige mit platzhalter (visibility:hidden) nicht die nicht-anzeige _ohne_ platzhalter (display:none)?
dann kannst du dir das "höher setzen" vermutlich ganz sparen.

gruß,
wahsaga

[heri]

hi,

wieso verwendest du dann statt der nicht-anzeige mit platzhalter (visibility:hidden) nicht die nicht-anzeige _ohne_ platzhalter (display:none)?

weil ich "display" noch nicht kannte :)
danke, jetzt ist es genau so wie ich mir vorgestellt habe, dass es sein sollte. :)

mfg
heri

[heri]

obwohl das natürlich eigentlich ein klassischer anwendungsfall für eine liste sein dürfte ...

hmm, was meinst du mit liste? ist mir im zusammenhang mit html nicht geläufig... oder meinst du ne tabelle?

[wahsaga]

hi,

hmm, was meinst du mit liste? ist mir im zusammenhang mit html nicht geläufig... oder meinst du ne tabelle?

nein, eine liste.

gruß,
wahsaga

[MudGuard]

Hi,

<div class="textMedium" id="2001"><font color="#0000FF" font size="1">2001</font></div>

id muß mit einem Buchstaben beginnen. font (das sowieso nicht verwendet werden sollte) hat kein font-Attribut.

ul/li wären, wie wahsaga schon schrieb, wesentlich sinnvoller als div-Suppe.

cu,
Andreas