zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit simplen CSS Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.07.2009, 19:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2009
Beiträge: 1
sidewayz befindet sich auf einem aufstrebenden Ast
Standard Probleme mit simplen CSS Layout

Hallo zusammen,

ich hab ein paar Probleme mit einem relativ simplen CSS Layout, zu finden hier:

Seitentitel

Quelltext:

Code:
<body>
      <div style="width:450px; height: 98%; margin: 0 auto; background-color:#060606; border: 1px solid #000000;">

           <div style="width:400px; margin:auto; margin-top:15px; margin-bottom:15px; text-align:left;">Logo</div>
           <div style="width:400px; height:100px; background-color:#454545; margin:auto;"></div>
           <div style="width:400px; margin: auto;">
           <div style="width:200px; height:350px; background-color:#45F543; float:left; text-align:left; padding:5px;">
                <div style="height:95%;">
                     Testtext <br><br><br><br><br><br><br><br><br><br>
                     Testtext <br><br><br><br><br><br><br><br><br><br>
                     Testtext <br><br><br><br><br><br><br><br><br><br>
                     Testtext <br><br><br><br><br><br><br><br><br><br>fd
                </div>
                <div style="text-align:right; height:10px; border: 1px solid #000000;">BUTTON</div>
           </div>
           <div style="width:200px; height:100px; background-color:#Fb452F; float: right; text-align:left; padding:5px;">Testtext</div>
           <div style="width:200px; height:100px; background-color:#ABFFA2; float: right; text-align:left; padding:5px;">Testtext</div>
           <div style="width:200px; height:100%; background-color:#BBAFF2; float: right; text-align:left; padding:5px;">
                <div style="height:90%;">
                     Testtext
                </div>
                <div style="text-align:center; height:10px; border: 1px solid #000000;">BUTTON</div>
           </div>
           </div>

      </div>
</body>
Im IE8 wird die Seite eigentlich fast korrekt angezeigt, die lilane Box rechts unten soll aber so lang wie die Box Links werden, also automatisch verlängert werden. Die oberen beiden bleiben beide 100px hoch. Gucke ich mir jetzt die Seite im Firefox an stimmt überhaupt nichts mehr, die beiden Spalten sind nicht nebeneinander, die Linke Spalte wird nicht verlängert usw.

Erkennt da jemand auf anhieb ein Problem?

Cya

Geändert von sidewayz (10.07.2009 um 19:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.07.2009, 21:49
Benutzerbild von chungo
a.Webdesign:focus
neuer user
 
Registriert seit: 20.11.2007
Ort: Mannheim
Beiträge: 7
chungo befindet sich auf einem aufstrebenden Ast
Standard

Moin,

IE8 rendert deine Seite im Quirksmode und das führt zu Komplikationen. Ergänz deine Seite um einen korrekten Doctype, damit auch IE8 im standardscompliant mode rendert - ohne den Doctype fällt er in den Quirksmode, der ein anderes Boxmodell verwendet:

DOCTYPE-Switch und seine Auswirkungen
Quirks mode

Danach schaust du dir das Padding der kleineren Boxen nochmal an. Du verwendest 200px breite Boxen mit jeweils 5px Padding, macht daher 2x 5px Padding links und rechts und die Boxen erhalten eine Breite von 210px - daher funktioniert auch dein Float nicht und "bricht um" - jetzt auch im IE8.

Danach meld dich nochmal.

Viele Grüße!

PS: Überlege dir auch, ob du nicht vielleicht Klassen, IDs und externe Stylesheets verwenden möchtest
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
Layout: Tabelle -> CSS | ohne Schönheitsfehler? Knickedi CSS 20 05.08.2006 03:18
Layout Probleme SchwarzerMagier CSS 18 01.08.2006 14:06
CSS Layout mit abgerundeten Ecken dimension CSS 3 17.04.2005 19:05
CSS = Bug? : Einfaches Layout nicht möglich? trequ CSS 16 14.09.2004 18:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:46 Uhr.