✔ Bild und Text per CSS ausrichten

[Maik]

float: bottom; gibt es nicht zufällig?

Nö, sowas gibt's nicht.

Grundsätzlich, wenn hier nicht das Floaten zum Einsatz käme, wäre CSS Wie richte ich eine Box am unteren Rand der Elternbox aus? der Lösungsweg.

Dies funktioniert zwar auch in deinem Fall, nur wird dieses Bild dann nicht mehr vom Text umflossen, sondern der Text "unterwandert" das Bild.

Was bliebe, wäre beispielsweise diese Regeländerung für:

.floatrightb {
 clear: right;
 float: right;
 padding: 50px 0 10px 20px; /* Innenabstand oben - rechts - unten - links */
}

damit das Bild weiter nach unten wandert. Diese Angabe ist dann aber vom Umfang des Inhalts, sowie von der Höhe des vorangegangenen Bildes abhängig.

mfg Maik

 

[kanecorpse]

Tja. Das Bild rutscht zwar nach unten. Der Text fliesst aber nicht zwischen die Bilder. Ist das immer so oder ist bei mir noch ein Bock drin? Hab die Änderung genau so vorgenommen.

greets,
kanecorpse

 

[Maik]

Der Text fließt nicht zwischen den beiden Bildern, da der Innenabstand dem Bild gehört, sprich seine obere Boxengrenze beginnt direkt unter dem ersten Bild.

Gleiches gilt, wenn du stattdessen mit margin arbeiten würdest, denn auch diese Eigenschaft für den Außenabstand zählt gemäß dem "Box-Modell" zum unteren <img>-Element mit der Klasse .floatrightb.

mfg Maik

 

[kanecorpse]

Dann bleibt mir wohl nichts anderes übrig, als immer nur ein Bild pro Textabschnitt einzufügen. Naja. Man kann eben nicht alles haben. Dachte nur, daß es besser aussieht, wenn die Bilderanzahl im Textabschnitt variieren würde.

Hatte auch sversucht, die Bilder in eigenen Divs ausserhalb der Textbereiche floaten zu lassen. Dabei gibt es natürlich auch keinen Umfluß.

Was wäre denn, wenn man jedes Bild ausserhalb des Textabschnittes rechts fix positionieren würde? Gabe es dann einen Umfluß um die Bilder?

greets,
kanecorpse

 

[Maik]

Was wäre denn, wenn man jedes Bild ausserhalb des Textabschnittes rechts fix positionieren würde? Gabe es dann einen Umfluß um die Bilder?

Darauf hab ich doch schon zwei Posts vorher hingewiesen, wie sich der Text dann verhalten würde:

Grundsätzlich, wenn hier nicht das Floaten zum Einsatz käme, wäre CSS Wie richte ich eine Box am unteren Rand der Elternbox aus? der Lösungsweg.

Dies funktioniert zwar auch in deinem Fall, nur wird dieses Bild dann nicht mehr vom Text umflossen, sondern der Text "unterwandert" das Bild.

In der Praxis sähe das dann so aus:

#text {
 padding-bottom: 1px;
 text-align:justify;
 position:relative;
}

.floatrightb {
clear:right;
float:right;
padding:0 0 10px 20px;
position:absolute;
right:0;
bottom:0;
}

Mit diesem Resultat:


Wieso belässt du es nicht einfach so, wie es ist?

mfg Maik

 

[kanecorpse]

Ich hab das auch gelesen. Nur hab ich das falsch interprätiert.

Es wird wohl wirklich dabei bleiben. Sonst komm ich gar nicht mehr weiter. Ich wollt nur versuchen, das Optimum aus dem Ganzen rauszuholen.

Eine letzte Möglichkeit wäre noch, kleine Thumbs in einem eigenen Element nebeneinander anzuordnen und dieses dann zwischen den Textabschnitten auszurichten. Mal sehen, wie es wird ...

Aus irgeneinem Grund kann ich keine Bewertungen abgeben ....

Auf jeden Fall habt ihr mir sehr geholfen. Dafür bedanke ich mich und wünsche einen guten Rutsch ins 2010!

greets,
kanecorpse

 

[Maik]

Aus irgeneinem Grund kann ich keine Bewertungen abgeben ....

Um einen meiner Beiträge bewerten zu können (Klick auf den "Bewerten"-Button), mußt du zwischendurch 10 anderen Benutzern im Forum eine Bewertung geben, bis ich wieder an der Reihe bin. Dies ist eine Schutzfunktion, um den Mißbrauch des Bewertungssystem zu unterbinden.

Aber deine Klicks auf den "Danke"-Button meiner einzelnen Beiträge gehen auch voll in Ordnung

Sollten wir uns vorher nicht mehr im Forum begegnen / lesen, wünsche ich dir vorab auch ein "Prosit Neujahr!"

mfg Maik

 

[kanecorpse]

Moin und frohes Neues

Ich kann mich einfach nicht entscheiden und brauche ne Meinung oder nen Andtoß. Ich style die Artenbschreibungen neu. Es soll zur Seite passen und dabei sinvoll und ansprechend aufgeteilt sein. Unter dem Artennamen befinden sich Bilder der Art. Die Eckdaten habe ich mittels einer ungeordneten Liste erstellt. Dann folgt ein allgemeiner Beschreibungstext.

Hier mal zwei Styles:
Style 1
Style 2

Wie oder was würdet ihr machen, um das zu realisieren?

greets,
kanecorpse

 

[Maik]

Naja, dieser hellblaue Hintergrund paßt da jetzt rein, wie die Faust auf's Auge

Kannst du dich nicht entscheiden, ob nun mit, oder ohne diesen Hintergrund?

mfg Maik

 

[kanecorpse]

Die Farbe ist nur zur Anschauung ausgewählt worden. Es geht in erster Linie darum, ob man es mit Trennlinien (hr) oder doch eher mit gefärbten Divs strukturiert. Es sollte auch ein wenig her machen. Nach dem Motto: Einfach, aber gut.

# Edit #
Hab eben entdeckt, daß die fetten Bezeichnungen unter "Eckdaten" nicht auf einer Höhe mit dem nachfolgenden Text sind. Die Liste muß da doch irgendwie geändert werden. Hab das probiert, aber ohne Erfolg

greets,
kanecorpse