tilto: Datstellungsprobleme bei <div>

Hi,
ich habe folgende Seite: http://pastie.caboo.se/private/phx34dfgcaxykmz6azumw
und layout.css hat diesen inhalt: http://pastie.caboo.se/private/worvdztb7nv9ukqmuotq
Wenn ich mir die Seite im Firefox angucke und die Grösse des Fensters verkleinere stösst der Container irgendwann auf das Menü auf der linken Seite, und schiebt sich hinter die Menügrafik und den Text unter der Grafik. Dadurch wird der Text farbig hinterlegt. Gibt es eine Möglichkeit das zu umgehen wenn ich den Text unbedingt dort stehen lassen will (und zwar als Text, nicht als Grafik)?
Ein Ähnliches Problem ergibt sich beim IE: Wenn das Browserfenster eine gewisse Grösse unterschreitet wird der Container einfach unter das Menü gerückt.
Muss ich mein ganzs Design neu gestalten oder gibt es eine einfachere Möglichkeit (Die Seite in einem fest definierten Fenster öffnen möchte ich nicht)? Danke, Tilto

  1. ich habe folgende Seite:

    <html>

    <head>

    <div id="menue">
        <div style="text-align: center;">

    <a href="bla.html" onmouseover="button1.src='bilder/menue/menue1.jpg';" onmouseout="button1.src='bilder/menue/menue1_in.jpg';"> <img src="bilder/menue/menue1_in.jpg" style="border: 0px solid ; width: 96px; height: 58px;" alt="" name="button1" border="0"><br>Erstens!!<br></a>

    </div>
    </div>
       <style type="text/css">
       body { background-repeat: no-repeat; background-attachment: fixed; background-image: url('bilder/hintergrund.gif'); background-position: center »» }
       </style>
       <div style="text-align: center;">
       <div id="inhalt">
      <div id="topkurz">
      <h3>Herzlich Willkommen!</h3>
      </div>

      
    Dieses heillose, sich an keinen HTML-Standard haltende Chaos möchtest du erstmal umweltgerecht entsorgen und neu schreiben.  
      
    Dass du umständlich unnötig <div id="topkurz"><h3>Herzlich Willkommen!</h3></div> schreibst anstatt einfach <h3 id="topkurz">Herzlich Willkommen!</h3>, die <hn>-Elemente keine sinnvolle Reihenfolge haben, das Menü mit <br>-Text aufbaust statt mit <ul> wäre ja noch zähneknirschend hinzunehmen. Aber <head> nicht abzuschließen und mitten im (nicht deklarierten) <body>-Bereich einen <style>-Block fallen zu lassen - ein Hoch auf die Browserhersteller, dass sowas überhaupt angezeigt wird.  
      
    
    > Wenn ich mir die Seite im Firefox angucke und die Grösse des Fensters verkleinere stösst der Container irgendwann auf das Menü auf der linken Seite, und schiebt sich hinter die Menügrafik und den Text unter der Grafik.  
      
    Gib dem Container einen Innen- (padding) oder Außenabstand (margin) in der Breite des Menüs.  
    
    
    1. Danke für die Antwort!
      Dass der Code so übel aussieht hängt damit zusammen dass ich erst seit 4 Tagen html/css mache, und ihn ausserdem zusammengestaucht habe um nur das wie ich meine Notwendige zu posten.
      Die Tipps zum Formatieren werde ich sofort umsetzen.
      Was kann ich denn machen um die Seite auch im IE richtig darzustellen?

      1. Dass der Code so übel aussieht hängt damit zusammen dass ich erst seit 4 Tagen html/css mache, und ihn ausserdem zusammengestaucht habe um nur das wie ich meine Notwendige zu posten.

        gehst du auch zum tierarzt, und bringst nur das bein der katze und das halsband mit, wenn sie hinkt?

        erst 4 Tage ist keine Entschuldigung, höchstes eine schlechte Ausrede

        ich empfehle auch: zurück zum Reißbrett:
        http://de.selfhtml.org/html/allgemein/grundgeruest.htm

        1. Ich dachte es sei alles im code vorhanden was für mein problem relevant ist.
          Ich wollte mich nicht dafür entschuldigen dass ich so nen Code gepostet habe, sondern nur erklären warum er so aussieht wie er aussieht. Wenn jemandem aufgrund meines Posts der Computer explodiert wäre, dann würde ich mich entschuldigen :)

          1. Wenn jemandem aufgrund meines Posts der Computer explodiert wäre, dann würde ich mich entschuldigen :)

            Hey! Meine Augen und mein Hirn sind wohl gar nix wert? :P

            1. Kuckuck,

              Wenn jemandem aufgrund meines Posts der Computer explodiert wäre, dann würde ich mich entschuldigen :)
              Hey! Meine Augen und mein Hirn sind wohl gar nix wert? :P

              Jeder, der Blindlinks Links folgt, haftet für dadurch entstandene schäden SELF.  :)

              Grüße aus H im R an Steel,
              Engin

          2. Ich wollte mich nicht dafür entschuldigen dass ich so nen Code gepostet habe, sondern nur erklären warum er so aussieht wie er aussieht.

            wenn du mit diesem wagen in die werkstatt kommst
            http://www.usa-reise.net/galerie/albums/userpics/10092/80_schrottauto.jpg
            und fragst "Warum fährt der nicht?" kommt das ungefähr aufs selbe raus

            dein code ist schlichtweg voller fehler - jeder fehler wird von der fehlerkorrektur eines browsers anders intepretiert

            beispiel

              
            <strong>text <em>text</strong> text</em>  
            
            

            der firefox macht das hier draus:

              
            <strong>text <em>text</em></strong><em> text</em>  
            
            

            ein andere browser das hier

              
            <strong>text <em>text</em></strong> text  
            
            

            und wieder ein andere vielleicht das hier

              
            <strong>text text</strong> text  
            
            

            wie soll man also einen Fehler finden, bei dem man in jedem Browser von unbekannten Voraussetzungen ausgehen muss?

      2. Dass der Code so übel aussieht hängt damit zusammen dass ich […] ihn ausserdem zusammengestaucht habe um nur das wie ich meine Notwendige zu posten.

        Das erklärt zwar nicht den <style>-Block mitten im Inhalt, aber ich werde gnädig über die Rauchwolken aus meinem Rechner hinwegsehen ;->

        Was kann ich denn machen um die Seite auch im IE richtig darzustellen?

        Ich hatte es so verstanden, dass dies das gleiche Problem wäre, nur bei anderen Abmessungen auftreten würde. Falls du meintest, dass #inhalt dann #menue folgt (und nicht, dass eines das andere Element verdeckt), dann liegt das höchstvermutlich einfach daran, dass du #inhalt eine feste Breite geben hast - und wenn nicht genug Platz für zwei Elemente nebeneinander ist, dann müssen sie eben untereinander stehen. Daran kannst du nichts ändern, außer, #inhalt keine oder eine relative Breite (d.h. in Prozent) zu geben.
        Die Nutzung von px bzw. absoluten Maßen allgemein verlangt etwas Fingerspitzengefühl, da die Umgebung, in der die Seite angezeigt wird, also das Browserfenster, im Unterschied zu beispielsweise einem Briefbogen eben gerade keine festen, verlässlichen Maße hat - das ist letztlich mit der ursprüngliche Witz an dem ganzen HTML-Tralala, unterschiedlichste Ausgabeformate zu unterstützen.

        Noch zweieinhalb Tipps zur Arbeit mit CSS: Keinen IE vor Version 7 verwenden, der macht viel zu viel Bockmist, und grundsätzlich im standardkonformen Modus arbeiten, andernfalls machen andere Browser hier und da auch Bockmist (lies: Dinge, die im CSS-Standard so nicht vorgesehen sind).
        Für deine HTML- und CSS-Übungen: http://validator.w3.org und http://jigsaw.w3.org/css-validator/. Korrekter Code ist das Fundament für korrekte Funktion.

        Du kannst Code übrigens auch direkt im Beitrag ablegen. Noch hilfreicher ist es zudem immer, auch eine Adresse zu haben, an der man sich das Problem im Browser anschauen kann.