Navigation / Sub-Navigation getrennt
Hi all,
habe jetzt doch mal einen neuen Thread aufgemacht, weil ich mit den Navigationsmenus nicht ganz klar komme.
ich bin dabei (m)eine Homepage umzuziehen und in typolight zu integrieren (www.fotodesign-schaerer.de)
Da gibt es auf der linken Seite ein Menü, das blaue-OnHover-/Active Hintergründe hat und ein submenu (unter Dienstleistungen) horizontal. Jetzt habe ich drei probleme:
1) beim Anklicken von "Home" rutscht das linke menü ein paar pixel nach unten
2) das Submenu wird beim erscheinen ebenfalls 10-20px nach unten verschoben
3) klickt man eine seite im submenu an, ist die blaue Hinterlegung im Hauptmenu weg
Formatierungen habe ich alle in CSS gelöst:und das submenu in einem "eigenen layoutbereich" gelegt.
Code:
body {
background-color: #d3f0e1;
color: #7e7e7e;
width:100%;
}
a:link, a:visited {
text-decoration:none;
}
.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both;}
.invisible{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline;}
#header {
height:165px;
background:url(./templates/header.jpg) no-repeat;
}
#container {
width:915px;
margin:20px auto;
}
#left-menu {
float:left;
width:205px;
min-height:255px;
height:auto;
font-size:1.1em;
}
#left-menu ul, ol {
list-style-position:outside;
list-style:none;
}
#left-menu a {
width:205px;
height:38px;
display:block;
padding-top:6px;
padding-left:20px;
margin-bottom:-5px;
margin-left:-40px;
background:url(./templates/button.gif) no-repeat;
font-family: Tahoma, serif;
font-weight:bold;
font-style: normal;
color:#426f90;
}
#left-menu a:hover {
background:url(./templates/button-active.gif) no-repeat;
color:white;
}
#left-menu span.active, .trail {
width:205px;
height:38px;
display:block;
padding-top:6px;
padding-left:20px;
margin-top:-6px;
margin-bottom:-5px;
margin-left:-40px;
background:url(./templates/button-active.gif) no-repeat;
font-family: Tahoma, serif;
font-weight:bold;
font-style: normal;
color:white;
}
#left-login {
font-size:0.9em;
}
#main {
float:right;
width:710px;
min-height:255px;
background:url(./templates/content.gif)repeat-y;
color: #7e7e7e;
}
#main-submenu {
height:19px;
font-size:1.0em;
background:url(./templates/sub-menu.gif) no-repeat;
color: #3e5561;
}
#main-submenu ul li {
float:left;
margin-left:30px;
list-style-position:outside;
list-style-type:square;
}
#main-submenu a:visited {
color: #3e5561;
}
#main-submenu a:hover{
color:red;
}
#main-content {
margin-bottom:10px;
margin-right:10px;
margin-left:40px;
padding-right:20px;
text-align:justify;
font-size:0.9em;
}
#bottom {
height:30px;
background:url(./templates/bottom.gif) no-repeat;
}
#footer {
float:right;
width:710px;
margin: auto;
background:none;
text-align:center;
font-size:0.9em;
color: #7e7e7e;
}
Die Seite ist selbst nur bei mir in xampp am laufen, daher kann ich sie leider noch nicht zugänglich machen. Vielleicht weiß aber jemand trotzdem Rat?
bis denne
Tweety
Liste der Anhänge anzeigen (Anzahl: 1)
Hi all,
Ich habe also in der Zwischenzeit ein wenig ausprobiert und aus den Modulen die css-id für left-menu und main-submenu rausgenommen. damit erscheinen schonmal keine doppelten IDs mehr. Die Verschiebung bleibt aber weiter bestehen. Daher vermute ich, daß es irgendwie an den an dem template nav_default liegt.
Spaßeshalber habe ich in css die option "no-repeat" beim submenu-hintergrund rausgenommen um zu sehen, ob da vielleicht noch irgendetwas drüber steht, aber es bleibt eigentlich nur die verschiebung.
hier noch die beiden code-schnipsel ohne und mit submenu (home, dienstleistungen):
ohne elemente im submenu
Code:
<div id="main">
<div id="main-submenu">
</div>
mit elementen im submenu
Code:
<div id="main">
<div id="main-submenu">
<!-- indexer::stop -->
<div class="mod_navigation block">
<a href="index.php/dienstleistungen.html#skipNavigation3" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/Online_Service.html" title="Online Service" class="first" onclick="this.blur();">Online Service</a></li>
<li class="main-submenu"><a href="index.php/Fotostudio.html" title="Foto-Studio" class="main-submenu" onclick="this.blur();">Foto-Studio</a></li>
<li class="main-submenu last"><a href="index.php/AusserHausService.html" title=""Außer Haus"-Service" class="main-submenu last" onclick="this.blur();">"Außer Haus"-Service</a></li>
</ul>
<a name="skipNavigation3" id="skipNavigation3" class="invisible"> </a>
</div>
<!-- indexer::continue -->
</div>
Angehängt habe ich zusätzlich ein zip mit den dateien.
greez2all
Tweety
Nachtrag: Mir ist gerade etwas aufgefallen. Im vergleich zum original, ist auch das linke menu um 10-20px nach unten verschoben. da es aber immer eingeblendet ist, merkt man keinen unterschied. kann es sein, daß beim nav_default wirklich irgendwo ein zusätzlicher abstand nach oben mit integriert ist???
