zweispaltiges Testlayout

[Xeno]

Liebe Community

Ich habe ein zweispaltiges Testlayout erstellt und möchte von Euch ggf. wissen, ob dieses (technisch, gestalterisch, wie auch immer!) sinnvoll ist. Im Sinne der Transparenz lege ich hier klar meine Quelle offen, nämlich Equal Height Columns with Cross-Browser CSS and No Hacks . Die dort vorgestellte Lösung bezieht sich auf ein dreispaltiges Layout, während ich ein zweispaltiges will und erstellt habe. Hauptproblem bzw- -herausforderung für mich war die Frage, wie gleiche Spaltenlängen bei ungleich viel Inhalt erstellt werden können.

Obwohl es nicht zum Kernproblem gehört, erwähne ich noch, dass ich zwar einen Header, aber (im Moment und im Unterschied zur verlinkten Anleitung) keinen Footer will.

Hier die Testseite: Testlayout .

Hier mein CSS-Code:

*                {
                padding:0;
                margin:0;
                }
                
body            {
                margin:0 auto;
                width:960px;  
                }

p                {
                padding:10px; 
                }

#header        {
                margin-top:10px;                 
                background-color:yellow;
                height:45px;  
                }
                
#inhalt        {
                background-color:blue;
                float:left;
                width:100%;
                overflow:hidden;       
                }
                
#inhalt2        {
                background-color:red;
                float:left;
                width:100%;
                position:relative;
                right:260px;     
                }

                
#links        {
                width:700px;
                float:left;
                position:relative;
                left:260px;
                }

#rechts        { 
                width:260px;
                float:left;
                position:relative;
                left:260px;
                }

Ich freue mich auf Eure Rückmeldungen! Ich erwähne noch, dass ich verschiedene andere Lösungen angeschaut und verworfen habe. Nicht überzeugt hat mich der Einsatz von JavaScript für das Problem und die "Faux-Columns"-Lösung (Einsatz von Hintergrundgrafiken zum "Vortäuschen" gleicher Spaltenhöhen). Ich weiss aber, dass auch noch andere Zugänge gibt, die eher auf der Linie meines Lösungsansatzes (reine CSS-Lösungen) sind.

Lg Xeno

@Tronjer: Dieser Fred knüpft vage an den älteren, umfangreichen (prmär) mit Dir an. Da dieser sehr lange wurde und sich in die verschiedensten Richtungen verzweigt hatte, fange ich hier mal neu an. Das ist nicht etwa eine Kritik an Deinen umfassenden Hilfestellungen, ganz im Gegenteil will ich jetzt das Ausgangsproblem neu angehen.

 

[Tronjer]

Du willst Kritik? Na schön. ;)

Deine Testseite sieht zwar ordentlich aus, ist aber nicht sauber kodiert.

- Der Body hat immer 100% und sollte nie eine limitierte Breite in Pixeln erhalten. Präge dir das als Mantra ein.
- #inhalt benötigt kein float:left und das overflow:hidden dient nur dazu, um das unsaubere Styling zu retuschieren. Lösch beide Attribute.
- #inhalt2 ist unnötig. Wenn du unterschiedliche Hintergrundfarben für #links und #rechts haben willst, dann lege diese direkt auf die Selektoren. Nimm als Faustregel, dass DIVs so sparsam wie möglich eingesetzt werden sollen. Semantische Tags sind zu bevorzugen.
- Die Pixelbreite und das margin:auto sollten auf #header und #inhalt angewandt werden.

 

[Xeno]

Du willst Kritik? Na schön. ;)

Deine Testseite sieht zwar ordentlich aus, ist aber nicht sauber kodiert.

- Der Body hat immer 100% und sollte nie eine limitierte Breite in Pixeln erhalten. Präge dir das als Mantra ein.
- #inhalt benötigt kein float:left und das overflow:hidden dient nur dazu, um das unsaubere Styling zu retuschieren. Lösch beide Attribute.
- #inhalt2 ist unnötig. Wenn du unterschiedliche Hintergrundfarben für #links und #rechts haben willst, dann lege diese direkt auf die Selektoren. Nimm als Faustregel, dass DIVs so sparsam wie möglich eingesetzt werden sollen. Semantische Tags sind zu bevorzugen.
- Die Pixelbreite und das margin:auto sollten auf #header und #inhalt angewandt werden.

Danke für die Rückmeldung! Das Problem ist nur, dass mit Deinen Änderungsvorschlagen (genauer: der Entfernung von #inhalt2 und dem Entfernen von float:left und overflow:hidden im #inhalt) das einzige Ziel der Übung, gleiche Spaltenlängen bei unterschiedlich langem Inhalt, ganz kaputt geht: Testlayout .

Der Hinweis betreffend <body> ist sicher richtig.

Jetzt bin ich ratlos: Ist das Testlayout (abgesehen vom <body>-Hinweis) "unsauber" programmiert und die Anleitung, die ich verwendet habe, unbrauchbar?

Falls ja: was dann?

Lg Xeno

 

[djheke]

Hier mal eine mögliche Lösung.

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
 padding:0;
 margin:0;
}

h1 , p {
 padding:10px; 
}

#header    {
 background:#cdc;
}

#inhalt    {
 width:960px;
 margin:0 auto;
 background:#dee;
}                
        
#links {      /* Hier K E I N E  Hintergrundfarbe , Oder du probierst und beobachtest*/
 width:700px;
 float:left;
}

#rechts    { 
 background:#ccd;                
 margin-left:700px;
}

#rechts:after {  /* Somit ist Rechts immer die längste Spalte */
 content:"";
 display:block;
 clear:both;
}

#footer {
 background:#aaa;
}
</style>
<title>Testlayout</title>
</head>
<body>
<div id="inhalt">

<div id="header"><h1>Meine Homepage</h1></div>

<div id="links">
<p>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod 
tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea 
commodi consequat. Quis aute iure reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat 
cupiditat non proident,  accusam et justo duo dolores et ea rebum. Stet 
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod 
tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea 
commodi consequat. Quis aute iure reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat 
cupiditat non proident, sunt in culpa qui officia deserunt mollit anim 
id est laborum. Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt
</p>
</div>

<div id="rechts">
<p>
Lorem ipsum dolor sit amet, consectetur adipisici elit,  aliqua. Ut enim
 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquid ex ea commodi consequat.
</p>
</div>

<div id="footer"><p>Footer</p></div>

</div>

</body>
</html>

Übrigens, hast du mich soweit gebracht, dass ich in der nächsten Zeit eine Anleitung zur Homepageerstellung schreiben werde. Danke!

 

[Tronjer]

Das ist eine gute Lösung, und ich könnte vom CSS jetzt auch keine kürzere anbieten. Einzig zu überlegen wäre, ob man das Layout nicht gleich in HTML5 schreibt. Hier noch mal das gleiche mit semantischen Tags. Funktioniert wie das obere Beispiel auch im IE8. Die langen Blindtextblöcke habe ich der Vereinfachung halber gelassen.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Foobar</title>
    <!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('section');
        document.createElement('article');
    </script>
    <![endif]-->
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    article, header, section {
        display: block;
    }
    article {
        margin: 0 auto;
        width: 960px;
        background: red;
    }
    h1, p {
        padding: 10px;
    }
    header {
        background: yellow;
    }
    #links {
           float: left;
        width: 700px;
    }
    #rechts {
        background: blue;
        margin-left: 700px;
    }
    #rechts:after {
        clear: both;
        content: "";
        display: block;
    }
    </style>
</head>
<body>
    <article>
        <header>
            <h1>Meine Homepage</h1>
        </header>
        <section id="links">
            <p>
                Text links.
            </p>
        </section>
        <section id="rechts">
            <p>
                Text rechts.
            </p>
        </section>
    </article>
</body>
</html>

 

[Xeno]

Lieber djheke

Herzlichen Dank! Es funktioniert tatsächlich!! Hier die erste Umsetzung (ohne Footer, mit eigenen Farben):

Testlayout

Was ich (vorab) noch nicht verstehe, ist die mir unbekannte "content"-Anweisung im CSS (die aber wesentlich ist, wie ich getestet habe). Das muss ich noch ergoogeln, was die macht!

Übrigens, hast du mich soweit gebracht, dass ich in der nächsten Zeit eine Anleitung zur Homepageerstellung schreiben werde. Danke!

Ich hoffe, Du tust das nicht als Akt der Verzweiflung...! Es wäre aber sicher eine coole Idee.

Lg Xeno

 

[Xeno]

Ich habe als Nachtrag noch zwei Fragen:

1) Die Anzeige funktioniert im IE 9 (erwartungsgemäss) einwandfrei, im IE 8 geht aber komischerweise nur das ursprüngliche Layout von djheke, nicht aber meine Adaption (obwohl ich meinte, die sei nur eine Vereinfachung...). Im IE 7 geht beides nicht (das war zu erwarten). Aktuelle Versionen von FF und Chrome funktionieren natürlich.

2) Ich habe über die CSS-Deklaration "content" recherchiert und sie so halbwegs verstanden. Was mir nicht so ganz klar ist, wieso eine leere Deklaration content:"" etwas bringt. Ist das tatsächlich eine leere Deklaration , und liegt es daran, dass selektor::after per se eine Deklaration content verlangt?

Lg Xeno

EDIT: Problem 1 gelöst! Man darf nicht doppelte Doppelpunkte bei element:after verwenden, nur einfache, sonst rafft es der IE 8 nicht. Was es alles gibt!