Ich erstelle ein Template für Joomla. Momentan sieht die Seite so aus: http://www.concubine.ch/index.php

Da ich wegen Joomla den schwarzen Hintergrund nicht im body definieren kann, muss ich das über ein seperates div machen. Dazu habe ich nun <div id="main"> mit folgenden Eigenschaften:

HTML-Code:

#main {
background-image:url(../images/bg.gif);
width:100%;
height:100%;
min-height:600px;
}

So wird das Schwarz zwar im FF immer min. 600px hoch und wenn der content grösser ist auch genügend gross, aber bei Seiten mit wenig content bleibt am unteren Rand ein hässlicher weisser Rand. Wie kann ich dieses Problem lösen?

Dann habe ich noch ein 2. Problem: Ich habe für das Menü drei Zustände: normal hover active. Jetzt möchte ich machen dass das aktive Menü keinen hover Zustand mehr hat, ich bringe das einfach nicht fertig (ich denke, dass das Problem recht simpel zu lösen sein könnte, sehe aber den Wald vor lauter Bäume nicht mehr)

Vielleicht hilft es dir weiter, wenn du folgende Regel im CSS-Code notierst:

Code :

1 2 3

html, body { height: 100%; }

Wenn der aktive Menüpunkt keinen :hover-Effekt besitzen soll, dann zeichne ihn nicht als Link aus.

yea das erste Problem habe ich so schon lösen können, kannst du mir sagen was das genau bewirkt?

zum 2. Problem habe ich ev. auch eine Lösung gefunden, muss sie aber noch ausprobieren

Die Regel bewirkt, daß die Höhe des Viewports auf 100% ausgedehnt wird.

Zum 2. Problem fiel mir eben noch eine CSS-Lösung ein:

Code :

1 2 3 4 5 6 7

a#active { color: #ffff00; }   a#active:hover { color: #ffff00; }

HTML-Code:

<a href="#">link 1</a>

<a href="#" id="active">link 2</a>

<a href="#">link 3</a>

habe gerade bemerkt, dass das Problem mit dem Hintergrund noch nicht behoben ist....
Wenn jetzt eine Seite genügend Höhe aufweist, gibt es auf der seite hässliche weisse Balken:
http://www.concubine.ch/index.php?op...&id=1&Itemid=4

Verwende mal folgende CSS-Regeln für das DIV #main:

Code :

1 2 3 4 5 6 7 8 9

#main { background:url(../images/bg.gif) repeat; width:100%; min-height:100%; /* Für moderne Browser */ }   * html #main { /* Für IE */ height: 100%; }

das funktioniert nur - vielen Dank

Beim Menü schaffe ich es nicht dem Activ Menü ein Hover Zustand zuzuweisen, ich habe es mit:

Code :

1 2 3

u1#active_menu-nav li a:hover a#active_menu-nav:hover #active_menu-nav a:hover

versucht

Dir ist da ein Tippfehler unterlaufen: u1#active_menu-nav li a:hover

Der Name des Selektors ul#active_menu-nav li a:hover stimmt aber auch grundsätzlich nicht, da die ID der Liste #mainlevel-nav heißt:

Code :

1	ul#mainlevel-nav li a#active_menu-nav:hover

Und noch ein Tipp: Selektoren mit gleichen CSS-Formatierungen lassen sich auch zusammenfassen:

Code :

1 2 3 4 5 6 7 8 9 10 11 12

ul#mainlevel-nav li a#active_menu-nav, ul#mainlevel-nav li a#active_menu-nav:hover {         color:#FFFFFF;         display: block;         font-weight:bold;         background-color:#FF4400;         border-bottom:1px solid #FFFFFF;         line-height: 39px;         height:39px;         padding: 0px;         margin: 0px; }

Wie ich gerade gesehen habe, funktioniert's noch immer nicht einwandfrei, denn beim aktiven Link wird weiterhin der "normale" :hover-Selektor ausgeführt.

Hier der überarbeitete CSS-Code für die Listennavigation:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

ul#mainlevel-nav li a.mainlevel-nav {         color:#ffffff;         font-weight:bold;         text-decoration: none;         display: block;         line-height: 40px;         width: 75px;         float:left;         text-align:center;         padding: 0px;         margin: 0px; }   ul#mainlevel-nav li a.mainlevel-nav:hover {         color:#ffffff;         display: block;         background-image:url(../images/mouseover.gif);         border-top:1px solid #FFFFFF;         border-bottom:1px solid #FFFFFF;         line-height: 38px;         padding: 0px;         margin: 0px; }   ul#mainlevel-nav a#active_menu-nav, ul#mainlevel-nav a#active_menu-nav:hover {         color:#FFFFFF;         display: block;         font-weight:bold;         background-color:#FF4400;         border-bottom:1px solid #FFFFFF;         line-height: 39px;         height:39px;         padding: 0px;         margin: 0px;         text-decoration: none; }

Achtung: dem Link, der die ID #active_menu-nav besitzt, darf nicht die Klasse .mainlevel-nav zugewiesen werden:

HTML-Code:

<li><a href="http://www.concubine.ch/index.php?option=com_akobook&amp;Itemid=3" id="active_menu-nav">G'Book</a></li>

voll geil, du bist mein Held :-D es funktioniert

Keine Ursache, ist doch gern geschehen

ich habe wieder ein Problem mit height.
Bei folgender Seite www.deviantwebart.ch/ivan/website
Zum einen möchte ich machen, dass sich der Conten immer min bis zum unteren Bildrand streckt zum anderen gibt es ein Problem wenn die Website grösser als das Fenster ist zB hier: http://www.deviantwebart.ch/ivan/web...tion=equipment unten mit den verläufen
desweitern will der IE das ganze noch nicht recht anzeigen wo ist der Hund?

ich bedanke mich schon im Voraus für eure Hilfe.

Auf Dein (neues) Seitenkonzept lässt sich wunderbar die Faux-Columns-Technik anwenden.

In dem übergeordneten DIV #main wird eine Hintergrundgrafik (668*6px) eingesetzt, die den linken und rechten Rahmen schon enthält (daher auch die Grafikdimension), und in der Vertikalen wiederholt wird.

Somit sind die beiden äußeren DIVs #verlauf_links und #verlauf_rechts nicht mehr erforderlich und fallen aus dem Quellcode raus.

Ein Demo incl. der überarbeiteten CSS-Datei und der Hintergrundgrafik (bgImage.png) hänge ich hier als ZIP-Datei an.

wow genial, vielen Dank für deine Hilfe!

Faux-Columns-Technik kann ich sicher auch bei weiteren Websites gebrauchen...