|
|||
Divs per float positionieren - Problem mit IE
*Problem gelöst - siehe Ende*
Hallo zusammen, ich habe ein Problem mit der Anordnung von drei Div´s, die per float nebeneiander dargestellt werden sollen (drei Spalten). Im Firefox sieht alle genauso aus wie ich es mir vorgestellt habe, nur der IE (6) macht hier irgendwie Probleme, indem er das letzte der drei Divs (.banner_rechts) unter die anderen "schiebt". 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" /> <style type="text/css" media="screen"> html { height:100%; } body { height:100%; margin:0 0 0 0; padding:0 0 0 0; background-color:white; font-family:Arial, Helvetica, sans-serif; font-size: .8em; color:red; } .banner { width:100%; height:30%; background: url(bilder/sthg.jpg); } .banner_links { height:100%; width:25%; background: url(bilder/v_oben.jpg); background-repeat:repeat-x; background-position:bottom; background-color:#dcdcdc; float:left; } .banner_links .linke_ecke { height:100%; background: url(bilder/x_rot.jpg); background-repeat:no-repeat; background-position:bottom left; } .banner_mitte { text-align:center; width:50%; height:100%; background: url(bilder/v_oben.jpg); background-repeat:repeat-x; background-position:bottom; background-color:#ababab; float:left; } .banner_logo { width:282px; height:108px; background: url(bilder/x-0-banner.jpg); background-repeat:no-repeat; background-position:center; background-color:grey; } .banner_rechts { width:25%; height:100%; background: url(bilder/v_oben.jpg); background-repeat:repeat-x; background-position:bottom; background-color:#dcdcdc; float:right; } .banner_rechts .rechte_ecke { height:100%; background: url(bilder/x_rot.jpg); background-repeat:no-repeat; background-position:bottom right; text-align:right; } .content_links { width:20%; height:70%; float:left; background: url(bilder/rand_links.jpg); background-repeat:repeat-y; background-position:left; } .content_mitte { width:60%; height:70%; float:left; background-color:#efefef; } .content_rechts { width:20%; height:70%; background: url(bilder/rand_rechts.jpg); background-repeat:repeat-y; background-position:right; float:right; } </style> <title>:: Noch nix ::</title> </head> <body> <div class='banner' align='center'> <div class='banner_links' align='left'> <div class='linke_ecke'></div> </div> <div class='banner_mitte' align='center'> <div class='banner_logo'></div> </div> <div class='banner_rechts' align='right'> <div class='rechte_ecke'></div> </div> </div> <div class='content_links'> links </div> <div class='content_mitte'> mitte </div> <div class='content_rechts'> rechts </div> </body> </html> Vielen Dank schonmal, Fluppi Geändert von fluppi (20.03.2008 um 14:24 Uhr) |
Sponsored Links |
|
||||
So spontan würd ich sagen: Wer Floatet muss auch Clearen.
Schau mal in den FAQ vorbei und schau dir den Punkt 2 an! Gruß Timo
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4 |
Sponsored Links |
|
|||
wenn du es noch nicht hinbekommen hast dann probiere doch folgendes
lasse das div mit der .banner weg was die 3 oberen divs einschliesst. du brauchst diese divs nicht extra nochmal ausrichten mit align='center' gebe ihnen einfach eine id wo du diese sachen belegst z.b so #mainleft { width:33%; height: 50%; float:left; background:#666; } #mainright { width:33%; height: 50%; float:left; background:#000; } #maincenter { width:34%; height: 50%; float:left; background:#999; } das müsste wunderbar funktionieren |
|
|||
Danke schonmal für die Antworten
@rosa schwarz Das Div .banner dient zusätzlich zur Darstellung einer Bildes (ergibt einen Rahmen). Vielleicht baue ich auch nochmal alles etwas anders - wobei es ja eigenlich schon fertig wäre.. gäbe es den IE nicht^^ @timo Habe da nochmal ein bissl rumprobiert, ließ sich das Problem dadurch nicht lösen (wobei ich nicht ausschließe, daß ich alles richtig verstanden habe ) Wenn ich die Breite bei einem den drei oberen Divs (.banner_links .banner_mitte .banner_rechts) nur um einen Prozent verringere, passt es mit der Anordnung. Allerdings ergibt es dann (korrekterweise) eine kleine Lücke, was nicht wirklich Sinn macht.. |
|
|||
Leider sieht es bei mir nicht aus wie es sein soll (wenn ich es so richtig verstanden habe )
Ich habe mal ein Bild hochgeladen wie es mit (unfertigen) Hintergundgrafiken aussieht: Bildchen zum Anschauen Genau wie im Quelltext oben hängt der rechte Teil das Banners unter den anderen -immerhin auf der richtigen Seite |
|
|||
Hi,
versuch mal folgendes: Code:
.banner_mitte { text-align:center; width:50%; height:100%; background: url(bilder/v_oben.jpg); background-repeat:repeat-x; background-position:bottom; background-color:#ababab; float:left; } Versuch es erstmal ohne die zwei Werte wenn das nicht geht. Dabei müßtest auch die Anordnung der DIV's im Quelltext ändern, das mittlere DIV muß ans Ende. Gruss Ronny EDIT: Bei Code:
content_mitte { width:60%; height:70%; float:left; background-color:#efefef; }
__________________
Renten- oder Lebensversicherung gekündigt? Geändert von gernegross (20.03.2008 um 11:30 Uhr) |
|
|||
Ich habe die Seite mit Bildern hochgeladen: Link zur Seite
(Firefox 2.0.0.12 richtig, IE 6 falsch) 1. Edit: @gernegroß: die Divs auf der rechten Seite werden bei mir dadruch beide nicht mehr richtig dargestellt 2. Edit: die roten Xe auf der linken und rechten Seite sind Platzhalter für abgerundete Ecken Geändert von fluppi (20.03.2008 um 12:00 Uhr) |
|
|||
Hi,
ich meinte das so: :: X-0 - Übersicht :: Weiß nur noch nicht welcher Bug das vom IE ist der die Abstände zwischen den DIV zustande bringt. Zumindest hat es etwas mit den height-Angaben zutun. Gruss Ronny Edit: OK die lücken kommst so weg: Code:
* html .banner_links {margin-right:-3px;} In der Online Version hab ich das schon geändert.
__________________
Renten- oder Lebensversicherung gekündigt? Geändert von gernegross (20.03.2008 um 13:02 Uhr) |
Sponsored Links |
|
|||
Perfekt, genauso passt es!
-vielen Dank für die zahlreichen Antworten und die rasche Hilfe euch allen! Für die "Nachwelt" zum anschauen: Vorher (Fehler im IE): Klick mich Nachher (so sollte es aussehen):Klick dich Viele Grüße, Fluppi *freut sich* Geändert von fluppi (20.03.2008 um 14:23 Uhr) Grund: Link eingefügt |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem der überlagernden DIVs | gerrit87 | CSS | 24 | 01.07.2011 19:33 |
2 DIVS richtig positionieren | Pari | CSS | 0 | 13.06.2009 21:22 |
So langsam bekomme ich die Krise mit den DIVs | Thuroc | CSS | 12 | 12.11.2007 15:25 |
Großes Problem mit Positionieren von DIVs (bzw. background-images) | luzero | CSS | 15 | 20.08.2006 15:10 |
Problem: 3 Div's horizontal positionieren | Krieju | CSS | 2 | 07.05.2004 18:00 |