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

zweispaltiges Testlayout

Doch, die reine CSS-Lösung dafür wurde dir bereits genannt:

Xeno schrieb:
Faux-Columns-Lösung
Zum Vergrößern anklicken....

Allerdings gibt es noch eine andere: Tabellen-Eigenschaften. Du könntest die umgebenden Elemente per CSS zu diesen machen. Die relevanten Eigenschaften sind "display: table-row;" bzw. "display: table-cell;". Alle aktuell am weitesten verbreiteten Browser unterstützen diese Eigenschaften:
Can I use CSS Table display
 
Werbung:
Hallo,

ne ausser du fängst mit javascript an um die Spalten längen aus zu lesen, aber das macht man nur bei echt design seiten.

was stört dir genau, das es nur so aussieht als ob das 2 richtige spalten sind? ich kenne da nichts anderes in css
oder das mit einer extra datei (hintergrund1.png) hast, die kann man ja auch in data auflösen und somit in die css einfügen und da mit hättest bloss wieder nur die css. dies macht aber das ändern des bildes unmöglich, dann kan man immer nur neu einfügen.

ich sehe gerade #inhalt beginnt zu zeitig, vom logischen sollte das nach #header beginnen nicht davor.

Ach so mach mal das min-height weniger und ein wichtiger fehler is noch drin, den "wer flotet muss auch clearen".
Der Hintergrund wenn jetzt in #links mehr inahlt machst schiebt sich jetzt nicht der footer nach unten da es floatest hast und damit das oft nicht mehr funktioniert. deswegen einfachn diereckt vor dem schließenden </div> vom #inhlat ein clear element und damit funzt alles wie gewünscht.
<div style="clear: both"></div>
Zum Vergrößern anklicken....
Das ist aber ein normaler fehler zum anfang wenn man mit float anfängt, macht jeder mal :O).

Cheffchen
 
threadi schrieb:
Doch, die reine CSS-Lösung dafür wurde dir bereits genannt:



Allerdings gibt es noch eine andere: Tabellen-Eigenschaften. Du könntest die umgebenden Elemente per CSS zu diesen machen. Die relevanten Eigenschaften sind "display: table-row;" bzw. "display: table-cell;". Alle aktuell am weitesten verbreiteten Browser unterstützen diese Eigenschaften:
Can I use CSS Table display
Zum Vergrößern anklicken....

Ok, ich hätte schreiben wollen "Lösung ohne Hilfsgrafik" oder so etwas. Aber ich denke auch, dass es insgesamt die beste Lösung ist für meine "Liga".

Das mit display:table ist nicht uninteressant. IE7 unterstützt es noch nicht, aber das wird wohl auch kaum noch ein Argument sein.

Lg Xeno
 
Werbung:
Cheffchen schrieb:
Hallo,

ne ausser du fängst mit javascript an um die Spalten längen aus zu lesen, aber das macht man nur bei echt design seiten.
Zum Vergrößern anklicken....

Richtig, und bringt noch das Zusatzproblem, dass dann das Layout nicht funktioniert, wenn einer ohne JavaScript auf die Seite geht.

was stört dir genau, das es nur so aussieht als ob das 2 richtige spalten sind? ich kenne da nichts anderes in css
oder das mit einer extra datei (hintergrund1.png) hast, die kann man ja auch in data auflösen und somit in die css einfügen und da mit hättest bloss wieder nur die css. dies macht aber das ändern des bildes unmöglich, dann kan man immer nur neu einfügen.
Zum Vergrößern anklicken....

Irgendwie wohl die Befürchtung, dass ich dann für Layutänderungen an einer Grafikdatei herumfummeln muss statt im CSS etwas zu ändern. Aber wahrscheinlich sehe ich Gespenster.

Zu den von Dir gemeldeten Bugs komme ich noch gleich.

Lg Xeno
 
Cheffchen schrieb:
ich sehe gerade #inhalt beginnt zu zeitig, vom logischen sollte das nach #header beginnen nicht davor.
Zum Vergrößern anklicken....

Richtig, das blieb irgendwie stehen. Ich hab's korrigiert.

Ach so mach mal das min-height weniger...
Zum Vergrößern anklicken....

Hm, dann sieht's aber auf grösseren Bildschirmen etwas komisch aus.


und ein wichtiger fehler is noch drin, den "wer flotet muss auch clearen".
Der Hintergrund wenn jetzt in #links mehr inahlt machst schiebt sich jetzt nicht der footer nach unten da es floatest hast und damit das oft nicht mehr funktioniert. deswegen einfachn diereckt vor dem schließenden </div> vom #inhlat ein clear element und damit funzt alles wie gewünscht.

Das ist aber ein normaler fehler zum anfang wenn man mit float anfängt, macht jeder mal :O).

Cheffchen
Zum Vergrößern anklicken....

Völlig richtig. Ich habe die clear-Anwesiung jetzt dem #footer zugeordnet, damit ich keine CSS-Anwesinungen ins HTML schreiben muss. Geht das auch? Sollte eigentlich, das #footer ja das nächstfolgende Element ist nach #inhalt.

Lg Xeno
 
Xeno schrieb:
Richtig, und bringt noch das Zusatzproblem, dass dann das Layout nicht funktioniert, wenn einer ohne JavaScript auf die Seite geht.
Zum Vergrößern anklicken....

Diese Zielgruppe ist für dich als Betreiber einer privaten Homepage aber kaum relevant. Ich habe vor einiger Zeit mal ein kleines Script geschrieben, welches unterschiedliche Spaltenhöhen angleicht. Um es zu verwenden, müsstest du in der jQuery-Funktion nur #left, #middle, #right gegen deine IDs austauschen.

HTML: 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="left" style="height:300px;width:100px;border:1px red solid;float:left;"></div>
<div id="middle" style="width:100px;border:1px red solid;float:left;"></div>
<div id="right" style="width:100px;border:1px red solid;float:left;"></div>




<script type="text/javascript">
$(function() {
    var containerHeight = [];
    
    $('#left, #middle, #right').each(function() {
        containerHeight.push($(this).height());
        $(this).height(containerHeight.sort().slice(-1));
    });
});
</script>
</body>
</html>
 
Werbung:
Hallo, ich habe nicht alles gelesen, aber die Sache mit gleichlangen Spalten hatte Xeno bereits gelöst gehabt. Weil er ein float/margin Layout in Verbindung mit :after clear:both Nun hat er sich für FauxColumn entschieden, Was natürlich am einfachsten ist.
Hier mal ein Beispiel an Xeno's Seite angepasst.
Fload/Margin-Layout
 
@Cheffchen

Ich habe das Float-Clear-Problem nochmals genau angeschaut (die Regel als solche ist mir bekannt, was nicht heisst, dass mir da kein Fehler passieren könnte!). Ich habe gesehen, dass ich ursprünglich das Pseudoelement #rechts:after gecleart hatte (war mir gerade nicht mehr bewusst) und dann später diese Deklaration aus dem CSS entfernt hatte. Ich habe das jetzt wieder zurückbuchstabiert. Die aktuellste Version sollte jetzt diesbezüglich wieder in Ordnung sein: Michael Ritter

Ich impementiere als Nächstes (für mich zum Vergleich) eine Lösung mit display:table, wie sie threadi erwähnt hat. Dünkt mich ein innovativer Lösung, trotz der Inkompatibilität mit dem IE 7 ("muss" man den noch berücksichtigen?).

Wie immer allseits danke für die vielen spannenden Postings, auch die noch unberücksichtigten!

Lg Xeno
 
threadi schrieb:
Allerdings gibt es noch eine andere: Tabellen-Eigenschaften. Du könntest die umgebenden Elemente per CSS zu diesen machen. Die relevanten Eigenschaften sind "display: table-row;" bzw. "display: table-cell;". Alle aktuell am weitesten verbreiteten Browser unterstützen diese Eigenschaften:
Can I use CSS Table display
Zum Vergrößern anklicken....

Richtig. Und hier ist das Resultat:

http://www.michaelritter.ch/indextest8.php

Übrigens klapp dieses Layout spgar im IE7. Das beweist natürlich nicht, dass das dann dort immer so ist; vielleicht ist es ein Zufall.

X.
 
Werbung:
Cheffchen schrieb:
Hallo,

da muss ich leider wiedersprechen, so funzt das gar nicht
in FF: Michael Ritter | Awesome Screenshot

Cheffchen

edit: das liegt glaube ich daran das kein row hast
hier ist gut beschrieben wie das aussehen muss: Use CSS display:table for Layout | onenaught.com
Zum Vergrößern anklicken....

Danke für die Rückmeldung. In meinem Firefox ist alles okay Screenshot.jpg. Welche FF-Version hast Du? Aber ich werde es trotzdem anpassen mit dem row.

Lg Xeno

Edit: Ist angepasst ( http://www.michaelritter.ch/indextest8.php ). Ist jetzt alles okay?
 
Hallo,

tut mir ja echt leid aber NÖ
Michael Ritter | Awesome Screenshot

mach mal einfach mehr text bei links rein, das wird ja in der realität ja auch mal mehr werden.
mach das min-height auf 400 dann siehst das selber. das ist auch immer noch viel zu viel mit 600, meiner meinung :O).

Cheffchen
 
Werbung:
Cheffchen schrieb:
Hallo,

tut mir ja echt leid aber NÖ
Michael Ritter | Awesome Screenshot

mach mal einfach mehr text bei links rein, das wird ja in der realität ja auch mal mehr werden.
mach das min-height auf 400 dann siehst das selber. das ist auch immer noch viel zu viel mit 600, meiner meinung :O).

Cheffchen
Zum Vergrößern anklicken....

Ich muss den Fehler mit mehr Text links leider auch bestätigen. Vermutlich habe ich aber den Fehler gefunden: Ich habe unsinngerweise "float" für die (Pseudo-)Zellen der Tabelle verwendet, was keinen Sinn ergeben dürfte bzw. Fehler produziert. Hier das Neuste:

Michael Ritter


Danke wie immer für Dein feedback!

Lg Xeno
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben