|
|||
Vertikal Zentriert und 100% breit
Hallo,
ich bin leider recht neu auf dem Gebiet und hab mich wohl an eine etwas zu Große Aufgabe gewagt - ein rein CSS Basiertes Layout ohne Tabellen. Leider komm ich einfach nicht weiter, alleine weil ich nicht genau weiß wo das Problem liegt. Vielleicht liest dass hier jemand der mir weiterhelfen kann. Hier 2 Links zum status quo und zu einem Bild wie es aussehen soll...später einmal http://zaggy.gmxhome.de/vert.htm http://zaggy.gmxhome.de/vert.jpg Im Firefox siehst aus als müsste ich nur noch ein wenig kämpfen, aber IE zerschiesst es total und ich habe keine Ahnung warum. PS: Ein Eis für den der mir das Problem verrät (also abgesehen davon das ich keine Ahnung habe) und mir raten kann, wie das Layout am besten aufbaue. PPS: Achja, die Höhe sollte 70% betragen und das Bild verzerrt mitskalieren, aber ich wär auch zufrieden wenn die Höhe = Höhe des Bildes ist. |
Sponsored Links |
|
|||
Einen kleinen möglichen Fehler hab ich schon entdeckt "Nicht unnötig Arbeit verursachen, wenn man schon um Hilfe bittet."
Hier also der Code des schon geposteten Links. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Die brillanten Dilletanten</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- html, body{ height:100%; width:100%; margin:0; padding:0; background-color:#4A100F} .box1{ position:absolute; top:13%; left:0%; right:0%; width:100%; min-height:74%; background-color:#800C0D;} .box2{ position:absolute; top:5%; bottom:5% left:0%; right:0%; width:100%; min-height:70%; border:none;} .oben{ position:absolute; top:0px; left:0px; width:100%; height:32px;} .unten{ position:absolute; bottom:0px; left:0px; width:100%; height:32px;} .brick{ position:absolute:; top:0px; left:0px; height:100%; width:141px;} --> </style> <!--[if gte IE 5.5]> <style type="text/css"> <!-- div{height:7%;} --> </style> <![endif]--> </head> <body> <div class="box1"> [img]pics/border_top.gif[/img]</img> <div class="box2"> [img]pics/wall.jpg[/img]</img> </div> [img]pics/border_bottom.gif[/img]</img> </div> </body> </html> |
Sponsored Links |
|
|||
Ich habs nur überflogen, aber was soll
Code:
<!--[if gte IE 5.5]> <style type="text/css"> <!-- div{height:7%;} --> </style> <![endif]--> Und warum soll das Bild mitskalieren? Die Mauer würde sich doch prima als Hintergrundbild eignen, das nur in der y-Achse wiederholt wird. |
|
|||
Den Wald vor lauter Bäumen nicht sehen...Danke Mann. *verlegegrinst*
Das war der Fehler warum der IE es total zerschossen hat. Soll natürlich 74% sein. Bleibt noch die Frage ob ich das Bild mit der Höhe des Fensters skalieren/Verzerren kann, oder ob ich die Höhe an die des Bildes anpassen muss. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Die brillanten Dilletanten</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- html, body{ height:100%; width:100%; margin:0; padding:0; background-color:#4A100F} .box1{ position:absolute; top:13%; left:0%; right:0%; width:100%; min-height:74%; background-color:#800C0D;} .box2{ position:absolute; top:5%; bottom:5% left:0%; right:0%; width:100%; min-height:70%; border:none;} .oben{ position:absolute; top:0px; left:0px; width:100%; height:32px;} .unten{ position:absolute; bottom:0px; left:0px; width:100%; height:32px;} .brick{ position:absolute:; top:0px; left:0px; height:100%; width:141px;} --> </style> <!--[if gte IE 5.5]> <style type="text/css"> <!-- div{height:74%;} --> </style> <![endif]--> </head> <body> <div class="box1"> [img]pics/border_top.gif[/img]</img> <div class="box2"> [img]pics/wall.jpg[/img]</img> </div> [img]pics/border_bottom.gif[/img]</img> </div> </body> </html> |
|
|||
Da bleiben noch mehr Fragen:
1) wenn du dem IE sagst, dass alle divs 74% hoch werden sollen, die jemals auf deiner Seite landen, bekommst du ein Problem. Sag es spezifischer. 2) Warum nimmst du die Mauer nicht als background-image mit einem repeat-y? 3) Das vertikale Zentrieren in Ehren, aber was soll passieren, wenn mal etwas mehr Content rein soll? Abschneiden? Mitwachsen? Kleinere Schrift? Scrollbar? -> Das ist am Ende das, was ein normales Browserfenster schon kann, und dein Bildschirm hat doch schon einen Gehäuserahmen. Da die Bildschirmfläche eh schon klein genug ist, warum dann die nutzbare Fläche noch weiter verkleinern? Bei mir steht der Bildschirm vertikal zentriert in meinem Gesichtsfeld. Das vertikal zentrierte Layout, einen Horizont quasi in den Schirm zu brennen, hat prinzipielle Nachteile für die Zugänglichkeit deiner Seite. Nutz doch lieber den ganzen Schirm und lass den einzelnen Elementen Luft zum Atmen. </schwaetz> |
|
|||
1) Danke. Dass mit der globalen DIV einstellung könnte die Lösung eines zuküfntigen Problems sein
2) Weil ich unwissend war/bin Danke, so dürfte es klappen. 3) Platzmangel ist Absicht, passt aber zum content. Und deine Bendenken über die Platzbschränkung versteh ich und teile sie auch eigentlich. Aber hier darf eine Ausnahme gemacht werden. Der Inhalt wird sich in Grenzen halten. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
divs vertikal zentriert ausrichten (Formular) | Momro | CSS | 5 | 21.02.2016 20:17 |
Text horizontal und vertikal auf Seite zentriert | web334 | CSS | 5 | 04.01.2015 14:00 |
Tabellenloses Layout - Horizontal 100% vertikal zentriert. Probleme :( | strohy | CSS | 8 | 23.02.2007 09:59 |
Bild vertikal zentriert in einem <div> ausrichten | wolfgke | CSS | 3 | 07.09.2006 17:12 |
Suche 3 spaltiges Layout, 80 % Breit, zentriert | LittleJoe | CSS | 4 | 24.07.2006 18:36 |