✔ height:100%

Status
Nicht offen für weitere Antworten.
D

Dark22

Mitglied
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: 
#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: 
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: 
a#active {
color: #ffff00;
}

a#active:hover {
color: #ffff00;
}
HTML: 
<a href="#">link 1</a>

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

<a href="#">link 3</a>
 
Verwende mal folgende CSS-Regeln für das DIV #main:

Code: 
#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: 
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: 
ul#mainlevel-nav li a#active_menu-nav:hover

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

Code: 
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: 
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: 
<li><a href="http://www.concubine.ch/index.php?option=com_akobook&amp;Itemid=3" id="active_menu-nav">G'Book</a></li>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück