Ausrichtungsprobleme

[DeadDreamer]

Hallo ;)

Habe grade ein Problem, das ich irgendwie nicht selber in den Griff bekomme... würde gerne bewirken, dass ein <div> mit der Anschrift eines Shops immer 5px über dem unteren Rand des Inhalt-Divs positioniert ist, bei beliebiger Länge desselben...

Nun gibt es ja position:absolute/relative, nur leider sind diese beiden Attribute in diesem Fall auch keine wirkliche Hilfe, da absolute leider flach fällt wegen variabler Seitenlänge, und relative sich nur auf ein vorher ebenso positioniertes Element auswirkt...

Vielleicht hatte jemand schon einmal das Problem, und weiss eine Lösung? Vielleicht bin ich auch nur ein wenig zu doof? Danke im Vorraus ;)

Dennis

[wahsaga]

hi,

würde gerne bewirken, dass ein <div> mit der Anschrift eines Shops immer 5px über dem unteren Rand des Inhalt-Divs positioniert ist, bei beliebiger Länge desselben...

Wenn sich beide Elemente im normalen Fluss hintereinander befinden - dann suchst du also nur ein margin-top:-5px für das zweite?

Nun gibt es ja position:absolute/relative, nur leider sind diese beiden Attribute in diesem Fall auch keine wirkliche Hilfe, da absolute leider flach fällt wegen variabler Seitenlänge,

<Gebetsmuehle> Absolute Positionierung kann sich durchaus "relativ" verhalten. </Gebetsmuehle>
(Was im Übrigen auch in selfhtml nachzulesen ist.)

und relative sich nur auf ein vorher ebenso positioniertes Element auswirkt...

position:relative nimmt bezug auf die Normalposition eines Elementes.
Einen Bezug auf das vorherige Element kann ich da nur in so fern erkennen, dass diese Normalposition idR. u.a. vom den Vorgängern beeinflusst wird.

gruß,
wahsaga

[DeadDreamer]

<Gebetsmuehle> Absolute Positionierung kann sich durchaus "relativ" verhalten. </Gebetsmuehle>
(Was im Übrigen auch in selfhtml nachzulesen ist.)

Naja, nicht ganz...

Es ist so, ich habe ein ziemlich großes <div> für den eigentlichen Inhalt meiner Seite, mit variabler Höhe, und DARIN ein <div>, dass die Navigation derstellt, rechts gefloatet, mit 5px margin von oben. Nun würde ich gerne UNTER eben diesem Navigationsdiv ein kleines, ebenso breites <div> positionieren, und zwar so, dass es immer von dem unteren Rand meines Inhalts-divs 5 px abstand hat, und sich automatisch dort unten ausrichtet.

Und da liegt mein Problem. Wie ich absolute in der Form einbringen kann, ist mir leider schleierhaft, und ich finde auch den Artikelt auf SelfHTML grade leider nicht...

Sorry wenn der Eingangspost ein wenig unklar war ;)

Dennis

[wahsaga]

hi,

Es ist so, ich habe ein ziemlich großes <div> für den eigentlichen Inhalt meiner Seite, mit variabler Höhe, und DARIN ein <div>, dass die Navigation derstellt, rechts gefloatet, mit 5px margin von oben. Nun würde ich gerne UNTER eben diesem Navigationsdiv ein kleines, ebenso breites <div> positionieren, und zwar so, dass es immer von dem unteren Rand meines Inhalts-divs 5 px abstand hat, und sich automatisch dort unten ausrichtet.

Na also, die Problembeschreibung geht ja auch ein bisschen präziser.
(Womit es allerdings auch komplizierter wird.)

Und da liegt mein Problem. Wie ich absolute in der Form einbringen kann, ist mir leider schleierhaft, und ich finde auch den Artikelt auf SelfHTML grade leider nicht...

Um mal Gunnars Methode zu kopieren:

Du suchst etwas in selfhtml.
Du weißt, dass du im Bereich CSS suchen willst,
und zwar nach einer CSS-Eigenschaft.
Es hat was mit Positionierung zu tun, also wählst du Positionierung und Anzeige von Elementen, und dort um speziellen den Abschnitt zur position-Eigenschaft.

gruß,
wahsaga

[DeadDreamer]

Um mal Gunnars Methode zu kopieren:

Du suchst etwas in selfhtml.
Du weißt, dass du im Bereich CSS suchen willst,
und zwar nach einer CSS-Eigenschaft.
Es hat was mit Positionierung zu tun, also wählst du Positionierung und Anzeige von Elementen, und dort um speziellen den Abschnitt zur position-Eigenschaft.

Hm, diesen Artikel HATTE ich ja gelesen, eben weil es mir logisch erschien, dort erst einmal nachzuschauen... habe dann auch versucht, anzuwenden, was ich dort vorfand, aber leider keine nutzbare Lösung für mein Problem gefunden... Das ist es ja :/

Wie würdest du das vorliegende Problem denn lösen?

Trotzdem Danke fürs Links raussuchen und so ;)

Dennis

[wahsaga]

hi,

Wie würdest du das vorliegende Problem denn lösen?

Das Element absolut am bottom in Bezug auf das enthaltende Element positionieren.

Dass es die gleiche Breite haben soll wie die Navigation, bekommst du vermutlich nur dann hin, wenn du diese Breiten explizit definierst.

Und dass das Element unten im Inhaltscontainer nichts überlagert, dafür musst du natürlich ebenfalls noch sorgen - bspw., in dem du dem Container oder seinem "letzten" Inhalt (dem letzten im normalen Fluss) padding oder margin verpasst.

gruß,
wahsaga

[DeadDreamer]

Das Element absolut am bottom in Bezug auf das enthaltende Element positionieren.

Hmmm, nach einigem rumprobieren bin ich leider immer noch nicht wirklich schlauer. Mit position:absolute erreiche ich leider nur, dass sich der Container mit der Adresse an der Unterseite des *Viewports* ausrichtet, und beim scrollen dort auch bleibt. Fixed für #main wäre an sich bestimmt eine Lösung, aber der IE interpretiert das ja leider nicht...

Ich werd jetzt mal die relevanten Stellen aus dem Code hier reinstellen (der Code wurde noch nicht "aufgeräumt", ist ja erst ein Konzept, also sorry für evtl Überflüssiges ;):

#main /* Inhaltscontainer */
{
width:100%;
height:500px; /* Erzwungene Breite nur zeitweise, weil #main = leer */
background-color:#222;
}

#box1 /* Der Umschliessende Container für die Navigation */
{
float:right;
width:160px;
margin:8px 5px 5px 5px;
border:1px solid #888;
}

#imp /* Das Problemkind, die Box mit der Adresse */
{
position:absolute;
bottom:5px;
right:5px;
width:160px;
height:100px;
border:1px solid #f0f;
}

Eingesetzt folgendermaßen:

<div id="main">

<div id="box1">
      <div class="cap"><p class="cap"><b>Willkommen!</b></p></div>
      <div class="body"><p class="cap"><a href=#">» Hier</a> kommt dann irgendein Text hin der halt was beschreibt und so...</p></div>
    </div>

<div id="imp"></div>

</div>

Nunja, #cap und #body sind als innenliegende Elemente von #box1 ja für das vorliegende Problem irrelevant... könntest du mir eventuell ein Beispiel erstellen, wie ich position:absolute hier einbringen kann?

Bin leider immer noch ziemlich grün, beschäftige mich mit Webdesign insgesamt erst seit ca 2 Monaten ;)

Dennis

[wahsaga]

hi,

Mit position:absolute erreiche ich leider nur, dass sich der Container mit der Adresse an der Unterseite des *Viewports* ausrichtet, und beim scrollen dort auch bleibt.

Du _hast_ doch nachgelesen, wann sich absolute Positionierung "relativ" verhält, und auch was dieses auslöst.

Du willst auf #main Bezug nehmen - aber in der Formatierung dieses Bereiches ist nichts zu erkennen, was das bewirken könnte.

gruß,
wahsaga

[DeadDreamer]

Du _hast_ doch nachgelesen, wann sich absolute Positionierung "relativ" verhält, und auch was dieses auslöst.

Sicher, deswegen erwähnte ich ja die Idee, position:fixed auf #main anzuwenden, aber ich wüsste nicht, wie ich das sonst per position positionieren sollte...

Oder halt... wäre es eventuell eine Lösung, position:absolute zu verwenden und dann auszurechnen, wie viele Pixel #main vom oberen Rand des Viewports entfernt ist, um es dann so zu positionieren?

Das erscheint mir nur leider irgendwie "unsauber"...

Dennis ;)

[wahsaga]

hi,

Sicher, deswegen erwähnte ich ja die Idee, position:fixed auf #main anzuwenden,

Warum ausgerechnet fixed?

aber ich wüsste nicht, wie ich das sonst per position positionieren sollte...

Dann lies _noch mal_ nach.

gruß,
wahsaga

[DeadDreamer]

Warum ausgerechnet fixed?

Weil es den Anschein erweckt, dass fixed den Elementfluss nicht aufbricht... hab aber mittlerweile rausgefunden, dass das nicht so ist.

Dann lies _noch mal_ nach.

Mehr als nachlesen kann ich auch nicht, tut mir leid wenn mein Verständnis der Materie halt noch nicht für mehr reicht -.-

Kurz gesagt: Mir würde nur einfallen, alles absolut zu positionieren, was mir aber wenig sinnvoll zu sein scheint, weil man dann bei jeder Höhenänderung des Inhaltes die Positionierungen neu ausrechen müsste.

Das kann aber irgendwie nicht das Ende der Möglichkeiten sein. Ich wäre wirklich dankbar für einen konkreten Lösungsvorschlag, du hast mit Sicherheit mehr Erfahrung und Fachwissen als ich, und ich wäre dir dankbar, wenn du ein wenig davon weitergeben könntest... ;)

Dennis

[wahsaga]

hi,

Dann lies _noch mal_ nach.

Mehr als nachlesen kann ich auch nicht,

Was hast du denn bzgl. des diskutierten Themas - absolute Positionierung, die sich "relativ" verhält - an der soeben genannten Stelle in selfhtml gefunden? (Zitat)

gruß,
wahsaga

[DeadDreamer]

Erläuterung:

»»Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

»»absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

»»Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst.

»»Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe ist nur sinnvoll, wenn Sie zugleich die gewünschte Startposition angeben. Dies können Sie beispielsweise mit Angaben zur  top oder  left tun.
Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines Elternelements beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.

Das hier. Und es hilft mir leider nicht weiter, das Einzige, was mir dazu einfällt, ist das im Post zuvor erwähnte, nämlich alles absolut zu positionieren, was mir nicht sehr praktikabel erscheint.

Dennis

[wahsaga]

hi,

relevant (und nachgefragt) war natürlich eigentlich nur dieser Teil:

»» [...] absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert.

Mit fixed hast du es, wie du schriebst, probiert - war aber nicht das gewünschte.

Und es hilft mir leider nicht weiter, das Einzige, was mir dazu einfällt, ist das im Post zuvor erwähnte, nämlich alles absolut zu positionieren, was mir nicht sehr praktikabel erscheint.

Gut, jetzt hast du neben fixed auch noch absolute in Betracht gezogen.

Und jetzt lies es noch mal, und schau, ob selfhtml neben fixed und absolute noch eine andere Positionierungsart an dieser Stelle (siehe oben) nennt ...?

gruß,
wahsaga

[Der Martin]

Hallo wahsaga,

relevant (und nachgefragt) war natürlich eigentlich nur dieser Teil:

Mit fixed hast du es, wie du schriebst, probiert - war aber nicht das gewünschte.

Gut, jetzt hast du neben fixed auch noch absolute in Betracht gezogen.

Und jetzt ...

manchmal bewundere ich deine Ausdauer und deine Ruhe.
Ich glaube, ich hätte bis dahin entweder aufgegeben oder die Lösung einfach verraten.

Ciao,
 Martin

[Gunnar Bittersmann]

Hello out there!

Um mal Gunnars Methode zu kopieren:

Also wennschon, dennschon bitte richtig und nicht die „Clicks“ vergessen. ;-)

Ich sollte SelfSELF unter eine Lizenz stellen und reich werden. ;-)

See ya up the road,
Gunnar