• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout Möglichkeiten

Status
Für weitere Antworten geschlossen.

AlexK-Mainz

Neues Mitglied
Hallo,

ich bräuchte mal einen Lösungsansatz für folgendes Layout-Problem:

Ich habe eine Liste mit 2 Spalten, die ich in einem 240px breiten Bereich darstellen muss: Zeilenhöhe 20px, Schriftgröße 12px, Schriftart "Arial.ttf"

Spalte 1: Ausrichtung linksbündig , keine Zeilen umbrücken erlaubt, nur Text
Spalte 2: rechtsbündig ausgerichtet ist, Buttons, oder Formularelemente

Problem hierbei ist, das sich die Inhalte der Spalte 1 und 2 teilweise auf verschiedenen Zeilen überlappen, was die Textbreite bzw Buttonbreite angeht.

Beispiel (siehe Anhang, falls das folgende Bild nicht sichtbar ist):
attachment.php

(die Rahmen(Border) werden später ausgeblendet. Dienen jetzt nur der Darstellung)

Wie Ihr seht, (insbesondere Zeile 2, 3 und 5) kommt es durch unterschiedlich breite Buttons und Texte.
Die Texte und Buttons sind dabei teilweise so unterschiedlich, dass ich mit colspan nicht viel weiterkomme, es sei denn ich baue die Tabelle aus jeweils z.B 8 Spalten und verbinde in jeder Zeile 7 davon links oder rechts.

Das funktioniert zwar, ist jedoch mit Sicherheit nicht der Weisheit letzter Schluss.
Für jede Zeile ein eigene Tabelle "<table border='0'><tr><td align='left'>Spalte1</td><td align='right'>Spalte2</td></tr></table>" anzulegen scheint mir auch ungünstig.

Hat jemand eine Idee, wie man das "sauberer" lösen kann, als mit colspan und unzähligen Tabellen?


danke schon mal für die Lösungsansätze
 

Anhänge

  • beispiel.jpg
    beispiel.jpg
    11,2 KB · Aufrufe: 20
Folgender Lösungsansatz habe ich mir mittlerweile erarbeitet:
HTML:
<div id='rahmen' style='position:relative; top:10px; left:10px; border:1px solid; width:240px; height:160px;'>
    <div style='position:relative; algin:left; font-size:12px; left:3px;float:left;'>Namen 1</div>
    <div style='position:relative; algin:right; font-size:12px; right:3px; float:right;'>Eintrag1</div><br>
    <div style='position:relative; algin:left; font-size:12px; left:3px;float:left;'>Namen 2</div>
    <div style='position:relative; algin:right; font-size:12px; right:3px; float:right;'>Eintrag laaaaaaaaaaaaang</div><br>
    <div style='position:relative; algin:left; font-size:12px; left:3px;float:left;'>Namen laaaaaaaaaaaaaaaaaaang3</div>
    <div style='position:relative; algin:right; font-size:12px; right:3px; float:right;'>Eintrag3</div><br>
</div>

Führt schon mal "sauberer" zum Ziel.

Habt ihr noch andere Vorschläge? Oder Tips, wie ich das hier verbessern kann?

danke
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben