• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Positionierung innerhalb eines DIV-Elemtens

Lucky_fragger

Neues Mitglied
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:
<!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:
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.
 
Zuletzt bearbeitet:
Werbung:
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.
 
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
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben