Hallo zusammen,

eines gleich vorweg. Ich bin relativ neu auf dem Gebiet was das Anpassen von CSS-Dateien geht. Es wäre also nett, wenn ihr eure Antworten möglichst detailiert ausführt.

Zum Problem:

Ich habe eine Homepage mit Wordpress erstellt und dazu ein fertiges Theme heruntergeladen. Nun bin ich dabei das Theme etwas anzupassen. Konkret geht es mir momentan um die Anpassung der Navigation. Hier ein Bild: http://imageshack.us/photo/my-images...avigation.png/

Wie ihr sehen könnt, erkennt man dass die Navigation etwas heller/transparenter ist als der Hintergrund. Ich würde aber gerne den Navigationsbalken deutlich dünkler machen. (in etwa den Farbcode #7c0507). Ich finde aber absolut nicht die entsprechende stelle im CSS. Ich habe es schon mit FireBug probiert - was mir aber auch nicht weitergeholfen hat. Leider kann ich euch keinen Link zur Seite geben, da momentan alles lokal bei mir auf dem Rechner läuft.

Hier aber der CSS-Code für die Navigation aus der style.css

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

/* 2.2 Navigation */ #navigation{ font:bold 13px/1em arial, sans-serif; margin-top: 6px; } #navigation ul.rss  { margin: 0 0 0 10px; padding: 8px 0; }   .nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; } .nav a  { position:relative; color: #ffffff; display:block; z-index:100; padding:7px 10px; line-height:18px; text-decoration:none; text-shadow:0 1px 0 #000;  } .nav li  { float:left; width: auto; margin-left: 15px; } .nav li a.sf-with-ul { padding-right:20px; }   .nav a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-cat a, .nav li.current-menu-item a, .nav li.sfHover { background:#510e00; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  }   /* Optional Styling */ #navigation {         /* Border Radius */     border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;         /* Box Shadow */     -moz-box-shadow: 0 2px 2px rgba(0,0,0,.03);     -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.03);     box-shadow: 0 2px 2px rgba(0,0,0,.03); } #navigation .nav li a { } #navigation .nav li:first-child a { border-left:none; }       /* 2.2.1 Drop-down menus */     .nav li ul  { background: #510e00; margin:0 0 0 -1px; padding:7px 10px; position: absolute; left: -999em; width: 160px; z-index:999; }     .nav li ul li { margin-left: 0px !important; }     .nav li ul li a  { padding:8px 0px; width:160px; color:#ffffff; background: none; font-size:0.9em;}     .nav li ul li a:hover  { text-decoration: underline; }     .nav li ul li a.sf-with-ul { padding-right:0; }     .nav li ul ul  { margin: -37px 0 0 140px; }         .nav li ul li a:hover,     .nav li.current_page_item ul li a,     .nav li.current_page_parent ul li a,     .nav li.current-menu-ancestor ul li a,     .nav li.current-cat a ul li,     .nav li.current-menu-item ul li a,     .nav li.sfHover ul li { background:none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;}         .nav li:hover,.nav li.hover  { position:static; }     .nav li:hover ul ul, .nav li.sfhover ul ul,     .nav li:hover ul ul ul, .nav li.sfhover ul ul ul,     .nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }     .nav li:hover ul, .nav li.sfhover ul,     .nav li li:hover ul, .nav li li.sfhover ul,     .nav li li li:hover ul, .nav li li li.sfhover ul,     .nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; }         .nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:44%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}     .nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat; top:38%; }         /* Optional Styling */     #navigation .nav li ul  {         /* Border Radius */         border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;             /* Box Shadow */         -moz-box-shadow: 0 2px 2px rgba(0,0,0,.03);         -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.03);         box-shadow: 0 2px 2px rgba(0,0,0,.03);     }     #navigation .nav li ul ul { border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }     #navigation .nav li ul li a { border:0; border-top:1px solid #333333; border-bottom:1px solid #222222; }     #navigation .nav li ul li:first-child a { border-top:none; }     #navigation .nav li ul li:last-child a { border-bottom:none; }       /* 2.2.2 Top Navigation (optional) */     #top { background: #000; }     #top .nav { }     #top .nav a { color:#ddd; padding:8px 10px; line-height:18px; text-decoration:none; text-shadow:none; }     #top .nav li  {  }     #top .nav li a.sf-with-ul { padding-right:20px; }         #top .nav a:hover,     #top .nav li.current_page_item a,     #top .nav li.current_page_parent a,     #top .nav li.current-menu-ancestor a,     #top .nav li.current-cat a,     #top .nav li.current-menu-item a,     #top .nav li.sfHover { background: #222; }         #top .nav li ul  { background: #222; margin:0; padding:0px; width: 180px; border: none; z-index:999;         /* Box Shadow */         -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);         -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);         box-shadow: 0 2px 2px rgba(0,0,0,.1);     }     #top .nav li ul, #top .nav li ul li:last-child a {         /* Border Radius */         border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;     }     #top .nav li ul li { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }     #top .nav li ul li a  { padding:8px 10px; width:160px; color:#ddd; background: none; font-size:0.9em;}     #top .nav li ul li a:hover  { background: #000; }     #top .nav li ul li a.sf-with-ul { padding-right:10px; }     #top .nav li ul ul  { margin: -34px 0 0 180px; }         #top .nav li:hover, #top .nav li.hover  { position:static; }     #top .nav li:hover ul ul, #top .nav li.sfhover ul ul,     #top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,     #top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }     #top .nav li:hover ul, #top .nav li.sfhover ul,     #top .nav li li:hover ul, #top .nav li li.sfhover ul,     #top .nav li li li:hover ul, #top .nav li li li.sfhover ul,     #top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul  { left:auto; }

Vielen Dank bereits im Voraus für eure Hilfe!

Viele Grüße
Sebastian

Hey

kannst du vielleicht auch mal deinen HTML-Code reinstellen?

Hallo!

Ich kann jetzt nur rätseln, aber ich würde meinen dass Du die Farbe zwischen Zeile 19 und 28 mit angeben musst.
Allerdings bin ich mir nicht sicher ob/dass es auch mit "background" funktioniert?!

Gruss Dr Dau

Oh liegt es am HTML-Code?!

Hier der Quellcode

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343

<!DOCTYPE html> <html dir="ltr" lang="de-DE"> <head> <meta charset="UTF-8" /> <title>Test-Seite | Ein weiterer WordPress-Blog</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="index, nofollow" /> <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/swatch/style.css" media="screen" /> <link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />   <link rel="alternate" type="application/rss+xml" title="Test-Seite &raquo; Feed" href="http://localhost/wordpress/?feed=rss2" /> <link rel="alternate" type="application/rss+xml" title="Test-Seite &raquo; Kommentar Feed" href="http://localhost/wordpress/?feed=comments-rss2" /> <link rel='stylesheet' id='admin-bar-css'  href='http://localhost/wordpress/wp-includes/css/admin-bar.css?ver=20110622' type='text/css' media='all' /> <link rel='stylesheet' id='prettyPhoto-css'  href='http://localhost/wordpress/wp-content/themes/swatch/includes/css/prettyPhoto.css?ver=3.2.1' type='text/css' media='all' /> <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/l10n.js?ver=20101110'></script>   <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/swatch/includes/js/jquery.prettyPhoto.js?ver=3.2.1'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/swatch/includes/js/jquery.jcarousel.min.js?ver=3.2.1'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/swatch/includes/js/slides.min.jquery.js?ver=3.2.1'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/swatch/includes/js/portfolio.js?ver=3.2.1'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/swatch/includes/js/feedback.js?ver=3.2.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var woo_slider_settings = {     speed: "0.6",     auto: "4",     effect: "slide",     nextprev: "true",     pagination: "true",     hoverpause: "false",     autoheight: "true" }; /* ]]> */ </script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/swatch/includes/js/general.js?ver=3.2.1'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />   <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> <link rel='index' title='Test-Seite' href='http://localhost/wordpress' /> <meta name="generator" content="WordPress 3.2.1" />   <!-- Theme version --> <meta name="generator" content="Swatch 1.3.0" /> <meta name="generator" content="WooFramework 4.8.1" /> <style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen">     html { margin-top: 28px !important; }     * html body { margin-top: 28px !important; } </style> <!-- Woo Custom Styling --> <style type="text/css"> body { background-color: #d1cdcd !important; } body { background-image: none; } </style> <!-- Alt Stylesheet --> <link href="http://localhost/wordpress/wp-content/themes/swatch/styles/black.css" rel="stylesheet" type="text/css" />   <!-- Woo Shortcodes CSS --> <link href="http://localhost/wordpress/wp-content/themes/swatch/functions/css/shortcodes.css" rel="stylesheet" type="text/css" />   <!-- Custom Stylesheet --> <link href="http://localhost/wordpress/wp-content/themes/swatch/custom.css" rel="stylesheet" type="text/css" />   </head>   <body class="home blog logged-in admin-bar gecko two-col-left">   <div id="wrapper">                   <div id="header">         <div class="col-full">             <div id="logo">                                           <a href="http://localhost/wordpress" title="Ein weiterer WordPress-Blog">                     <img src="http://localhost/wordpress/wp-content/uploads/2011/11/Kassel-PNG.png" alt="Test-Seite" />                 </a>                                                       <h1 class="site-title"><a href="http://localhost/wordpress">Test-Seite</a></h1>                             <span class="site-description">Ein weiterer WordPress-Blog</span>                             </div><!-- /#logo -->               <div id="navigation" class="fr">                                             <ul id="main-nav" class="nav fl">                                                                                               <li class="page_item current_page_item"><a href="http://localhost/wordpress">Home</a></li>                         <li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2" title="Beispiel-Seite">Beispiel-Seite</a></li> <li class="page_item page-item-18"><a href="http://localhost/wordpress/?page_id=18" title="Über Uns">Über Uns</a> <ul class='children'>     <li class="page_item page-item-20"><a href="http://localhost/wordpress/?page_id=20" title="Studierendenparlament">Studierendenparlament</a></li> </ul> </li>                                                 </ul><!-- /#nav -->                                                             </div><!-- /#navigation -->                                   </div><!--/.col-full-->     </div><!--/#header-->         <div id="featured-slider">         <div id="slide-box">             <div class="slides_container"> <div id="slide-id-6" class="slide slide-number-1">         <div class="entry slide-content fl">         <h2 class="title">Test</h2>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum venenatis mauris, sed mattis massa viverra a. Sed posuere tempor leo, ac commodo nunc aliquam a. Phasellus magna leo, condimentum quis condimentum dapibus, convallis non purus. Vestibulum quam mauris, tincidunt id porttitor ut, tincidunt quis massa. Nunc semper mi vel.</p>       </div><!--/.entry-->     <div class="slide-image fl"> <a href="" title="Test"><img src="http://localhost/wordpress/wp-content/themes/swatch/functions/thumb.php?src=wordpress/wp-content/uploads/2011/11/juso-hsg-social.jpg&amp;w=900&amp;h=338&amp;zc=1&amp;q=90" alt="Test" class="woo-image slide-img"  width="900"  height="338"  /></a> </div><!--/.slide-image-->     <div class="fix"></div><!--/.fix--> </div><!--/.slide--> <div id="slide-id-8" class="slide slide-number-2">         <div class="entry slide-content fl">         <h2 class="title">Test 2</h2>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum venenatis mauris, sed mattis massa viverra a. Sed posuere tempor leo, ac commodo nunc aliquam a. Phasellus magna leo, condimentum quis condimentum dapibus, convallis non purus. Vestibulum quam mauris, tincidunt id porttitor ut, tincidunt quis massa. Nunc semper mi vel.</p>       </div><!--/.entry-->     <div class="slide-image fl"> <a href="" title="Test 2"><img src="http://localhost/wordpress/wp-content/themes/swatch/functions/thumb.php?src=wordpress/wp-content/uploads/2011/11/panzer.jpg&amp;w=900&amp;h=338&amp;zc=1&amp;q=90" alt="Test 2" class="woo-image slide-img"  width="900"  height="338"  /></a>  </div><!--/.slide-image-->     <div class="fix"></div><!--/.fix--> </div><!--/.slide-->             </div><!--/.slides_container .col-full-->         </div><!--/#slide-box-->     </div><!--/#slides-->     <div id="mini-features">   <div class="mini-inside">     <div class="col-full">           <div class="block">                     <img src="http://localhost/wordpress/wp-content/uploads/2011/11/faus-klein.png" alt="" class="home-icon" />                             <div class="feature">            <h3>Test</h3>            <p>blablablabalabalalad dajskdjaslkjd djlaksjd daslj</p>            <a href="http://localhost/wordpress/?page_id=2" class="btn">Read More</a>        </div><!--/.feature-->       </div><!--/.block-->               <div class="fix"></div><!--/.fix-->     </div><!--/.col-full-->     </div> </div><!-- /#mini-features -->             <div id="content" class="col-full">         <div id="main" class="fullwidth">                                 <div id="homepage-column-1" class="block">                 <div id="recent-posts-3" class="widget widget_recent_entries">      <h3 class="widget-title">News</h3>      <ul>                   <li><a href="http://localhost/wordpress/?p=1" title="Hallo Welt!">Hallo Welt!</a></li>                 </ul>         </div>          </div><!--/.block-->                     <div id="homepage-column-2" class="block">         <div id="woo_social-3" class="widget widget_woo_social"><h3 class="widget-title">Follow this Blog</h3>      <div id="social">                                     <a href="http://localhost/wordpress/?feed=rss2" class="subscribe" title="Subscribe to our RSS feed"><img src="http://localhost/wordpress/wp-content/themes/swatch/images/social-rs.png" alt="Subscribe to our RSS feed" /></a>         </div><!--/#social-->   </div>          </div><!--/.block-->                     <div id="homepage-column-3" class="block last">         <div id="blog" class="widget widget_woo_blog"> <h3 class="widget-title">Hits From The Blog</h3>                                                                 <div class="post-1 post type-post status-publish format-standard hentry category-allgemein">                 <h2 class="title"><a href="http://localhost/wordpress/?p=1" rel="bookmark" title="Hallo Welt!">Hallo Welt!</a></h2>                                 <div class="entry">             <p>Willkommen zur deutschen Version von WordPress. Dies ist der erste Artikel. Du kannst ihn bearbeiten oder löschen. Um Spam zu vermeiden, geh doch gleich mal in den Pluginbereich und aktivier die entsprechenden Plugins. So, und nun genug geschwafelt – jetzt nichts wie ran ans Bloggen!</p>           </div>           <p class="post-meta">     <span class="post-author"><span class="small">by</span> <a href="http://localhost/wordpress/?author=1" title="Artikel von admin" rel="author">admin</a></span>     <span class="post-date"><span class="small">on</span> 1. November 2011</span>     <span class="post-category"><span class="small">in</span> <a href="http://localhost/wordpress/?cat=1" title="Alle Artikel in Allgemein ansehen" rel="category">Allgemein</a></span>       <span class="small"><a class="post-edit-link" href="http://localhost/wordpress/wp-admin/post.php?post=1&amp;action=edit" title="Artikel bearbeiten">{ Edit }</a></span></p>             </div><!-- /.post -->                                           </div><!--/#blog-->         </div><!--/.block-->                     <div class="clear"></div><!--/.clear-->         </div><!-- /#main -->       </div><!-- /#content -->                <div id="footer">         <div class="col-full">           <div id="copyright" class="col-left">                     <p>Test-Seite &copy; 2011. All Rights Reserved.</p>                 </div>           <div id="credit" class="col-right">                     <p>Powered by <a href="http://www.wordpress.org">WordPress</a>. Designed by <a href="http://www.woothemes.com"><img src="http://localhost/wordpress/wp-content/themes/swatch/images/woothemes.png" width="74" height="19" alt="Woo Themes" /></a></p>                   </div></div>     </div><!-- /#footer  --> </div><!-- /#wrapper --> <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/admin-bar.js?ver=20110131'></script>         <div id="wpadminbar">             <div class="quicklinks">                 <ul>                                                             <li id="wp-admin-bar-my-account-with-avatar" class="menupop">             <a href="http://localhost/wordpress/wp-admin/profile.php"><span><img alt='' src='http://0.gravatar.com/avatar/210067c4e94c5d8177a6d65a4aa89073?s=16&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16' />admin</span></a>                           <ul>                                                     <li id="wp-admin-bar-edit-profile" class="">             <a href="http://localhost/wordpress/wp-admin/profile.php">Profil bearbeiten</a>                                   </li>                                                   <li id="wp-admin-bar-logout" class="">             <a href="http://localhost/wordpress/wp-login.php?action=logout&_wpnonce=718da9edd6">Abmelden</a>                                   </li>                           </ul>                                   </li>                                                           <li id="wp-admin-bar-dashboard" class="">             <a href="http://localhost/wordpress/wp-admin/">Dashboard</a>                                   </li>                                                           <li id="wp-admin-bar-new-content" class="menupop">             <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=post"><span>Hinzufügen</span></a>                           <ul>                                                     <li id="wp-admin-bar-new-post" class="">               <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=post">Artikel</a>                                   </li>                                                   <li id="wp-admin-bar-new-page" class="">             <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=page">Seite</a>                                   </li>                                                   <li id="wp-admin-bar-new-infobox" class="">             <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=infobox">Mini-Feature</a>                                   </li>                                                   <li id="wp-admin-bar-new-slide" class="">             <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=slide">Slide</a>                                   </li>                                                   <li id="wp-admin-bar-new-portfolio" class="">             <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=portfolio">Portfolio Item</a>                                   </li>                                                   <li id="wp-admin-bar-new-feedback" class="">               <a href="http://localhost/wordpress/wp-admin/post-new.php?post_type=feedback">Feedback Item</a>                                   </li>                                                   <li id="wp-admin-bar-new-media" class="">             <a href="http://localhost/wordpress/wp-admin/media-new.php">Datei</a>                                   </li>                                                   <li id="wp-admin-bar-new-link" class="">             <a href="http://localhost/wordpress/wp-admin/link-add.php">Link</a>                                   </li>                                                   <li id="wp-admin-bar-new-user" class="">             <a href="http://localhost/wordpress/wp-admin/user-new.php">Benutzer</a>                                   </li>                                                   <li id="wp-admin-bar-new-theme" class="">             <a href="http://localhost/wordpress/wp-admin/theme-install.php">Theme</a>                                   </li>                                                   <li id="wp-admin-bar-new-plugin" class="">               <a href="http://localhost/wordpress/wp-admin/plugin-install.php">Plugin</a>                                   </li>                           </ul>                                 </li>                                                           <li id="wp-admin-bar-comments" class="">             <a href="http://localhost/wordpress/wp-admin/edit-comments.php">Kommentare </a>                                   </li>                                                           <li id="wp-admin-bar-appearance" class="menupop">               <a href="http://localhost/wordpress/wp-admin/themes.php"><span>Design</span></a>                           <ul>                                                     <li id="wp-admin-bar-themes" class="">             <a href="http://localhost/wordpress/wp-admin/themes.php">Themes</a>                                   </li>                                                   <li id="wp-admin-bar-widgets" class="">             <a href="http://localhost/wordpress/wp-admin/widgets.php">Widgets</a>                                   </li>                                                   <li id="wp-admin-bar-menus" class="">             <a href="http://localhost/wordpress/wp-admin/nav-menus.php">Menüs</a>                                   </li>                           </ul>                                 </li>                                   </ul>             </div>               <div id="adminbarsearch-wrap">                 <form action="http://localhost/wordpress" method="get" id="adminbarsearch">                     <input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />                     <input type="submit" class="adminbar-button" value="Suchen"/>                 </form>             </div>         </div>           </body>   </html>

Nein, es liegt nicht am HTML-Code Aber ich wollte gucken welche id die Navigation hat, jedoch finde ich auch nicht die hintergrundfarbe.

Ist das auch der Komplette CSS-Code?

Oh, entschuldigung habe gerade nochmal deinen ersten Beitrag gelesen, und es ist nicht der komplette CSS-Code, richtig?

Kannst du denn mal den ganzen Code zeigen?

Zitat von Dr Dau

Hallo!

Ich kann jetzt nur rätseln, aber ich würde meinen dass Du die Farbe zwischen Zeile 19 und 28 mit angeben musst.
Allerdings bin ich mir nicht sicher ob/dass es auch mit "background" funktioniert?!

Gruss Dr Dau

Hi danke für deine Antwort!

Ich habe jetzt mal

Code :

1 2 3 4

/* Box Shadow */         -moz-box-shadow: 0 2px 2px background-color: #7c0507;         -webkit-box-shadow: 0 2px 2px background-color: #7c0507;         box-shadow: 0 2px 2px background-color: #7c0507;

ausprobiert. Hat leider nicht geholfen. Habe ich etwas falsch gemacht?

Also ich arbeite auch noch nicht so lange mit CSS, aber ich glaube, es würde reichen wenn du "background: #7c0507;" einaml schreiben würdest, sprich in einer einzelnen zeile.

Wie ihr sehen könnt, erkennt man dass die Navigation etwas heller/transparenter ist als der Hintergrund.

Schätze das täuscht. Ich hab von beiden Stellen die Farbe gepickt und bekomme bei beiden #E10020 heraus. Liegt wohl an dem Border unterhalb des Menüs. Da die Farbe im gezeigten CSS-Code nicht vorkommt bzw. ich überhaupt keine extra Farbangabe für das Hauptmenü finde, wird wohl gar keine gesetzt sein...
...probier mal

Code :

1	.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; background-color: #7c0507;}

zu erweitern.

Perfekt! Das funktioniert ! Danke!

Noch eine Frage: Ist es möglich die Ecken des Rechtecks etwas abzurunden? Wenn ja, wie? Nochmals vielen Dank!

Möglich ist alles

Die Angabe

Code :

1	.nav li.sfHover { background:#510e00; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  }

aus dem geposteten CSS-Code beschreibt den gehooverten Listenpunkt, in deinem Bild also Home.
Du müsstest

Code :

1

.nav {

also um jene Angaben ergänzen. Entweder klatscht du das Zeug von oben (bis auf background) direkt hinein und hast dann dieselben "Rundungen" wie beim aktiven li, oder du spezifizierst das Ganze. Hier [Stück runter] findest du ein paar Beispiele.

Habe ich das auf der Seite richtig verstanden, dass die Änderungen, welche auf der Seite aufgeführt werden nur in bestimmten Browser funktionieren?

Funktioniert das mit dem { grundsätzlich in jedem gebräuchlichen Browser? Wenn ja, wo genau muss ich das { überall davor setzen. Um ganz ehrlich zu sein, habe ich das nicht so wirklich verstanden. Sorry! Aber vielen Dank für die Mühe die ihr euch gebt!

Auf der verlinkten Seite steht, dass -moz-border-radius: & -webkit-border-radius nicht mehr nötig wären, weil alle modernen Browser die "Hauptangabe" border-radius verstünden - aber ehrlich gesagt bin ich mir da nicht so sicher. Auf anderen Seiten hab ich was von Einbinden einer .htc-Datei gelesen, die die runden Ecken auch für die IE-Versionen verfügbar machen soll.

Und, sorry, das mit der geschweiften Klammer { war zu undeutig
Du hattest in deiner CSS-Datei ursprünglich

Code :

1	.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }

stehen (vielleicht steht mittlerweile dein background-color: #farbcode zusätzlich drin).

Als ersten Versuch könnte die Zeile z.B. so aussehen:

Code :

1	.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #farbcode; }

Als Alternative könnte man auch noch mit Hintergrundbildern der einzelnen li's herumspielen beziehungsweise sich ebenjene .htc-Beispiele aus dem Netz anschauen, aber zumindest bei Letzterem hängts bei mir mit der Erfahrung.

Vielleicht hat ja noch jemand einen Tip dafür parat.

Perfekt! Problem gelöst! Vielen vielen Dank!

Hast du das auch in irgendeinem IE getestet? Würde mich schon interessieren, welche der Behauptungen nun stimmt