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
Lesezeichen