Navigation ändern ?

Gruening

Grüßt Euch,

auf meiner Seite http://www.Gruening.mehttp://www.8Cells.de möchte ich gerne einen Hover Effekt für die Navigation wie auf http://www.stadt-bremerhaven.de verwenden.

Wie kann ich das am besten anstellen ?

vielen Dank

LG

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Gruening

keine ne Idee ? :(

mfitzen

Du erstellst einfach eine Grafik in entsprechender Höhe und bindest diese per CSS als Hintergrundgrafik für a:hover im Menü ein. Ander wurde es dort auch nicht gemacht.

Code

#pixopoint_menu1 li {
    [COLOR="RoyalBlue"]background: url("../images/dazzle_black.png") repeat scroll 0 0 #B41520;[/COLOR]
    border: medium none;
    color: #FFFFFF;
    float: left;
    font-family: tahoma,sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 35px;
    margin: 0 0;
    padding: 0;
    position: relative;
    z-index: 20;
}

Alles anzeigen

Gruening

Hey,
also irgendwie verstehe ich das nicht so recht, denn ich habe die Grafik erstellt und hochgeladen und dann müsste ich eigentlich nur den Code in die CSS einfügen ?

Code

/*
Theme Name: Librio
Description: Inspired by Mac OS X Leopard.
Version: 1.0
Author: Deniart
Author URI: http://deniart.ru/
Tags: fixed width, two columns, widgets, apple, mac, white, grey


    Librio v1.0
    http://deniart.ru/


    This theme was designed and built by Denis Shakhov,
    whose homepage you will find at http://deniart.ru/


    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php


*/


/* Reset
-------------------------------------------------------------------*/
* { padding: 0; margin: 0; }
ul, ol { list-style: none; list-style-position: inside; }
ol ol, ul ul, ol ul, ul ol { margin-left: 20px; margin-bottom: 0; }
img { border: none; }




/* Body
-------------------------------------------------------------------*/
body { 
    font: 12px/18px "Lucida Grande", Verdana, Helvetica, Arial, Geneva, sans-serif; 
    color: #333; 
    background: #fafafa url(images/bg.gif); 
}


h1, h2, h3, h4, h5,h6 { font-family: "Trebuchet MS", Helvetica, Arial, Geneva, Sans-Serif; font-weight: normal; color: #333; }
h1 { font-size: 22px; line-height: 26px; margin-bottom: 10px; }
h2 { font-size: 20px; line-height: 24px; margin-bottom: 7px; }
h3 { font-size: 18px; line-height: 22px; margin-bottom: 5px; }
h4 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
h5 { font-size: 14px; line-height: 18px; margin-bottom: 5px; }
h6 { font-size: 12px; line-height: 16px; margin-bottom: 5px; }


h1 span { color: #999; }


a { color: #5371c5; text-decoration: none; }
a:hover { color: #5371c5; text-decoration: underline; }
a:visited { color: #5371c5; }


p { margin-bottom: 10px; }


input, textarea { font: 12px Verdana, Helvetica, Arial, Geneva, sans-serif; }


blockquote { 
    font: italic 14px/22px Georgia, Serif; 
    padding: 5px 10px;
    margin-bottom: 20px;
    background: #eef3f7; 
}






/* Container
-------------------------------------------------------------------*/
#container { 
    width: 900px; 
    padding-bottom: 10px; 
    margin: 20px auto 20px auto;
    overflow: hidden; 
}
#container #wrapper { 
    width: 900px; 
    float: left; 
    overflow: hidden; 
    background: #d6ded4 url(images/sidebar-bg.gif) repeat-y top right; 
}






/* Header
-------------------------------------------------------------------*/
#header { 
    width: 900px; 
    height: 53px; 
    float: left; 
    background: #fafafa url(images/header-bg.gif) no-repeat center; 
    position: relative; 
}
#header h1 { 
    font: 24px Verdana;
    padding: 12px 0 0 15px; 
    margin-bottom: 0; 
    color: #333; 
}
#header h1 a { 
    color: #333; 
    text-shadow: 1px 1px 1px #fff; 
    text-decoration: none; 
}
#header h1 span { 
    padding-left: 10px; 
    font-size: 11px; 
    color: #777; 
}






/* Search
-------------------------------------------------------------------*/
#search {
    position: absolute;
    top: 2px; 
    right: 10px;
}
#search #s { 
    width: 170px;
    height: 14px;
    padding: 5px 0 5px 23px;
    vertical-align: bottom;
    line-height: 1px;
    font: normal 12px Verdana, Sans-Serif;
    color: #777;
    border: 0;
    background: #fafafa url(images/search-bg.gif) no-repeat;
}






/* Navigation
-------------------------------------------------------------------*/
#nav { 
    width: 900px;
    float: left; 
    height: 32px; 
    background: #fafafa url(images/nav-bg.gif) repeat-x; 
    position: relative; 
}


#nav ul { 
    margin-left: 15px; 
}
#nav ul li { 
    display: inline; 
    margin-right: 20px; 
}
#nav ul li a { 
    font-weight: bold; 
    text-shadow: 1px 1px 1px #fff; 
    text-decoration: none; 
    color: #555; 
    line-height: 33px; 
}
[B]#nav ul li a:hover { 
    background: url("../librio/images/hover.png") repeat scroll 0 0 #B41520;
    border: medium none;
    color: #FFFFFF;
    float: left;
    font-family: tahoma,sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 35px;
    margin: 0 0;
    padding: 0;
    position: relative;
    z-index: 20;
}[/B]


#nav #feed {  
    position: absolute; 
    right: 15px; 
    top: 7px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
    padding: 0 0 0 20px;
    display: block; 
    text-shadow: 1px 1px 1px #fff; 
    background: url(images/feed.gif) no-repeat 0 3px; 
}






/* Content
-------------------------------------------------------------------*/
#content { 
    width: 670px; 
    float: left; 
    padding: 15px; 
    background: #fff; 
}


#content .post { 
    margin-bottom: 40px; 
}
#content .post h1.post-title { 
    color: #333;
    background: url(images/post.gif) no-repeat 0 6px; 
    padding-left: 23px;
}
#content .post h1.post-title a { 
    text-decoration: none;
    color: #333;
}


#content .post .post-info { 
    clear: both; 
    font-size: 11px; 
    color: #777; 
    padding: 3px 5px 3px 5px; 
    margin-bottom: 20px; 
    border-top: 1px dotted #bdccdc; 
    border-bottom: 1px dotted #bdccdc; 
    background: #e9eff5; 
}
#content .post .post-info a { color: #333; text-decoration:none; }
#content .post .post-info a:hover { color: #555; text-decoration:none; }


#content #pages { text-align: center; }
#content #pages a { font: bold 20px "Trebuchet MS"; color: #414d4c; text-decoration: none; }
#content #pages a:hover { color: #1e2726; }


#content ul, ol, dl { margin-bottom: 20px; }
#content ul { 
    list-style: disc;
    list-style-position: inside; 
}
#content ol { 
    list-style: decimal; 
    list-style-position: inside; 
}
#content dl dt { 
    font-weight: bold;
}
#content dl dd { 
    font-style: italic;
    margin: 0 0 5px 20px;
    color: #555;
}


.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 5px 15px 10px 0; }
.alignright { float: right; margin: 5px 0 10px 15px; }






/* Comment Form
-------------------------------------------------------------------*/
#commentform { 
    background: #fafafa; 
    border: 5px solid #def7f8; 
    padding: 10px; 
    color: #555; 
}
#commentform p { margin-bottom: 7px; }
#commentform textarea { 
    width: 630px; 
    border: 1px solid #aaa; 
    height: 120px;
}
#commentform input.text { 
    width: 150px; 
    border: 1px solid #aaa; 
    margin-right: 10px; 
    padding: 3px 3px; 
}
#commentform input#submit { padding: 3px 10px; }






/* Comments
-------------------------------------------------------------------*/
#comments .comment { 
    width: 670px;
    background: #def7f8; 
    margin-bottom: 10px; 
    overflow: hidden; 
    padding-bottom: 5px; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#comments .comment .comment-avatar { 
    width: 50px; 
    float: left; 
    padding: 5px 7px; 
}


#comments .comment .comment-content { 
    width: 570px;
    float: left; 
    padding: 10px 15px; 
    margin: 5px 5px 0 0; 
    background: #fafafa ; 
}
#comments .comment .comment-content a { color: #444; }


#comments .comment .comment-info { 
    font-size: 11px;
    color: #777;
    margin-bottom: 5px; 
}
#comments .comment .comment-info span {
    font: bold 20px "Trebuchet MS", Helvetica, Arial, Geneva;      
    padding-right: 10px; 
    margin-bottom: 5px;
}
#comments .comment .comment-info a { 
    color: #444; 
    text-decoration: none;
}






/* Sidebar
-------------------------------------------------------------------*/
#sidebar { 
    width: 200px; 
    float: left; 
    font-size: 11px; 
    color: #555; 
    margin-bottom: 15px;
}
#sidebar h3 { 
    font: bold 12px Verdana; 
    color: #333; 
}


#sidebar a { color: #333; text-decoration: none; }
#sidebar a:hover { color: #777; }


#sidebar .block { 
    padding: 15px; 
    overflow: hidden;
    background: url(images/sidebar-block-bg.gif) no-repeat bottom center; 
}
#sidebar .block ul li { 
    padding-left: 18px; 
    background: url(images/arrow.gif) no-repeat 0px 3px; 
}






/* Calendar */
#sidebar .block #calendar_wrap .pad { background: none; }
#sidebar .block #calendar_wrap #prev { background: none; }
#sidebar .block #calendar_wrap #next { background: none; }
#sidebar .block #calendar_wrap table { width: 100%; margin: 0;padding: 0;}
#sidebar .block #calendar_wrap table th { width: 14.2%; }
#sidebar .block #calendar_wrap table td { width: 14.2%; background: #fafafa; text-align: center; color: #888; }
#sidebar .block #calendar_wrap table td a { font-weight: bold; }






/* Footer
-------------------------------------------------------------------*/
#footer {
    width: 900px;
    height: 29px;
    float: left;
    clear: both;  
    position: relative;
    background: #fafafa url(images/footer-bg.gif) no-repeat; 
}
#footer a#theme-author { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    display: block; 
    height: 28px; 
    width: 130px; 
}
#footer p { 
    line-height: 28px; 
    color: #333; 
    padding-left: 15px; 
    font-size: 11px; 
    margin: 0; 
}
#footer a { 
    color: #555;
    text-decoration: underline;
}

Alles anzeigen

mfitzen

So sollte es aussehen:

Code

#nav ul li a:hover { 
color: #333;
background: url(images/hover.png) repeat scroll 0 0 #B41520;
}

Gruening

Hey,
dass sieht schon viel besser aus, aber wie mache ich es jetzt, dass das Hover Image auch korrekt angezeigt wird ?

Denn schau Dir die Navi mal an. :D

LG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navigation ändern ?

Jetzt mitmachen!