nicht angemeldet
zentrieren und fixe bereiche
suitHallo zusammen,
ich hab da ne Idee von einer Website die ich aber nicht umgesetzt bekomme.
Die Seite soll einen fixierten Head und Footer bekommen. Beide sollen die gleiche feste Breite bekommen.
Der Head soll oben und der Footer unten ohne Abstand am Browserfenster anliegen.
Unter Head und Footer soll der Seiteninhalt mit der selben Breite wie die Beiden angezeigt werden, per padding wird der Seiteninhalt dann oben und unten so erweitert, dass kein Text hinter dem Head und Footer verschwindet (sprich der Seiteninhalt soll als minimale Höhe die Höhe des Browserfensters haben und somit scheinbar oben mit dem Head und unten mit dem Footer abschließen).
soweit ist das alles auch nicht wirklich ein Problem, was mir allerdings Kopfzerbrechen bereitet, ist dass ich das Ganze auch noch im body zentrieren möchte.
Einfach ausgedrückt ich bekomme es einfach nicht hin ein zentriertes Layout mit fixierten Bereichen und einem scrollbaren Bereich zu bauen.
Ach ja bevor ich es vergesse, dass ganze soll auch im IE6 laufen.
Kann mir da jemand weiterhelfen?
Gruß Bastian
-
Hallo Bastian,
vielleicht helfen dir folgende Links weiter.
http://www.css4you.de
genauer noch: http://www.css4you.de/wslayout1/ex0009.htmlund zum scrollen innerhalb eines divcontainers würde ich hier weiter suchen.
http://www.google.de/search?hl=de&q=scrollen+css&meta=Viel Erfolg.
Gruß,
Alex.-
danke alex für die links, leider helfen diese mir nicht weiter.
wahrscheinlich hab ich mich zu unklar ausgedrückt
»»zum scrollen innerhalb eines divcontainers würde ich hier weiter suchen.
das ist genau das, was ich mit meinem per position: fixed fixiertem head und footer vermeiden will. wenn die seite im browser erscheint und das Browserfenster nicht groß genug ist soll kein scrollbalken innerhalb der site bzw. des div´s das den text enthält erscheinen. sondern man benutzt den standard scrollbalken des browsers.gruß bastian
-
-
Ach ja bevor ich es vergesse, dass ganze soll auch im IE6 laufen.
mit validem quelltext kein problem
Kann mir da jemand weiterhelfen?
die eigenschaft "margin" kombiniert mit dem wert "auto" wird dir helfen können [1]
wenn ich "fixe" bereiche richtig verstanden habe und du damit eigentlich definierte bereiche meinst und nicht mit position: fixed; positionierte bereiche
-
die eigenschaft "margin" kombiniert mit dem wert "auto" wird dir helfen können [1]
danke, aber das ist mir ein begriff, mit dem zentrieren per css habe ich kein problem
wenn ich "fixe" bereiche richtig verstanden habe und du damit eigentlich definierte bereiche meinst und nicht mit position: fixed; positionierte bereiche
doch doch, ich meinte mit position: fixed positionierten head und footer. sorry hab mich da wohl etwas unklar ausgedrückt.
mit position: fixed und dem entsprechenden workaround für den alten IE kenn ich mich auch aus.
mein problem besteht darin diese beiden möglichkeiten zu kombinieren um innerhalb der site keine scrollbalken zu haben sondern den standart scrollbalken des browsers zu benutzen.
-
-
finde es verdammt schwierig das ganze zu beschreiben darum sehr kurzer einblick in das grobe html raster das ich haben will.
<body>
<div id="content">
dieses div soll dazu dienen den gesammten inhalt zu zentrieren und ggf. dafür sorgen, dass fals der seiteninhalt kleiner ist als das
browserfenster trotzdem die gleiche background-color wie im seiteninhalt zu sehen ist und nicht die im body definierte background-color.<div id="head">
dieses div soll mit position: fixed an den oberen bildschirmrand gesetzt werden
</div><div id="footer">
dieses div soll mit position: fixed an den unteren bildschirmrand gesetzt werden
</div><div id="seiteninhalt">
dieses div soll dann den text bzw. den seiteninhalt enthalten und durch den standard scrollbalken des browsers scrollbar sein
</div></div>
</body>weniger macht mir das erstellen der mit position: fixed fixierten bereiche noch das allgemeine zentrieren einer seite probleme. nur bekomme ich beides einfach nicht zusammen gebracht.
gruß bastian
-
weniger macht mir das erstellen der mit position: fixed fixierten bereiche noch das allgemeine zentrieren einer seite probleme. nur bekomme ich beides einfach nicht zusammen gebracht.
ggf willst du garnicht mit position fixed arbeiten - vielleich suchst du auch sowas:
http://ryanfait.com/sticky-footer/warum in deinem quelltext der inhalt nach dem footer kommt ist mir allerdings schleierhaft
-
hallo suit,
warum in deinem quelltext der inhalt nach dem footer kommt ist mir allerdings schleierhaft
das hab ich einfach schnell eingegeben ohne wirklich drüber nachzudenken
den footer unten und den head oben hin zu positionieren ist auch kein problem.
ich will nur das
http://de.selfhtml.org/css/layouts/fixbereiche.htm
mit dem hier
http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm
verbinden und das ganze soll im IE6 auch laufen
-
verbinden und das ganze soll im IE6 auch laufen
wie wärs mit javascript?
mit "javascript position fixed" findest du in der suchmaschine deiner wahl ausreichend beispiele - oder alternativ auf die fixierung im ie6 ganz verzichten - die seite bleibt bedienbar, einige komfortfeatures sind weg
im übrigen: position fixed macht deine seite potentiell auf kleinen geräten mit kleinen displays mit geringer auflösung und kleinem browserviewport (zb. nintendo ds mit opera mini) unbedienbar
-
wie wärs mit javascript?
wer den IE6 hat, hat meistens auch die javascripts ausgeschaltet und dann kommt die nervige warnung, für mich keine alternative.
auf die fixierung im ie6 ganz verzichten - die seite bleibt bedienbar, einige komfortfeatures sind weg
leider nicht ganz so einfach, da ich das padding des scrollbaren bereiches sehr hoch setze. sieht das ganze dann im IE6 sehr unschön aus
im übrigen: position fixed macht deine seite potentiell auf kleinen geräten mit kleinen displays mit geringer auflösung und kleinem browserviewport (zb. nintendo ds mit opera mini) unbedienbar
ist mir bewusst, aber man kann ja nicht alles haben
folgend meine ausführlicheren überlegungen sehr stark vereinfacht, dann wird mein problem auch klarer.
gruß bastian
<!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" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
color:#FFFFFF;
}
#center {
height: 100%;
width: 500px;
position: relative;
margin-right:auto;
margin-left: auto;
background-color: #FF0000;
z-index: 1;
}
#head {
background-color: #000000;
height: 110px;
width: 500px;
position: absolute;
top:0px;
z-index: 5;
}
html>body #head { /* nur fuer moderne Browser! */
position: fixed;
}
#nav {
background-color: #0000FF;
height: 20px;
width: 500px;
position: absolute;
top: 110px;
z-index: 5;
}
html>body #nav { /* nur fuer moderne Browser! */
position: fixed;
}
#foot {
background-color: #000000;
height: 110px;
width: 500px;
position: absolute;
bottom: 0px;
z-index: 4;
}
html>body #foot { /* nur fuer moderne Browser! */
position: fixed;
}
#inhalt {
width: 500px;
height: auto;
background-color: #FF0000;
padding-top: 130px;
padding-bottom: 110px;
z-index: 2;
}
</style>
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#scroll {
height: 100%; width: 100%; overflow: auto;
}
#inhalt {
position: static;
}
}
</style><![endif]--></head>
<body>
<div id="center">
<div id="head">
<h1>ich rühr mich hier nicht weg</h1>
</div>
<div id="nav">
ich werde mal ne navi
</div>
<div id="scroll">
<div id="inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
<div id="foot">
<h1>ich rühr mich hier nicht weg</h1>
</div>
</div>
</body>
</html>-
wie wärs mit javascript?
wer den IE6 hat, hat meistens auch die javascripts ausgeschaltet und dann kommt die nervige warnung, für mich keine alternative.also schnitt der statistiken die ich so kenne (rund 80 mittelgroße webseiten von kleinen und mittelständischen unternehmen) haben alle auch beim ie javascript vermehrt eingeschalten - war das eine schätzung oder hast du dafür belege?
auf die fixierung im ie6 ganz verzichten - die seite bleibt bedienbar, einige komfortfeatures sind weg
leider nicht ganz so einfach, da ich das padding des scrollbaren bereiches sehr hoch setze. sieht das ganze dann im IE6 sehr unschön auswas hält dich davon ab, conditional comments?
die nutzt du zwar schon aber in kombination mit hacks - entscheide dich für hacks oder conditional comments - in deinem fall nutzt du häcks sogar (sorry) sehr dämlich indem du selektoren verwendest, die nur von modernen browsern angesprochen werden sollen um alte auszugrenzen anstatt dass du ein vernünftiges css für alle browser schreibst um dann genau für einen browser (ie6) ausnahmen zu definieren
es ist in deinem fall wahrscheinlich absolut nicht notwendig
im übrigen scheinst du z-index nicht richtig verstanden zu haben (da du aufsteigende nummern für dinge vergibst, die so zwar zwangsläufig übereinander liegen, aber nicht durch z-index)
zb center - egal was du diesem oder seinen kindelementen gibst, center wird immer unten drunter liegen
nav wird wahrscheinlich hinter head/footer verschwinden wenns blöd läuft, da scroll keinen z-index besitzt, die beiden erstgenannten elemente aber schon
folgend meine ausführlicheren überlegungen sehr stark vereinfacht, dann wird mein problem auch klarer.
wirds ansich nicht - ich habe grade (und auch sonst meistens nicht) keine lust elendslangen text in ein html-file zu kopieren und dann im browser anzuschaun, ein link zu einer live-demo wäre fein
---
zusammenfassend, schmeiss den css weg - dass du damit probleme haben wirst, alles so hinzubekommen, wie du willst ist sehr naheliegend
schreibe dein css so, dass es unter firefox, opera und safari funktioniert, unter ie7 idealerweise gleich funktioniert (das ist nicht so schwierig) und im ie6 bis auf position fixed funktioniert (etwas tricky, ist aber auch möglich)
dann überlege dir, ob du für den ie6 eine ausnahme (absolute statt fixed) deklarierst und zusätzlich ein javascript einsetzt um fixed zu simulieren
im übrigen rate ich dir nochmals von der vewendung von fixed ab - head und foot decken zusammen 220px der viewporthöhe ab - auf meinem angesprochenen nintendo ds hätte ich mit 192px viewporthöhe genau garnix zu sehen, auf einem durchschnittlichen pda mit sagen wir 320px höhe ist der lesebereich auch sehr "bescheiden"
-
Danke für die hilfe suit, werde demnächst mal deinen weg ausprobieren, für das jetzige projekt habe ich letztendlich, aufgrund des zeitfaktors, komplett auf fixierte elemente verzichtet
in deinem fall nutzt du häcks sogar (sorry) sehr dämlich indem du selektoren verwendest, die nur von modernen browsern angesprochen werden sollen um alte auszugrenzen anstatt dass du ein vernünftiges css für alle browser schreibst um dann genau für einen browser (ie6) ausnahmen zu definieren
leider kenne ich mich mit den häcks noch nicht besonders gut aus (und offensichtlich auch mit z-index), da ich mir meine html und css kenntnisse nebenbei selbst angeeignet habe.
übrigen habe ich die häcks von
http://de.selfhtml.org/css/layouts/fixbereiche.htm
übernommen.Gruß bastian
-
-
Hi,
wie wärs mit javascript?
wer den IE6 hat, hat meistens auch die javascripts ausgeschaltetAbgesehen davon, dass ich das fuer eine sehr gewagte Behauptung (vulgo: Bloedsinn :-)) halte,
und dann kommt die nervige warnung, für mich keine alternative.
gilt dann auch hier:
ist mir bewusst, aber man kann ja nicht alles haben
im übrigen: position fixed macht deine seite potentiell auf kleinen geräten mit kleinen displays mit geringer auflösung und kleinem browserviewport (zb. nintendo ds mit opera mini) unbedienbar
ist mir bewusst, aber man kann ja nicht alles habenMan koennte aber mit JavaScript position:fixed nur dann "haben", wenn der Viewport "ausreichend" gross ist - gegenueber ggf. kompletter Unbenutzbarkeit halte ich das fuer ein sehr grosses Plus.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
-
-