zweispaltiges Layout - gleiche Spaltenlänge

[Xeno]

Liebe Community

Ich möchte meine Homepage Michael Ritter so ausbauen, dass ei n zweispaltiges Layout entsteht, mit einer schmaleren Spalte rechts für Aktuelles usw. Das Problem, das mich jetzt beschäftigt, ist, dass ich möchte, dass beide Spalten gleichlang sind. Ich weiss, ein klassisches Anfängerproblem, ich habe viel darüber gelesen, aber jetzt raucht mir der Kopf vor lauter möglichen Lösungswegen. Was würdet Ihr mir empfehlen?

Das Resultat sollte etwa so aussehen (Testseite): http://www.michaelritter.ch/testseite.htm

Dieser Code ist natürlich keine ernstzunehmende Lösung. Zunächst müsste man mit einer fexten Höhe der rechten Spalte ja immer das Layout ändern, wenn sich links der Inhalt (und damit die Länge) ändert. Zudem funktioniert es nicht einmal so browserübergreifend (ich habs für die Demonstration für den FF optimiert, in IE 8 und IE 9 und Chrome ist die rechte Spalte länger als die linke, im IE 7 sogar kürzer).

Das gegenwärtige CSS der Testseite ist:

*                         { 
                        margin:0; 
                        padding:0; 
                                        }

html                    {
                        background-color:#B4DC00;
                        height:100%;     
                        }
                                
body                     { 
                        background-color:#FFFFFF; 
                        font-family:Verdana, sans-serif;
                        margin:20px auto; 
                        width:960px;  
                        min-height:95%;
                                        }                            
                                    
p                          { 
                        margin:0 20px 20px 20px;
                        padding-bottom:10px;  
                                        }

h1, h2, h3             { 
                        margin:0 20px 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:120%; 
                                        }
                                
h2                     { 
                        font-size: 115%; 
                                        }
                                
h3                     { 
                        font-size: 110%; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                        
img                    {
                        text-align:center;
                        border:0;        
                                        }
                                        
a:link                 { 
                        color:#0000FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FF0000; 
                                        }
                                
span                     { 
                        color:#0000FF; 
                                        }
                                
.linkliste li         { 
                        margin:0 0 0 37.5px; 
                                        }
                                        
.linkliste             {
                        margin:0 0 20px 0;
                        }
                                        
                                
#navi                 { 
                        list-style-type:none; 
                        float:left; 
                        width:100%;  
                        background-color:#EAF7A8;
                        margin:0 0 20px 0;  
                                        }
                                
#navi li             { 
                        float:left; 
                        position:relative; 
                                        }
                                
#navi a, span         { 
                        padding:10px; 
                        display:block; 
                        background-color:#EAF7A8;
                        margin:0;
                                        }
                                    
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto; 
                                        }
                                    
#navi ul li         { display:block; 
                        width:100%; 
                        font-size:90%;
                        margin:0; 
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi a:hover         { 
                        color:#FF0000; 
                                        }
                                        
#navi span             { 
                        background-color:#FFFF00;
                                        }
                                        
#hauptbild            {
                        float:left;
                        margin-bottom:5px;  
                        }                                        
                                
#anfang                {
                        text-align:center;
                        margin-bottom:20px;
                        font-size:200%;    
                        }
                        
#header                {
                        padding:20px 0 60px 0;
                        margin-bottom:10px;                         
                        background-color:#B4DC00;
                        }
                        
#rechts                {
                        width:200px;
                        background-color:#FFFF00;
                        min-height:100%; 
                        float:right;
                        height:816px;         
    }

Im HTML habe ich auf der Testseite noch zwei weitere <Div> eingeführt ("wrapper" und "inhalt"), die ich im CSS noch nicht ansteure.

Ich bin wie immer für jeden Input dankbar.

Lg Xeno

 

[Tronjer]

Deine Testseite gibt ein 404 zurück.

 

[Xeno]

Ja, Mist, hatte den falschen URL naiverweise nur im Edit-Modus korrigiert statt mit der Link-Funktion. Sorry! Jetzt geht's.

 

[Tronjer]

Die ganze Struktur passt nicht. :(

Für deine Seite würden sich semantische HTML5 Tags, wie nav, header, article, section, figure, aside, geradezu aufdrängen, aber weil du diese nicht verwenden willst, erkläre ich es mal auf herkömmlicher Basis. Der erste Schritt wäre, zu überlegen, wie die Elemente logisch gruppiert werden können. Die Navigation sollte nicht gewrapt sein, sondern als einzelnes Element über allem schweben. Dazu gibt du ihr die die Breite des Bodys und entfernst von diesem gleichzeitig die width. Der Body hat immer 100%.

Darunter kommt nun ein Wrapper, der die gleiche width wie die Navigation erhält. In den Wrapper legst du drei Elemente. Oben die <h1> auf volle Breite, darunter zwei DIVs (links und rechts), die left gefloatet werden. Bei einer Gesamtbreite von 960 Pixeln, würden diese eine width von 480, abzüglich des Zwischenabstands erhalten. Ich würde die beiden Elemente auch erst einmal leer lassen und ihnen eine height zzl. border zuweisen. Dann siehst du, wie die Elemente auf der Seite platziert sind.

Wenn alles soweit stimmen sollte, kannst du die DIVs mit Content füllen.

 

[sOliver]

hm spontan würde mir hier "faux columns" als Lösung einfallen.

Im Prinzip bindest du ein Hintergrundbild (2px hoch) ein, das die farben deines Content Bereiches (bei dir weiß) und die deiner linken Spalte hat. Dabei musst du beachten, dass die Prozentuale Aufteilung der Farben auf deinem Hintergrundbild die deiner Divs entspricht. Wenn also deine Spalte 25% belegt und der Rest 75%, dann muss dies auch auf dem Bild so sein.

Beispiel:

WIr haben ein Layout mit einer Navigationsspalte links und dem Content rechts.

<div id="navigation">
<h1>Haupt-Navigation</h1>
<ul>
<li>Startseite</li>
<li>Blog</li>
<li>Gästebuch</li>
<!-- usw. -->
</ul>
</div>

<div id="inhalt">
<h1>Inhalt</h1>
<p> Blablablablablablablablabla<p>
<!-- usw. -->
</div>

Mit folgenem CSS Code:

#navigation{
width: 25%; 
float: left;
background: #FFF;
color: #000;
}

#inhalt{
width: 75%;
float: left;
background: #000;
color: #FFF;
}

Wenn wir diesen Code haben, ist die linke Spalte natürlich kürzer als die rechte Spalte (vorrausgesetzt wir haben genug Content in der rechten).
Daher erstellen wir nun eine Grafik wie oben beschrieben (Ich denke das kannst du dir in etwa vorstellen) und geben dem body (als Element auf dem beide divs liegen) folgenden Code mit:

body{
<!-- was so alles im Code steht -->
background: repeat-y 25% 0% url(dashintergrundbild.png);
}

mit repeat-y bestimmen wir, dass das Hintergrundbild vertikal wiederholt wird, mit den Prozentwerten bestimmen wir die Positionierung des Bildes und das letzte ist selbstverständlich der Link zum Bild.

Oliver

p.s. es kann natürlich sein, dass es noch andere Wege gibt das ganze zu lösen, aber der fälltmir hier spontan ein.

 

[Xeno]

Die ganze Struktur passt nicht. :(

Für deine Seite würden sich semantische HTML5 Tags, wie nav, header, article, section, figure, aside, geradezu aufdrängen, aber weil du diese nicht verwenden willst, erkläre ich es mal auf herkömmlicher Basis. Der erste Schritt wäre, zu überlegen, wie die Elemente logisch gruppiert werden können. Die Navigation sollte nicht gewrapt sein, sondern als einzelnes Element über allem schweben. Dazu gibt du ihr die die Breite des Bodys und entfernst von diesem gleichzeitig die width. Der Body hat immer 100%.

Darunter kommt nun ein Wrapper, der die gleiche width wie die Navigation erhält. In den Wrapper legst du drei Elemente. Oben die <h1> auf volle Breite, darunter zwei DIVs (links und rechts), die left gefloatet werden. Bei einer Gesamtbreite von 960 Pixeln, würden diese eine width von 480, abzüglich des Zwischenabstands erhalten. Ich würde die beiden Elemente auch erst einmal leer lassen und ihnen eine height zzl. border zuweisen. Dann siehst du, wie die Elemente auf der Seite platziert sind.

Wenn alles soweit stimmen sollte, kannst du die DIVs mit Content füllen.

Lieber Tronjer

Herzlichen Dank für Deine Bemühungen!

Ich habe die Testseite Michael Ritter Deinen Angaben gemäss umgebaut. Die logische Gruppierung habe ich ganz nach Deinen Angaben übernommen, das leuchtet mir alles voll ein. Folgendes habe ich aber nicht übernommen: Wenn ich dem <body> die width-Deklaration wegnehme, breitet sich (eigentlich logischerweise) die ganze Seite wieder voll aus, d. h. die Zentrierung geht flöten, was ich ja nicht will. Wahrscheinlich habe ich da etwas nicht begriffen.

Da ich keine margins bei den (Spalten-)<div> habe, kann ich nach meinem Dafürhalten die ganzen 960px ausnützen.

Das Problem, das jetzt neu entstanden ist, ist, dass in der linken Spalte (#inhalt) der Inhalt komisch über die Layoutgrenze (über den weissen Hintergrund) hinausläuft. Ich habe herausgefunden, dass das daran liegen könnte, dass der ganze <body> gewissermassen zu wenig weit nach unten geht, aber der Befund der Analysetools (FF-Plugins) ist diffus: An sich wird <body> durchaus als "länger" als #inhalt gemessen, grafisch aber wird mir angezeigt, dass <body> auf der Höhe des unteren Randes des weissen Hintergrundes ende...

Hier der aktuelle CSS-Code der Testseite:

*                         { 
                        margin:0; 
                        padding:0; 
                                        }

html                    {
                        background-color:#B4DC00;
                        }
                                
body                     { 
                        background-color:#FFFFFF; 
                        font-family:Verdana, sans-serif;
                        margin:20px auto;
                        width:960px;
                                        }                            
                                    
p                          { 
                        margin:0 20px 20px 20px;
                        padding-bottom:10px;  
                                        }

h1, h2, h3             { 
                        margin:0 20px 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:120%; 
                                        }
                                
h2                     { 
                        font-size: 115%; 
                                        }
                                
h3                     { 
                        font-size: 110%; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                        
img                    {
                        text-align:center;
                        border:0;        
                                        }
                                        
a:link                 { 
                        color:#0000FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FF0000; 
                                        }
                                
span                     { 
                        color:#0000FF; 
                                        }
                                
.linkliste li         { 
                        margin:0 0 0 37.5px; 
                                        }
                                        
.linkliste             {
                        margin:0 0 20px 0;
                        }
                                        
                                
#navi                 { 
                        list-style-type:none; 
                        float:left; 
                        width:960px;  
                        background-color:#EAF7A8;
                        margin:0 0 20px 0;  
                                        }
                                
#navi li             { 
                        float:left; 
                        position:relative; 
                                        }
                                
#navi a, span         { 
                        padding:10px; 
                        display:block; 
                        background-color:#EAF7A8;
                        margin:0;
                                        }
                                    
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto; 
                                        }
                                    
#navi ul li         { display:block; 
                        width:100%; 
                        font-size:90%;
                        margin:0; 
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi a:hover         { 
                        color:#FF0000; 
                                        }
                                        
#navi span             { 
                        background-color:#FFFF00;
                                        }
                                        
#hauptbild            {
                        float:left;
                        margin-bottom:5px;  
                        }                                        
                                
#anfang                {
                        text-align:center;
                        margin-bottom:20px;
                        font-size:200%;    
                        }
                        
#header                {
                        padding:20px 0 60px 0;
                        margin-bottom:10px;                         
                        background-color:#B4DC00;
                        }
                    
#inhalt                {
                        float:left;
                        width:680px;      
                        }                    
                        
#rechts                {
                        width:280px;
                        background-color:#FFFF00;
                        float:left;
                        height:816px;         
                        }

#wrapper                {
                        width:960px;
                        height:816px;     
                        }

Ich komme im Moment nicht weiter.

Lg Xeno

 

[Tronjer]

Folgendes habe ich aber nicht übernommen: Wenn ich dem <body> die width-Deklaration wegnehme, breitet sich (eigentlich logischerweise) die ganze Seite wieder voll aus, d. h. die Zentrierung geht flöten, was ich ja nicht will. Wahrscheinlich habe ich da etwas nicht begriffen.

Lass uns das schrittweise durchgehen.

Als erstes bauen wir eine vernünftige Navigation, und zentrieren dazu Header und Wrapper im Browserfenster, ohne dem <body> Tag width oder margin zuzuweisen. Sichere dazu dein CSS an einem anderen Ort und überschreibe das Styling mit folgendem Code. Wenn dir dabei redundante Attributzuweisungen auffallen (display:block) kannst du die entsprechenden Selektoren auch gerne zusammenfassen, ich habe das eben nur schnell im Firebug getippt. Den Wrapper habe ich hier mal rot eingerahmt und nach unten verschoben.

* {
    margin: 0;
    padding: 0;
    position: relative;
}
body {
    font-family: Verdana,sans-serif;
}
#wrapper {
    width: 960px;
    top: 300px;
    margin: 0 auto;
    border: 1px solid red;
}
#header {
    width: 960px;
    margin: 20px auto 0;
}
#navi {
    height: 40px;
    background: #EAF7A8;
    padding-left: 30px;
}
ul {
    list-style: none;
}
ul li {
    display: block;
    float: left;
    width: 130px;
    line-height: 40px;
    font-size: 15px;
}
ul li a {
    text-decoration: none;
    color: black;
    display: block;
    padding-left: 10px;
}
ul li ul {
    visibility: hidden;
}
ul li:hover ul {
    visibility: visible;
}
ul li ul li {
    clear: both;
    text-align: left;
    background: #EAF7A8;
    font-size: 13px;
}
ul li a:hover {
    background: red;
}

Den Elementen innerhalb des Wrappers widmen wir uns dann im Anschluss.

 

[Xeno]

Lass uns das schrittweise durchgehen.

Als erstes bauen wir eine vernünftige Navigation, und zentrieren dazu Header und Wrapper im Browserfenster, ohne dem <body> Tag width oder margin zuzuweisen. Sichere dazu dein CSS an einem anderen Ort und überschreibe das Styling mit folgendem Code. Wenn dir dabei redundante Attributzuweisungen auffallen (display:block) kannst du die entsprechenden Selektoren auch gerne zusammenfassen, ich habe das eben nur schnell im Firebug getippt. Den Wrapper habe ich hier mal rot eingerahmt und nach unten verschoben.

Lieber Tronjer

Ich habe Deine sehr umfassende, mich fordernde Hilfestellung durchdacht und (nicht ohne jede Änderung, aber dazu gleich) angewandt. Das Resultat findest Du hier http://www.michaelritter.ch/testseitetronjer.htm . Meinen von Deinem leicht abweichenden Code poste ich anschliessend vollständig in einem separaten Posting; hier gehe ich kommentierend auf Deinen Code ein, soweit ich ihn abgeändert habe. Ich beschränke mich dabei beim Kommentar auf die für die Navigation relevanten Teile (wie gesagt folgt aber der vollständige Code der neuen Testseite noch separat gepostet).

Jetzt also Dein vorgeschlagener Code mit meinen Kommentaren, soweit sie mir angebracht erscheinen:

* {
    margin: 0;
    padding: 0;
    position: relative;
}
body {
    font-family: Verdana,sans-serif;
}
#wrapper {
    width: 960px;
    top: 300px;
    margin: 0 auto;
    border: 1px solid red;
}
#header {
    width: 960px;
    margin: 20px auto 0;
}

Soweit klar; mein Code wird noch Anweisungen für andere Selektoren haben, die nichts mit der Navi zu tun haben.

#navi {
    height: 40px;
    background: #EAF7A8;
    padding-left: 30px;
}
ul {
    list-style: none;
}

Ja, mit folgender wohl eher trivialen Bemerkung: Da ich <ul> und <li> auf der Seite auch noch für anderes brauche als nur für die Navi, habe ich sie für die Navi nur unter #navi angesprochen, wobei #navi eine id für <ul> ist. Dadurch ergeben sich gewisse Abweichungen im Code. Ich hoffe, dass ich nichts falsch gemacht habe beim Übertragen.

ul li {
    display: block;
    float: left;
    width: 130px;
    line-height: 40px;
    font-size: 15px;
}

Der Wert 40px für die Deklaration line-height führt zu einer sehr klobigen Navi, zumindest am PC. Ich habe es mal mit 20px gemacht. Die width von 130px führt dazu, dass sich die Navi-Elemente über die ganze Breite ausdehnen, was mir ungünstig erscheint, weil ich noch (ein oder zwei) weitere Navipunkte einfügen möchte später. Ich habe deshalb die Deklaration width weggelassen.

ul li a {
    text-decoration: none;
    color: black;
    display: block;
    padding-left: 10px;
}

Die Deklaration der text-decoration habe ich hier weggelassen, da ich <a> global so deklariert habe. Als Farbe für <a> habe ich (ebenfalls global) blau deklariert. Statt padding-left habe ich padding genommen, weil sonst die Schrift in den <li> (also das <a>) ganz seltsam an den (oberen und linken) Rand gequetscht wird.

ul li ul {
    visibility: hidden;
}
ul li:hover ul {
    visibility: visible;
}

Diese Methode erscheint mir weit seriöser als die ursprüngliche Fassung mit der komischen riesengrossen negativen Pixelangabe, die ich zudem, ich gestehe das, nicht ganz begriffen hatte (was schon sowieso dagegen sprach).

ul li ul li {
    clear: both;
    text-align: left;
    background: #EAF7A8;
    font-size: 13px;
}

Hier habe ich meine Deklaration width:100% dringelassen, weil nämlich sonst Folgendes passiert: Die einzelnen <li> im Untermenü werden (bezüglich Hintergrundfarbe zum Beispiel) mit unterschiedlich langem Text im <a> unterschiedlich lang (d. h. passen sich der Textlänge an), was ganz schlecht aussieht. Es ist natürlich eigentlich immer so, dass verschiedene <li> verschieden lange Texte enthalten, so dass das erheblich stört.

ul li a:hover {
    background: red;
}

Ich habe noch eine Deklaration für #navi span (entspricht ul span in Deiner Schreibweise), nämlich möchte ich, dass dieses Element eine gesonderte Hintergrundfarbe bekommt (dann sieht man immer, auf welcher Seite man ist). <span> kommt nur in den Obermenüs vor, in den (ausklappbaren) Untermenüs nicht.


Ich danke Dir ausserordentlich für Dein Feedback. Ich habe kein Copy&Paste gewollt (wäre auch kaum in Deinem Sinn), und das Durchdenken hat für mich doch etwas Zeit gebraucht, rein um alles einigermassen zu verstehen!

Lg Xeno

 

[Xeno]

Hier noch der aktuelle CSS-Code der neuen Testseite Michael Ritter :

*                         { 
                        margin:0; 
                        padding:0;
                        position:relative;  
                                        }

html                    {
                        background-color:#B4DC00;
                        }
                                
body                     { 
                        background-color:#FFFFFF; 
                        font-family:Verdana, sans-serif;
                                        }                            
                                    
p                          { 
                        margin:0 20px 20px 20px;
                        padding-bottom:10px;  
                                        }

h1, h2, h3             { 
                        margin:0 20px 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:120%; 
                                        }
                                
h2                     { 
                        font-size: 115%; 
                                        }
                                
h3                     { 
                        font-size: 110%; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                        
img                    {
                        text-align:center;
                        border:0;        
                                        }
                                        
a:link                 { 
                        color:#0000FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FF0000; 
                                        }
                                
span                     { 
                        color:#0000FF; 
                                        }
                                        
.linkliste li         { 
                        margin:0 0 0 37.5px; 
                                        }
                                        
.linkliste             {
                        margin:0 0 20px 0;
                        }
                                        
                                
#navi                 { 
                        list-style-type:none; 
                        background-color:#EAF7A8;
                        height:40px;
                        padding-left:30px;    
                                        }
                                
#navi li             {
                        display:block;  
                        float:left;
                        line-height:20px;
                        font-size:15px;
                                        }
                                        
#navi li a, span    {
                        display:block;
                        padding:10px;
                        background-color:#EAF7A8;  
                                        }                                        
                                        
                                
#navi li ul         {
                        visibility:hidden;  
                                        }

#navi li:hover ul {
                        visibility:visible;  
                                        }
                                                            
#navi li ul li     { 
                        clear:both;
                        text-align:left;
                        background-color:#EAF7A8;                          
                        width:100%; 
                        font-size:13px;
                                        }
                                        

#navi li a:hover     { 
                        color:#FF0000; 
                                        }
                                        
#navi span             { 
                        background-color:#FFFF00;
                                        }
                                        
#hauptbild            {
                        float:left;
                        margin-bottom:5px;  
                        }                                        
                                
#anfang                {
                        text-align:center;
                        margin-bottom:20px;
                        font-size:200%;    
                        }
                        
#header                {
                        width:960px; 
                        padding:20px 0 60px 0;
                        margin:20px auto 0;                         
                        background-color:#B4DC00;
                        }
                    
#inhalt                {
                        float:left;
                        width:680px;      
                        }                    
                        
#rechts                {
                        width:280px;
                        background-color:#FFFF00;
                        float:left;
                        height:816px;         
                        }

#wrapper                {
                        width:960px;
                        top:300px;
                        margin:0 auto;
                        border: 1px solid red;      
                        }

Lg Xeno

 

[Tronjer]

Ich habe Deine sehr umfassende, mich fordernde Hilfestellung durchdacht und (nicht ohne jede Änderung, aber dazu gleich) angewandt.

Ich hatte den Aufbau einer solchen Navigation mal in einem älteren Thread erläutert. Vielleicht hilft dir das zum Verständnis

http://www.html.de/css/41038-horizontale-navigationsleiste.html

Ja, mit folgender wohl eher trivialen Bemerkung: Da ich <ul> und <li> auf der Seite auch noch für anderes brauche als nur für die Navi, habe ich sie für die Navi nur unter #navi angesprochen

Schon richtig. Sofern mehrere unsortierte Listen auf deinen Seiten stehen, muss das im CSS natürlich ausdifferenziert werden, in dem man bsw. die ID (#navi) voranstellt.

Der Wert 40px für die Deklaration line-height führt zu einer sehr klobigen Navi, zumindest am PC. Ich habe es mal mit 20px gemacht. Die width von 130px führt dazu, dass sich die Navi-Elemente über die ganze Breite ausdehnen, was mir ungünstig erscheint, weil ich noch (ein oder zwei) weitere Navipunkte einfügen möchte später. Ich habe deshalb die Deklaration width weggelassen.

Die von mir angegebenen Werte sind natürlich optional. Merken solltest du dir vielleicht, dass man mit line-height Elemente vertikal zentrieren kann.

Ich habe noch eine Deklaration für #navi span (entspricht ul span in Deiner Schreibweise), nämlich möchte ich, dass dieses Element eine gesonderte Hintergrundfarbe bekommt (dann sieht man immer, auf welcher Seite man ist). <span> kommt nur in den Obermenüs vor, in den (ausklappbaren) Untermenüs nicht.

Du bist ja schon wieder drei Schritte zu weit. ;)

Das erreicht man auf andere Weise und außerdem schreibt man die Navigation lediglich einmal, anstatt sie in jede Unterseite einzeln einzufügen. Aber das wäre Stoff für eine spätere Lektion. Erst mal sollte der statische HTML Code stehen.

So, jetzt schauen wir uns die Navigation mal an: Was passt noch nicht?

Ich habe zwar noch keinen Blick in den Quellcode geworfen, aber was mir auf Anhieb auffält:

- der Body benötigt keinen weißen Background, das verwirrt nur.
- der Abstand zwischen den Hauptmenüpunkten ist unterschiedlich groß. Fällt besonders bei Vereine>> Links auf. Gefällt dir das?
- wenn man die Menüleiste aufklappt, wird nicht auf Anhieb ersichtlich, über welchen Untermenüpunkt die Maus gerade hovert. Das ist nicht besonders userfreundlich. Mit den z.Zt. großen Zeilenabständen mag das noch angehen. Aber die sollten in der endgültigen Fassung verringert werden.
- beim Aufklappen der Menüleiste wird der darunter liegende Content verdeckt.

Da du diese Seite unter Testseitetronjer gespeichert hast, kannst du den unter der Navigation liegenden Wrapper eigentlich löschen. Den brauchen wir hier nicht, und wenn das Menü fertig ist, wird es ohnehin extrahiert.

 

[Xeno]

Ich hatte den Aufbau einer solchen Navigation mal in einem älteren Thread erläutert. Vielleicht hilft dir das zum Verständnis

http://www.html.de/css/41038-horizontale-navigationsleiste.html

Danke, ich habe mir den Code gespeichert als Gedächtinsstütze. Ich hätte von Anfang an diesen Weg gehen sollen, die bestehende Lösung ist irgendwie Murks.

Schon richtig. Sofern mehrere unsortierte Listen auf deinen Seiten stehen, muss das im CSS natürlich ausdifferenziert werden, in dem man bsw. die ID (#navi) voranstellt.

Ok.

Die von mir angegebenen Werte sind natürlich optional.

Klar. Mir ging es nur darum meine Änderungen transparent zu machen.

Merken solltest du dir vielleicht, dass man mit line-height Elemente vertikal zentrieren kann.

Sehr richtig, das war mir wirklich neu, sehr lehrreich. Kommt in einem meinem beiden "schlauen Bücher" auf Seite 459 von ca. 800, was mich ein wenig tröstet, scheint also nicht ganz trivial zu sein. Dort steht übrigens, noch besser als die Zuweisung von Werten in px oder anderen Einheiten oder Prozenten sei die Zuweisung von Werten ohne Einheit, dann sei es so, dass sich die Angabe immer relativ zur Schriftgrösse verhalte (z. B. 1.5 = 1,5fache der Schriftgrösse), aber das ist dann wohl schon sptzfindig.

Du bist ja schon wieder drei Schritte zu weit. ;)

Das erreicht man auf andere Weise...

Und da war ich doch noch recht stolz auf diese Lösung mit <span>...

und außerdem schreibt man die Navigation lediglich einmal, anstatt sie in jede Unterseite einzeln einzufügen. Aber das wäre Stoff für eine spätere Lektion. Erst mal sollte der statische HTML Code stehen.

Dacht' ich mir schon. Nur kann ich weder JavaScript noch PHP im Moment.

So, jetzt schauen wir uns die Navigation mal an: Was passt noch nicht?

Ich habe zwar noch keinen Blick in den Quellcode geworfen, aber was mir auf Anhieb auffält:

- der Body benötigt keinen weißen Background, das verwirrt nur.

Ähem ok, aber irgendwie (bzw. irgendwo) muss doch die Hintergrundfarbe definiert sein?

- der Abstand zwischen den Hauptmenüpunkten ist unterschiedlich groß. Fällt besonders bei Vereine>> Links auf. Gefällt dir das?

Nein. Mein Gefühl sagt mir: Das ist so, weil sich die (maximale) Breite der Untermenüs (also das "breiteste" Untermenü) irgendwie aufs Obermenü "übertragt".

- wenn man die Menüleiste aufklappt, wird nicht auf Anhieb ersichtlich, über welchen Untermenüpunkt die Maus gerade hovert. Das ist nicht besonders userfreundlich. Mit den z.Zt. großen Zeilenabständen mag das noch angehen. Aber die sollten in der endgültigen Fassung verringert werden.

Richtig. Das wäre ein späterer Wunsch gewesen, das zu ändern. Ich bin bei meinen Versuchen darin gescheitert, dass Farbanweisungen für li:hover nicht interpretiert wurden. Da sich diese Aussage aber natürlich noch auf die alte Navi bezieht, kann das x Gründe haben. Offenbar ist es aber mit CSS möglich das zu machen.

- beim Aufklappen der Menüleiste wird der darunter liegende Content verdeckt.

Ja, und das kamm man echt verhindern mit CSS? Wäre recht cool!

Da du diese Seite unter Testseitetronjer gespeichert hast, kannst du den unter der Navigation liegenden Wrapper eigentlich löschen. Den brauchen wir hier nicht, und wenn das Menü fertig ist, wird es ohnehin extrahiert.

Ja. Ich fahre morgen weiter.

Herzlichen Dank!

Lg Xeno

 

[Tronjer]

Kommt in einem meinem beiden "schlauen Bücher" auf Seite 459 von ca. 800, was mich ein wenig tröstet, scheint also nicht ganz trivial zu sein.

Von diesen Büchern habe ich auch ein paar im Schrank zu stehen, und ich weiß zwar nicht, wie es dir damit geht, aber ich habe die nie bis zum Ende durchgearbeitet. Solltest du in der Zukunft noch mal Geld für Lehrmaterialien ausgeben wollen, würde ich dir eher das hier empfehlen.

video2brain - Europas führender Anbieter von Video-Trainings

Ist zwar auch nicht billiger, aber dafür kürzer, prägnanter, quasi wiederholbare Vorlesungen, und man kann so ein 8h Tutorial - incl. Übungsaufgaben - locker innerhalb einer Woche durcharbeiten.

Und da war ich doch noch recht stolz auf diese Lösung mit <span>

...

Und damit warst du auch schon auf dem richtigen Weg, aber das geht noch besser. Redundanter Code ist Teufelswerk, ähnlich wie Frames, unsichtbare GIFs als Abstandhalter oder Tabellenlayout. ;)

Dacht' ich mir schon. Nur kann ich weder JavaScript noch PHP im Moment.

Brauchst du auch nicht. Sofern dein Webspace PHP unterstützt, wovon ich mal ausgehe, sind nur wenige Zeilen Code notwendig.

Ähem ok, aber irgendwie (bzw. irgendwo) muss doch die Hintergrundfarbe definiert sein?

Wir haben da doch irgendwo ein Grün im CSS. Warum das nicht auf den Body legen?

Nein. Mein Gefühl sagt mir: Das ist so, weil sich die (maximale) Breite der Untermenüs (also das "breiteste" Untermenü) irgendwie aufs Obermenü "übertragt".

Dein Gefühl trügt dich auch nicht, aus eben diesem Grunde hatte ich den Elementen ja auch eine feste Breite gegeben. Wenn man 960px durch 7 teilt und links noch etwas Abstand vom Rand haben will, wie breit darf ein Menüpunkt dann etwa werden?

Ja, und das kamm man echt verhindern mit CSS? Wäre recht cool!

Wir könnten die Höhe des Menüs verringern und eventuell noch Transparenzen einbauen, damit der darunter liegende Content durchscheint.

 

[Xeno]

Von diesen Büchern habe ich auch ein paar im Schrank zu stehen, und ich weiß zwar nicht, wie es dir damit geht, aber ich habe die nie bis zum Ende durchgearbeitet. Solltest du in der Zukunft noch mal Geld für Lehrmaterialien ausgeben wollen, würde ich dir eher das hier empfehlen.

video2brain - Europas führender Anbieter von Video-Trainings

Ist zwar auch nicht billiger, aber dafür kürzer, prägnanter, quasi wiederholbare Vorlesungen, und man kann so ein 8h Tutorial - incl. Übungsaufgaben - locker innerhalb einer Woche durcharbeiten.

Hm, ich habe zwischendurch noch gerne ein Buch zum Nachschlagen (das kaum jemand 800 Seiten von vorne bis hinten durchackert, stimmt aber natürlich schon auch). Preislich und bezüglich Aktualität kommt es wohl etwa aufs selbe raus. Ist auch etwas Geschmackssache, was man lieber hat.

Und damit warst du auch schon auf dem richtigen Weg, aber das geht noch besser. Redundanter Code ist Teufelswerk, ähnlich wie Frames, unsichtbare GIFs als Abstandhalter oder Tabellenlayout. ;)

Natürlich bin ich theoretisch voll auf Deiner Linie. Eine Abkürzung für die Lösung mit <span> kann ich auf die Schnelle aber gerade nicht erkennen. Ich hätte gesagt, es sei eher ein Nebenschaupltz, oder nicht?

Brauchst du auch nicht. Sofern dein Webspace PHP unterstützt, wovon ich mal ausgehe, sind nur wenige Zeilen Code notwendig.

Ja, der Server unterstützt natürlich PHP. Wenn das von Interesse ist, kann ich Dir die Infodatei (heisst fachsprachlich wohl etwas anders) zeigen, wo alles draufsteht bezüglich dem PHP auf dem Server. Es ist eine Version von PHP 5.

Wir haben da doch irgendwo ein Grün im CSS. Warum das nicht auf den Body legen?

Ich möchte aber den Body (bzw zumindest die darin liegenden Divs ausser den Header) weiss und den Rest (Header und das "neben" dem Body) grün.

Dein Gefühl trügt dich auch nicht, aus eben diesem Grunde hatte ich den Elementen ja auch eine feste Breite gegeben. Wenn man 960px durch 7 teilt und links noch etwas Abstand vom Rand haben will, wie breit darf ein Menüpunkt dann etwa werden?

Verstehe! Ich werde wieder eine Breite (vielleicht etwas weniger als 130px wegen dem Bedürfnis, ggf. noch 1 bis 2 Menüpunkte) deklarieren.

Wir könnten die Höhe des Menüs verringern und eventuell noch Transparenzen einbauen, damit der darunter liegende Content durchscheint.

Dazu eine Bemerkung, die nichts mit Technik zu tun hat, sondern mit Usability: Ich hätte spontan gesagt, wer über die Navi hovert, will die Navi sehen und nicht den darunter liegenden Inhalt. Daher bin ich gar nicht so sicher, ob eine Transparenz eingebaut werden soll.

Ich werde als Nächtest alles aus dem HTML werfen, was nicht Navi ist, fixe width wieder einführen, dann sehen wir weiter. Ok?

Lg Xeno

 

[Tronjer]

Dann mach ruhig erst mal weiter.

Der fixe <span> ist deshalb unnötig, weil die Navi später ohnehin inkludiert wird. Die Festlegung, welcher Menüpunkt anders eingefärbt wird, erfolgt anhand der URL.

 

[Xeno]

Ich habe die neue Testseite wie angekündigt aufgeschaltet: Michael Ritter .

Da die Navi technisch viel besser ist als die bestehende, werde ich sie demnächst scharf schalten.

Ich bin gespannt, wie es weitergeht! Soll ich besser für die jetzt anstehenden Fragen einen neues Fred auftun?

Dann mach ruhig erst mal weiter.

Der fixe <span> ist deshalb unnötig, weil die Navi später ohnehin inkludiert wird. Die Festlegung, welcher Menüpunkt anders eingefärbt wird, erfolgt anhand der URL.

Tönt gut! Inkludiert meint PHP, nehm' ich an. Und der zweite Satz heisst, dass PHP festlegt, was farbig ist, oder wie?

Ich freue mich aufs Weitere! Damit es fair bleibt (ich habe fast ein wenig ein schlechtes Gewissen, aber ok, Du bist erwachsen): Wenn es (auch) bei Dir mal länger dauert oder Du etwas Lukrativeres zu tun hast, voll okay. Umgekehrt kann auch ich nicht immer ganz sofort reagieren, da ich ja auch noch einen Beruf, eine Frau und einen Dackelhund (Reihenfolge nicht wertend8)) habe.

Lg Xeno

 

[Tronjer]

Von mir aus können wir den Thread fortführen. Falls es Threadi nicht stört.

Wie es weitergeht, hängt davon ab, inwieweit du mit der Navi zufrieden bist.

Was ich persönlich noch optimieren würde, sind die optisch ungleichen Abstände in der Hauptnavigation. Dazu könnte man bsw. ein text-align center auf #nav li legen. Auch hast du im Untermenü zwei Punkte mit Zeilenumbruch. Die Verbreiterung der width auf 125px würde zumindest Casino Theater in einer Zeile stehen lassen. Ebenso könnte man diese überbreiten Zeilen vielleicht separat formatieren, in dem man sie mit nth-child anspricht oder ihnen eine CSS Klasse zuweist. Vielleicht fällt dir ja auch ein kürzerer Text ein.

Außerdem könnte man der Leiste noch etwas Tiefe verleihen. Kommentiere mal die background-color unter #nav li und #nav li a aus und füge am Ende deines CSS das hier ein:

ul#navi {
    background: -moz-linear-gradient(center top , #FEFCEA 0%, #F6F939 100%) repeat scroll 0 0 transparent;
    border-radius: 8px;
    box-shadow: 0 1px 5px #777;
}

 

[Xeno]

Lieber Tronjer

Noch bevor ich Deine obige Antwort verarbeite: Ich habe gerade ein kleines Erfolgserlebnis gehabt *juhee* und es geschafft, beim Hovern über Menü- und Untermenüpunkte einen Farbwechsel zu erzwingen (das gewählte rosa ist wohl etwas eigensinnig, geht im Moment ja nur ums Prinzip). Ich musste nur die Deklaration background-color zu #navi li a:hover ergänzen. Ich meinte immer ich müsse li:hover ansprechen, aber dem war nicht so. Hier das neuste Resultat:

Michael Ritter .

Deine Inputs vom obigen Posting verarbeite ich baldmöglichst (ev. erst morgen).

Lg Xeno

 

[Tronjer]

Gratulation. :)

Das stand mit auf der Prioritätenliste. Da du es ja bereits selber herausgefunden hat, können wir zum nächsten Punkt übergehen. ;)

Die Seite, auf welcher der User sich gerade befindet, soll in der Menüleiste farbig hervorgehoben werden. Du hattest es bisher mit einem <span> versucht, und wir werden das jetzt dynamisch angehen, weil hinterher ohnehin nur noch eine einzige Leiste existiert, die in alle Unterseiten inkludiert wird. Damit würde dein statisches HTML nicht mehr funktionieren.

So etwas lässt sich sowohl in PHP wie auch JavaScript lösen. Da wir bisher noch kein PHP einsetzen, machen wir es erst einmal in JS. Ich werde nachfolgend grob erklären, wie es funktioniert. Du musst das dazu (noch) nicht im Detail verstehen: copy & paste reichen hier völlig aus.

Zuerst bauen wir im Head die Bibliothek jQuery ein (die Zeile mit dem <script> Tag kopieren). Praktischer Weise bietet uns Google hierfür einen Link an.

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
</head>

Anschließend muss das HTML der Navigation erweitert werden. Jedes <list> Element der Hauptmenüpunkte erhält eine ID, deren Namen mit der verlinkten Unterseite korrespondiert, und zwar ohne die Endung .htm. Das zweite Element erhält die ID #politik, das dritte Element die ID #vereine, usw. Dem ersten Element (home) gibst du die ID dieser Seite: #testseitetronjer. Außerdem legen wir im CSS eine Klasse mit den Namen aktiv an und weisen dieser das gewünschte Attribut zu, bsw.

.aktiv {
  background: red;
}

Bis hierhin sollte es einfach sein; nun kommt der komplexe Teil. Folgenden Code kopierst du in deine HTML-Datei und zwar direkt vor das schließende Body Tag (</body>).

<script>
    function changeMenuColor() {
        var path = window.location.pathname.split('/');
        path = path[1];
        var current = path.slice(0,-4);
        $('#' + current).addClass('aktiv');
    }
    
    changeMenuColor();
</script>

Um das kurz theoretisch zu erläutern: Die Funktion liest die URL Michael Ritter, extrahiert daraus den Teil testseitetronjer und hängt an die korrespondierende ID die CSS-Klasse .aktiv an.

 

[Xeno]

Lieber Tronjer

Bevor ich weitermache, möchte ich kurz auf Folgendes Problem aufmerksam machen, das ich entdeckt habe, als ich soeben versuchte, die aktualisierte Navi (in herkömmlicher Weise) "scharf" zu schalten ("aktualisiert" heisst auf dem Stand vor Deinem vorletzten Posting):

Vermutlich die Deklaration "visibility:hidden" zum Selektor #navi li ul stört, was unter ihr ist, und macht das auch irgendwie unsichtbar. Ich bin nicht ganz sicher, ob diese (meine) Interpretation der Fehlerursache stimmt, aber nach langem Ausprobieren war dies die "verdächtige" Stelle. Damit der Fehler für Dich verständlich ist, hier ein (neuer) Testlink (bisheriger HTML-Code der Startseite + CSS der aktualisierten Navi):

Michael Ritter

Da der Fehler ziemlich massiv stört, verzichte ich im Moment darauf die aktualisierte Navi "scharf" zu schalten. Statt dessen verarbeite ich jetzt Dein zweitletztes Posting. Danach gehts dann Richtung JavaScript - ich habe mir übrigens heute Literatur dazu und zu jQuery bestellt, die ich schon morgen haben werde. Ich freue mich darauf auch dort herumzuwüten!

Lg Xeno

 

[Xeno]

Was ich persönlich noch optimieren würde, sind die optisch ungleichen Abstände in der Hauptnavigation. Dazu könnte man bsw. ein text-align center auf #nav li legen.

Gute Idee, habe ich soeben eingefügt.

Auch hast du im Untermenü zwei Punkte mit Zeilenumbruch. Die Verbreiterung der width auf 125px würde zumindest Casino Theater in einer Zeile stehen lassen. Ebenso könnte man diese überbreiten Zeilen vielleicht separat formatieren, in dem man sie mit nth-child anspricht oder ihnen eine CSS Klasse zuweist. Vielleicht fällt dir ja auch ein kürzerer Text ein.

Richtig gesehen, das nervt mich schon länger (wenn man beim Hovern einen Farbwechsel programmiert hat, stört es übrigens noch mehr als vorher). Ich habe jetzt mal die beiden Elemente mit den langen Texte als Klasse angesprochen (nth-child wird vom IE 8 ärgerlicherweise nicht unterstützt) und sie anders formatiert. Die Lösung ist noch nicht das Gelbe vom Ei (zum Beispiel weil die neue Formatierung ärgerlicherweise dazu führt, dass der eine zweizeilige Punkt gerade einzeilig wird, der andere nicht...), aber ich habe aufgrund Deiner Hinweise jedenfalls Lösungsideen.

Außerdem könnte man der Leiste noch etwas Tiefe verleihen. Kommentiere mal die background-color unter #nav li und #nav li a aus und füge am Ende deines CSS das hier ein:

ul#navi {
    background: -moz-linear-gradient(center top , #FEFCEA 0%, #F6F939 100%) repeat scroll 0 0 transparent;
    border-radius: 8px;
    box-shadow: 0 1px 5px #777;
}

Du siehst das Resultat vom Ganzen hier:

Michael Ritter

Die Navi mit CSS 3 sieht super aus. Leider nur im FF; Ie 9 und zu meiner Überraschung auch Chrome zeigen den Farbverlauf nicht (die anderen Effekte schon).

Lg Xeno