Hilfe bei Positionierung von Div

**Vejuno** · 18.06.2009 16:36

Erstmal Hallo ins Forum!!!
Ich bin ziemlicher Neuling im Bereich Webdesign und Dreamweaver und möchte doch jetzt meine eigene Homepage erstellen. Ein paar Seiten hab ich schon, aber jetzt habe ich ein Problem mit Ebenen / Layern / Divs.

Ich arbeite mit Dreamweaver, deshalb hab ichs mal hier reingestellt, ich hoffe, das ist richtig. Oder gehört es eher zu HTML...

Ich versuche mal, es verständlich zu erklären:
Ich habe eine Bildergalerie mit Thumbs und möchte, wenn man auf eins der kleinen Thumbs klickt, dass dieses Bild dann vergrößert in der Mitte erscheint. Und wenn ich wieder auf das vergrößerte Bild klicke, dann soll es wieder verschwinden. Ich habe die ganze Seite in einer Tabelle angelegt (sicher nicht der beste Weg, aber im Praktikum wurds mir so gezeigt und so versteh ich wenigstens ein bißchen, wies geht) und die eizublendenden Bilder habe ich als Ebenen bzw. Divs angelegt, die dann je nach klicken sichtbar werden oder eben unsichtbar.

Jetzt mein Problem:
Die Bilder sollen an einer bestimmten Stelle in der Tabelle erscheinen (z.B. das 2. und 3. Tabellenfeld der zweiten und dritten Zeile überlagern)
Gebe ich dem Div die position:relative und left und top mit 0px an und lege die Tabelle zentriert an(denn wenn ich angebe, die Tabelle soll links sitzen, anstatt zentiriert, dann klappts wie ich will, aber sie soll eben nicht links sitzen), dann orientiert sich die Ebene aber nicht an der linken oberen Ecke der Tabelle (von da aus könnte ich dann ja mit top und left die Positionierung machen). Sie sitzt dann über der Tabelle, schiebt diese also nach unten.

Und bei position: absolute liegt das Div über der Tabelle, aber der 0-Punkt ist auch nicht die Tabellenecke sondern die Fensterecke links.

Und eigentlich dachte ich, wenn die Tabelle absolut positioniert ist und das div relativ, dass es sich dann an der Tabelle orientiert und nicht am body. Oder hab ich da nen Denkfehler? Ich habe mir schon so einiges im Internet zu Positionierung von Divs und relativ und absolut und so durchgelesen, aber scheinbar ist der Groschen bei mir noch nicht gefallen...

Eigentlich ist das doch eine einfache Sache, die ich da machen will, oder? Vielleicht gehe ich auch viiiel zu kompliziert ran?
Ich poste mal den kompletten Quelltext meiner kleinen Tabelle, in der Hoffnung, dass es klarer wird.
Das ist nur eine Beispieltabelle, (keine Angst wegen der Farben

) mit der ich versucht habe, mir das klar zu machen.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

</style>
</head>

<body>
<div id="apDiv1"><img src="bilder/fotografie_haustiere_hunde/gross/hund4_505x336.jpg" ></div>
<table width="900" border="0" align="center" cellspacing="0" position="absolute">

<tr>
<td width="300" height="100" bgcolor="#99FF99"> </td>
<td width="300" height="100" bgcolor="#FF3399"> </td>
<td width="300" height="100" bgcolor="#3399CC"> </td>
</tr>
<tr>
<td width="300" height="100" bgcolor="#0099FF"> </td>
<td width="300" height="100" bgcolor="#996699"></td>
<td width="300" height="100" bgcolor="#CC9933"> </td>
</tr>
<tr>
<td width="300" height="100" bgcolor="#00FF99"> </td>
<td width="300" height="100" bgcolor="#99FF00"> </td>
<td width="300" height="100" bgcolor="#99CC66"> </td>
</tr>

</table>

</body>

</html>

Bei top:0px und left: 0px müsste die Ebene doch oben links an der Tabellenecke stehen - zumindest das will ich erreichen, damit ich dann die richtige Position angeben kann.
Im Endeffekt will ich die Ebene mit der linken oberen Ecke beginnend im violetten Mittleren Feld beginnen lassen. Das wäre mein Ziel - und das soll dann anch Möglichkeit bei allen Einstellungen und Browsern auch immer an dieser einen Stelle erscheinen.

So, jetzt hab ich versucht mein Problem klarzumachen. Ihr seht, ich bin ganz blutige Anfängerin und ich würde mich riesig über Tipps oder sogar Hilfen freuen!!!
Schonmal Danke!!!

**His.Master's.Voice** · 18.06.2009 20:31

Hallo Vejuno,

position: absolute bewirkt in dem <table> Tag überhaupt nichts, weil es da grundsätzlich nicht rein gehört. Trotz deiner Erklärung habe ich nicht verstanden was du eigentlich machen möchtest. Eine Skizze wäre vlt. hilfreich!

Zur Positionierung mit position: absolute;

Das Elternelement (z.B. der Container) wird auf position: relative gesetzt. Das dort drin enthaltene Element (ein weiterer Container) wird mit position: absolute dann positioniert. Erst dort gibt man dann mit top: und left: die genaue Position an.

Bsp:

HTML-Code:

<div id="containeraussen">

    <div id="containerinnen">
    bla, bla, bla, weiterer Textinhalt
    </div>

</div>

Elternelement ist "containeraussen", enthaltener Container ist "containerinnen".

Der zugehörige CSS Teil:

Code:

#containeraussen {
position:relative;
width:800px;
height:600px;
}

#containerinnen {
position: absolute;
top: 30px;
left: 100px;
width: 600px;
height: 300px;

Der äußere Container sollte natürlich groß genug sein um den inneren aufzunehmen. In diesem Bsp. sitzt der innere Container 100 px vom linken Rand des äußeren Containers weg. Da der innere 600 breit ist, hat dieser auf jeder Seite 100 Pixel Luft.

**Vejuno** · 18.06.2009 21:34

@His.Master's.Voice
Habe jetzt die Lösung gefunden - dank deiner Antwort!!!

War ein Denkfehler (bzw. Ein Nicht-Wissen-Fehler

) Hab gedacht, die Tabelle könnte auch ein Elternelement sein - dann wurde mir durch dein Posting aber klar, dass ich als Elternelement nur ein weiteres Div nehmen kann. Und jetzt hab ich die Tabelle ins "Elterndiv" gepackt und das Ebenen-Div läßt sich prima am Eltern-Tabellen-Div positionieren! Wie ichs wollte!
Vielen Dank!

Ähm, muss ich jetzt das Thema irgendwie als geschlossen markieren?

**His.Master's.Voice** · 18.06.2009 23:01

Zitat von Vejuno

Vielen Dank!

Gern geschehen und nachträglich herzlich Willkommen im TP

Zitat von Vejuno

Ähm, muss ich jetzt das Thema irgendwie als geschlossen markieren?

Nö, es ist alles in bester Butter

zur Startseite vom TP

Thema: Hilfe bei Positionierung von Div

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Hilfe bei Positionierung von Div

Ähnliche Themen

Bitte um Hilfe für Fixe Positionierung

hilfe bei positionierung von Button

Positionierung-Brauche mal wieder eure Hilfe...

hilfe mit objekt positionierung..

Hilfe ! Problem mit javascript positionierung ! Bitte um Hilfe !

Aktive Benutzer

Aktive Benutzer