Auf Thema antworten 2026

Beitrag

<blockquote data-quote="dersauer" data-source="post: 1813499" data-attributes="member: 521645">AW: DropDown-Menü mit ReitergrafikVielen Dank erstmal, ich habe mir meine css schonmal gebaut jedoch fehlt in dieser die Buttons für Level 1, hier mal die css, wo würdet ihr die Grafiken einbetten?:[CODE].mod_navigation{&nbsp; &nbsp; width:956px;&nbsp; &nbsp; height:64px;&nbsp; &nbsp; top:120px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; overflow:visible;&nbsp; &nbsp; margin-left:2px;&nbsp; &nbsp; background-color:#eeeeee;&nbsp; &nbsp; left:0px;&nbsp; &nbsp; z-index:5;}.mod_navigation ul{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; list-style-type:none;}.mod_navigation li{&nbsp; &nbsp; float:left;&nbsp; &nbsp; display:block;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; list-style-type:none;}/* mit text-transform:lowercase; */.mod_navigation li,.mod_navigation li a{&nbsp; &nbsp; color:#3e3e3e;}/* Anfang Navigation für LEVEL 1 (Hauptspalte) */.mod_navigation .level_1 &gt; li{&nbsp; &nbsp; width:117px;&nbsp; &nbsp; height:64px;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; border-right:2px solid #FFF;}/* padding ist links STANDART 8 */.mod_navigation .level_1 &gt; li &gt; a,.mod_navigation .level_1 &gt; li &gt; span{&nbsp; &nbsp; width:109px;&nbsp; &nbsp; height:24px;&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding-top:40px;&nbsp; &nbsp; padding-left:12px;&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; font-size:12px;}.mod_navigation .level_1 &gt; li:hover &gt; a,.mod_navigation li a:hover,.mod_navigation li a:focus{&nbsp; &nbsp; background-color:#c6c6c6;&nbsp; &nbsp; text-decoration:none;}.mod_navigation li a:active{&nbsp; &nbsp; background-color:#ddd !important;}* html .mod_navigation ul,* html .mod_navigation li{&nbsp; &nbsp; height:1px;}.mod_navigation .level_2{&nbsp; &nbsp; left:0;&nbsp; &nbsp; top:64px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; display:none;&nbsp; &nbsp; z-index:300;}.mod_navigation li:hover .level_2{&nbsp; &nbsp; display:block;}.mod_navigation .level_2 a,.mod_navigation .level_2 li,.mod_navigation .level_2 span{&nbsp; &nbsp; font-weight:normal;&nbsp; &nbsp; font-size:12px;}.mod_navigation .level_2 a,.mod_navigation .level_2 &gt; li.active{&nbsp; &nbsp; width:228px;&nbsp; &nbsp; height:15px;&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding-top:13px;&nbsp; &nbsp; padding-bottom:3px;&nbsp; &nbsp; padding-left:8px;&nbsp; &nbsp; background-color:#eeeeee;&nbsp; &nbsp; border-top:2px solid #FFF;}.mod_navigation li.active,.mod_navigation .level_2 &gt; li.active,.mod_navigation li.trail &gt; a{&nbsp; &nbsp; background-color:#0189bd;&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; color:#FFF;}.mod_navigation li.trail &gt; a:hover{&nbsp; &nbsp; color:#FFF;}.mod_navigation span.active{&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; color:#FFF;}.mod_navigation .level_1 &gt; li.submenu a,.mod_navigation .level_1 &gt; li.submenu.trail a,li.submenu.trail a,li.submenu &gt; span{&nbsp; &nbsp; background-image:url(&quot;tl_files/simpag/img/pfeil_unten_menu.png&quot;);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; background-position:97px 48px;}/* .mod_customnav------------------------------------------------------------------------------------------------------ */.mod_customnav ul{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;}.mod_customnav li{&nbsp; &nbsp; margin:0 0 3px;&nbsp; &nbsp; list-style:none;}.mod_customnav li a,.mod_customnav li.active span{&nbsp; &nbsp; height:35px;&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding:25px 10px 5px 35px;&nbsp; &nbsp; background-color:#eeeeee;&nbsp; &nbsp; background-image:url(&quot;tl_files/simpag/img/pfeilGrey_no_hover.png&quot;);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; font-size:14px;&nbsp; &nbsp; color:#353737;&nbsp; &nbsp; background-position:15px 50%;}.mod_customnav li.active span{&nbsp; &nbsp; background-color:#ff5400;&nbsp; &nbsp; background-image:none;&nbsp; &nbsp; color:#FFF;}.mod_customnav li a:hover{&nbsp; &nbsp; padding:25px 10px 5px 40px;&nbsp; &nbsp; background-color:#c6c6c6;&nbsp; &nbsp; text-decoration:none;}#footer .mod_customnav{&nbsp; &nbsp; padding:20px;}#footer .mod_customnav li{&nbsp; &nbsp; display:inline-block;}#footer .mod_customnav li a,#footer .mod_customnav li.active span{&nbsp; &nbsp; padding:0 10px 0 25px;&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; font-size:14px;&nbsp; &nbsp; color:#b0b0b0;&nbsp; &nbsp; background:url(tl_files/simpag/img/pfeilGrey_no_hover.png) no-repeat 5px 0px;}#footer .mod_customnav li.active span{&nbsp; &nbsp; color:#FFF;}#footer .mod_customnav li a:hover{&nbsp; &nbsp; padding:0 10px 0 30px;&nbsp; &nbsp; text-decoration:none;}/* .mod_breadcrumb------------------------------------------------------------------------------------------------------ */.mod_breadcrumb{&nbsp; &nbsp; top:-100px;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; float:left;&nbsp; &nbsp; margin-left:10px;}.mod_breadcrumb .pfeil{&nbsp; &nbsp; width:10px;&nbsp; &nbsp; height:16px;&nbsp; &nbsp; float:left;&nbsp; &nbsp; display:block;&nbsp; &nbsp; margin-right:8px;&nbsp; &nbsp; margin-left:8px;&nbsp; &nbsp; background:url(tl_files/simpag/img/breadcrumb_pfeil.gif) no-repeat;}.mod_breadcrumb a,.mod_breadcrumb span.active{&nbsp; &nbsp; top:3px;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; float:left;&nbsp; &nbsp; color:#3e3e3e;}.mod_breadcrumb span.active{&nbsp; &nbsp; font-weight:bold;}/* .mod_booknav------------------------------------------------------------------------------------------------------ */.mod_booknav{&nbsp; &nbsp; height:30px;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; clear:both;&nbsp; &nbsp; margin-top:20px;&nbsp; &nbsp; margin-bottom:20px;}.mod_booknav li{&nbsp; &nbsp; list-style:none;}.mod_booknav .next a{&nbsp; &nbsp; width:18px;&nbsp; &nbsp; height:31px;&nbsp; &nbsp; right:20px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; display:block;&nbsp; &nbsp; font-size:0.00001px;&nbsp; &nbsp; top:0px;&nbsp; &nbsp; background:url(&quot;tl_files/simpag/img/news_more.gif&quot;) left top no-repeat;&nbsp; &nbsp; text-indent:-999px;}.mod_booknav .next a:hover{&nbsp; &nbsp; background:url(&quot;tl_files/simpag/img/news_more.gif&quot;) bottom left no-repeat;}.mod_booknav .prev a{&nbsp; &nbsp; width:18px;&nbsp; &nbsp; height:31px;&nbsp; &nbsp; left:20px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; display:block;&nbsp; &nbsp; font-size:0.00001px;&nbsp; &nbsp; top:0px;&nbsp; &nbsp; background:url(tl_files/simpag/img/pfeile_blog_liste_links.gif) left top no-repeat;&nbsp; &nbsp; text-indent:-999px;}.mod_booknav .prev a:hover{&nbsp; &nbsp; background:url(tl_files/simpag/img/pfeile_blog_liste_links.gif) left bottom no-repeat;}.mod_booknav .up a{&nbsp; &nbsp; width:31px;&nbsp; &nbsp; height:18px;&nbsp; &nbsp; left:460px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; display:block;&nbsp; &nbsp; font-size:0.00001px;&nbsp; &nbsp; top:0px;&nbsp; &nbsp; background:url(tl_files/simpag/img/pfeile_up.png) left top no-repeat;&nbsp; &nbsp; text-indent:-999px;}.mod_booknav .up a:hover{&nbsp; &nbsp; background:url(tl_files/simpag/img/pfeile_up.png) right top no-repeat;}/* .mod_sitemap------------------------------------------------------------------------------------------------------ */.mod_sitemap{}.mod_sitemap ul,.mod_sitemap li{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; list-style:none;}.mod_sitemap ul.level_1 &gt; li{&nbsp; &nbsp; margin-right:2px;&nbsp; &nbsp; margin-bottom:2px;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; background-color:#eeeeee;}.mod_sitemap ul.level_1 &gt; li &gt; a{&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; font-size:14px;}.mod_sitemap ul.level_2 &gt; li &gt; a{&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding:5px 5px 5px 30px;&nbsp; &nbsp; font-size:12px;}.mod_sitemap ul.level_2 &gt; li{&nbsp; &nbsp; padding-left:0;&nbsp; &nbsp; border-top:1px solid #FFF;&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; font-weight:normal;}.mod_sitemap ul.level_3 &gt; li{&nbsp; &nbsp; border-top:1px #FFFFFF #solid;&nbsp; &nbsp; font-weight:normal;}.mod_sitemap ul.level_3 &gt; li &gt; a{&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding:5px 5px 5px 50px;&nbsp; &nbsp; font-size:12px;}[__] .pagination li{&nbsp; &nbsp; float:left;&nbsp; &nbsp; list-style:none;}.pagination li a,.pagination li span.current{&nbsp; &nbsp; width:40px;&nbsp; &nbsp; height:30px;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; display:block;&nbsp; &nbsp; margin-left:2px;&nbsp; &nbsp; padding-top:10px;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; background-color:#353737;&nbsp; &nbsp; color:#eeeeee;}.pagination li span.current{&nbsp; &nbsp; background-color:#ff5400;}.pagination li a:hover{&nbsp; &nbsp; background-color:#ff5400;&nbsp; &nbsp; text-decoration:none;}.pagination li a.last{&nbsp; &nbsp; background-image:url(&quot;tl_files/simpag/img/pagination_pfeil_rechts.png&quot;);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; font-size:0.001px;&nbsp; &nbsp; text-indent:-999px;&nbsp; &nbsp; background-position:10px 12px;}.pagination li a.next{&nbsp; &nbsp; background-image:url(&quot;tl_files/simpag/img/pagination_pfeil_rechts_kl.png&quot;);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; font-size:0.001px;&nbsp; &nbsp; text-indent:-999px;&nbsp; &nbsp; background-position:10px 12px;}.pagination li a.previous{&nbsp; &nbsp; background-image:url(&quot;tl_files/simpag/img/pagination_pfeil_links_kl.png&quot;);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; font-size:0.001px;&nbsp; &nbsp; text-indent:-999px;&nbsp; &nbsp; background-position:10px 12px;}.pagination li a.first{&nbsp; &nbsp; background-image:url(&quot;tl_files/simpag/img/pagination_pfeil_links.png&quot;);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; font-size:0.001px;&nbsp; &nbsp; text-indent:-999px;&nbsp; &nbsp; background-position:10px 12px;}.pagination{&nbsp; &nbsp; clear:both;&nbsp; &nbsp; margin-right:20px;&nbsp; &nbsp; margin-bottom:30px;}.pagination p{}.pagination ul{&nbsp; &nbsp; float:right;}[/CODE]</blockquote>

[QUOTE="dersauer, post: 1813499, member: 521645"] [b]AW: DropDown-Menü mit Reitergrafik[/b] Vielen Dank erstmal, ich habe mir meine css schonmal gebaut jedoch fehlt in dieser die Buttons für Level 1, hier mal die css, wo würdet ihr die Grafiken einbetten?:[CODE].mod_navigation { width:956px; height:64px; top:120px; position:absolute; overflow:visible; margin-left:2px; background-color:#eeeeee; left:0px; z-index:5; } .mod_navigation ul { margin:0; padding:0; list-style-type:none; } .mod_navigation li { float:left; display:block; margin:0; padding:0; list-style-type:none; } /* mit text-transform:lowercase; */ .mod_navigation li, .mod_navigation li a { color:#3e3e3e; } /* Anfang Navigation für LEVEL 1 (Hauptspalte) */ .mod_navigation .level_1 > li { width:117px; height:64px; position:relative; border-right:2px solid #FFF; } /* padding ist links STANDART 8 */ .mod_navigation .level_1 > li > a, .mod_navigation .level_1 > li > span { width:109px; height:24px; display:block; padding-top:40px; padding-left:12px; font-weight:bold; font-size:12px; } .mod_navigation .level_1 > li:hover > a, .mod_navigation li a:hover, .mod_navigation li a:focus { background-color:#c6c6c6; text-decoration:none; } .mod_navigation li a:active { background-color:#ddd !important; } * html .mod_navigation ul, * html .mod_navigation li { height:1px; } .mod_navigation .level_2 { left:0; top:64px; position:absolute; display:none; z-index:300; } .mod_navigation li:hover .level_2 { display:block; } .mod_navigation .level_2 a, .mod_navigation .level_2 li, .mod_navigation .level_2 span { font-weight:normal; font-size:12px; } .mod_navigation .level_2 a, .mod_navigation .level_2 > li.active { width:228px; height:15px; display:block; padding-top:13px; padding-bottom:3px; padding-left:8px; background-color:#eeeeee; border-top:2px solid #FFF; } .mod_navigation li.active, .mod_navigation .level_2 > li.active, .mod_navigation li.trail > a { background-color:#0189bd; font-weight:bold; color:#FFF; } .mod_navigation li.trail > a:hover { color:#FFF; } .mod_navigation span.active { font-weight:bold; color:#FFF; } .mod_navigation .level_1 > li.submenu a, .mod_navigation .level_1 > li.submenu.trail a, li.submenu.trail a, li.submenu > span { background-image:url("tl_files/simpag/img/pfeil_unten_menu.png"); background-repeat:no-repeat; background-position:97px 48px; } /* .mod_customnav ------------------------------------------------------------------------------------------------------ */ .mod_customnav ul { margin:0; padding:0; } .mod_customnav li { margin:0 0 3px; list-style:none; } .mod_customnav li a, .mod_customnav li.active span { height:35px; display:block; padding:25px 10px 5px 35px; background-color:#eeeeee; background-image:url("tl_files/simpag/img/pfeilGrey_no_hover.png"); background-repeat:no-repeat; font-size:14px; color:#353737; background-position:15px 50%; } .mod_customnav li.active span { background-color:#ff5400; background-image:none; color:#FFF; } .mod_customnav li a:hover { padding:25px 10px 5px 40px; background-color:#c6c6c6; text-decoration:none; } #footer .mod_customnav { padding:20px; } #footer .mod_customnav li { display:inline-block; } #footer .mod_customnav li a, #footer .mod_customnav li.active span { padding:0 10px 0 25px; font-weight:bold; font-size:14px; color:#b0b0b0; background:url(tl_files/simpag/img/pfeilGrey_no_hover.png) no-repeat 5px 0px; } #footer .mod_customnav li.active span { color:#FFF; } #footer .mod_customnav li a:hover { padding:0 10px 0 30px; text-decoration:none; } /* .mod_breadcrumb ------------------------------------------------------------------------------------------------------ */ .mod_breadcrumb { top:-100px; position:relative; float:left; margin-left:10px; } .mod_breadcrumb .pfeil { width:10px; height:16px; float:left; display:block; margin-right:8px; margin-left:8px; background:url(tl_files/simpag/img/breadcrumb_pfeil.gif) no-repeat; } .mod_breadcrumb a, .mod_breadcrumb span.active { top:3px; position:relative; float:left; color:#3e3e3e; } .mod_breadcrumb span.active { font-weight:bold; } /* .mod_booknav ------------------------------------------------------------------------------------------------------ */ .mod_booknav { height:30px; position:relative; clear:both; margin-top:20px; margin-bottom:20px; } .mod_booknav li { list-style:none; } .mod_booknav .next a { width:18px; height:31px; right:20px; position:absolute; overflow:hidden; display:block; font-size:0.00001px; top:0px; background:url("tl_files/simpag/img/news_more.gif") left top no-repeat; text-indent:-999px; } .mod_booknav .next a:hover { background:url("tl_files/simpag/img/news_more.gif") bottom left no-repeat; } .mod_booknav .prev a { width:18px; height:31px; left:20px; position:absolute; overflow:hidden; display:block; font-size:0.00001px; top:0px; background:url(tl_files/simpag/img/pfeile_blog_liste_links.gif) left top no-repeat; text-indent:-999px; } .mod_booknav .prev a:hover { background:url(tl_files/simpag/img/pfeile_blog_liste_links.gif) left bottom no-repeat; } .mod_booknav .up a { width:31px; height:18px; left:460px; position:absolute; overflow:hidden; display:block; font-size:0.00001px; top:0px; background:url(tl_files/simpag/img/pfeile_up.png) left top no-repeat; text-indent:-999px; } .mod_booknav .up a:hover { background:url(tl_files/simpag/img/pfeile_up.png) right top no-repeat; } /* .mod_sitemap ------------------------------------------------------------------------------------------------------ */ .mod_sitemap { } .mod_sitemap ul, .mod_sitemap li { margin:0; padding:0; list-style:none; } .mod_sitemap ul.level_1 > li { margin-right:2px; margin-bottom:2px; padding:0; background-color:#eeeeee; } .mod_sitemap ul.level_1 > li > a { display:block; padding:10px; font-size:14px; } .mod_sitemap ul.level_2 > li > a { display:block; padding:5px 5px 5px 30px; font-size:12px; } .mod_sitemap ul.level_2 > li { padding-left:0; border-top:1px solid #FFF; font-weight:bold; font-weight:normal; } .mod_sitemap ul.level_3 > li { border-top:1px #FFFFFF #solid; font-weight:normal; } .mod_sitemap ul.level_3 > li > a { display:block; padding:5px 5px 5px 50px; font-size:12px; } [__] .pagination li { float:left; list-style:none; } .pagination li a, .pagination li span.current { width:40px; height:30px; overflow:hidden; display:block; margin-left:2px; padding-top:10px; text-align:center; background-color:#353737; color:#eeeeee; } .pagination li span.current { background-color:#ff5400; } .pagination li a:hover { background-color:#ff5400; text-decoration:none; } .pagination li a.last { background-image:url("tl_files/simpag/img/pagination_pfeil_rechts.png"); background-repeat:no-repeat; font-size:0.001px; text-indent:-999px; background-position:10px 12px; } .pagination li a.next { background-image:url("tl_files/simpag/img/pagination_pfeil_rechts_kl.png"); background-repeat:no-repeat; font-size:0.001px; text-indent:-999px; background-position:10px 12px; } .pagination li a.previous { background-image:url("tl_files/simpag/img/pagination_pfeil_links_kl.png"); background-repeat:no-repeat; font-size:0.001px; text-indent:-999px; background-position:10px 12px; } .pagination li a.first { background-image:url("tl_files/simpag/img/pagination_pfeil_links.png"); background-repeat:no-repeat; font-size:0.001px; text-indent:-999px; background-position:10px 12px; } .pagination { clear:both; margin-right:20px; margin-bottom:30px; } .pagination p { } .pagination ul { float:right; }[/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?