Z
Zank
Hallo Leute,
ein paar Freunde und ich arbeiten momentan an einem Webprojekt. Das Design haben wir in Auftrag gegeben und es sieht wie folgt aus:
http://www.fidb.de/develop
Wenn man links auf "Filmcenter" klickt, öffnet sich ein Submenu. Das ist auch schön so. Aber wir wollten es eigentlich anders haben. Das Submenu soll sich nicht öffnen, wenn man auf "Filmcenter" klickt, sondern wenn man mit der Maus drüberfährt! Leider ist unser Webdesigner nun für 2 Wochen in Urlaub und ich bin daher auf mich alleine gestellt. Wie kann ich es also schaffen, dass das Menu per Mousehover ausfährt?
Hier der Inhalt der CSS-Datei:
Den Quelltext der index.html könnt ihr Euch bei Wunsch ja selber im browser ansehen, der Link zur Seite steht ja oben!
Bin echt für jede Hilfe dankbar!
Grüße,
Zank
ein paar Freunde und ich arbeiten momentan an einem Webprojekt. Das Design haben wir in Auftrag gegeben und es sieht wie folgt aus:
http://www.fidb.de/develop
Wenn man links auf "Filmcenter" klickt, öffnet sich ein Submenu. Das ist auch schön so. Aber wir wollten es eigentlich anders haben. Das Submenu soll sich nicht öffnen, wenn man auf "Filmcenter" klickt, sondern wenn man mit der Maus drüberfährt! Leider ist unser Webdesigner nun für 2 Wochen in Urlaub und ich bin daher auf mich alleine gestellt. Wie kann ich es also schaffen, dass das Menu per Mousehover ausfährt?
Hier der Inhalt der CSS-Datei:
PHP:
@charset "utf-8";
body { margin: 0; padding: 0; height: 100%; font-family: verdana, sans-serif; text-decoration: none; /*background: url(../images/bg.gif) repeat-y;*/ background-color: #fff; }
p { margin: 0 0 1em 0; padding: 0; font-size: 0.7em; line-height: 1.5em; text-align: justify; color: #303030; }
h1 { margin: 0; padding: 0 0 20px 0; font-size: 0.8em; font-weight: bold; color: #303030; }
h2 { margin: 0; padding: 10px 10px 10px 30px; font-size: 11px; font-weight: normal; color: #fff; background-color: #969696; }
h3 { margin: 0; padding: 10px 10px 5px 10px; font-size: 10px; font-weight: bold; color: #303030; }
a { text-decoration: none; color: #fff; }
a:hover { text-decoration: underline; }
.mainnav a:hover, .mainnavhead a:hover, .trenner_head a:hover, .trenner a:hover { text-decoration: none; }
#logo { position: absolute; top: 30px; left: 0; margin: 0; padding: 0; width: 1009px; height: 120px; overflow: hidden; background: url(../images/logo_ie.gif) no-repeat; border: none; z-index: 1; }
*html #logo { width: 1004px; background: url(../images/logo_ie.gif) no-repeat; }
#conavbox { position: absolute; top: 170px; left: 775px; margin: 0; padding: 0; height: 20px; z-index: 5; }
ul.conav { margin: 0; padding: 0; }
ul.conav li { list-style: none; margin-bottom: 15px; padding: 0; } *html ul.conav li { margin-bottom: -3px; }
ul.conav a { display: block; margin: 0; padding: 0; }
ul.conav a:hover, ul.conav li.active3 a { text-decoration: none; }
#imagebox { position: absolute; top: 150px; left: 0; margin: padding: 0; width: 812px; height: 200px; z-index: 3; } *html #imagebox { width: 807px; }
#imglft { float: left; margin: 0; padding: 0; width: 23px; height: 200px; background: url(../images/imglft.gif) no-repeat; }
#imgctr { float: left; margin: 0; padding: 20px 0 0 0; width: 732px; height: 200px; overflow: hidden; background: url(../images/imgctr.gif) repeat-x; } *html #imgctr { width: 727px; }
#imgrgt { float: left; margin: 0; padding: 0; width: 56px; height: 200px; background: url(../images/imgrgt.gif) no-repeat; }
#formularbox { position: absolute; top: 305px; left: 20px; margin: 0; padding: 0; width: 830px; overflow: hidden; z-index: 4; }
.loginformular { float: left; margin: 0; padding: 0; width: 370px; height: 20px; border: none; }
.searchformular { float: left; margin: 0; padding: 0; width: 460px; height: 20px; border: none; }
.fieldset { float: left; padding: 0; width: 100%; border: none; }
.forminput { float: left; margin: 0; padding: 0; width: 70px; font-size: 11px; background-color: #fff; border-top: 2px solid #909090; border-right: 2px solid #909090; border-bottom: 2px solid #eee; border-left: 2px solid #eee; }
.searchinput { float: left; margin: 0; padding: 0; width: 205px; font-size: 11px; background-color: #fff; border-top: 2px solid #909090; border-right: 2px solid #909090; border-bottom: 2px solid #eee; border-left: 2px solid #eee; }
label { float: left; padding: 3px 5px 5px 7px; font-size: 10px; color: #505050; color: #eee; }
input { float: left; height: 16px; background-color: transparent; } *html input { height: 18px; }
.button { float: left; margin: 0 5px; padding: 0; font-size: 16px; color: #eee; border: none; cursor: pointer; }
.formimg { float: left; margin: 0; padding: 3px 5px 0 0; }
#leftbox { position: absolute; top: 350px; left: 0; margin: 0; padding: 0; width: 209px; background: url(../images/leftbg.gif) repeat-y; z-index: 4; }
.maintrenner { position: relative; top: -22px; margin: 0 0 -42px 0; padding: 0; width: 100%; height: 42px; background: url(../images/maintrenner.gif) no-repeat; z-index: 4; }
ul.mainnav { position: relative; top: 0; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/trenner_blank.gif) no-repeat; z-index: 5; }
ul.mainnav li { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul.mainnav a { display: block; padding: 12px 0 0 30px; width: 179px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.mainnav a { width: 209px; height: 40px; }
ul.mainnav a:hover { text-decoration: none; color: #303030; background: url(../images/hover.gif) no-repeat; }
ul.mainnav li.active a { text-decoration: none; color: #303030; background: url(../images/active.gif) no-repeat; }
ul.mainnavbot { position: relative; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/trennerbot.gif) no-repeat; z-index: 5; }
ul.mainnavbot li { list-style: none; margin: 0; padding-top: 5px; overflow: hidden; }
ul.mainnavbot a { display: block; padding: 12px 0 0 30px; width: 179px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.mainnavbot a { width: 209px; height: 40px; }
ul.mainnavbot a:hover { text-decoration: none; color: #303030; background: url(../images/hover.gif) no-repeat; }
ul.subnav { position: relative; top: 0; left: 20px; margin: 0; padding: 0; width: 169px; background-color: #fff; }
ul.subnav li { list-style: none; margin: 0; padding: 0; background-color: #fff; }
ul.subnav a { display: block; margin: 0; padding: 5px 10px; width: 149px; font-size: 11px; font-weight: normal; text-transform: none; color: #303030; } *html ul.subnav a { width: 169px; }
ul.subnav a:hover { text-decoration: none; background-color: #969696; color: #eee; }
ul.subnav li.active1 a { text-decoration: none; background-color: #969696; color: #eee; }
#leftfootblank { margin: 0; padding: 0; width: 209px; height: 300px; background: url(../images/leftfoot.gif) no-repeat; z-index: 2; }
#leftfoot { margin: 0; padding: 0; width: 209px; height: 70px; background: url(../images/leftfoot.gif) no-repeat; z-index: 2; }
#credits { margin: -40px 0 0 0; padding: 0 0 0 30px; width: 209px; height: 12px; font-size: 10px; color: #eee; z-index: 3; }
#contentbox { position: absolute; top: 360px; left: 230px; margin: 0; padding: 0; width: 545px; z-index: 3; /*border: 1px solid #969696;*/ }
#textbox { margin: 0; padding: 0 40px; background-color: #fff; }
.bodytext { margin: 0; padding: 20px 0 20px 0; }
ul.letternav { margin: 20px 0 0 0; padding: 0; }
ul.letternav li { list-style: url(../images/list.gif); margin: 0 0 20px 0; padding: 0; }
ul.letternav a { display: block; margin: 0; padding: 0; font-size: 11px; color: #303030; }
ul.letternav li a:hover { color: #969696; text-decoration: none; }
ul.letternav li.active3 { color: #969696; text-decoration: none; list-style: url(../images/listactive.gif); }
ul.letternav ul { margin: 20px 0 0 10px; padding: 0; }
ul.letternav ul li { list-style: url(../images/listsub.gif); margin: 0 0 10px 0; padding: 0; }
ul.letternav ul a { display: block; margin: 0; padding: 0; font-size: 11px; color: #303030; }
ul.letternav ul li a:hover { color: #969696; text-decoration: none; }
ul.letternav ul li.active3 { color: #969696; text-decoration: none; list-style: url(../images/listsubactive.gif); }
.tnavibox1 { margin: 0; padding: 30px 0 20px 35px; height: 16px; z-index: 3; background-color: #fff; }
.tnavibox2 { margin: 0; padding: 0 0 0 35px; height: 16px; z-index: 3; background-color: #fff; }
ul.tnav { margin: 0; padding: 0; }
ul.tnav li { list-style: none; float: left; margin: 0; padding: 0; height: 20px; }
ul.tnav a { display: block; margin: 0; padding: 0 2px; font-size: 10px; color: #aaa; }
ul.tnav a:hover { color: #303030; text-decoration: none; }
#tfootbox { margin: 0; padding: 0; height: 40px; z-index: 3; }
#rightbox { position: absolute; top: 150px; left: 800px; margin: 0; padding: 0; z-index: 2; background: url(../images/rightbg.gif) repeat-y; } *html #rightbox { left: 795px; }
#bannerhead { margin: 0; padding: 0; width: 209px; height: 20px; overflow: hidden; background: url(../images/bannerhead.gif) no-repeat; }
#bannerbox { margin: 0 0 0 20px; padding: 0; width: 169px; height: 150px; overflow: hidden; }
#bannerfoot { margin: 0; padding: 0; width: 209px; height: 30px; overflow: hidden; background: url(../images/bannerfoot.gif) no-repeat; }
ul.infonavhead { position: relative; top: 0; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/infohead.gif) no-repeat; z-index: 5; }
ul.infonavhead li { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul.infonavhead a { display: block; padding: 12px 0 0 30px; width: 179px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.infonavhead a { width: 209px; height: 40px; }
ul.infonavhead a:hover { text-decoration: none; color: #303030; background: url(../images/infoheadhover.gif) no-repeat; }
span { display: block; padding: 12px 0 0 30px; width: 209px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; }
ul.infonav { position: relative; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/trenner.gif) no-repeat; z-index: 5; }
ul.infonav li { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul.infonav a { display: block; padding: 15px 0 0 30px; width: 179px; height: 25px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.infonav a { width: 209px; height: 40px; }
ul.infonav a:hover { text-decoration: none; color: #303030; background: url(../images/infohover.gif) repeat-y; }
ul.bannernav { position: relative; top: 0; left: 20px; margin: 0; padding: 0; width: 169px; background-color: #707070; }
ul.bannernav li { list-style: none; margin: 0; padding: 0; }
ul.bannernav a { display: block; margin: 0; padding: 0; width: 149px; font-size: 11px; font-weight: normal; text-transform: none; color: #303030; } *html ul.bannernav a { width: 169px; }
#rightfootblank { margin: 0; padding: 0; width: 209px; height: 70px; background: url(../images/rightfoot_blank.gif) no-repeat; z-index: 2; }
#rightfoot { margin: 0; padding: 0; width: 209px; height: 70px; background: url(../images/rightfoot.gif) no-repeat; z-index: 2; }
#pageback { margin: -40px 0 0 0; padding: 0 0 0 40px; width: 169px; height: 12px; z-index: 3; }
table.letters { margin: 0 0 0 20px; width: 170px; border-collapse: collapse; border-spacing: 0; background-color: #fff; }
td { margin: 0; padding: 0; }
td a { display: block; margin: 0; padding: 5px 0; width: 34px; font-size: 11px; text-align: center; text-transform: uppercase; color: #303030; }
td a:hover { text-decoration: none; color: #eee; background-color: #969696; }
td.active4 a { text-decoration: none; color: #eee; background-color: #969696; }
table.ware { margin: 0 0 0 20px; width: 170px; border-collapse: collapse; border-spacing: 0; background-color: #fff; }
td.art { margin: 0; padding: 10px 0 10px 10px; width: 75px; font-size: 11px; text-align: left; text-transform: uppercase; color: #303030; }
td.artall { margin: 0; padding: 10px 0 10px 10px; width: 75px; font-size: 11px; text-align: left; text-transform: uppercase; color: #303030; border-top: 1px solid #303030; }
td.summe { margin: 0; padding: 10px 10px 10px 0; width: 75px; font-size: 11px; text-align: right; text-transform: uppercase; color: #303030; }
td.summeall { margin: 0; padding: 10px 10px 10px 0; width: 75px; font-size: 11px; text-align: right; text-transform: uppercase; color: #303030; border-top: 1px solid #303030; }
Den Quelltext der index.html könnt ihr Euch bei Wunsch ja selber im browser ansehen, der Link zur Seite steht ja oben!
Bin echt für jede Hilfe dankbar!
Grüße,
Zank
Zuletzt bearbeitet von einem Moderator: