Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: vertikale Navi mit Grafiken nicht korrekt im IE

  1. #1
    HTML Newbie
    Registriert seit
    10.03.2008
    Ort
    berlin
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard vertikale Navi mit Grafiken nicht korrekt im IE

    hallo,

    ich möchte eine einfache vertikale Navigation, die nur aus Grafiken besteht incl. hover bauen. Das ganze funktioniert im IE leider nicht (IE 6 und 7), da die Grafiken einen nicht gewollten Abstand untereinander aufweisen (nicht im Firefox).
    Wer weiss, wie ich dieses Problem löse. Bin leider nicht besonders programmiertechnisch versiert:
    Code:
    * { margin: 0;
    padding: 0;
    }
    
    
    body {
        background: #fff url(images/a.jpg) no-repeat 400px 200px;
    }
    
    #wrapper {
        margin:  0;
        text-align: left;
        width: 794px;
    }
    
    p {
        text-align: left;
        color: #000;
        font: 12px/14px "Verdana, Lucida Grande", Lucida, sans-serif;    
    }
    #nav {
        float: left;
        width:  184px;
        background-color: #ccc;
    }
    
    #content {
        float: right;
        width:  600px;
        background-color:: #666;
    }
    
    #hauptcontent {
        float: left;
        width:  400px;
        background-color: #6b00cd;
    }
    
    #navcontent {
        float: right;
        width:  200px;
        background-color: #00ff97;
    }
    
    
      #navigation a {
        background: url(images/a.gif) no-repeat;
        display:block; width:184px; /* Linkbereich begrenzen */
      }
      #navigation img {
        display:block; width:184px; height:192px; border:0;
      }
      #navigation a:hover img {
        visibility: hidden;
      }
      #navigation a:hover { /* Workaround fuer IE 5.5 und 6 */
        border:0;
      }
      * html #navigation a {
        margin-right:1px;
      }
      * html #navigation a:hover {
        width:185px; margin-right:0; /* Workaround fuer IE 5.01 */
      }
    
    
      #navigationw a {
        background: url(images/w.gif) no-repeat;
        display:block; width:184px; /* Linkbereich begrenzen */
      }
      #navigationw img {
        display:block; width:184px; height:191px; border:0;
      }
      #navigationw a:hover img {
        visibility: hidden;
      }
      #navigationw a:hover { /* Workaround fuer IE 5.5 und 6 */
        border:0;
      }
    
      * html #navigationw a {
        margin-right:1px;
      }
      * html #navigationw a:hover {
        width:185px; margin-right:0; /* Workaround fuer IE 5.01 */
      }
    
    
      #navigationu a {
        background: url(images/u.gif) no-repeat;
        display:block; width:184px; /* Linkbereich begrenzen */
      }
      #navigationu img {
        display:block; width:184px; height:192px; border:0;
      }
      #navigationu a:hover img {
        visibility: hidden;
      }
      #navigationu a:hover { /* Workaround fuer IE 5.5 und 6 */
        border:0;
      }
    
      * html #navigationu a {
        margin-right:1px;
      }
      * html #navigationu a:hover {
        width:185px; margin-right:0; /* Workaround fuer IE 5.01 */
      }
    
    
      #navigationv a {
        background: url(images/v.gif) no-repeat;
        display:block; width:184px; /* Linkbereich begrenzen */
      }
      #navigationv img {
        display:block; width:184px; height:195px; border:0;
      }
      #navigationv a:hover img {
        visibility: hidden;
      }
      #navigationv a:hover { /* Workaround fuer IE 5.5 und 6 */
        border:0;
      }
    
      * html #navigationv a {
        margin-right:1px;
      }
      * html #navigationv a:hover {
        width:185px; margin-right:0; /* Workaround fuer IE 5.01 */
      }
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
    <div id="wrapper">
    <div id="nav">
    <ul>
    <li id="navigation"><a href="aktuelles.html"><img src="images/a_.gif" alt="Aktuelles" /></a></li>
    <li id="navigationw"><a href="wir.html"><img src="images/w_.gif" alt="Über uns" /></a></li>
    <li id="navigationu"><a href="projekte.html"><img src="images/u_.gif" alt="Unsere Projekte" /></a></li>
    <li id="navigationv"><a href="presse.html"><img src="images/v_.gif" alt="Presse" /></a></li>
    </ul>
    </div>
    <div id="content">
    <div id="hauptcontent">...</div>
    <div id="navcontent">...</div>
    </div>
    </div>
    </body>
    </html>
    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
    HTML Newbie
    Registriert seit
    07.02.2009
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    erstmal könntest du dir einiges an Code sparen wenn deine Listenpunkte nicht alle ne eigene ID hätten. Da du die Grafik sowieso per IMG-Tag einbindest, kannst du dir das schenken und stattdessen nur der Liste selbst <ul> eine ID zuweisen.

    In dieser Id hältst um im CSS mal padding: 0; fest, damit sollts eigentlich gehen. Internet Explorer hats ganz besonders nötig mit seinen Innenabständen. Das ist oft das Problem. Er möchts halt ganz genau wissen.

    Probiers mal aus und probier vor allem rum, so lernst es am besten.
    Seh den Waldi vor lauter Bäumen nicht

    www.pc-typ.de

  3. #3
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    Zitat Zitat von lordwaldi Beitrag anzeigen
    erstmal könntest du dir einiges an Code sparen wenn deine Listenpunkte nicht alle ne eigene ID hätten. Da du die Grafik sowieso per IMG-Tag einbindest, kannst du dir das schenken und stattdessen nur der Liste selbst <ul> eine ID zuweisen.
    und wie will er dann jeden punkt einzeln ansprechen und unterschiedliche
    grafiken zuweisen ?
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  4. #4
    HTML Newbie
    Registriert seit
    07.02.2009
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    hö? ich glaub ich blicks grad net

    er hat doch die grafiken in der seite selbst, warum also nochmal zusätzlich über css?
    naja egal ob ers mit IDs macht oder nicht, ich würd Padding probieren um das eigentliche Problem zu lösen!
    Seh den Waldi vor lauter Bäumen nicht

    www.pc-typ.de

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    Code:
    #navigationv a {
        background: url(images/v.gif) no-repeat;
        display:block; width:184px; /* Linkbereich begrenzen */
      }
    als beispiel. navigationw hat dann ein w.gif hinterlegt.

    @ author

    im code kann ich zumindest keinen fehler sehen. du könntest
    testweise mal ganz oben eim img { border:0px; } einbinden.

    falls dies nicht hilft, dann poste mal nen link oder die ganze seite
    als zip gepackt - weil ohne grafiken können wirs nur schlecht
    nachvollziehen
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  6. #6
    HTML Newbie
    Registriert seit
    07.02.2009
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    jo das hab ich jetz auch gesehen aber ich versteh dann net warum auch noch als <img> einbinden? dann mach ich die listenpunkte als block und geb die dimensionen an dann spar ich mir das.
    Seh den Waldi vor lauter Bäumen nicht

    www.pc-typ.de

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    10.03.2008
    Ort
    berlin
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    hallo, danke für euren tipps:

    ich brauche die li id um den korrekten hover effekt für jede unterschiedliche grafik auszutauschen. leider hat das mit dem padding: o; nichts genutzt. ich habe es jetzt noch viel komplizierter gemacht und eine eigenes ie stylesheet geschrieben. jetzt funktioniert es in IE 6 aber nicht in IE 7:http://www.manfredgottert.de/test/index_neu.html
    Geändert von drefman (09.02.2009 um 14:53 Uhr)

  8. #8
    HTML Newbie
    Registriert seit
    07.02.2009
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    dieser IE regt mich so auf das glaubst gar net.
    zur not musst halt fürn IE auch nochn extra sheet machen
    Seh den Waldi vor lauter Bäumen nicht

    www.pc-typ.de

  9. #9
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    hm... also bis jetzt scheints so, als ob der ie des display:block nicht will...
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  10. #10
    HTML Newbie
    Registriert seit
    07.02.2009
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vertikale Navi mit Grafiken nicht korrekt im IE

    bei mir haut das schon hin, ich weiß jetz nur grad auch net was ich genau immer mach. das letzte horizontale menü das ich mit <li> und display: block; gemacht hab, hat funktioniert.
    Seh den Waldi vor lauter Bäumen nicht

    www.pc-typ.de

Ähnliche Themen

  1. UPDATE wird nicht korrekt ausgefhührt
    Von Alfons Reinbühl im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 31.05.2008, 20:26
  2. Antworten: 8
    Letzter Beitrag: 22.09.2007, 02:02
  3. Hintergrundproblem. CSS nicht korrekt?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.06.2007, 13:54
  4. Antworten: 9
    Letzter Beitrag: 23.07.2006, 14:00
  5. Bilder nicht korrekt dargestellt
    Von gast im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 8
    Letzter Beitrag: 14.12.2005, 16:47

Stichworte

Berechtigungen

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