Gnusmas: Navi nach Hintergrundbild ausrichten

Hallo,

ich bin gerade dabei den Kopf einer Website zu erstellen, dabei soll er aus einem Logo und einer (horizontalen) Navigationsleiste bestehen. Das Problem dabei ist, dass das Logo einen (ebenfalls horizontalen) Strich quer über die ganze Seite hat, auf dem die Navi sein soll. Dabei soll es so aussehen, als ob die einzelnen Elemente aus der Linie "herauskommen", also bündig abschließen.
Im Moment habe ich es wie folgt gelöst:

  
...  
<body>  
   <div id="header">  
      <ul id="topNavi">  
         ...  
         <!-- Hier ist dann die Navi -->  
      </ul>  
   </div>  
   <!-- Dann kommt der Rest der Seite -->  
...  
</body>  

  
#header{  
   background-image:url("images/logo.png");  
   background-repeat:no-repeat;  
   background-position:left center;  
   margin: 45px 20px 20px;  
   height:108px /*Höhe des Logos*/  
}  
  
#topNavi{  
   list-style-type:none;  
   float:right;  
   margin:0;  
   padding:0;  
}  

Jetzt ist natürlich die Navi noch nicht auf dem Strich, sondern halt ein Stückchen darüber. Wenn ich das mit Hilfe von margin-Angaben dann anpassen, sieht es in jedem Browser anders aus. In dem einen ist es bündig und die anderen zeigen verschiedene Abstände von der Linie.

Wie würdet ihr das PRoblem lösen?

Grüße Gnusmas

  1. Om nah hoo pez nyeetz, Gnusmas!

    Ein Logo wäre für mich ein Bild, welches Inhalt transportiert, dies würde ich also als <img> einbinden. Dann hast du die Möglichkeit der absoluten Positionierung.

    Matthias

    --
    Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Ein Logo wäre für mich ein Bild, welches Inhalt transportiert, dies würde ich also als <img> einbinden. Dann hast du die Möglichkeit der absoluten Positionierung.

      Dank dir sehr, habs so gelöst.

    2. Ein Logo wäre für mich ein Bild, welches Inhalt transportiert, dies würde ich also als <img> einbinden. Dann hast du die Möglichkeit der absoluten Positionierung.

      gibt es eine Möglichkeit die Länge eines umgebenes div's an ein inneres anzupassen, wenn das inner absolut positioniert ist?

      Grüße

      1. Om nah hoo pez nyeetz, Gnusmas!

        gibt es eine Möglichkeit die Länge eines umgebenes div's an ein inneres anzupassen, wenn das inner absolut positioniert ist?

        imho nicht, aber das ist, so glaube ich, auch nicht das, was du möchtest. [Position richtig verwenden], [shrink to fit]

        Matthias

        --
        Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Danke das guck ich mir an!

        2. Hab mir deine Seite durchgelesen und nun eine Seite, die so aufgebaut ist:

            
          ...  
          <body>  
             <div id="container">  
                <div id="header">  
                    ...  
                </div>  
                <div id="content">  
                   ...  
                </div>  
             </div>  
          </body>  
          
          
            
          ...  
            
          #container{  
             position: relative;  
             ...  
          }  
            
          #header{  
             position:absolute;  
             top: 3em;  
             right: 1em;  
          }  
            
          #content{  
             margin-top:7em;  
          /* hier keine absolute positionierung */  
          ...  
          }  
          
          

          So wird es nun in jedem Browser richtig angezeigt nur nicht im IE. Da wird die margin-top-Angabe im #content-div ignoriert. Gibt dafür nen Workaround?

          Grüße

          1. Om nah hoo pez nyeetz, Gnusmas!

            So wird es nun in jedem Browser richtig angezeigt nur nicht im IE.

            welcher? alle? Quirksmodus?

            Matthias

            --
            Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. welcher? alle?

              Hab bisher nur den 8er ausprobiert, aber ich denke, wenn der es schon nicht kann....

              Quirksmodus?

              Strict

              1. Om nah hoo pez nyeetz, Gnusmas!

                Quirksmodus? Strict

                Quirksmodus?

                Matthias

                --
                Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
                1. Quirksmodus?

                  Also habe in der ersten Zeile

                    
                  <!-- --><?xml version="1.0" encoding="UTF-8"?>  
                  
                  

                  hinzugefügt und das PRoblem ist gelöst.

                  Danke dir.

                  1. hinzugefügt und das PRoblem ist gelöst.

                    Dafür wird jetzt von meiner Navigation im IE das list-style-image nicht mehr angezeigt. Soll ich das komplett neu überarbeiten, mit Bild und Link in einem li und float: left für das Bild?

                    1. Om nah hoo pez nyeetz, Gnusmas!

                      wie wäre es denn mit einem online-Beispiel?

                      Matthias

                      --
                      Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
                      1. wie wäre es denn mit einem online-Beispiel?

                        Hab noch keinen Webspace

                        1. Om nah hoo pez nyeetz, Gnusmas!

                          Hab noch keinen Webspace

                          lima-city.de

                          Matthias

                          --
                          Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
                          1. Hab mal ein Bild gemacht wie es aussehen soll

                            Hoffe es hilft

                            1. Om nah hoo pez nyeetz, Gnusmas!

                              Hoffe es hilft

                              wie soll es helfen, wenn es doch schon in der Vielzahl der Browser wie gewünscht aussieht?

                              Matthias

                              --
                              Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif