Positionierung innerhalb eines DIV-Elemtens

**Lucky_fragger** · 29.09.2009 15:10

Juten Tach.

Gestern wurde mir hier so klasse geholfen, da wollt ich doch glatt mal eine neue Frage stellen.

Ich bin grade dabei, mich in das Webdesign mittels CSS einzuarbeiten und habe bisher folgenden Code zustande gebracht:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Alexander Becker" />
<meta name="description" lang="de" content="Dies ist die Onlinepräsenz des Pflegelehre-jetzt Teams." />
<meta name="description" lang="en" content="This is the homepage of Pflegelehre-jetzt." />
<meta name="keywords" lang="de" content="Pflegelehre-jetzt, Krankenpflegerhelfer Ausbildung, Kontakt," />
<meta name="keywords" lang="en" content="Pflegelehre-jetzt, nurse training, contact," /> 
<meta name="date" content="2009-09-30" />
<meta name="robots" content="nofollow" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<title>Pflegelehre-jetzt - Startseite</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<style type="text/css">
<!--
body {
background-color:#919191;
font-size:16px;
font-family:Arial;
text-align:center;
}

h1 {font-size:20px;margin:0px;}
h2 {font-size:18px;}

a:link, a:visited, a:active, a:hover {
text-decoration:underline;
font-weight:bold;
color:#722E55
font-size:18px;
}
a:active, a:hover {
color:#000F79
}
#title {
padding-top:15px;
height:30px;
}
#menue {
color:#ffffff;
text-align:center;
padding:10px 0px;
border-top:1px solid #ffffff;
}
#inhalt {
border:1px solid #ffffff;
background-color:#669999;
padding:0 15px;
color:#ffffff;
min-height:600px;
}

-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

</head>
<body>
<div style="height:600px; width:760px; margin:0px auto;text-align:left;">

<h1 id="title">Pflegelehre-jetzt! - Die Onlinepräsenz</h1>

<div id="menue">
<a href="#">Startseite</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">Das Team</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">Kontakt</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">Intern</a>
</div>

<div id="inhalt">
<div style="position:absolute;left:50px; bottom:90px;">best viewed:1024x786 <a class="otherlink" href="#" onClick="MM_openBrWindow('impressum.htm','inf','resizable=no,width=500,height=500')">(?)</a></div>
    <h2>Willkommen auf Pflegelehre-jetzt!</h2>
    <p>Hier ensteht die Onlinepräsenz von Pflegelehre-jetzt. Da sich die Seite noch im Aufbau befindet, bitten wir Sie, etwaige Unstimmigkeiten zu entschuldigen. Sie befinden sich auf der Startseite.</p>
    
</div>

</div>
</body>
</html>

Das Problem: Ich möchte den Link

HTML-Code:

best viewed:1024x786 <a class="otherlink" href="#" onClick="MM_openBrWindow('impressum.htm','inf','resizable=no,width=500,height=500')">(?)</a>

irgendwie in die linke untere Ecke bekommen. Aber nicht in die linke untere Ecke des gesamten Browserfensters, sondern in die l.u Ecke des Inhalt-Divs.
Ich hab das mit Position:absolute/relative probiert. Hab versucht ein weiteres Div drumherum zu bauen, aber nichts funktioniert so, wie ich es gerne hätte.

Wenn ich das mit position:absolute; bottom:xxpx; versuche, bezieht sich das jeweils auf das Browserfenster und der Link liegt ausserhalb des Inhalt-Divs.
Ich hab überlegt, Die Positionierung von oben vorzunehmen, da der Seiteninahlt sich aber ändert, müsste man ja für jede Änderung einen neuen Wert für top:xxpx; ermitteln.

Ich hab gelesen, dass sich die Postion:absolute auf dass übergeordnete Div bezieht, find ich ja auch logisch und so hätte ich es ja auch gerne. Aber mein DIV für den Link liegt ja im Content DIV, bloss reagiert es für mich nicht nachvollziehbar...
Gibt es da keine Möglichkeit?

Eine Frage ist mir noch eingefallen. Auf Css4you habe ich gelesen, dass "min-height" vorallem vom IE noch nicht gut unterstützt wird. Aber wenn sich die Div-Höhe dynamisch an den Inhalt anpasst, dann ist die Seite teilweise nur 50-100px hoch, auf der nächsten Seite (mit mehr Inhalt) ist sie dann plötzlich 800px hoch.

Daher wollte ich das Inhalt-div mit min-height auf wenigstens die Höhe xxx erhöhen, damit die Höhe nicht von Seite zu Seite so stark vaiiert.
Kann man das so lassen, oder sollte man eine andere Variante probieren?

Freue mich auf eure kompetente Hilfe!

Gruß Theo

Edit: Ich hab das ganze Positionieren mal ohne min-height:600px; ausprobiert.
"<div style="position:relative;left:50px; top:0px;">best viewed:1024x786[...]" bringt den Link tatsächlich dorthin, wo er hinsoll, nämlich an die untere linke Ecke des Inhalt-Divs. Sobald ich aber "min-height:xxpx;" vewende, klebt der Link dort, wo der Text endet.

**prm** · 29.09.2009 15:35

Du musst dem übergeordneten Div #inhalt ein

Code:

position: relative;

geben. Dann bezieht sich die absolute Positionierung nicht mehr auf den body, sondern auf den Inhaltsdiv.

**Lucky_fragger** · 29.09.2009 16:15

Prima. Funktioniert!
War aber sicherlich nicht die letzte Frage.
Ich danke dir.

Edit: Achso, eine Frage bleibt noch offen in diesem Thema: Wird von der Verwendung von min-height abgeraten?

Gruß Theo

**prm** · 29.09.2009 17:05

Du kannst das schon verwenden, entspricht ja dem Standard.
Nur kann es der IE 6 nicht umsetzten.
Dafür gibt es aber einen Hack, der auch dem IE 6 min-height "beibringt": min-height fÃ¼r Internet-Explorer 6

Thema: Positionierung innerhalb eines DIV-Elemtens

LinkBack

Themen-Optionen

Positionierung innerhalb eines DIV-Elemtens

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

schriftgröße und farbe innerhalb eines a tag weseln

Suchen innerhalb eines Dokumts

buttons innerhalb eines div zentrieren

Seite innerhalb eines iFrames verschieben

links innerhalb eines frames

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen