komplette seite in die mitte rücken??

cmbsecond · 3 Juni 2008

hey

ich hab meinen blog auf nem grossen monitor designed und wenn ich ihn jetzt auf einem kleinen anschaue liegt mein haupttext bzw die komplette seite viel zu weit links und scrollbars sind aufeinmal da...gibt es nicht einen code damit sich die seite immer zentriert? egal wie gross oder klein mein fenster ist? und wenn ja wo kommt der hin?

vielen dank und sorry für die doofe frage..kann noch nich viel..
cmb

assmaje · 3 Juni 2008

Code:

body {
     margin:auto;
}

cmbsecond · 3 Juni 2008

danke schon mal!

aber wenn ich das fenster minimiere dann bleibt er trotzdem nicht in der mitte sondern die scrollbars sind wieder da und es verziehts...es gibt doch so seiten wo alles zentriert bleibt und halt dann kleiner wird..oder irr ich mich da??

LG

assmaje · 3 Juni 2008

cmbsecond schrieb:
danke schon mal!

aber wenn ich das fenster minimiere dann bleibt er trotzdem nicht in der mitte sondern die scrollbars sind wieder da und es verziehts...es gibt doch so seiten wo alles zentriert bleibt und halt dann kleiner wird..oder irr ich mich da??

LG

Jop, da musst du dann eben relative Angaben wie % oder em benutzen.

koslowski · 3 Juni 2008

Hi,

assmaje schrieb:
Code:

body { margin:auto; }

ähem, ich erlaube mir mal das zu verbessern:

leg um alles einen <div id="wrapper"> gib dem ne feste Breite und zentriere horizontal mit:

Code:

#wrapper  {
   width:800px; [B][COLOR=Black]z.B.[/COLOR][/B]
   margin:0 auto;
   }

koslowski

assmaje · 3 Juni 2008

koslowski schrieb:
Hi,

ähem, ich erlaube mir mal das zu verbessern:

leg um alles einen <div id="wrapper"> gib dem ne feste Breite und zentriere horizontal mit:

Code:

#wrapper { width:800px; [B][COLOR=Black]z.B.[/COLOR][/B] margin:0 auto; }

koslowski

Er kann doch genau so gut in body die width angeben.
Ein Tag gespart und in diesem Fall ist ein Wrapper eh unnötig.

Code:

body {
     width:[B]70%[/B];
     margin:auto; [COLOR="Red"]es geht auch margin:0 auto;[/COLOR]
}

Und er wollte ja, dass es auch in kleineren Browserfenstern vom Verhältnis her richtig angezeigt wird, also die width mit % angeben. Allerdings hängt das Layout mit dem Wrapper oder Nicht-Wrapper zusammen, deshalb kann man nicht wirklich sagen, welche Variante "besser" ist. Je nach dem.

neuroleptika · 3 Juni 2008

Ich verwende immer einen #wrapper.
Hauptsächlich aus diesen Gründen:

Der Internet Explorer 5 versteht width für <body> nicht. Um auch für diesen Browser zu zentrieren braucht man ohnehin ein weiteres Element, da er margin: auto; auch nicht kennt. IE 5 und 6 kennen min-width und max-width nicht. Dem #wrapper gebe ich für diese Browser eine festen width: Wert;
Ein alles umschließendes <div> eignet sich auch für die Angabe einer Schriftgröße die in em oder % relativ zu body steht. (Ich will damit keine weitere Diskussion über Schriftgrößen lostreten.)
Ich kann position: absolute; wahlweise ausgehend von #wrapper oder <body> anwenden.

koslowski · 4 Juni 2008

Moin,

assmaje schrieb:
Er kann doch genau so gut in body die width angeben.
Ein Tag gespart und in diesem Fall ist ein Wrapper eh unnötig.

Code:

body { width:[B]70%[/B]; margin:auto; [COLOR=Red]es geht auch margin:0 auto;[/COLOR] }

Und er wollte ja, dass es auch in kleineren Browserfenstern vom Verhältnis her richtig angezeigt wird, also die width mit % angeben. Allerdings hängt das Layout mit dem Wrapper oder Nicht-Wrapper zusammen, deshalb kann man nicht wirklich sagen, welche Variante "besser" ist. Je nach dem.

body ist nach allgemeinen Verständnis der "Viewport", warum man dem kein width oder so etwas mit auf den Weg gibt, siehe "Neuroleptikas" Beitrag.

margin:auto; , sorry, diese Angabe ist imho unsinnig.

Um zu erreichen das die HP vom Verhältnis her richtig in den Browserfenstern angezeigt wird muss width definitiv keine %-Angabe sein.
em und px sind auch relative Angaben und eignen sich dafür genauso.

koslowski

Efchen · 4 Juni 2008

cmbsecond schrieb:
aber wenn ich das fenster minimiere dann bleibt er trotzdem nicht in der mitte sondern die scrollbars sind wieder da und es verziehts.

Das Problem ist, Du hast ein nicht dynamisches Layout. Du vergibst feste Breiten, die sich nicht der Veränderung der Fenstergröße (oder auch der Schriftgröße!) anpasst.
Um etwas abhängig von der Fenstergröße zu machen, bietet sich die Einheit "%" an (korrekt ist, dass "%" sich auf die Größe des jeweiligen Elternelements bezieht, aber der body ist idR 100% breit, und somit passt es wieder). Du solltest auch mit Veränderung der Schriftgröße experimentieren, da ist die Einheit "em" wichtig, gibst Du Deinen Containern eine Größe mit Einheit "em", dann passt sich die Größe der Container einer Schriftgrößenänderung an.

Flexible Layouts sind eigentlich ein Thema für sich, das kann man nicht in Tags, Eigenschaften oder Befehle fassen. Und dadurch, dass im WWW nahezu alles flexibel ist, und die Benutzer viele Möglichkeiten haben, wirds für den Webmaster natürlich nicht einfacher.

koslowski schrieb:

margin:auto; , sorry, diese Angabe ist imho unsinnig.

Zum Vergrößern anklicken....

Ob margin:auto oder margin:0 auto, beides zentriert ein Block-Element horizontal.

Gruß,
-Efchen

assmaje · 4 Juni 2008

koslowski schrieb:
Moin,

body ist nach allgemeinen Verständnis der "Viewport", warum man dem kein width oder so etwas mit auf den Weg gibt, siehe "Neuroleptikas" Beitrag.

margin:auto; , sorry, diese Angabe ist imho unsinnig.

Um zu erreichen das die HP vom Verhältnis her richtig in den Browserfenstern angezeigt wird muss width definitiv keine %-Angabe sein.
em und px sind auch relative Angaben und eignen sich dafür genauso.

koslowski

1. margin:auto; ist richtig. Siehe SelfHTML.
2. px kann zwar auch eine relative Angabe sein, normalerweise (so gut wie immer) ist sie aber absolut. Siehe SelfHTML.

Efchen · 4 Juni 2008

px ist doch nur relativ zur echten Auflösung (dpi). Ich hab bisher noch keine Website gesehen, die sich die Mühe macht, auch bei unterschiedlichen (echten) Auflösungen immer gleich groß zu sein. Vor allem würde das die Anwender irritieren, denn viele stellen auch die Auflösung (also die Größe ihres Desktops) kleiner, um eine größere Schrift zu erhalten.

Gruß,
-Efchen

koslowski · 4 Juni 2008

Hi,

assmaje schrieb:
1. margin:auto; ist richtig. Siehe SelfHTML.

okay, das unsinnig streiche ich hiermit, das war suboptimal.

Tatsache ist jedoch, das fast alle Literatur und sonstige Quellen immer
margin:0 auto; schreiben. Für die Null wird meistens auch ein Wert eingesetzt, damit die HP nicht so am oberen Rand klebt.

Falsch war deine Angabe aber auch nicht

assmaje schrieb:
2. px kann zwar auch eine relative Angabe sein, normalerweise (so gut wie immer) ist sie aber absolut. Siehe SelfHTML.

sorry SELFHTML hin und her, das ist eindeutig falsch.
Entweder ist eine Maßeinheit relativ oder absolut. Zwitter geht da nicht.

Zitat aus SELFHTML:
Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen.

Abhängig von der Pixeldichte des Ausgabegerätes.
Bei ein und demselben Ausgabegerät kann ich aber die Pixeldichte bzw. Bildschirmauflösung ändern, dann sind es bei höherer Auflösung mehr Pixel, also werden die Pixel kleiner, weil ich die Größe des Ausgabegerätes ja nicht ändern kann.
Ergo ist px bei ein und demselben Ausgabegerät zwangsläufig auch eine relative Einheit.

Das sollte jedem einleuchten, der logisch überlegen kann.

Ich verstehe auch nicht wieso SELFHTML da so einen Blödsinn verzapft.
Nichts ist perfekt, auch SELFHTML nicht.;)

koslowski

Efchen · 4 Juni 2008

koslowski schrieb:
Bei ein und demselben Ausgabegerät kann ich aber die Pixeldichte bzw. Bildschirmauflösung ändern, dann sind es bei höherer Auflösung mehr Pixel, also werden die Pixel kleiner, weil ich die Größe des Ausgabegerätes ja nicht ändern kann.
Ich verstehe auch nicht wieso SELFHTML da so einen Blödsinn verzapft.

Das liegt wohl daran, weil keine Website ihr Design an die dpi des Bildschirms anpasst, oder hast Du das jemals gemacht? (Siehe meinen vorherigen Beitrag)
Hältst Du das für sinnvoll?

Gruß,
-Efchen

koslowski · 4 Juni 2008

Hi,

Efchen schrieb:
Das liegt wohl daran, weil keine Website ihr Design an die dpi des Bildschirms anpasst, oder hast Du das jemals gemacht? (Siehe meinen vorherigen Beitrag)
Hältst Du das für sinnvoll?

Gruß,
-Efchen

äh..., ich versteh da nicht so ganz den Zusammenhang zu meinem Beitrag, dort habe ich lediglich erläutert warum das, was SELFHTML zu px schrieb, nicht so ganz in Ordnung ist.

koslowski

Efchen · 4 Juni 2008

Ja, nein, vergiss es :-)
Ich habe das Ganze von einer anderen Seite betrachtet.
Ich verstehe es jedenfalls, wenn jemand sagt, px ist eine absolute Einheit. Aber es dürfte schwer werden, das verständlich und technisch einwandfrei zu erklären :-)

Schönen Abend noch,
-Efchen

koslowski · 4 Juni 2008

Hi,

Efchen schrieb:
Ich verstehe es jedenfalls, wenn jemand sagt, px ist eine absolute Einheit. Aber es dürfte schwer werden, das verständlich und technisch einwandfrei zu erklären :-)

verstehe tu ich das auch, aber da muss ich die Logik überstrapazieren und Haarspalterei betreiben.

z.B. könnte ich auf einem Gummiband Zentimetereinteilungen aufmalen, es langziehen und dann sagen:"Seht her, das ist der Beweis das cm eine relative Maßeinheit ist!" :lol:

koslowski

komplette seite in die mitte rücken??

cmbsecond

Neues Mitglied

assmaje

Neues Mitglied

cmbsecond

Neues Mitglied

assmaje

Neues Mitglied

koslowski

Neues Mitglied

assmaje

Neues Mitglied

neuroleptika

Aktives Mitglied

koslowski

Neues Mitglied

Efchen

Guest

assmaje

Neues Mitglied

Efchen

Guest

koslowski

Neues Mitglied

Efchen

Guest

koslowski

Neues Mitglied

Efchen

Guest

koslowski

Neues Mitglied

Neueste Beiträge