• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout zentriert: horizontal und vertikal

Status
Für weitere Antworten geschlossen.
The_Eye

The_Eye

Neues Mitglied
Hallo Forum,

Ich habe hier ein Layout, dass durch sein Hintergrundbild geprägt wird. Deswegen möchte ich die Webseite als eine Art "Box" bauen in der festen Größe zB 800x600

Dieser "Kasten" soll sowohl horizontal als auch vertikal zentriert werden. Der Rand durm herum flexibel, so dass er sich an die Größe des Browserfensters anpasst.

Hier mal ein Bild zur Erklärung:


So ein Layout habe ich vor Jahren schon einmal verwendet. Das waren aber noch die guten alten Frame-Zeiten 8-)
Jetzt aber bekomme ich es mit CSS einfach nicht hin, obwohl die Lösung wohl mal wieder ganz einfach sein wird ...

Hat jemand einen Tip!? Hilflos ...

Gruß und Dank
 
Ich mache es so:

CSS:
Code: 
div.mitte {
  top: 50%;
  left: 50%;
  width: 800px;
  height: 600px;
  margin-top: -300px;     /* halbe höhe des DIV´s */
  margin-left: -400px;     /* halbe breite des DIV`s */
  position: absolute;
}
HTML
Code: 
<div class="mitte">Inhalt</div>
 
DANKE!!!

Wenn das keine saubere Lösung ist! Super! ... und wer hätte es gedacht, funktioniert sogar mit dem IE6 ...
 
Hi,

Nein, dafür sind die oben von "nichtsgeht" und "koslowski" vorgeschlagenen Modelle keine Lösung. Kurz gesagt: Weil dort nur ein Container definiert wird und die Ränder über die margin-Tags zustande kommt. Du könntest also nur über den <body> ein gesamtes Hintergrundbild einfügen, kacheln usw.


Habe mir aber Deine Seite einmal kurz angeschaut. Da waren verschiedene Fehler drin.

1. Halte Deinen Quelltext ordentlicher, dann findet man auch die Fehler leichter.

2. Da waren falsche Maße angegeben:
Code: 
                <td width="700" height="350">
                
                <!-- iframe-start -->
Du hattest 696 angegeben, arbeitest oben aber mit einer Breite von 800. + die Beiden Ränder a 50 kommst Du so aber natürlich auf 796 und überlasst es dem Browser, wie er mit der Ungenauigkeit zurecht kommen soll.

3. Aus den falschen Maßen, nehme ich an, ergab sich auch eine falsche Hintergrundgrafik. So habe ich bei re.jpg den Balken noch einmal ein wenig nach links schieben müssen.

4. Wenn Hintergrundbilder aneinander passen sollen, ist es immer besser diese mit style="" einzufügen:
Code: 
<td width="50" height="350" style="background-image: url(images/li.jpg);">
Wenn Du die Bilder nur in <td> einfügst oder als td-back definierst, lieferst Du Dich auf Verdei und Verderb den Browsern aus.

Hab Dir die die Seite hier neu hoch geladen.
RapidShare: 1-Click Webhosting

Hoffe es klappt und viel Erfolg

Gruß
 
Hi,

Zitat von The_Eye:
Nein, dafür sind die oben von "nichtsgeht" und "koslowski" vorgeschlagenen Modelle keine Lösung. Kurz gesagt: Weil dort nur ein Container definiert wird und die Ränder über die margin-Tags zustande kommt. Du könntest also nur über den <body> ein gesamtes Hintergrundbild einfügen, kacheln usw.
Zum Vergrößern anklicken....
sorry, in dem von mir genannten Beispiel wird die Technik wie horiz./vertikale Zentrierung funktioniert erklärt.
Das muss natürlich an das eigene Layout angepaßt werden.

Hintergrundbilder wachsen beim skalieren nie mit. Sie über eine Tabelle einfügen wollen ist in meinen Augen ein rechter Blödsinn.
Tabellen sind für Tabellen gedacht und für sonst nix.

Wenn Hintergrundbilder aneinander passen sollen, ist es immer besser diese mit style="" einzufügen:
Zum Vergrößern anklicken....
Sorry, das ist leider falsch!
Layoutanweisungen gehören in eine externe CSS und nur in absoluten Ausnahmefällen ins Markup.
Hintergrundbilder mit Style-Angaben im Markup zu positionieren gehört mit Sicherheit nicht dazu.

Wenn man Bilder skalierbar machen will ist so eine Ausnahme.
Dann muss man sie per img einbinden:
Code: 
<img src="grafik.jpg" alt="Grafik" width="100" height="80"
  style="font-size:77%; width:10em; height:8em;">
So wird ein Bild skalierbar gemacht.;-)

koslowski
 
koslowski schrieb:
Sorry, das ist leider falsch!
Layoutanweisungen gehören in eine externe CSS und nur in absoluten Ausnahmefällen ins Markup.
Hintergrundbilder mit Style-Angaben im Markup zu positionieren gehört mit Sicherheit nicht dazu.
Zum Vergrößern anklicken....

Man stirbt aber auch nicht von ;-) Fakt ist, dass die Seite nun einmal mit Tabellen aufgebaut ist (und auch davon stirbt man nicht, im Gegenteil) und dass der Hinweis es mit style="" zu machen einfacher um zu setzen ist, wenn man noch keine weiterführenden CSS Erfahrungen hat.

Gruß

PS. Das Wort skalierbar wurde, glaube ich, fälschlicher Weise benutzt.
 
The_Eye schrieb:
PS. Das Wort skalierbar wurde, glaube ich, fälschlicher Weise benutzt.
Zum Vergrößern anklicken....

oh, dann hatte ich ihn wohl falsch verstanden.

Seine Seite hatte ich mir auch nicht angeschaut.
Habe container gelesen und gedacht das er mit divs arbeitet.
Deshalb bin ich auch so auf Bild in Tabelle angesprungen.

Naja, Tabellendesigner sterben wohl nie aus.;ugl

koslowski
 
koslowski schrieb:
Naja, Tabellendesigner sterben wohl nie aus.;ugl
Zum Vergrößern anklicken....

Naja, so lange die Browserlandschaft aus Kraut und Rüben besteht (klar, Besserung ist in Sicht) ist es manchmal schlicht einfacher, etwas mit Tabellen umzusetzen. Hängt immer ganz davon ab.

Und zuerst müsste man wohl selfhtml neu schrieben ;-) Da hat sich diesbezüglich ja nicht so viel getan.

Gruß
 
The_Eye schrieb:
Und zuerst müsste man wohl selfhtml neu schrieben ;-) Da hat sich diesbezüglich ja nicht so viel getan.
Zum Vergrößern anklicken....
Kommt drauf an was man da sucht.

Echte Spalten gibt es derzeit nur mit Tabellen (soll sich in css3 ändern).

css 2.1 gibt die Möglichkeit Spalten zu simulieren ohne echte Spalten zu erzeugen.
Was fürs Layout ja gewünscht (und heute richtig ist).

Für tabellarische Gegenüberstellungen sollte man echte Spalten (Tabellen) verwenden.

Irgendwann wird man über unser gefloate in css-Gerüsten schmunzeln, so wie wir heute über Layout- Tabellen und Framesets. Ich hoffe bis dahin bin ich noch nicht debil.

---Nichts ist für immer---

Diesen Beitrag bitte erst im Jahre 2020 bewerten.
 
Zuletzt bearbeitet:
Moin,

Zitat von The_Eye:
Naja, so lange die Browserlandschaft aus Kraut und Rüben besteht (klar, Besserung ist in Sicht) ist es manchmal schlicht einfacher, etwas mit Tabellen umzusetzen. Hängt immer ganz davon ab.
Zum Vergrößern anklicken....

[diskreten Einwand erhebend]ähem, das kann ich so nicht bestätigen.
ich wüßte nicht was mit Tabellen einfacher geht.
Und Browser sind eigentlich auch kein Problem. Es ist ja fast nur der IE7/6 der die Probleme hat. Double-Float-Margin-Bug sollte bekannt sein, ansonsten liegt es ja meistens daran das der IE kein Layout hat (Das HasLayout-Prinzip sollte man natürlich verstehen!).

Also kriegen die Elemente die an der unerwünschten Darstellung beteiligt erstmal nacheinander Layout (fast immer element { height:1% } per CC ),
das wars dann eh meist schon.

Die kritischen Konstellationen kennt meist ziemlich schnell und kann dann rappzapp reagieren.[/diskreten Einwand erhebend].

[dumme Belehrung]Vielleicht sind dein CSS-Kenntnisse noch zu lückenhaft, ich denke sonst hättest das mit den Tabellen und Browsern nicht gesagt.[/dumme Belehrung]

Zitat von Neuroleptika:
Für tabellarische Gegenüberstellungen sollte man echte Spalten (Tabellen) verwenden.
Zum Vergrößern anklicken....

Genau, Tabellen für Tabellen. Und selbst die werden mit CSS extern formatiert.;)

Echte Spalten gibt es derzeit nur mit Tabellen (soll sich in css3 ändern).
css 2.1 gibt die Möglichkeit Spalten zu simulieren ohne echte Spalten zu erzeugen.
Was fürs Layout ja gewünscht (und heute richtig ist).
Zum Vergrößern anklicken....

Bei elastischen Layouts sind selbst simulierte Spalten schwierig, weil die HG-Grafik ja in px ist (seufz, Photoshop mit em, das wärs ja).

Aber ich komme eigentlich auch ohne klar (mache eigentlich nur elastische Layouts!), es gibt genug andere Layoutmöglichkeiten.

Zitat von neuroleptika:
Irgendwann wird man über unser gefloate in css-Gerüsten schmunzeln, so wie wir heute über Layout- Tabellen und Framesets. Ich hoffe bis dahin bin ich noch nicht debil.
Zum Vergrößern anklicken....

Doch, sind wir wenn die Entwicklung in dem Tempo weitergeht.;ugl

Zitat von neuroleptika:
Diesen Beitrag bitte erst im Jahre 2020 bewerten.
Zum Vergrößern anklicken....

Oder 2040.:mrgreen:

Gruß
koslowski
 
Vielen Dank für die Antworten und Tipps.
Ich bin letztens nochmal über die Sache mit dem "Slicen" gestolpert... jetzt hab ich das mal probiert und meine Bilder sind jetzt alle in divs (auch das iframe ist in einem div drin) und diese divs dann wiederum in einem großen Gesamtdiv.

Nu will ich noch probieren, dass das Gesamtdiv zentriert geht und beim Browserfenster skalieren dann komplett nach links oben ausweicht.

Bevor ich jetzt weiter rumwerkel: Das iframe ins div rein und überhaupt, dieses ganze Gebilde dann in ein großes Gesamtdiv rein, das ist doch ordentlich oder (und funktioniert überall?...auf Firefox und IE konnt ich schon probieren))? Vermutlich ist das so auch besser als mit Tabellen?!
 
Fantasmo schrieb:
Bevor ich jetzt weiter rumwerkel: Das iframe ins div rein und überhaupt, dieses ganze Gebilde dann in ein großes Gesamtdiv rein, das ist doch ordentlich oder (und funktioniert überall?...auf Firefox und IE konnt ich schon probieren))? Vermutlich ist das so auch besser als mit Tabellen?!
Zum Vergrößern anklicken....
Dem alles umschließenden, zentrierten Div könntest du ein position-relative und ein padding für den Innenabstand geben.
Die Inhalte um das iframe herum dann absolut positionieren.

position-relative und position-absolute wenden alle wichtigen Browser richtig an.


Ich hoffe da ist jetzt kein Denkfehler drin.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben