zweispaltiges Layout ohne background-img im IE ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansicht
bild
code
container
darstellungsweise
eigentliche problem
einnehmen
geschiebe
hilfe
http
layout
legen
problem
rechten roten rand
rote teil
schriftgrad
spalten
strang
tatsache
test
-
Moin Leute,
ich brauch nochmal Hilfe beim Layout einer Seite für u.a. sehbehinderte Menschen. Das Layout sieht einen Rahmen um den zweispaltigen Content vor, wobei der obere und untere Rahmen Teil eines Bildes (nicht Hintergrund-Bild) ist. Diese skalieren auch schön mit, wenn der Schriftgrad vergrössert wird.
Das eigentliche Problem liegt in den seitlichen Rahmenteilen der faux-columns. Dort kann ich keine Hintergrundbilder verwenden, da diese nicht mitskaliert werden und so beim vergrössern die Lesbarkeit des Contents beeinträchtigen würden. Also habe ich die Ränder über das Border-Attribut realisiert, was im Firefox soweit auch gut funktioniert. Im IE werden die Spalten aber immer untereinander statt nebeneinander dargestellt. Kennt jemand einen Hack o.ä. mit dem die Darstellungsweise dem des FF entspricht ?
Die blauen Rahmen im Beispiel sind eigentlich im dort eingebundenen Bild vorhanden; der rote Teil (Content) will im IE nicht wie er soll:
<!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> <title>Test</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"> </head> <style type=\"text/css\"> body { background-color: #e4f5ff; font: 0.8em Arial; color: #498ec7; margin:0 auto; padding:0; text-align:center; width:77em; } </style> <body> <div id=\"container\" style=\"width :77em; border: 1px solid #000; padding: 0; margin: 0; float: left; text-align: left;\"> <div id=\"header\" style=\"border: 0.4em solid blue; border-bottom: 1px solid #000; color: blue\"> HeaderPicture </div> <div id=\"background\" style=\" float: left; width :77em;\"> <div id=\"columnone\" style=\"float: left; width: 9.2em; position: relative; border-left: 0.4em solid green; color: green\"> Menu <br>menu one <br>menu two </div> <div id=\"columnThree\" style=\"width: 66.22em; padding-left: 10em; border-left: 0.4em solid red; border-right: 0.4em solid red; color: red\"> Content <br>bla <br>blub <br>lirum <br>larum <br>löffelstiel <br>geh jetzt </div> </div> <div id=\"footer\" style=\"clear: both; border: 0.4em solid blue; border-top: 1px solid #000; color: blue\"> FooterPicture </div> </div> </body> </html>
Bin für jede Hilfe sehr dankbar, hab so ziemlich alles ausprobiert und weiss echt nicht mehr weiter... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hmmm ich sehe das Problem noch nicht so ganz.
Du sagst im IE sind die roten Teile Fehlerhaft: Der rote Teil des rechten Borders ist einfach nicht vorhanden bzw. wird nicht angezeigt...
Ist DAS das Problem? (Es skaliert alles hübsch mit ansonsten) -
Huh,
bei mir wird fängt der Content-div unter dem menu an (IE 7). Mit dem rechten roten Rand stimmt bei mir dafür alles; den könnte man bestimmt über ein bisschen em-Geschiebe wieder sichtbar machen. Das ist nicht das eigentliche Problem, sondern daß beide nicht auf gleicher Höhe liegen.
Welche IE-Version hast du ?
Danke fürs nachschauen übrigens
-
Ich verwende (oder verwende ihn eben nicht^^) den IE 7 und hier ist meine Ansicht im IE:
http://cuchullain.redio.de/images/temporaer/test.jpg
Falsch ist wohl, dass das Menu nicht im Div bleibt... nicht wahr?
Was hält dich ab das GANZE in einen zntrierten Div zu schmeissen wenn du die Seite eh zentriert haben willst?
Beitrag geändert: 3.4.2008 12:13:57 von cuchullain -
Ein Lößungsansatz: Bei \"columnone\" auch das Padding rein machen und alle Border in nochmals untergordnete Divs. Er zeigt sie nicht untereinander an, da der Rand mitberechnet wird und die Größe somit nicht mehr passt, beides nebeneinander anzuzeigen. Alternativ ausrechnen, wie viel Platz diese einnehmen.
-
Das ist ja strange,
bei mir sieht das ganze so aus :
http://gcsdriver.lima-city.de/layout.jpg
Die borders sind alle ok, nur liegt der content unter dem menu...
Wendet man float:left auf den content an, liegt dieser schön neben dem menu, bildet aber nicht mehr den linken Rand, welcher ja bis unten hin gezogen werden soll. Ich habs schon mit verschiedenen faux-column varianten probiert aber bis jetzt keine vernünftige Lösung gefunden.
Mein erster Versuch war, alles in ein grosses zentriertes div zu packen, das hat aber nix gebracht, darum dieses body&container -gezuppel, das ich im Netz gefunden hab. -
@trueweb:
Tatsache, alles zusammen ist ihm zu breit. Aber wenn ich das Menü per padding verschieben würde, würde es bei anderen Browsern (FF und meinem IE -> siehe Bild) nicht mehr stimmen.
Das Problem scheint zu sein, daß die Referenzpunkte nicht korrekt gesetzt werden. Beim IE liegt der Referenzpunkt des Content hinter dem Menu, beim FF genau auf dem R-Punkt des Menüs.
Gibt es eine Möglichkeit, diese für die beiden divs wie im FF in die gleiche Ecke zu legen ?
Beitrag geändert: 3.4.2008 14:50:56 von gcsdriver -
Wenn deine Versuche jeweils nicht mit dem anderen Browser funktionieren, würde ich eine Browserweoche integrieren (http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative).
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
