S
Skinzone
Guest
Guten Mittag,
ich baue gerade für meine Firma eine Homepage mit Joomla.
Das Template hab ich selbst erstellt, die Seite ist eig. auch fertig, es tauchen jedoch einige Probleme mit dem Menü auf.
Sobald die Auflösung kleiner wird oder per STRG + Scroll rein gescrollt wird, schieben sich vereinzelte Menüpunkte unter einander.
Bei Mozilla ist es weniger das Problem das sich das Submenü über einen dieser hinunter gerutschten Menüpunkte legt, aber im IE ist das Submenü an der Stelle Transparent an der der hinunter gerutsche Mainmenu punkt liegt, der dadurch nicht mehr auswählbar ist.
Es müsste ja funktionieren wenn ich das mit Z-index regle.
Oder aber dem Menü eine feste größe gebe.
Da ich aber noch nicht so der CSS, PHP und Html Profi bin weiß ich leider nicht an welcher Stelle ich dies ändern kann.
Superfish CSS
Template CSS
Link zur Homepage:
Hoffe jm. kann mir helfen.
Mfg
ich baue gerade für meine Firma eine Homepage mit Joomla.
Das Template hab ich selbst erstellt, die Seite ist eig. auch fertig, es tauchen jedoch einige Probleme mit dem Menü auf.
Sobald die Auflösung kleiner wird oder per STRG + Scroll rein gescrollt wird, schieben sich vereinzelte Menüpunkte unter einander.
Bei Mozilla ist es weniger das Problem das sich das Submenü über einen dieser hinunter gerutschten Menüpunkte legt, aber im IE ist das Submenü an der Stelle Transparent an der der hinunter gerutsche Mainmenu punkt liegt, der dadurch nicht mehr auswählbar ist.
Es müsste ja funktionieren wenn ich das mit Z-index regle.
Oder aber dem Menü eine feste größe gebe.
Da ich aber noch nicht so der CSS, PHP und Html Profi bin weiß ich leider nicht an welcher Stelle ich dies ändern kann.
Superfish CSS
Code:
/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
background: #BDD2FF;
height: 2.5em;
padding-bottom: 2.5em;
position: relative;
}
.sf-navbar li {
background: #AABDE6;
position: static;
}
.sf-navbar a {
border-top: none;
}
.sf-navbar li ul {
width: 44em; /*IE6 soils itself without this*/
}
.sf-navbar li li {
background: #BDD2FF;
position: relative;
}
.sf-navbar li li ul {
width: 13em;
}
.sf-navbar li li li {
width: 100%;
}
.sf-navbar ul li {
width: auto;
float: left;
}
.sf-navbar a, .sf-navbar a:visited {
border: none;
}
.sf-navbar li.current {
background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar li li.current,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
ul.sf-navbar ul li:hover li,
ul.sf-navbar ul li.sfHover li,
.sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
background: #D1DFFF;
}
ul.sf-navbar li li li:hover,
ul.sf-navbar li li li.sfHover,
.sf-navbar li li.current li.current,
.sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active {
background: #E6EEFF;
}
ul.sf-navbar .current ul,
ul.sf-navbar ul li:hover ul,
ul.sf-navbar ul li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
}
ul.sf-navbar .current ul ul {
top: -999em;
}
.sf-navbar li li.current > a {
font-weight: bold;
}
.sf-menu li .separator {
border-left: none;
border-top: none;
}
/*** point all arrows down ***/
/* point right for anchors in subs */
.sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; }
.sf-navbar ul a > .sf-sub-indicator { background-position: 0 -100px; }
/* apply hovers to modern browsers */
.sf-navbar ul a:focus > .sf-sub-indicator,
.sf-navbar ul a:hover > .sf-sub-indicator,
.sf-navbar ul a:active > .sf-sub-indicator,
.sf-navbar ul li:hover > a > .sf-sub-indicator,
.sf-navbar ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/*** remove shadow on first submenu ***/
.sf-navbar > li > ul {
background: transparent;
padding: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
}Template CSS
Code:
/*Gewünscht*/
/*back-col: #91AFBE;*/
* { margin: 0; padding: 0; }
body
{
font-family: Arial;
}
/*********************************************************/
/*STAT BANNER*/
.banner
{
margin-left:0%;
margin-top:0%;
margin-right:0%;
margin-bottom:0%;
/*border-color:#000;
border-style:double;
border:dashed;*/
width:100%;
}
/*********************************************************/
/*BANNER*/
#banner
{
/*border: 0px solid blue;*/
margin-left: 10%;
margin-top: 0%;
margin-right: 10%;
margin-bottom: 0%;
width: 80%;
float: left;
}
#banner img
{
margin-left: 0%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
width: 100%;
}
/*********************************************************/
/*BREADCRUMB*/
#breadcrumb
{
margin-left: 28%;
margin-top: 0%;
margin-right: 10%;
margin-bottom: 1%;
/*border: 2px solid red;*/
float: left;
font-size: 12px;
}
#breadcrumb a
{
text-decoration: none;
font-weight: bold;
color: black;
}
/*********************************************************/
/*MITTE*/
#mitte
{
float: left;
margin-left: 10%;
margin-top: 0%;
margin-right: 10%;
margin-bottom: 0%;
width: 80%;
/*border: 2px red double;*/
padding-left: 5px;
}
/*********************************************************/
/*LEFT*/
#left
{
margin-left: 0%;
margin-top: 0%;
margin-right: 1%;
margin-bottom: 1%;
width: 18%;
float: left;
}
#left h3
{
border-left: solid 1px #e6e8d3;
border-right: solid 2px #c9cab8;
border-top: solid 1px #e6e8d3;
border-bottom: solid 2px #c9cab8;
background-color: #91AFBE;
text-align: center;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
overflow: auto;
}
#left .contentpaneopen
{
border-left: solid 1px #e6e8d3;
border-right: solid 2px #c9cab8;
border-top: solid 1px #e6e8d3;
border-bottom: solid 2px #c9cab8;
background-color: #FFF;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
#form-login
{
border-left: solid 1px #e6e8d3;
border-right: solid 2px #c9cab8;
border-top: solid 1px #e6e8d3;
border-bottom: solid 2px #c9cab8;
background-color: #FFF;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
font-weight: normal;
}
.input
{
border-left: solid 0px #e6e8d3;
border-right: solid 0px #c9cab8;
border-top: solid 0px #e6e8d3;
border-bottom: solid 0px #c9cab8;
}
/*********************************************************/
/*MENU*/
#menu
{
margin-left: 20%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
border: 0px solid red;
background-color: #91AFBE;
height: 5%;
z-index: 100;
width: 80%;
}
/***********<p align="left"></p>**********************************************/
/*INHALT*/
#inhalt
{
margin-left: 20%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;;
background-color: #FFF;
border-left: solid 1px #e6e8d3;
border-right: solid 2px #c9cab8;
border-top: solid 1px #e6e8d3;
border-bottom: solid 2px #c9cab8;
min-height: 280px;
z-index: 50;
min-width: 280px;
}
#inhalt .contentpaneopen
{
padding-left: 3%;
}
/*********************************************************/
/*UNTEN*/
.unten
{
margin-left: 0%;
background-color: #FFF;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
/*********************************************************/
/*FOOTER*/
.seiten
{
text-align:left;
margin-left:20%;
}
.td23
{
margin-bottom: 1%;
height: 100px;
text-align: center;
background-image: url(../images/down9.jpg);
font-family: Arial;
width: 100%;
font-weight: bold;
position: relative;
z-index: 40;
}
.td23 a
{
text-decoration: none;
color: black;
}Link zur Homepage:
Hoffe jm. kann mir helfen.
Mfg
