Ankündigung

Einklappen
Keine Ankündigung bisher.

HTML/CSS Problem mit floating und 100%

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • #16
    Ich habe es jetzt gelöst bekommen
    Die Lösung heißt min-width

    Code:
    <html lang="en">
    
        <head>
            <meta charset="utf-8" />
            <title>New</title>
            <style type="text/css">
    
                .logo {
                    float: left;
                    width: 260px;
                    height: 50px;
                    background: green;
                }
    
                .nav-main {
                    background: red;
    				min-width:500px;
                }
    
                .nav-sub {
                    background: blue;
    				min-width:500px;
                }
    
            </style>
        </head>
    
        <body>
            <div class="header">
                <div class="logo">
                    .logo
                </div>
                <div class="nav-main">
                    .nav-main
                </div>
                <div class="nav-sub">
                    .nav-sub
                </div>
            </div>
    
        </body>
    
    </html>
    Vielen Dank für eure Hilfe

    Kommentar


    • #17
      min-width ist in älteren browsern noch nicht definiert. ie 6 und 7 dürften dir da probleme bereiten

      Kommentar


      • #18
        Zitat von MikO Beitrag anzeigen
        min-width ist in älteren browsern noch nicht definiert. ie 6 und 7 dürften dir da probleme bereiten
        Der 7er geht... Nur bei dem 6er musst Du mit Javascript dynamisch auf die CSS-Eigenschaft zugreifen. Dazu: http://jeenaparadies.net/weblog/2007...dth-expression

        Liebe Grüße

        Kommentar


        • #19
          Oft reicht auch, über einen Hack für den IE eine feste Breite/Höhe zu vergeben. Der IE drückt bei größeren Imhalt dann das Element auf.
          [COLOR="#F5F5FF"]--[/COLOR]
          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
          [COLOR="#F5F5FF"]
          --[/COLOR]

          Kommentar


          • #20
            Keine Ahnung, ob ich das richtig interpretiere, aber:

            tr0ys Lösung ist da robuster.
            HTML-Code:
            <!DOCTYPE html>
            
            <html lang="en">
            
                <head>
                    <meta charset="utf-8" />
                    <title>New</title>
                    <style type="text/css">
            
                        .logo {
                            float: left;
                            width: 260px;
                            height: 50px;
                            background: green;
                        }
            
                        .nav-main {
                            background: red;
                            height: 80px;
            		margin-left: 260px;
                        }
            
                        .nav-sub {
                            background: blue;
                            height: 80px;
            		margin-left: 260px;
                        }
            
                    </style>
                </head>
            
                <body>
                    <div class="header">
                        <div class="logo">
                            .logo
                        </div>
                        <div class="nav-main">
                            .nav-main
                        </div>
                        <div class="nav-sub">
                            .nav-sub
                        </div>
                    </div>
            
                </body>
            
            </html>

            Kommentar

            Lädt...
            X