Komplexes Layout.

[Laptop]

Sers! Dieses Layout möchte ich per CSS nachbauen. Die drei Spalten sind mit floats leicht zu realisieren. Nur wie schaffe ich es, innerhalb einer Spalte, den Text teils linksbündig teils rechtbündig zu setzen? Die Lösung sollte elegant sein, da es um große Mengen Text geht, nicht nur um einen Schnipsel. So wie ich es verstehe ist mein Problem, daß die Attribute text-align:right als auch float:right nur auf container anwendbar sind. Da es wie gesagt große Mengen Text sind, möchte ich die Textstellen, die rechtbündig ausgerichtet sein sollen am liebsten nur in Tags setzen, bspw. <i>…</i>. Umständliches "container im container", möchte ich vermeiden.

 

[vitus37]

Wenn es sich um große Textmenge handelt, dann stecke diese doch einfach in ein <p>-Tag und gib diesem in CSS ein display: block;. So kannst du es wie ein Block-Element behandeln und floaten bzw. Text ausrichten.

gruß

 

[Laptop]

@vitus37 Einverstanden, ich habe dann leider einen Zeilenumbruch vor dem Block-Element, das eigentlich in der selben Zeile rechtsbündigen Text enthalten soll, in der auch der linksbündige Text ist. Wie kann ich das beheben?

(linksbündiger Text) <p>(rechtsbündiger Text)</p> <= soll alles in eine Zeile

 

[vitus37]

Du steckst beide Texte (rechts und linksbündig) in je einen p-Tag und formatierst sie in CSS wie mit Blockelementen.
HTML:

<p class="linksbundig">linksbündiger text</p><p class="rechtsbundig">rechtsbündiger Text</p>

CSS:

.linksbundig{
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
  float: left;
  width: 50%;
}
.rechtsbundig{
  display: block;
  margin: 0;
  padding: 0;
  text-align: right;
  float: left;
  width: 50%;
}

Da das <p> in beiden Fällen jetzt als Block-Element behandelt wird, kannst du mit float: left; (oder right) einen Textumfluss erreichen und nebeneinander positionieren.

 

[Laptop]

Das ist ein Wörter-Register mit tausenden von Wörtern, sagen wir mal 3000. Dann müßte ich 6000 Tags per Hand einfügen. :idea: 3000 mal würde ich noch durchhalten, aber nicht 6000. Deshalb meine Frage, ob es nicht möglich ist, nur den rechtsbündigen Text zu taggen. Das würde Stunden von Tipparbeit ersparen.

 

[vitus37]

Du meinst es müssen immer zwei Wörter nebeneinander sein?

 

[Laptop]

Wie das Bild in meinem ersten Post zeigt (http://www.html.de/attachments/css/1459d1272551408-komplexes-layout-janualayout.jpg), ist jeder Eintrag im Wörter-Register um eine Referenz-Nummer ergänzt, die rechtsbündig gesetzt ist. Das Wort steht linksbündig, die Nummer(n) dazu rechtsbündig.

 

[vitus37]

Ah oky, sorry war dann wohl ein missverständnis.

Wenn das so ist würde ich mit einer serverseitigen Scriptsprache Arbeiten, die dir die Arbeit automatisch erledigt.

Wenn es eine Liste von Wörtern ist, sollte es auch als <ul> (Liste) und <li> (Listpunkt) ausgezeichnet werden.

 

[Elroy]

Hallo.

Schreibe die Eintäge in eine Datenbank. Lass sie mit php ausgeben und verwende zur Darstellung eine Tabelle.
Meiner Meinung nach handelt es sich hierbei um tabellarische Daten.

Vorteile: leicht erweiterbar und du brauchst dich nicht um die Darstellung zu kümmern.

Gruss
Elroy

 

[Laptop]

@Elroy, vitus37 Dank Euch für die schnellen Antworten! Ich denke das mit der Datenbank und Skriptsprache ist sicherlich die richtig professionelle Lösung, und die Vorteile erahne ich auch. Leider bin ich in diesem Bereich nicht so firm / ausgestattet. Werde vorab erst einmal auf die Rechtbündigkeit verzichten, behalte es aber im Hinterkopf. Grüße :)