Fixer Header, zentriert und mit fester Breite
0 
Marian
Fixer Header, zentriert und mit fester Breite
Hallo,
bin nicht der CSS-König, versuche aber trotzdem folgendes Problem zu lösen...
Ich möchte ein Seite per CSS layouten. Soll hinterher optisch ein bischen wie ein Blatt Papier aussehen. Breite des kompletten Seiteninhaltes z.B. max 700px. Dazu soll der Kopf fix stehen bleiben, da dort die Navi untergebracht werden soll...
Googlen hat folgenden Link gebracht: http://www.cssplay.co.uk/layouts/bodyfix.html
Das kommt meiner Vorstellung schon sehr nahe ist aber doch ziemlich viel Code, wobei ich die Navi selbst integrieren möchte...
Wie bekomme ich nun z.B. das Self-HTML-Layout von http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel5.htm so verändert, das der komplette Seiteninhalt max 700px breit wird?
Zusätzlich stellt sich die Frage, ob ich einen 3D-Effekt für die Blattoptik per Grafik realisieren muss oder auch per CSS hinbekomme...
Ich danke schon mal im Voraus für die Hilfe.
Jörg
-
Hallo Jörg,
Wie bekomme ich nun z.B. das Self-HTML-Layout von http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel5.htm so verändert, das der komplette Seiteninhalt max 700px breit wird?
Du musst halt die Breite fuer den body festlegen. Aber warum willst du es nicht so breit lassen wie das Browserfenster ist? Das ist doch nur verschenkter Platz am Rand.
Viele Grüße aus Freiburg,
Marian--
Microsoft broke Volkswagen's world record: Volkswagen only made 22 million bugs!<!--[if IE]><meta http-equiv="refresh" content="0; URL=http://www.getfirefox.com"><[endif]-->
-
Du musst halt die Breite fuer den body festlegen. Aber warum willst du es nicht so breit lassen wie das Browserfenster ist? Das ist doch nur verschenkter Platz am Rand.
Der Inhalt der Seite wird "überschaubar" und eine "Blattoptik" soll die Seite auch haben.
Ich habe die Self-HTML-Seite im CSS-Bereich so erweitert:
body
{
margin:0 auto;
padding:0;
width:700px;
}Jetzt ist der mittlere Teil schön auf Breite und zentriert, aber Kopf und Fuss nehmen sich davon nichts davon an! :(
Hab' bei meiner bisherigen Suche immer den Hinweis gefunden, das läge an dem POSITION:FIXED; welches sich nicht mit der fixen Breite (und das noch zentriert) verträgt!?Jörg
P.S.: Nette Signatur! ;)
-
hallo,
Du musst halt die Breite fuer den body festlegen. Aber warum willst du es nicht so breit lassen wie das Browserfenster ist?
Der Inhalt der Seite wird "überschaubar"Ganz im Gegenteil. Nimm an, jemand hat sein Browserfenster kleiner eingestellt (ich mache das manchmal, wenn ich mehrere Fenster gleichzeitig offenhaben will). Dann muß er bei deiner "fixen" Einstellung quer scrollen, was höchst unbeliebt ist.
und eine "Blattoptik" soll die Seite auch haben.
Was du mit "Blattoptik" meinst, ist unklar. Allerdings ist es eine in jüngerer Zeit häufiger anzutreffende Marotte, daß man einen Inhaltsbereich mittig setzt - was eben leicht zu "verschenktem Platz führt.
Ich habe die Self-HTML-Seite im CSS-Bereich so erweitert:
body
{
margin:0 auto;
padding:0;
width:700px;
}<body> solltest du niemals auf eine solche feste Breite setzen. Für das, was du machen möchtest, solltest du stattdessen definierte Bereiche (DIVs) nutzen, deren Breite du manipulieren kannst.
Jetzt ist der mittlere Teil schön auf Breite und zentriert, aber Kopf und Fuss nehmen sich davon nichts davon an!
Können sie auch nicht, weil sie nicht Betandteil von <body> sind.
Hab' bei meiner bisherigen Suche immer den Hinweis gefunden, das läge an dem POSITION:FIXED; welches sich nicht mit der fixen Breite (und das noch zentriert) verträgt
Der IE6 versteht diese CSS-Angabe nicht (IE7 wird sie verstehen), das ist alles. Wie ein Element positioniert wird, hat keinen Einfluß auf seine "Breite".
Gewöhne dir an, auf Pixelangaben zu verzichten. Nimm stattdessen Maßeinheiten, die skalieren können.
Grüße aus Berlin
Christoph S.
-
Hi.
Ganz im Gegenteil. Nimm an, jemand hat sein Browserfenster kleiner eingestellt (ich mache das manchmal, wenn ich mehrere Fenster gleichzeitig offenhaben will). Dann muß er bei deiner "fixen" Einstellung quer scrollen, was höchst unbeliebt ist.
OK, da ist was dran... deshalb wollte ich auch auf z.B. 700px gehen, damit selbst bei 800x600 keiner quer scrollen muss. Wenn man es noch kleiner macht, z.B. um mehrere nebeneinander zu sehen... hups! ;-)
Was du mit "Blattoptik" meinst, ist unklar. Allerdings ist es eine in jüngerer Zeit häufiger anzutreffende Marotte, daß man einen Inhaltsbereich mittig setzt - was eben leicht zu "verschenktem Platz führt.
Mit Blattoptik meine ich, die Seite soll aussehen, als wenn man ein Blatt Papier vor sich liegen hätte. Also der Hintergrund wird beispielsweise grau und der Seiteninhalt weiss. Das dann noch mit leichtem Schattenwurf, um die Illusion eines Blattes noch zu verstärken.
Ob es eine Marotte ist den Inhalt mittig zu setzten ist, denke ich, ein wenig Ansichtssache, ich finde das optisch gar nicht schlecht, wenn die Seite nicht zu viel Inhalt hat und damit nicht durch ein solches Layout unendlich lang wird.<body> solltest du niemals auf eine solche feste Breite setzen. Für das, was du machen möchtest, solltest du stattdessen definierte Bereiche (DIVs) nutzen, deren Breite du manipulieren kannst.
Hab das nur wg. der erste Antwort probiert. Aber hat ja auch nicht ganz so funktioniert. :(
Können sie auch nicht, weil sie nicht Betandteil von <body> sind.
Ok, aber wie dann? Für jeden extra oder nochmal eine allumfassende Definition?
Der IE6 versteht diese CSS-Angabe nicht (IE7 wird sie verstehen), das ist alles. Wie ein Element positioniert wird, hat keinen Einfluß auf seine "Breite".
Wie gesagt, hab das aus einem anderen Forumsbeitrag (nicht SelfHTML). Da wurde behauptet, es funktioniert nicht weil FIXED die Kombination aus Breitenangabe und Zentrierung nicht zulassen würde. So hab ich das zumindest verstanden.
IE6 versteht das nicht? Die SelfHTML-Seite wird im IE6 aber korrekt angezeigt, liegt das an den zusätzlichen "Star-HTML-Hacks"?
Was muss ich denn an der Header-Definition ändern, damit die eine fixe Breite bekommt und zentriert angezeigt wird?
Gewöhne dir an, auf Pixelangaben zu verzichten. Nimm stattdessen Maßeinheiten, die skalieren können.
Alte Angewohnheit...
Außerdem hab ich das mit dem em noch nicht ganz geschnallt. *blush*
Würde statt fixer px-Angabe die zum Querscrollen führen kann, bei em dann das Layout zusammengeschoben?Danke, Jörg
-
hallog,
Für das, was du machen möchtest, solltest du stattdessen definierte Bereiche (DIVs) nutzen, deren Breite du manipulieren kannst.
Hab das nur wg. der erste Antwort probiert. Aber hat ja auch nicht ganz so funktioniert. :(
Können sie auch nicht, weil sie nicht Betandteil von <body> sind.
Ok, aber wie dann? Für jeden extra oder nochmal eine allumfassende Definition?Sie sind das, als was du sie definierst. Natürlich kannst du jedes beliebige HTML einzeln formatieren.
IE6 versteht das nicht? Die SelfHTML-Seite wird im IE6 aber korrekt angezeigt, liegt das an den zusätzlichen "Star-HTML-Hacks"?
Schau dir diese Beispielseite und die zugehörigen Erläuterungen genau an, dann erübrigt sich diese Frage.
Würde statt fixer px-Angabe die zum Querscrollen führen kann, bei em dann das Layout zusammengeschoben?
Nicht "zusammengeschoben", aber skaliert - das macht einen Unterschied.
Grüße aus Berlin
Christoph S.
-
Sie sind das, als was du sie definierst. Natürlich kannst du jedes beliebige HTML einzeln formatieren.
Das hat dann auch funktioniert. War mir eigentlich sicher, das schon probiert zu haben, aber nu klappt es. In jede Definition (Header, Content_Container, Footer) die Angaben
width:700px; margin:0 auto;und es funktioniert!
Für den IE musste noch ein
text-align: center;
mit rein und dementsprechend ein
text-align: center;
im Content_Container damit der Text nicht komplett zentriert wird.Nicht "zusammengeschoben", aber skaliert - das macht einen Unterschied.
OK, immer noch px, aber das teste ich noch aus. ;)
Danke für die Hilfe und Tipps.Gute Nacht,
Jörg
-
-
-
-
-