• Liebe User, bitte beachtet folgendes Thema: Was im Forum passiert, bleibt im Forum! Danke!
  • Hallo Gemeinde! Das Problem leidet zurzeit unter technischen Problemen. Wir sind da dran, aber das Zeitkontingent ist begrenzt. In der Zwischenzeit dürfte den meisten aufgefallen sein, dass das Erstellen von Posts funktioniert, auch wenn das Forum erstmal eine Fehlermeldung wirft. Um unseren Löschaufwand zu minimieren, bitten wir euch darum, nicht mehrmals auf 'Post Reply' zu klicken, da das zur Mehrfachposts führt. Grußworte.

CSS Frage

Mitglied seit
23.04.2003
Beiträge
1.252
Reaktionen
0
Ich habe einen großen Container der alles umfasst. Und nun habe ich in diesem großen Container einen kleinen Container, der ganz ans Ende des Textes soll.

Das ganze soll so ausschauen wie auf dem Bild links:

container.jpg


Wenn ich mit Position:absolute; und bottom:0px; den Container nach unten bringe, dann liegt er über dem Text (siehe Bild rechts). Mit Float habe ich auch schon etwas probiert, das hat aber leider nicht geklappt.

Hat jemand von euch einen Tipp wie ich den Container unter dem Text positionieren kann, OHNE (Wichtig), dass der innere Container <div> ... </div> direkt unter dem Text steht, sondern nur durch Positionierungen. Ist das möglich?

Thx 4 help
 

voelkerballtier

Coverage, Staff, Coding
Mitglied seit
01.12.2003
Beiträge
1.603
Reaktionen
0
wenn der text variable höhe haben können soll, wird das wohl unmöglich sein. div nach dem text ausgeben und np.
 
Mitglied seit
02.08.2002
Beiträge
2.781
Reaktionen
0
wenn die box ne feste höhe hat kannste ja ein margin-bottom an den text hängen und position:absolute mit bottom nutzen...

ansonsten ist natürlich das sinnvollste die box nach dem text auszugeben
 

ex'ratt

Staff
Mitglied seit
17.04.2002
Beiträge
828
Reaktionen
6
Die kleine Box einfach als letztes im umschließenden Container angeben und schon ist sie ganz unten (da der umschließende Container ja direkt danach zu Ende ist). Dann die Breite auf einen beliebigen Wert setzen und mittels margin-right: auto; oder margin: 0 auto 0 0; (wobei die Nullen durchaus auch Werte bekommen können) nach links rücken (wo es aber glaub ich eh standardmäßig landet). Das "auto" bewirkt, dass der restliche zur Verfügung stehende Platz als Abstand benutzt wird (geht nur links und rechts - wenn du es bei beiden machst, wird das Ding zentriert).
 
Mitglied seit
23.04.2003
Beiträge
1.252
Reaktionen
0
Danke für eure Antworten, aber wie im Anfangspost geschrieben, wollte ich die <div></div> Position des inneren Containers nicht verschieben. Aber wie voelkerballtier gesagt hat, wird das wohl nicht gehen. Da muss ich auf einigen Seiten dieses Ding wohl manuell nach unten verfrachten.
 
Mitglied seit
02.08.2002
Beiträge
2.781
Reaktionen
0
wie gesagt, wenn die box ne fest höhe hat, gehts auch, wobei das nicht unbedingt ne schöne lösung ist.
 
Mitglied seit
02.08.2002
Beiträge
2.781
Reaktionen
0
hmm "position: float" ist mir unbekannt...

was genau macht der parameter und von welchen browsern wird er unterstützt?
 

ex'ratt

Staff
Mitglied seit
17.04.2002
Beiträge
828
Reaktionen
6
Das gibt es nicht. Und float würde auch nicht helfen, wenn es darum geht, dass das innere Ding nicht nach dem Text (im Quellcode) definiert wird. Da kann man wirklich nur mit absoluter oder relativer Positionierung rumexperimentieren (und muss zugleich z.B. nen padding-bottom für den großen Container definieren, über den die kleine Box dann geschoben wird).
 
Mitglied seit
03.08.2002
Beiträge
5.740
Reaktionen
473
ok, position: float gibt es tatsächlich nicht.

was noch helfen könnte:

Mit clear: können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:

left = Erzwingt bei float:left die Fortsetzung unterhalb.
right = Erzwingt bei float:right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).

~

Mit display: können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Folgende Angaben sind möglich:

block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img. Dieser Wert wird erst mit CSS 2.1 eingeführt.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
run-in = bewirkt, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.


In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen werden:
marker = sollte automatisch generierten Inhalt für das Element deklarieren.
compact = sollte wie run-in bewirken, dass ein Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.


Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang möglich:

table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
inline-table = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
table-cell = Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML.
table-row-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
table-header-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML.
table-footer-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML.
table-column = Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML.
table-column-group = Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML.
table-caption. Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).

~

Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:

left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).
 
Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
du hast 2 möglichkeiten:

position: relative oder margins. position:absolute mag ich persönlich nicht. sobald da irgendwas dynamisch sein soll, haste meist ein problem.

beachte auch, dass andere elemente unterschiedlich auf ne verschiebung durch margin oder position:relativ reagieren.
bei position:relativ wird die position vor der verschiebung genommen und nicht die neue, also würd ich in deinem fall das ganze mit margins machen.
 
Mitglied seit
02.08.2002
Beiträge
2.781
Reaktionen
0
position:absoulte;
ist schon richtig, da sich dann die positionierung dann am elternelement (und nicht an der kompletten seite!) orientiert. mit der kombination

position:absolute;
bottom:10px;

rutscht der erste block runter
danach kann man entweder dem container ein padding-bottom geben, oder vielleicht auch dem text ein margin-bottom, damit der erste block nicht in den text rutscht.

die beste lösung ist trotzdem die blocks zu tauschen, da es dann die natürlich reihenfolge ist...
 

voelkerballtier

Coverage, Staff, Coding
Mitglied seit
01.12.2003
Beiträge
1.603
Reaktionen
0
Original geschrieben von EnimaN
position:absoulte;
ist schon richtig, da sich dann die positionierung dann am elternelement (und nicht an der kompletten seite!) orientiert. mit der kombination

position:absolute;
bottom:10px;

rutscht der erste block runter
danach kann man entweder dem container ein padding-bottom geben, oder vielleicht auch dem text ein margin-bottom, damit der erste block nicht in den text rutscht.

die beste lösung ist trotzdem die blocks zu tauschen, da es dann die natürlich reihenfolge ist...
hrm position:absolut orientiert sich afaik nur am elternelement, wenn dieses ebenfalls absolut positioniert wurde - ansonsten geht es die elternachse nach oben bis es ein absolut positioniertes element findet und nimmt ganz am ende das body element (also das browserfenster) als ausgangslage - deshalb wird es immer mist in einer dynamischen seite plötzlich ein element absolut positionieren zu wollen. Falls sowieso schon absolute positionierung verwendet wird, ist der ansatz aber wirklich sehr vielversprechend.
 
Mitglied seit
02.08.2002
Beiträge
2.781
Reaktionen
0
stimmt, das hatte ich vergessen.

trotzdem würde ich position:absolute position:relative vorziehen, da letzteres imo noch komplizierter nachzuvollziehen ist und evtl auch nicht von allen browsern unterstützt wird.
 

voelkerballtier

Coverage, Staff, Coding
Mitglied seit
01.12.2003
Beiträge
1.603
Reaktionen
0
Original geschrieben von EnimaN
stimmt, das hatte ich vergessen.

trotzdem würde ich position:absolute position:relative vorziehen, da letzteres imo noch komplizierter nachzuvollziehen ist und evtl auch nicht von allen browsern unterstützt wird.
ja mit position:relativ kommt man hier ja auch nur zum Ziel, wenn man weiß wie hoch der Textblock ist, was wohl eher nicht der Fall sein dürfte.
 
Oben