Hallo Community,
ich habe einen ersten Anlauf mit einem reinen CSS Template gewagt, stosse jedoch auf Probleme bei der Umsetzung. Problematisch ist die CSS Klasse "page_content"
Anbei mein HTML Code und der dazugehörige CSS Code.
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<div id="page_center_help">
<div id="page_main">
<div id="page_leftborder"></div>
<div id="page_innerbox">
<div id="page_header"></div>
<div id="page_graphic"></div>
<div id="page_menu"></div>
<div id="page_content">
<div id="page_content_left"></div>
<div id="page_content_right"></div>
</div>
<div id="page_footer"></div>
</div>
<div id="page_rightborder"></div>
</div>
</div>
<body>
</body>
</html>
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url(../gfx/bg.gif);
height: 100%;
margin: 0;
padding: 0;
}
#page_center_help {
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
overflow: visible;
}
#page_main {
width: 780px;
height: 100%;
background-color: #FDFDF2;
text-align: left;
position: absolute;
margin-left: -390px;
left: 50%;
}
#page_leftborder {
width: 13px;
height: 100%;
background-image: url(../gfx/left_border.gif);
background-repeat: no-repeat;
position: relative;
float: left;
}
#page_innerbox {
width: 754px;
height: 100%;
position: relative;
float: left;
}
#page_rightborder {
width: 13px;
height: 100%;
background-image: url(../gfx/right_border.gif);
background-repeat: no-repeat;
position: relative;
float: left;
}
#page_header {
width: 754px;
height: 32px;
background-image: url(../gfx/header_bg.gif);
background-repeat: repeat-x;
text-align: left;
}
#page_graphic {
width: 754px;
height: 111px;
background-color: #CECECE;
text-align: left;
}
#page_menu {
width: 754px;
height: 26px;
background-image: url(../gfx/bg_menu.gif);
text-align: left;
border: 1px #FFFFFF;
border-style: solid none none none;
}
#page_content {
width: 754px;
height: 100%;
background-color: #EAEAEA;
text-align: left;
border: 1px #FFFFFF;
border-style: solid none none none;
}
#page_content_left {
width: 580px;
height: 100%;
background-color: red;
text-align: left;
position: relavite;
float: left;
}
#page_content_right {
width: 173px;
height: 100%;
background-color: #EAEAEA;
text-align: left;
position: relative;
float: left;
border: 1px #D0D0D0;
border-style: none none none solid;
}
#page_footer {
width: 754px;
height: 26px;
background-image: url(../gfx/bg_footer.gif);
background-repeat: repeat-x;
position: relative;
}
Kann mir hier jemand helfen? Hab ich hier einen groben Denkfehler gemacht?
Vielen Dank.
Claudio
Claudio.Somaini schrieb
ich habe einen ersten Anlauf mit einem reinen CSS Template gewagt, stosse jedoch auf Probleme bei der Umsetzung. Problematisch ist die CSS Klasse "page_content"
Was ist denn genauer das "Problemische" an der Klasse? Kann ich nicht wirklich erkennen.
Claudio.Somaini schrieb
(...)
#page_content_left {
width: 580px;
height: 100%;
background-color: red;
text-align: left;
position: [b]relavite[/b];
float: left;
}
da ist ein Tippfehler (s/relavite/relative/), macht aber nicht wirklich was aus (entweder position: relative, oder float: left, glaub beides zusammen macht nicht viel Sinn).
Gruss,
[/b]
Danke für die schnelle Antwort.
Das "problematische" sieht man erst beim öffnen der Seite im Browser. Die Klasse sollte eine Höhe von 100% haben. Dies hat Sie auch. Da jedoch im oberen Bereich (page_header, page_graphic, page_menu) mit absoluten Grössen gearbeitet wird, werden die 100% am Ende der Seite nochmals um die absoluten Werte "erweitert".
Ist nicht ganz einfach zu erklären. Am besten wäre wenn du dir die Seite kurz im Browser anschaust.
Gruss Claudio
Hallo Claudio,
kopier mal deinen Code von diesem Forum in einen Texteditor... sorry aber ich tu mir diese Arbeit nicht an und mach den lauffähig (nicht deine Schuld.. immer noch ein unbehobener und oft bemängelter Bug vom Forum #evil# ), drum stell das ganze doch bitte mal lauffähig online
lg georg
Hallo,
ich komm einfach nicht weiter. Habe das ganze jetzt mal ins Web gestellt damit Ihr mir vielleicht besser helfen könnt.
http://www.mindstorm.ch/tpl/template.htm
Gruss Claudio
Claudio.Somaini schriebDas "problematische" sieht man erst beim öffnen der Seite im Browser. Die Klasse sollte eine Höhe von 100% haben. Dies hat Sie auch. Da jedoch im oberen Bereich (page_header, page_graphic, page_menu) mit absoluten Grössen gearbeitet wird, werden die 100% am Ende der Seite nochmals um die absoluten Werte "erweitert".
Wenngleich es auch nicht das ist was Du willst, so ist es doch genau das was Du anweist.
Wenn Du oben Bereiche mit einer festen Größe hast und darunter einen Bereich dem Du angibst, dass er 100% sein soll, dann muss es ja unten überstehen, da Du ja insgesamt 100%+feste Werte programmiert hast.
Das hab ich mir auch gedacht. Doch leider kenne ich keinen Weg das zu umgehen. Ich habe auch schon mit negativem margin-bottom probiert. Das scheint jedoch nur im Firefox zu funktionieren (jedoch nur bedingt, die Fusszeile wird abgeschnitten).
Sonst noch eine Idee die zur Lösung beiträgt?
Hi,
eine Möglichkeit wäre zu versuchen page_content in der innerbox ganz oben auf der Seite anfangen zu lassen, aber dann ein padding-top von 169px zu haben, so dass der Inhalt doch erst nach den Graphiken oben erscheint.
Da musst du halt praktisch alles, was darüber kommt mit position:relative angeben: die oberen Dinge (header, graphik, menu), die kannst du ja auch gleich in ein <div> paken und das dann relative machen.
Habs nicht getestet, aber so machen wir das oft für die linke Navigationsleiste.
Gruss,
Ernesto
Hallo Baschny,
vielen Dank für die Anregung. Doch auch das führte leider nicht zum gewünschten Erfolg. Das Problem blieb bestehen.
Weis denn wirklich niemand wie das geht? Ist das Layout denn ein solcher "Exot"?
Hallo Claudio,
Du könntest auch den Footer mit:
position: absolute;
bottom: 0px;
left:0px;
height: 26px;
am unteren Rand festtackern.
Dann könntest Du die Höhe von 100% überall weglassen, so dass die Höhe durch Deinen Inhalt bestimmt wird.
Damit die Hintergrundgrafiken der linken und rechten Ränder dann noch bis unten gehen, solltest Du alles (sowohl page_main, die Ränder und auch den Footer) in einen umschließenden div-container stecken und die Hintergrundgrafiken diesem Container zuweisen.
CU...Starraider
Hallo Starrider,
ich hab den Footer einmal ganz unten auf der Seite festgemacht und dann das ganze mit einem negativen margin-bottom verschoben. Nun sieht es im Firefox genau so aus wie ich es haben möchte. Leider macht der IE mal wieder etwas ganz anderes. Könntest du dir das mal unter:
http://www.mindstorm.ch/tpl/template.htm
anschauen und mir evtl. einen Input geben wie ich die Darstellung auch im IE so hinbekomme wies im Firefox momentan aussieht?
Vielen Dank.
Claudio
So, endlich. 8-) 8-)
Ich hab das Layout jetzt mal so hinbekommen wie ich das gerne hätte. Zumindest sieht es unter IE 6.0 und Firefox jetzt so aus wie ich mir das vorgestellt habe.
Ich bin mir aber nicht sicher, ob dies so "korrekt" umgesetzt wurde oder ob ich hier nur eine Umgehungslösung erarbeitet habe.
Für Feedback wäre ich dankbar.
Claudio
im IE 6.0 hats bei mir ganz unten einen ca 2px hohen Balken.. sonst schauts ganz gut aus 😉
btw bei solchen sachen ist das forum xhtmlforum.de ganz super
Danke! auch für den Link.
An diesem kleinen Fehler arbeite ich noch, versuche den noch einzugrenzen.
Wenn ich dass dann habe, werd ich mir wohl eine Haartönung kaufe müssen, zuviele graue Haare hab ich bei dem Layout gekriegt...
Aber der Lerneffekt war enorm. #giggle#
Hi Claudio,
wie ich sehe, machst Du noch immer fleißig Gebrauch von Deinen "height:100%;" :o
Mmmmhhh...ich würde mal vermuten, dass Du damit spätestens wenn Du Inhalt einfügst Probleme bekommst! 😢
Käme aber natürlich auf einen Versuch an... 😉
Die zwei "seltsamen" Pixel könnten von einem Rundungsfehler des Webbrowsers kommen. Ich habe mal irgendwo gelesen, dass man immer 99,9% statt 100% verwenden soll, da es sonst zu entsprechenden "Ungenauigkeiten" kommen kann. 😉
Aber sonst sieht das doch jetzt echt prima aus!!! 8-) 8-)
Tschau...Starraider