Frage bezüglich einer CSS-Navigation

[Sergej]

Hi Leute,

ich habe folgende Frage: Wie bastel ich mir eine Navigation, die wie diese hier aussieht? xxx

Wahrscheinlich mit CSS. Aber wie dann genau? Brauche ich noch Grafiken dafür, oder nicht?

Wäre nett, wenn mir jemand weiterhelfen könnte.

[BoneDaddy]

welche navigation meinst du denn?

[Sergej]

Ich meine die auf der rechten Seite, unter "Main Menu".

Die verschiedenen CSS-Tutorials im Netz helfen mir irgendwie nicht so recht weiter.

[Sergej]

Nagut, erweitern wir das CSS-Problem mal ein wenig :)

Ich wollte eine Seite erstellen, die auf Tabellen basiert. Nun hat mich aber doch die Idee gepackt, es mal mit CSS zu probieren. Aber irgendwie bin ich zu blöd dafür ... Hab schon viel bei SelfHTML gelesen, aber mit der Positionierung der div-Elemente wird das irgendwie nix.

Kann mir nicht mal jemand eine kurze Hilfestellung zu meinem Problem geben?

Ich habe jetzt mit Tabellen dieses Grundgerüst erstellt: http://files.two-by-four.de/public/templates/template_07/. Es besteht aus drei Teilen: Head mit der Grafik, rechts darunter soll ein Menü folgen und links darunter der content.

Wie kann ich hier jetzt drei div-Elemente erstellen, die sich vernünftig aneinanderfügen?

[DanMan]

Da ich gerade ein bisschen lange Weile hab:

<div id="alles">
<div id="links">Inhalt
</div>
<div id="rechts">Menü
</div>
</div>

div#alles {position:relative;background: url(images/head.jpg) no-repeat;height:330px;width:800px}
div#links {position:relative;top:330px;width:580px}
div#rechts {position:absolute;right:0;top:330px;width:220px;background: url(images/menu.jpg) repeat-y;min-height:300px}

[Sergej]

Da ich gerade ein bisschen lange Weile hab:

<div id="alles">
<div id="links">Inhalt
</div>
<div id="rechts">Menü
</div>
</div>

div#alles {position:relative;background: url(images/head.jpg) no-repeat;height:330px;width:800px}
div#links {position:relative;top:330px;width:580px}
div#rechts {position:absolute;right:0;top:330px;width:220px;background: url(images/menu.jpg) repeat-y;min-height:300px}
Danke dafür. Funktioniert gut!

Ich habe mittlerweile bereits (mit Hilfe versch. Tutorials) eine Navigation gebastelt. Problem ist, dass diese mit dem IE richtig positioniert ist, mit z. B. Opera nicht! Das ganze gibt's hier zu sehen: http://files.two-by-four.de/public/templates/template_07/

Woran liegt das und wie kann ich das ändern?

Hier der betreffende CSS-Ausschnitt:

div#navigation {
position:absolute;right:0;top:330px;width:220px;background: url(images/menu.jpg) repeat-y;min-height:300px;
margin:0; padding: 0;
}

ul {
list-style-type:none;
width:170px;
margin-left:40px;margin-top:20px;
}

li {margin-bottom: 0.5em;
}

li a:link, li a:visited, li a:hover, li a:active, li a:focus {
color:#49555E;
width:100%; height: 1.0em;
display:block;
border-bottom: 1px solid #49555E;
border-top: 1px solid #49555E;
border-left: 5px solid #49555E;
text-decoration:none;
padding-left: 3px; padding-bottom:0.2em;
font-size:0.8em;
}
li a:visited { color:#000000; border-color:#49555E; }
li a:hover { color:#FFFFFF; border-color:#49555E; background-color:#7B848C; }
li a:active { color:#FFFFFF; border-color:#49555E; background-color:#7B848C; }
li a:focus { color:#FFFFFF; border-color:#49555E; }

[DanMan]

1x Copy and Paste bitte:
/* CSS Document */

*{
padding : 0;
margin : 0;
font: normal 100.01% verdana, sans-serif;
}

div#head {
position:relative;background: url(images/head.jpg) no-repeat;height:330px;width:800px
}

div#content {
position:relative;top:330px;width:580px;padding-left:20px;padding-top:20px
}

div#navigation {
position:absolute;right:0;top:330px;width:220px;background: url(images/menu.jpg) repeat-y;min-height:300px;
}
div#navigation ul {
list-style-type:none;
width:170px;
margin-left:32px;
}

li {margin-bottom: 0.5em;}

li a:link, li a:visited, li a:hover, li a:active, li a:focus {
color:#49555E;
width:100%; height: 1.0em;
display:block;
border-bottom: 1px solid #49555E;
border-top: 1px solid #49555E;
border-left: 5px solid #49555E;
text-decoration:none;
padding-left: 3px; padding-bottom:0.2em;
font-size:0.8em;
}
li a:visited { color:#000000; border-color:#49555E; }
li a:hover { color:#FFFFFF; border-color:#49555E; background-color:#7B848C; }
li a:active { color:#FFFFFF; border-color:#49555E; background-color:#7B848C; }
li a:focus { color:#FFFFFF; border-color:#49555E; }

[Sergej]

1x Copy and Paste bitte:
/* CSS Document */

*{
padding : 0;
margin : 0;
font: normal 100.01% verdana, sans-serif;
}

div#head {
position:relative;background: url(images/head.jpg) no-repeat;height:330px;width:800px
}

div#content {
position:relative;top:330px;width:580px;padding-left:20px;padding-top:20px
}

div#navigation {
position:absolute;right:0;top:330px;width:220px;background: url(images/menu.jpg) repeat-y;min-height:300px;
}
div#navigation ul {
list-style-type:none;
width:170px;
margin-left:32px;
}

li {margin-bottom: 0.5em;}

li a:link, li a:visited, li a:hover, li a:active, li a:focus {
color:#49555E;
width:100%; height: 1.0em;
display:block;
border-bottom: 1px solid #49555E;
border-top: 1px solid #49555E;
border-left: 5px solid #49555E;
text-decoration:none;
padding-left: 3px; padding-bottom:0.2em;
font-size:0.8em;
}
li a:visited { color:#000000; border-color:#49555E; }
li a:hover { color:#FFFFFF; border-color:#49555E; background-color:#7B848C; }
li a:active { color:#FFFFFF; border-color:#49555E; background-color:#7B848C; }
li a:focus { color:#FFFFFF; border-color:#49555E; }
Danke für die Mühe, aber das hilft bei mir nicht wirklich (IE6, Opera 9.01).

Aber eine Frage zu einem viel größeren Problem:
Was muss ich machen, damit die content-Box sich in ihrer Länge dem Inhalt, also z. B. dem Text, anpasst? Und dass dann auch die Navigationsleiste bis zum Ende mitgezogen wird?

[DanMan]

Ich habs zwar nicht getestet, aber ich kann mir nicht vorstellen, dass das CSS Zeug von mir im Opera Probleme bereitet. Auf jeden Fall wird es dir nichts bringen den IE als Maß der Dinge heranzunehmen.

Der #content Bereich erweitert sich doch - weiß garnicht was du hast. Und so lange du keine Höhe festlegst wird sich daran auch nix ändern. :confused:

Die Frage zu der Navigationsleiste verstehe ich nicht.

[Sergej]

Ich habs zwar nicht getestet, aber ich kann mir nicht vorstellen, dass das CSS Zeug von mir im Opera Probleme bereitet. Auf jeden Fall wird es dir nichts bringen den IE als Maß der Dinge heranzunehmen.

Der #content Bereich erweitert sich doch - weiß garnicht was du hast. Und so lange du keine Höhe festlegst wird sich daran auch nix ändern. :confused:

Die Frage zu der Navigationsleiste verstehe ich nicht.
Also, mit dem Erweitern des content-Bereichs hast Du recht. Ich hatte da noch eine height-Angabe drin. Funktioniert soweit.

Aber hier mal zwei Screenshots:

Opera: http://files.two-by-four.de/public/templates/template_07/opera.jpg
IExplorer: http://files.two-by-four.de/public/templates/template_07/iexplorer.jpg

Diese Seite soll für einen Intranetauftritt sein. Und leider benutzen alle Rechner noch Windows 2000 und somit IE 5 (?).

Hier noch mal der Code:

/* CSS Document */


body {
padding:0;
margin:0;
}

div#head {
position:relative;
background:url(images/head.jpg) no-repeat;
height:330px;
width:800px
}

div#content {
position:relative;
top:330px;
left:0px;
width:580px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:50px;
}

h1 {
color:orange;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:bold;
display:block;
border-bottom:1px dashed #49555E;
padding-left:3px;
padding-top:1px;
padding-bottom:1px;
}

p {
font-family:Verdana,sans-serif;
font-size:12px;
}

div#navigation {
position:absolute;
right:0;
top:330px;
width:220px;
height:100%;
background:url(images/menu.jpg) repeat-y;
margin:0;
padding:0;
}

ul {
list-style-type:none;
width:170px;
margin-left:40px;
margin-top:20px;
}

li {
margin-bottom:5px;
}

li a:link, li a:visited, li a:hover, li a:active, li a:focus {
color:#49555E;
font-family:Verdana,sans-serif;
font-weight:bold;
width:100%;
height:1.0em;
display:block;
border-bottom:1px solid #49555E;
border-left:1px solid #49555E;
text-decoration:none;
padding-left:3px;
padding-bottom:1px;
font-size:0.8em;
}

li a:visited { color:#49555E; border-color:#49555E; }
li a:hover { color:#49555E; border-color:#49555E; background-color:#FFC600; }
li a:active { color:#49555E; border-color:#49555E; background-color:#FFC600; }
li a:focus { color:#49555E; border-color:#49555E; }

[DanMan]

So stimmts auf jeden Fall im Firefox. IE hab ich nicht getestet.

div#head {
position:relative;
background:url(images/head.jpg) no-repeat;
height:330px;
width:800px
}

div#content {
position:relative;
top:330px;
left:0px;
padding:10px 220px 50px 20px;
background:url(images/menu.jpg) repeat-y top right;
}

div#navigation {
position:absolute;
right:43px;
top:330px;
width:220px;
margin:0;
padding:0;
}

div#navigation ul {
list-style-type:none;
width:170px;
margin-left:40px;
margin-top:20px;
}
Dieses div#navigation könntest du dir sparen, wenn du direkt der Liste die ID geben würdest. Unnötige Verschachtelung.

[Sergej]

Eine kurze Frage hätte ich noch:

Ich habe jetzt mittels Klassen verschiedene Link-Formatierungen festgelegt (a.type1:link und a.type2:link).

Kann ich das auch für Listen machen? Hier meine Navigationsliste. Wo müsste ich jetzt was einfügen, um mit Klassen eine weitere, dann anders formatierte Liste zu erhalten?

/* liste (navigation) */
ul {
list-style-type:none;
width:170px;
margin-left:40px;
margin-top:20px;
}

li {
margin-bottom:5px;
}

li a:link, li a:visited, li a:focus, li a:hover, tli a:active {
color:#49555E;
font-family:Verdana,sans-serif;
font-weight:bold;
width:100%;
height:1.0em;
display:block;
border-bottom:1px solid #49555E;
border-left:1px solid #49555E;
text-decoration:none;
padding-left:3px;
padding-bottom:1px;
font-size:0.8em;
}

li a:visited {
color:#49555E;
border-color:#49555E;

}

li a:focus {
color:#49555E;
border-color:#49555E;
}

li a:hover {
color:#49555E;
border-color:#49555E;
background-color:#FFC600;
}

li a:active {
color:#49555E;
border-color:#49555E;
background-color:#FFC600;
}

[DanMan]

Ja, logisch. Indem du deiner Liste eine Klasse vergibst und den Selektor für die dazugehörigen Listenpunkte anpasst.

Also z.B. "ul.navi" und dann eben "ul.navi li". Hatte das auch schon verwendet als "div#navigation ul", das hast du aber wieder rausgeschmissen - wahrscheinlich wusstest du nicht wozu das gut war, oder?