#sidebar, vertical submenu: schlechten color-Kontrast ändern

  • Hallo an alle hier,

    mein submenue hat schlechten Farbcontrast, soll gelben HG mit blauen Links haben. Wenn ich jedoch die Farbe ändere, ändert sich auch die Farbe im Hauptmenue (hat blauen HG und weisse Links).
    Ich weiss partout nicht, wo im Code etwas zu korrigieren ist. Bitte dringend um Angabe, wo ich wie korrigieren muß.

    Hier ist der Code, vielleicht reicht der zur Problemlösung aus? Ich hoffe, ich habs korrekt üebergebracht ;-). Falls noch ein Screenshot nötig ist, bitte mitteilen.

    [FONT=Arial][size=10]#sidebar {[/SIZE][/FONT]
    [FONT=Arial][size=10]float:left;[/SIZE][/FONT]
    [FONT=Arial][size=10]width:180px; [/SIZE][/FONT]
    [FONT=Arial][size=10]margin:0 0 0 0;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding:0px;[/SIZE][/FONT]
    [FONT=Arial][size=10]background-color:#2386C7; [/SIZE][/FONT]
    [FONT=Arial][size=10]color:white;[/SIZE][/FONT]
    [FONT=Arial][size=10]border:solid 1px #c30; [/SIZE][/FONT]
    [FONT=Arial][size=10]-moz-border-radius:6px;[/SIZE][/FONT]
    [FONT=Arial][size=10]-webkit-border-radius:6px;[/SIZE][/FONT]
    [FONT=Arial][size=10]border-radius:6px; }[/SIZE][/FONT]

    [FONT=Arial][size=10].side{[/SIZE][/FONT]
    [FONT=Arial][size=10]font-size:18px;[/SIZE][/FONT]
    [FONT=Arial][size=10]margin-bottom:0;[/SIZE][/FONT]
    [FONT=Arial][size=10]line-height:20px; }[/SIZE][/FONT]

    [FONT=Arial][size=10]/* *** Beginn side-widget *** */ [/SIZE][/FONT]
    [FONT=Arial][size=10].side-widget { [/SIZE][/FONT]
    [FONT=Arial][size=10]float:left;[/SIZE][/FONT]
    [FONT=Arial][size=10]width:170px;[/SIZE][/FONT]
    [FONT=Arial][size=10]margin:0.8em 0 2em 0px;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding:2px 0px; [/SIZE][/FONT][FONT=Arial] }[/FONT]
    [FONT=Arial][size=10]
    [/SIZE][/FONT]
    [FONT=Arial][size=10].side-widget a { color: white; text-decoration: none; } [/SIZE][/FONT][FONT=Arial]/* Menue - Link Hauptrubrik */[/FONT]

    [FONT=Arial][size=10].side-widget ul { /* Menue 1. Ebene */[/SIZE][/FONT]
    [FONT=Arial][size=10]margin:0;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding:0 0em 2em 0.8em;[/SIZE][/FONT]
    [FONT=Arial][size=10]list-style-type:none; }[/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget ul li { /* Submenue 1. Ebene */[/SIZE][/FONT]
    [FONT=Arial][size=10]margin: 8px 0 0 7px;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding: 0 0 2px 1px; [/SIZE][/FONT]
    [FONT=Arial][size=10]border-bottom: solid 2px #EAD185; [/SIZE][/FONT]
    [FONT=Arial][size=10]color: white;[/SIZE][/FONT]
    [FONT=Arial][size=10]list-style-type: square; [/SIZE][/FONT]
    [FONT=Arial][size=10]font: normal 100%/1.3em Cuprum, Verdana, sans-serif; } [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget ul li a { /* Links 1. Ebene */[/SIZE][/FONT]
    [FONT=Arial][size=10]color: white; [/SIZE][/FONT]
    [FONT=Arial][size=10]text-decoration: none; } [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widgetul li a:hover { [/SIZE][/FONT]
    [FONT=Arial][size=10]padding:1px 2px 2px 3px;[/SIZE][/FONT]
    [FONT=Arial][size=10]color:white;[/SIZE][/FONT]
    [FONT=Arial][size=10]background-color: blue;[/SIZE][/FONT]
    [FONT=Arial][size=10]border-left: solid 5px white;[/SIZE][/FONT]
    [FONT=Arial][size=10]text-decoration: none; } [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget ul li a:active { [/SIZE][/FONT]
    [FONT=Arial][size=10]color:green; [/SIZE][/FONT]
    [FONT=Arial][size=10]text-decoration: none; } [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget h2 {[/SIZE][/FONT]
    [FONT=Arial][size=10]margin: 1em 0em 1.5em 0em; [/SIZE][/FONT]
    [FONT=Arial][size=10]padding: 12px 0 12px 0px; [/SIZE][/FONT]
    [FONT=Arial][size=10]background: url(images/h2line.gif) repeat-x bottom;[/SIZE][/FONT]
    [FONT=Arial][size=10]color: green; [/SIZE][/FONT]
    [FONT=Arial][size=10]font-size: 10px;[/SIZE][/FONT]
    [FONT=Arial][size=10]text-align: center;[/SIZE][/FONT]
    [FONT=Arial][size=10]text-transform: uppercase; }[/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget .noline { border-bottom: 0; } [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget #s {[/SIZE][/FONT]
    [FONT=Arial][size=10]width: 99%;[/SIZE][/FONT]
    [FONT=Arial][size=10]margin-top: 15px;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding: 2px 0px; }[/SIZE][/FONT]
    [FONT=Arial][size=10]/**** Ende side-widget *** */[/SIZE][/FONT]

    [FONT=Arial][size=10]/**** Beginn side-widget Liste *** */
    [/SIZE][/FONT]
    [FONT=Arial][size=10].side-widgetul li ul { display: none; }[/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget ul li.current_page_ancestor ul, [/SIZE][/FONT]
    [FONT=Arial][size=10].side-widget ul li.current_page_item ul { [/SIZE][/FONT]
    [FONT=Arial][size=10]display: block;[/SIZE][/FONT]
    [FONT=Arial][size=10]margin: 5px auto;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding: 3px 0 5px 0;[/SIZE][/FONT]
    [FONT=Arial][size=10]background-color: #ffe18e; [/SIZE][/FONT]
    [FONT=Arial][size=10]color: #03c; [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget li.current_page_item { [/SIZE][/FONT]
    [FONT=Arial][size=10]padding: 5px 0;[/SIZE][/FONT]
    [FONT=Arial][size=10]margin: 0 0 0 5px;[/SIZE][/FONT]
    [FONT=Arial][size=10]background-color: #ffe18e; [/SIZE][/FONT]
    [FONT=Arial][size=10]color: green; /* nur ein test */[/SIZE][/FONT]
    [FONT=Arial][size=10]font-size: 98%; } [/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget li.current_page_item a { [/SIZE][/FONT]
    [FONT=Arial][size=10]padding-left: 7px;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding-top: 2px;[/SIZE][/FONT]
    [FONT=Arial][size=10]padding-bottom: 2px;[/SIZE][/FONT]
    [FONT=Arial][size=10]background-color: #ffe18e; [/SIZE][/FONT]
    [FONT=Arial][size=10]color: blue; [/SIZE][/FONT]
    [FONT=Arial][size=10]font-size: 98%; [/SIZE][/FONT]
    [FONT=Arial][size=10]font-weight: bold; }[/SIZE][/FONT]

    [FONT=Arial][size=10].side-widget li.current_page_item a:hover { [/SIZE][/FONT]
    [FONT=Arial][size=10]padding: 2px 2px 2px 0;[/SIZE][/FONT]
    [FONT=Arial][size=10]background-color:#ffe18e; [/SIZE][/FONT]
    [FONT=Arial][size=10]color: blue; [/SIZE][/FONT]
    [FONT=Arial][size=10]font-size: 98%; [/SIZE][/FONT]
    [FONT=Arial][size=10]font-weight: bold; }
    [/SIZE][/FONT]
    [FONT=Arial][size=10]/**** Ende side-widget Liste *** */[/SIZE][/FONT]

    Danke für Eure Hilfe.

    Einmal editiert, zuletzt von krissili (23. Juli 2012 um 11:41)

    • Anzeige

    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

  • Ein Link zur Site wäre am besten. Grundsätzlich gilt: background-color ist für den Hintergrund, color für die Schriftfarbe. Wenn du jetzt durch deinen Code gehst, kannst du die Linkfarben gezielt ändern. Vorher suchst du dir aus, was du wie machen möchtest und dann kann´s losgehen. Ohne Plan läuft nix. a ist der Link und z.B. beim Drüberfahren mit der Maus muss a:hover logischerweise eine andere Farbe bekommen…
    Gruß. Petra ;-)

    Tapferkeit stärkt, Eigensinn macht Spaß, Geduld gibt Ruhe.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!