Ergebnis 1 bis 8 von 8

Thema: Problem mit css

  1. #1
    König(in) Avatar von NyctalusNoctula
    Registriert seit
    07.08.2006
    Beiträge
    1.316
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit css

    Ich hab mich nun an mein Menü gewagt (siehe Beitrag weiter unten)
    Ich habe versucht es mit css zu realisieren.
    Doch leider liefert jeder Browser ein anderes Ergebnis. Der IE kommt dabei dem was ich haben will noch am nächsten. Firefox und Opera versagen total.

    Hier die Seite: Man vergleiche besonders das Menü links!
    http://mitglied.lycos.de/sirtobiiv/a.../ambilight.php

    Woran kann das liegen? Warum machen Firefox und Opera den hover-Effekt gar nicht? Opera verhunzt zudem noch das Layout im Gästebuch.

    Das css-Stylesheet:
    Code:
    p, ul, ol, li, div, td, th, address, blockquote, nobr, b, i, table {
     font-family:'Times New Roman'; color:#333333; }
    p, ul, ol, li, div, td, th, address, blockquote { font-size:14pt; }
    p, h1, h2, h3, div { padding:8px; }
    
    li { margin-top:0px; margin-bottom:0px; list-style-position:inside; }
    
    body { background-color:#A7C254; }
    body  { margin:25px; textarea {
      color:#000000;
      scrollbar-base-color:#A7C254;
      scrollbar-3dlight-color:#ee8c00;
      scrollbar-arrow-color:#ee8c00;
      scrollbar-darkshadow-color:#ee8c00;
      scrollbar-face-color:#FFcc59;
      scrollbar-highlight-color:#FFcc59;
      scrollbar-shadow-color:#ee8c00;
      scrollbar-track-color:#A7C254;
    } }
    
    h1, h2, h3 { font-family:'Century Schoolbook'; }
    
    h1 { color:#cc0000; font-size:27pt; margin-bottom:5px; }
    h2 { color:#cc0000; font-size:22pt; margin-bottom:5px; }
    h3 { color:#cc0000; font-size:17pt; margin-bottom:5px; }
    
    td { background-color:#E3C764; valign:top; }
    
    a:link { color:#CC0000; text-decoration:none; }
    a:visited { color:#CC0000; text-decoration:none; }
    a:active { color:#CC0000; text-decoration:none; }
    a:hover { color:#CC0000; text-decoration:none; background-color:#A7C254; }
    
    #menue a, #menue a:link, #menue a:visited, #menue a:active {
    text-decoration:none;
    font-weight:bold;
    display:block;
    color:#CC0000;
    width:150px;
    padding:5px;
    margin:2px;
    background-color:#E3C764;
    }
    #menue a:hover, {
    text-decoration:none;
    font-weight:bold;
    display:block;
    color:#CC0000;
    width:150px;
    padding:5px;
    margin:2px;
    background-color:#A7C254;
    }
    #menue li a, #menue li a:link, #menue li a:visited, #menue li a:active {
    text-decoration:none;
    font-weight:normal;
    display:block;
    color:#CC0000;
    width:134px;
    padding:5px;
    margin:2px;
    background-color:#E3C764;
    }
    #menue li a:hover, {
    text-decoration:none;
    font-weight:bold;
    display:block;
    color:#CC0000;
    width:134px;
    padding:5px;
    margin:2px;
    background-color:#A7C254;
    }
    und noch das Menü:
    Code:
    <div id="menue">Ambilight[*]weitere Fotos[*]Bauanleitung[*]Stückliste
    </div>
    Ich bin für jeden Tipp dankbar. Zur Not muss ich eben alla Attribute für jedes div und jeden Link im Quelltext setzen. Das kann ja aber nicht der Sinn der Sache sein.

    Gruß
    Nyctalus Noctula
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    evtl. solltest die lis mal in nen ul tag packen?
    Das hätte dir der Validator auch gesagt, vergiss nicht ihn zu nutzen

  3. #3
    König(in)
    Themenstarter
    Avatar von NyctalusNoctula
    Registriert seit
    07.08.2006
    Beiträge
    1.316
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hm, dann entsteht aber eine Lücke zwischen dem Hauptlink und den Unterlinks.
    An dem Problem, dass Firefox nach den[*] einen Zeilenumbruch macht und dass der Hover-Effekt nicht funktioniert ändert das aber rein gar nichts.

  4. #4
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Der Hauptfehler:
    Code:
    #menue li a&#58;hover, &#123;
    Nimm das komma da weg, dann gehts.
    und verbesser auf jeden Fall das mit den <ul>s und pass den css code an:
    Code:
    #menue ul li a, #menue ul li a&#58;link, #menue ul li a&#58;visited, #menue ul li a&#58;active &#123;
    und
    Code:
     #menue ul li a&#58;hover &#123;
    Gruß,
    Jojo

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ul ist gut, reicht aber noch nicht:

    Du hast mehrfach-Definitionen, die sich teils überlagern und damit die vorherigen außer Kraft setzen.

    Mach dir mal zur Vorsicht zunächst Sicherungskopien und gehe dann wie folgt vor:

    Diesen Teil komplett löschen:
    Code:
    #menue li a, #menue li a&#58;link, #menue li a&#58;visited, #menue li a&#58;active &#123;
    text-decoration&#58;none;
    font-weight&#58;normal;
    display&#58;block;
    color&#58;#CC0000;
    width&#58;134px;
    padding&#58;5px;
    margin&#58;2px;
    background-color&#58;#E3C764;
    &#125;
    #menue li a&#58;hover&#91;b&#93;,&#91;/b&#93; &#123;
    text-decoration&#58;none;
    font-weight&#58;bold;
    display&#58;block;
    color&#58;#CC0000;
    width&#58;134px;
    padding&#58;5px;
    margin&#58;2px;
    background-color&#58;#A7C254;
    &#125;
    Hier das Komma löschen:
    #menue a:hover, {
    Falls du die Aufzählungspunkte weghaben willst, füge das in die CSS ein:
    Code:
    #menue li
    &#123;list-style-type&#58; none;&#125;
    Schließlich packe deine Links wie von jojo empfohlen in eine ul:

    Alternative I:
    Code:
    <div id="menue">
    <ul>[*]Ambilight[*]weitere Fotos[*]Bauanleitung[*]Stückliste[/list]
    </div>
    Evtl. für ul noch folgendes hinterlegen:
    Code:
    #menue ul &#123;margin&#58; 0;&#125;
    Alternative II:
    Code:
    <div id="menue">
    Ambilight
    <ul>[*]weitere Fotos[*]Bauanleitung[*]Stückliste[/list]
    </div>
    Viel Erfolg!

  6. #6
    König(in)
    Themenstarter
    Avatar von NyctalusNoctula
    Registriert seit
    07.08.2006
    Beiträge
    1.316
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Vielen Dank. Das Problem mit dem nicht funktionsfähigen Hover ist damit beseitigt.
    Aber Firefox macht immer noch nen Zeilenumbuch nach den[*]. Das soll nicht sein.

    Zitat Zitat von sejuma
    ul ist gut, reicht aber noch nicht:

    Du hast mehrfach-Definitionen, die sich teils überlagern und damit die vorherigen außer Kraft setzen.
    Die Mehrfachdefinitionen haben schon ihre Richtigkeit. Oder kann es dadurch zu Problemen kommen?
    Ich möchte ja schließlich, dass der Hauptlink fett ist und die unteren Links nicht. Außerdem sollen die "Buttons" der Unterlinks etwas schmaler sein, dass das Aufzählungszeichen noch davor passt. Das müssten eigentlich alle Überschneidungen sein. Ich hab das so gemacht weil ich schreibfaul bin. So ists am Wenigsten Quelltext.
    Soll ich dafür besser eine Klasse erstellen, dass die Überschneidungen weg sind?

  7. #7
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    ul, li &#123;
    display&#58; inline;
    &#125;

  8. #8
    König(in)
    Themenstarter
    Avatar von NyctalusNoctula
    Registriert seit
    07.08.2006
    Beiträge
    1.316
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So. Danke für die Anregungen. Auf den Kommafehler wäre ich selbst nie gekommen. Ich habs jetzt ganz anderst gelöst. Jetzt sind auch die Überschneidungen weg.

    Nochmal das css-File:
    Code:
    p, ul, ol, li, div, td, th, address, blockquote, nobr, b, i, table &#123;
     font-family&#58;'Times New Roman'; color&#58;#333333; &#125;
    p, ul, ol, li, div, td, th, address, blockquote &#123; font-size&#58;14pt; &#125;
    p, h1, h2, h3, div &#123; padding&#58;8px; &#125;
    
    li &#123; margin-top&#58;0px; margin-bottom&#58;0px; list-style-position&#58;inside; &#125;
    
    body &#123; background-color&#58;#A7C254; &#125;
    body  &#123; margin&#58;25px; textarea &#123;
      color&#58;#000000;
      scrollbar-base-color&#58;#A7C254;
      scrollbar-3dlight-color&#58;#ee8c00;
      scrollbar-arrow-color&#58;#ee8c00;
      scrollbar-darkshadow-color&#58;#ee8c00;
      scrollbar-face-color&#58;#FFcc59;
      scrollbar-highlight-color&#58;#FFcc59;
      scrollbar-shadow-color&#58;#ee8c00;
      scrollbar-track-color&#58;#A7C254;
    &#125; &#125;
    
    h1, h2, h3 &#123; font-family&#58;'Century Schoolbook'; &#125;
    
    h1 &#123; color&#58;#cc0000; font-size&#58;27pt; margin-bottom&#58;5px; &#125;
    h2 &#123; color&#58;#cc0000; font-size&#58;22pt; margin-bottom&#58;5px; &#125;
    h3 &#123; color&#58;#cc0000; font-size&#58;17pt; margin-bottom&#58;5px; &#125;
    
    td &#123; background-color&#58;#E3C764; valign&#58;top; &#125;
    
    a&#58;link &#123; color&#58;#CC0000; text-decoration&#58;none; &#125;
    a&#58;visited &#123; color&#58;#CC0000; text-decoration&#58;none; &#125;
    a&#58;active &#123; color&#58;#CC0000; text-decoration&#58;none; &#125;
    a&#58;hover &#123; color&#58;#CC0000; text-decoration&#58;none; background-color&#58;#A7C254; &#125;
    
    #menue a, #menue a&#58;link, #menue a&#58;visited, #menue a&#58;active &#123;
    text-decoration&#58;none;
    display&#58;block;
    color&#58;#CC0000;
    padding&#58;5px;
    margin&#58;2px;
    background-color&#58;#E3C764;
    &#125;
    #menue a&#58;hover &#123;
    text-decoration&#58;none;
    font-weight&#58;bold;
    display&#58;block;
    color&#58;#CC0000;
    padding&#58;5px;
    margin&#58;2px;
    background-color&#58;#A7C254;
    &#125;
    .hauptlink &#123;
    font-weight&#58;bold;
    width&#58;155px;
    &#125;
    .link &#123;
    font-weight&#58;normal;
    width&#58;145px;
    position&#58;relative;
    left&#58;10px;
    &#125;
    und das menü:
    Code:
    <div id="menue" class="hauptlink">Ambilight</div>
    <div id="menue" class="link">weitere Fotos
    Bauanleitung
    Stückliste
    </div>

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •