✔ div unten in einem div positionieren

Status
Nicht offen für weitere Antworten.
BSA

BSA

Erfahrenes Mitglied
Hi Leute!

Ich würde gerne ein div in einem div ganz unten positionieren. Habe aber leider nicht gefunden. Also nochmal anders ausgedrückt:

Ich könnte dem div die Eigenschft geben position:absolute; bottom:0; dann wird es aber unten am Bildschirmrand ausgegeben. Das will ich nicht, sondern eben so ähnlich, nur eben in einem definierten Bereich, also in einem anderen div.

Ist klar was ich meine?

Gruß BSA
 
Ok Leute ich habs schnell selbst gelöst, sorry für den Thread. Wenn jemand an der Lösung interessiert ist Poste ich sie selbstverständlich!

Gruß
 
Upps, hab ich vergessen, Thema ist aber doch nciht erledigt, klappt irgendwie doch noch nicht!

Ich Poste später mal den Code!
 
Das Parent-DIV benötigt eine Positionierung (absolut oder relativ), damit das Child-DIV darin positioniert werden kann, und seine Positionsangaben sich nicht auf die Grenzen des body -Elements (= Bildschirmrand) beziehen.

  • Absolute Positionierung des Parent-DIV mit Positionsangaben:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#parent
{
position: absolute;
left: 20px;
top: 20px;
border: 1px solid #cfcfcf;
height: 200px;
width: 200px;
}

div#child
{
position: absolute;
left: 0;
bottom: 0;
width: 200px;
background: #dfdfdf;
}
-->
</style>

</head>
<body>

<div id="parent">parent
     <div id="child">child</div>
</div>

</body>
</html>
  • Relative Positionierung des Parent-DIV ohne Positionsangaben:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#parent
{
position: relative;
border: 1px solid #cfcfcf;
height: 200px;
width: 200px;
}

div#child
{
position: absolute;
left: 0;
bottom: 0;
width: 200px;
background: #dfdfdf;
}
-->
</style>

</head>
<body>

<div id="parent">parent
     <div id="child">child</div>
</div>

</body>
</html>
 
Okay, jetzt abe rnoch ne andere Frage, wenn ich dem div eine höhe von sagen wir 200px gebe und ein overflow:auto; drauf setze, dann befindet sich das div ganz unten (bevor ich scrolle) wenn ich aber scrolle dann scrollt das div mit, und das möchte ich verhindern....

Verstehst du wie ich das meine?
 
Mach in dem Div 2 weitere Divs. Das obere stattest du mit overflow:auto aus! Dann Scrollt das untere nicht mehr mit! ;)
 
Hab ich versucht, hat aber leider nciht Funktioniert, da das mit dem Design leider nicht so realisierbar ist. Es würde von der Sache her gehen, aber das Design würde nicht mitspielen!
 
Nein, aber ich müsste eine weitere Grafik erstellen und diese Grafik müsste ich dann so anpassen das man keinen Übergang von der anderen Grafik (halbtransparentes PNG mit Verlauf) sieht.

Verstehst?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück