nicht angemeldet
Zwei Spalten, relative Breite, fester Abstand voneinander
Hallo!
Ich bin gerade dabei, ein uraltes Tabellenlayout auf CSS umzustellen. Aber irgendwie komme ich trotz Googlen ohne Ende nicht weiter (oder ich suche ständig mit den falachen Begriffen).
Das Layout hat derzeit quasi zwei Spalten. Beide haben die Breitenangabe 50 %. Dazwischen klemmt eine Hilfszelle mit einem auf 15px Breite aufgezogenen transparenten GIF. Ergo: In der Darstellung hat derzeit jede Spalte die Breite ((100%-15px)/2). Wie kriege ich das in CSS hin? Ich habs schon mit Padding, Margin (jeweils 7/8 px auf beide Boxen verteilt), einem Hilfs-DIV usw. probiert, aber die rechte Box wandert regelmäßig in eine neue Zeile (und ist noch dazu _nicht_ die 7-8 Pixel eingerückt.
-
Hallo,
vielleicht hilft ein Blick auf die Beispiele der mehrspaltigen CSS-Layouts schon weiter?
Gruß, Ich
-
Hallo,
vielleicht hilft ein Blick auf die Beispiele der mehrspaltigen CSS-Layouts schon weiter?
Gruß, Ich
Schon längst angesehen ;) Sollte ich aber zum Optiker gehen, oder sind alle zweispaltigen Layouts mit fixen Bereichen _am Rand_? Ich brauche: Flexibel <-> Fixer Abstand <-> Flexibel.
-
Hallo,
mögen Sie einmal den Code posten, wie er bis jetzt aussieht?
Gruß, Ich
-
Hallo,
Schon längst angesehen ;) Sollte ich aber zum Optiker gehen, oder sind alle zweispaltigen Layouts mit fixen Bereichen _am Rand_? Ich brauche: Flexibel <-> Fixer Abstand <-> Flexibel.
also dein Anliegen lässt sich mit mehr oder weniger Aufwand (Elementen im Quellcode) umsetzen.
Darf man mal erfahren _warum_ der fixe Abstand zwischen den Spalten so wichtig ist?
Die "einfachste" Variante wäre nämlich vermutlich:
Linke Spalte float: left; width: 49%
Rechte Spalte float: right; width: 49%;Damit ergäbe sich in der Mitte eine Lücke von 2% (bei z.B. 1000px Anzeigebreite also 20px).
Gruß Gunther
-
Hallo,
Schon längst angesehen ;) Sollte ich aber zum Optiker gehen, oder sind alle zweispaltigen Layouts mit fixen Bereichen _am Rand_? Ich brauche: Flexibel <-> Fixer Abstand <-> Flexibel.
also dein Anliegen lässt sich mit mehr oder weniger Aufwand (Elementen im Quellcode) umsetzen.
Darf man mal erfahren _warum_ der fixe Abstand zwischen den Spalten so wichtig ist?
Ziel ist, die Tabellen loszuwerden ohne etwas am Layout zu verändern. Wenn es nicht geht, bleibt es weiter eine Krücke, bis ich mal Zeit habe, ein komplett neues Layout zu basteln - das jetzige ist effektiv über sieben Jahre alt und ich wollte es erstmal entrümpeln, um meine alten Tabellenkünste durch CSS-Fertigkeiten zu ersetzen...
Die "einfachste" Variante wäre nämlich vermutlich:
Linke Spalte float: left; width: 49%
Rechte Spalte float: right; width: 49%;Damit ergäbe sich in der Mitte eine Lücke von 2% (bei z.B. 1000px Anzeigebreite also 20px).
S.o., damit hängt die Lücke ja wieder von der Ausgangsbreite ab.
-
Hallo,
S.o., damit hängt die Lücke ja wieder von der Ausgangsbreite ab.
Ja, aber du hast meine Frage
Darf man mal erfahren _warum_ der fixe Abstand zwischen den Spalten so wichtig ist?
damit noch nicht beantwortet. Wenn es nämlich bspw. "nur" um eine Grafik zwischen den beiden Spalten geht, ist das kein Problem!
Gruß Gunther
-
Hallo,
S.o., damit hängt die Lücke ja wieder von der Ausgangsbreite ab.
Ja, aber du hast meine FrageDarf man mal erfahren _warum_ der fixe Abstand zwischen den Spalten so wichtig ist?
damit noch nicht beantwortet. Wenn es nämlich bspw. "nur" um eine Grafik zwischen den beiden Spalten geht, ist das kein Problem!Der Grund steht doch oben: Im "Original" ist es ein fixer Abstand und das soll 1:1 überführt werden. Andere Gründe gibt es nicht ;) Zwischen den Spalten ist nur der Hintergrund.
-
Hallo,
Der Grund steht doch oben: Im "Original" ist es ein fixer Abstand und das soll 1:1 überführt werden. Andere Gründe gibt es nicht ;) Zwischen den Spalten ist nur der Hintergrund.
OK, dann kann ich nicht nachvollziehen, warum das für dich nicht akzeptabel ist wenn dieser Abstand in einem kleinen Bereich (hängt u.a. z.B. davon ab, ob du für dein Layout min- und max-width verwendest) variabel ist.
Dein gewünschtes Ergebnis ist natürlich auch erreichbar, allerdings muss man dabei eben im Auge behalten, ob auch immer die 15px Abstand zwischen den Spalten zur Verfügung stehen.
Generell ist es meist "unvorteilhaft", wenn man relative und absolute Einheiten miteinander vermischt.
Aber du musst ja wissen, was du letztendlich machst.
Hier mal ein Link: Percentage Plus Pixel SizingViel Erfolg beim Basteln!
Gruß Gunther
-
-
-
-
-
-
-
Hallo!
Das Layout hat derzeit quasi zwei Spalten. Beide haben die Breitenangabe 50 %. Dazwischen klemmt eine Hilfszelle mit einem auf 15px Breite aufgezogenen transparenten GIF.
Das ist ja ansich schon "unsauber" layoutet und "funktioniert" (wird also wie beabsichtigt angezeigt) nur, weil die Browser bei Tabellen quasi "automatisch" eine entsprechende Korrektur der Angaben vornehmen.
Von solchen "unsauberen" Praktiken muss man sich natürlich auch verabschieden, wenn man "saubere" CSS-Layouts erstellen möchte.
Generell ist das Arbeiten mit Width-Angaben von 100% [1] tendenziell "gefährlich", denn es kann ganz schnell dazu führen, dass ein Element doch breiter als 100% wird, was im günstigsten Falle dann "nur" zu horizontalen Scrollbalken führt.
Wenn man Prozentangaben für sein Layout verwendet, sollte man zusätzlich auch ausschließlich ganzzahlige Werte verwenden, da Opera keine anderen Werte bei Prozentangaben umsetzt (zumindest war das älteren Versionen so - wie es bei den aktuellen 9er Versionen aussieht weiß ich aktuell leider nicht).
Man muss also nicht unbedingt immer zwingend versuchen, sein altes Tabellen-Layout exakt 1:1 per CSS umzusetzen. Auch wenn das in den allermeisten sicher gehen würde. CSS-Layouts zeichnen sich ja gerade durch ihre Felxibilität aus (wenn man eben nicht versucht, sie pixelgenau "festzuzurren").
Gruß Gunther
[1] Das gilt auch für die Verwendung mehrerer Width-Angaben, die dann in der Summe 100% ergeben. Für ein einzelnes Blockelement ist die Angabe zumeist eh nicht nötig, da es von hause aus diese Breite einnimmt.