nicht angemeldet
Website im Bildschirm zentrieren mit feststehende Elementen
suitHallo Community
Ich habe langsam nur noch graue Haare...
Ich habe eine Website, oben einen Kopfbanner, darunter 3-spaltiges Layout mit Menü (links), Inhalt (Mitte), News (rechts) und abschliessend darunter einen Footer. Die Website-Breite ist auf 1024px eingestellt und die Website ist im Bildschirm zentriert (margin-left/right 50%).
Nun möchte ich realisieren, dass Kopf, Menü, News und Footer immer feststehend sind und nur der Inhaltsbereich gescrollt wird.
wie hier: http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm
Habe es schon mit der Konfiguration versucht, allerdings scheint die nur bei Websites zu gehen, wo der Body nicht in die Mitte zentriert und mit einer fixen Breite fixiert wird.
Den Footer, das Menü und die News zu fixieren schaffe ich, aber sobald ich die position dem Header zuweise, verschwindet der (wird unsichtbar). Wenn ich die position jedoch weglasse, dann scrollt der Header mitsamt Hintergrund.
Und das Hintergrundbild scrollt aus irgendwelchen Gründen auch imer noch mit :-(
So siehts momentan aus (Jpeg-Files):
"Normalzustand": http://uploaded.to/?id=xizy51
Gescrollt: http://uploaded.to/?id=sghdc5
Kann mir bitte wer helfen, ich finde den Fehler/die Problemlösung nicht. Oder muss ich ganz anders vorgehen?
*************
HTML-Template
*************
<head>
<link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<a id="top"></a>
<div id="main_container" class="main_container">
<!-- Header -->
<div id="header_container" class="header_container">
<div id="header_1" class="header_1"></div>
</div><!-- end header_container -->
<div id="menu_1" class="menu_1">
<div class="menu1-level1-no">Menu item 1</div>
<div class="menu1-level1-no">Menu item 1</div>
<div class="menu1-level1-act">Menu item 1</div>
<div class="menu1-level2-no">Menu item 2</div>
<div class="menu1-level2-no">Menu item 2</div>
<div class="menu1-level2-act">Menu item 2</div>
<div class="menu1-level1-no">Menu item 1</div>
</div>
<div id="news_1" class="news_1">###NEWS###</div>
<div id="content" class="content">###CONTENT###</div>
<div class="clearfloat"> </div>
<div id="footer_container" class="footer_container">
<div id="footer_1" class="footer_1">###FOOTER_1###</div>
</div><!-- end footer_container -->
</div><!-- end main_container -->
</body>
</html>
*********
CSS-Style
*********
html, body {
margin:0;
padding:0;
height:100%;
}
html {
background-color:#000033;
width:100%;
}
body {
margin-left:auto;
margin-right:auto;
width:1024px;
background-image:url(xxxxxxx);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:left top;
position:relative;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header_1 {
background-image:url(xxxxxxxx);
background-repeat:no-repeat;
background-position:left;
height:112px;
border-bottom:1px dotted #999999;
position:static;
}
.header_1_level1 {
font-family:Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size:24px;
font-weight:bold;
color:#191970;
margin-left:220px;
padding-top:60px;
}
.menu_1 {
border:#FFFF00 1px solid;
width:220px;
float:left;
position:fixed;
}
.content {
border:#FF0000 1px solid;
margin-left:224px;
margin-right:206px;
vertical-align:top;
}
.news_1 {
border:#33FF00 1px solid;
font-family:Arial, Helvetica, Tahoma, Verdana, sans-serif;
vertical-align:top;
width:200px;
float:right;
position:fixed;
margin-right:50%;
right:-512px;
}
.footer_1 {
background-color:#CC33CC;
border-top:dotted 1px #CC33CC;
position:fixed;
bottom:0px;
width:1024px;
font-size:12px;
}
-
Ich habe eine Website, oben einen Kopfbanner, darunter 3-spaltiges Layout mit Menü (links), Inhalt (Mitte), News (rechts) und abschliessend darunter einen Footer. Die Website-Breite ist auf 1024px eingestellt und die Website ist im Bildschirm zentriert (margin-left/right 50%)
du hast konzeptionelle fehler bei der erstellung gemacht - bereinige zuerst diese und kümmere dich dann darum
benutzer mit 1024x768 bildschirm-/desktopauflösung werden begeistert sein, wenn sie deine website scrollen müssen weil sie nicht in den viewport fast
margin-left/right: 50% hast du genau wo her?
am besten du beschreibst, was du genau willst - wenn das geklärt und das konzept dessen bereinigt ist, kann man sich an die umsetzung machen - aber einfach mal loslegen und versuchen ein beispiel anzupassen auf dinge für die es nicht gedacht war, ist schon wagemutig ;)
-
du hast konzeptionelle fehler bei der erstellung gemacht - bereinige zuerst diese und kümmere dich dann darum
Was heisst das genau?
benutzer mit 1024x768 bildschirm-/desktopauflösung werden begeistert sein, wenn sie deine website scrollen müssen weil sie nicht in den viewport fast
Wieso nicht? Dafür ist doch die Breite von 1024px gedacht?
margin-left/right: 50% hast du genau wo her?
Hier aus dem SelfHTML-Forum
am besten du beschreibst, was du genau willst - wenn das geklärt und das konzept dessen bereinigt ist, kann man sich an die umsetzung machen - aber einfach mal loslegen und versuchen ein beispiel anzupassen auf dinge für die es nicht gedacht war, ist schon wagemutig ;)
Hm... okay, dann bin ich wagemutig ^^
Also was ich will:
Eine Website mit Header, Footer, Menü links, News rechts, die beim scrollen feststehen.
Die Website soll eine fixe Breite von 1024px haben (--> für Benutzer mit 1024er-Auflösung). Für Benutzer die eine grössere Auflösung haben (z.B. 1280x... Pixel) sollen links und rechts von der Website "Balken" erscheinen (sind natürlich keine Balken, sondern einfach die Hintergrundfarbe von Body/HTML/sonstiges Element)-
Also was ich will:
Eine Website mit Header, Footer, Menü links, News rechts, die beim scrollen feststehen.
Die Website soll eine fixe Breite von 1024px haben (--> für Benutzer mit 1024er-Auflösung). Für Benutzer die eine grössere Auflösung haben (z.B. 1280x... Pixel) sollen links und rechts von der Website "Balken" erscheinen (sind natürlich keine Balken, sondern einfach die Hintergrundfarbe von Body/HTML/sonstiges Element)Hallo Stefan!
Ich habe deinen Beitrag gelesen und fand es witzig, das mal auszuprobieren. Ich selber hab nicht ganz so viel Ahnung, aber ich habe dein "was ich will" hinbekommen - bei mir jedenfalls ^^. Mit den px bin ich jetzt nicht sicher, wie das bei dir aussehen wird, da ich eine größere Auflösung habe (hab den Footer irgendwo festgetackert - aber den findest du schon xD ).
Vielleicht hilft dir da ja was von weiter. Vielleicht hab ichs auch noch nicht richtig verstanden?! Grüße!
<head>
<style type="text/css">
.oben {
position: fixed;
width: 100%;
height: 100px;
left:0px;
top: 0px;
background-color: #ff0000;
}
.links {
position: fixed;
width: 200px;
left:0px;
top: 100px;
background-color: #ffff00;
}
.mitte {
margin-left: 192px;
width: 624px;
float: left;
background-color: #ff00ff;
}
.rechts {
position: fixed;
width: 200px;
left:824px;
top: 100px;
background-color: #00ff00;
}
.unten {
position: fixed;
width: 100%;
height: 100px;
left:0px;
top: 668;
background-color: #0000ff;
}</style>
</head><body>
<div class="oben">oben</div>
<div class="links">links<br>links<br>links<br>links<br>links<br>links<br>links<br>links</div>
<div class="mitte">Lorem ipsum eum an ridens utamur. No fugit possim ceteros vis, idque persius in duo. Eum error possim labitur no. Te vim amet singulis, his ad brute munere iriure.His agam erant an. Duo ei fastidii maluisset concludaturque, te duo veri choro, per et posse vulputate inciderint. Phaedrum facilisis an cum. Sumo iisque pro no, ut mazim imperdiet est, dicat equidem dissentiet ius in.
Te mea lorem lobortis adipiscing, nam an inani persius insolens. Sea ex dolores omittantur, ne putant denique persecuti nec. Id ius erat blandit mandamus, habemus verterem usu at. Suscipit phaedrum constituam eos id.
Et justo mentitum electram duo, ea duo nullam euripidis. No quo amet eirmod ancillae, in saperet appellantur duo. Meliore expetendis posidonium pri an, dicunt graecis ut cum. An duo veritus eleifend cotidieque, ius ex alii adipisci. Eu ridens recusabo mei, an legimus legendos voluptatibus duo, est ex movet accusata. An reque nostrum neglegentur pro, saperet postulant adipiscing usu cu.
Ad nonumy regione gloriatur has. Dolore ancillae vituperata qui ex, et his nemore praesent. Duo id autem dolorem propriae. Nisl option scribentur vix in. Fugit iuvaret convenire an cum, ei soluta temporibus disputationi est.
Pri vero saepe tempor ut, ea his mazim aperiri. Eos ut eius eligendi democritum. Usu at prima volumus delicatissimi. Iriure assentior temporibus ad vis. Nam tempor tamquam facilisis ne.
Viderer fabulas placerat nec cu, vix id detraxit maiestatis mediocritatem. An mandamus definitiones nam, mea rebum inani ne. Cum quis partem consequuntur eu. Viris corpora explicari ad mea, kasd erant expetenda te mei. Ei eos aliquid deleniti, utinam semper in nec.
Quo antiopam erroribus ne. Postea aperiam te per, at eos regione insolens, veri quidam delicata eu pri. Has at audire copiosae, ei agam movet dissentiunt per. Sit ut bonorum iracundia posidonium.
Usu deserunt mediocrem definitiones cu, in sit mazim hendrerit. Nam eu dolore appareat expetenda. Illum lucilius mei id, ipsum vituperata ei sea. Eum te ocurreret explicari. Cum alienum dolores ei, te has causae mandamus comprehensam.
Probo maiestatis vix ea, eos ne falli imperdiet mediocritatem. Eam gloriatur consequuntur ut, movet expetenda scriptorem eu est. Ad quo ludus laudem sanctus. Et wisi posse assum est, omnes luptatum at vix. Dico interpretaris ei quo, mea ei ferri ludus, vide possim ancillae duo ut. Et pro eripuit periculis, cu ius vidit possim honestatis, eu amet augue fastidii vis.
Lorem ipsum eum an ridens utamur. No fugit possim ceteros vis, idque persius in duo. Eum error possim labitur no. Te vim amet singulis, his ad brute munere iriure.
His agam erant an. Duo ei fastidii maluisset concludaturque, te duo veri choro, per et posse vulputate inciderint. Phaedrum facilisis an cum. Sumo iisque pro no, ut mazim imperdiet est, dicat equidem dissentiet ius in.
Te mea lorem lobortis adipiscing, nam an inani persius insolens. Sea ex dolores omittantur, ne putant denique persecuti nec. Id ius erat blandit mandamus, habemus verterem usu at. Suscipit phaedrum constituam eos id.
Et justo mentitum electram duo, ea duo nullam euripidis. No quo amet eirmod ancillae, in saperet appellantur duo. Meliore expetendis posidonium pri an, dicunt graecis ut cum. An duo veritus eleifend cotidieque, ius ex alii adipisci. Eu ridens recusabo mei, an legimus legendos voluptatibus duo, est ex movet accusata. An reque nostrum neglegentur pro, saperet postulant adipiscing usu cu.
Ad nonumy regione gloriatur has. Dolore ancillae vituperata qui ex, et his nemore praesent. Duo id autem dolorem propriae. Nisl option scribentur vix in. Fugit iuvaret convenire an cum, ei soluta temporibus disputationi est.
Pri vero saepe tempor ut, ea his mazim aperiri. Eos ut eius eligendi democritum. Usu at prima volumus delicatissimi. Iriure assentior temporibus ad vis. Nam tempor tamquam facilisis ne.
Viderer fabulas placerat nec cu, vix id detraxit maiestatis mediocritatem. An mandamus definitiones nam, mea rebum inani ne. Cum quis partem consequuntur eu. Viris corpora explicari ad mea, kasd erant expetenda te mei. Ei eos aliquid deleniti, utinam semper in nec.
Quo antiopam erroribus ne. Postea aperiam te per, at eos regione insolens, veri quidam delicata eu pri. Has at audire copiosae, ei agam movet dissentiunt per. Sit ut bonorum iracundia posidonium.
Usu deserunt mediocrem definitiones cu, in sit mazim hendrerit. Nam eu dolore appareat expetenda. Illum lucilius mei id, ipsum vituperata ei sea. Eum te ocurreret explicari. Cum alienum dolores ei, te has causae mandamus comprehensam.
Probo maiestatis vix ea, eos ne falli imperdiet mediocritatem. Eam gloriatur consequuntur ut, movet expetenda scriptorem eu est. Ad quo ludus laudem sanctus. Et wisi posse assum est, omnes luptatum at vix. Dico interpretaris ei quo, mea ei ferri ludus, vide possim ancillae duo ut. Et pro eripuit periculis, cu ius vidit possim honestatis, eu amet augue fastidii vis.</div>
<div class="rechts">rechts<br>rechts<br>rechts<br>rechts<br>rechts<br>rechts<br>rechts</div>
<div class="unten">unten</div></body>
</html>-
Hallo Dirk
Vielen Dank für deine Mühen, leider klappt das bei mir nicht soooo direkt... (siehe oben)
Gruss
Stefan
-
-
du hast konzeptionelle fehler bei der erstellung gemacht - bereinige zuerst diese und kümmere dich dann darum
Was heisst das genau?visualisiere deine vorstellung, wenn du sie visualisiert hast, male sie auf ein blatt papier beliebigen formats - zb a4 hochformat, wenn du das getan hast, male das selbe auf ein blatt papier anderen formats - zb us-letter im breitformat und bedenke, was passieren muss, dass es hier auch noch funktioniert - dann male das ganze auf ein 8x8cm post-it zettelchen und versuche, dass du das auch noch hinbekommst
natürlich sollst du nicht wirklich malen, sondern dir das ganze vorstellen ;)
wenn das alles "funktionert" hast du ein halbwegs brauchbares konzept
benutzer mit 1024x768 bildschirm-/desktopauflösung werden begeistert sein, wenn sie deine website scrollen müssen weil sie nicht in den viewport fast
Wieso nicht? Dafür ist doch die Breite von 1024px gedacht?
wenn du den scollbalken und den fensterrand abziehst, hast du ein problem, je nach browser und betriebssystem gehen da schon mal 50px flöten, jetzt hast du aber noch nicht bedacht, dass nicht jeder vollbild surft - was ist mit sidebars oder clients wie etwa miranda, skype, trillian?
% und em sind sicher das richtige für ich
margin-left/right: 50% hast du genau wo her?
Hier aus dem SelfHTML-Forummargin-left: auto;
margin-right: auto;damit hast du mehr freude
am besten du beschreibst, was du genau willst - wenn das geklärt und das konzept dessen bereinigt ist, kann man sich an die umsetzung machen - aber einfach mal loslegen und versuchen ein beispiel anzupassen auf dinge für die es nicht gedacht war, ist schon wagemutig ;)
Hm... okay, dann bin ich wagemutig ^^
Also was ich will:
Eine Website mit Header, Footer, Menü links, News rechts, die beim scrollen feststehen.#container //wrapper
#header // auch klar
#content // inhalt
#aside // menu, sidebar usw
#footer // eh klarbody hat etwas margin, damit die seite nicht am rand klebt
#container gibt die seitenbreite vor - zb 100%, eine minimalbreite sagen wir 200px und eine maximalbreite, sagen wir 1000px
#content und #aside floaten nebeneinander und ihre breiten werden auch in % angegeben, zb 65 und 35% sowie jeweils eine minimalbreite von 200pxwenn das browserfenster schmäler geschoben wird, bleibt die seite dennoch benutzbar - ab einem gewissen, halbwegs handheld-tauglichen wert - in diesem fall 200px springt die navigation unter den inhalt drunter, die seite bleibt dennoch bedienbar
leider identifzieren sich die meisten mobilen browser nicht als mobiles gerät, darum ist es ziemlich sinnlos einen eigenen medientypen anzugegben
-
Also erstmal vielen Dank für die Antworten und sorry, dass ich mich erst jetzt zurückmelde...
visualisiere deine vorstellung, wenn du sie visualisiert hast, male sie auf ein blatt papier beliebigen formats - zb a4 hochformat, wenn du das getan hast, male das selbe auf ein blatt papier anderen formats - zb us-letter im breitformat und bedenke, was passieren muss, dass es hier auch noch funktioniert - dann male das ganze auf ein 8x8cm post-it zettelchen und versuche, dass du das auch noch hinbekommst
natürlich sollst du nicht wirklich malen, sondern dir das ganze vorstellen ;)
Hab ich gemacht :-)
*****************HEADER****************
Menü links - Inhalt Mitte - News rechts
*****************FOOTER****************Diese 3 "Spalten" müssen IMMER so stehen bleiben und nicht eine nach der anderen nach unten fallen. Es sollen lediglich horizontale Scrollbalken erscheinen, wenn die Bildschirmauflösung zu klein ist (z.B. 800x600 oder ein Mobile-Gerät)
Die Homepage an sich (Menü links - Inhalt Mitte - News rechts) muss IMMER eingemittet in den Bildschirm erscheinen und eine Breite von sagen wir mal 1000px haben (damit sie, wie du gesagt hast, in den Viewport einer 1024-Bildschirmauflösung gelangt).
Wer einen grösseren Bildschirm hat (z.B. 1280x1024 oder grösser) soll die Seite ebenfalls eingemittet sehen mit einer Breite von 1000px. Dadurch entstehen links und rechts "Randspalten", die mit einer Hintergrundfarbe etwas "verschönert" werden :)
Wer einen kleineren Bildschirm/Auflösung hat, sieht die Homepage ebenfalls so, erhält die horizontalen Scrollbalken, sieht dafür links und rechts von der Homepage keine "Randspalten".
Beim vertikal Scrollen, sollen Header, Menü links, News rechts und Footer IMMER stehen bleiben (also nicht scrollen) und nur der Inhaltsbereich soll gescrollt werden.
Footer ist am unteren Browserfensterrand "festgetakert" und der Inhalt aus dem Contentbereich verschwindet sozusagen darunter. Das heisst auch, dass die Seite immer mindestens eine 100%ige Höhe vom Fenster hat, ansonsten wenn der Inhalt länger ist, werden für den Inhaltsbereich Scrollbalken angezeigt.% und em sind sicher das richtige für ich
Hm... Auch wenn die Homepagebreite mit 1000px fix ist? Das einzig dynamische am Template sind ja dann die Randspalten, die je nach Browser/Bildschirmauflösung breiter/schmaler werden. Oder nicht?
Demnach könnte ich dann auch die minimale Breite (min-width) von 200px jeweils weglassen oder?
Zudem können einige viele Browser ja auch nicht wirklich damit umgehen (gemäss css4you.de)margin-left: auto;
margin-right: auto;damit hast du mehr freude
jiihaa :-) funzt
body hat etwas margin, damit die seite nicht am rand klebt
soll am Rand kleben :-) sieht sonst mit Hintergrundbild und darunterliegender Hintergrundfarbe doof aus
Habe mir nun aus deinen Ratschlägen den Code entsprechend angepasst - jedoch mit fixen Breiten gearbeitet (wenn das in Ordnung ist) :-)
Und so sieht momentan der Code aus:<head>
<style>
body {
background-color:#000033;
margin:0;
padding:0;
}.container {
background-image:url(../images/regiotv_bgnd_big_split_high.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:left top;
margin-left:auto;
margin-right:auto;
width:1000px;
}.header {
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-position:left;
height:112px;
border-bottom:1px dotted #999999;
}.menu_1 {
border:#FFFF00 1px solid;
vertical-align:top;
width:200px;
float:left;
}.content {
padding-left:15px;
padding-right:15px;
border:#FF0000 1px solid;
vertical-align:top;
float:left;
min-width:500px;
}.news_1 {
border:#33FF00 1px solid;
font-family:Arial, Helvetica, Tahoma, Verdana, sans-serif;
vertical-align:top;
width:200px;
float:right;
}.footer_1 {
background-color:#CC33CC;
border-top:dotted 1px #CC33CC;
font-size:12px;
padding-top:15px;
}
</style></head>
<body><div id="container" class="container">
<div id="header" class="header">###HEADER###</div><div id="menu_1" class="menu_1">###MENU###</div>
<div id="content" class="content">###CONTENT###</div>
<div id="news_1" class="news_1">###NEWS###</div>
<div class="clearfloat"></div>
<div id="footer" class="footer">###FOOTER###</div>
</div><!-- end main_container -->
</body>
</html>-
Ich stecke echt in der Klemme... Komme nicht weiter... Egal was ich versuche, es klappt einfach nicht...
Könnte jemand so nett sein... und mir weiterhelfen? :-)
-
Hallo.
Ich stecke echt in der Klemme... Komme nicht weiter... Egal was ich versuche, es klappt einfach nicht...
Was versuchst du ... genau?
Könnte jemand so nett sein... und mir weiterhelfen? :-)
Wie lautet ... die Fehlerbeschreibung?
MfG, at
-
-
Hallo,
<meinung von="mir">Es gibt nicht viel schlimmeres als Layouts, die eine feste Breite mit Pixelangaben haben.</meinung>
Klebe die Sachen, die fest stehen sollen, mit
position:absolute;am Viewport fest, gib dem Inhaltcontainer auch eine feste (fest eingestellte) Größe und lass ihn scrollen.Gruß
-
-
-
-