Website zentrieren

[LAW-Web]

Hallo! Bin ganz neu hier und nicht sehr erfahren. Hoffentlich bin ich hier richtig?!

Ich möchte meine Webseite in einer Breite von 1000 px im Browser zentrieren und finde keinen Weg.

Die CSS-Datei sieht z.zt. so aus:

@charset "utf-8";
/* styleLAW.CSS Document */
html {
	height: 100.3%;
	background:#00FFFF;
}
wrapper{width:1000px;
}
body {
	text-align: center;
	font: 1.2em/1.8em Verdana, sans-serif;
}
* {margin: 0px; padding: 0px; border: 0px;}
}
article {color:red;
		background:#CF3;
}
section {background:#0F6;
		color:#FFF;
		padding:7px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0.5em 0em 0.0em 0em;
	color: #336699;}

Wentzell.eu zeigt den Entwurfsanfang, den ich eine nicht mehr gebrauchte URL geschrieben habe.

Dank im Voraus

Karl-Heinz

[Matthias Apsel]

Hallo LAW-Web,

Ich möchte meine Webseite in einer Breite von 1000 px im Browser zentrieren und finde keinen Weg.

Isgesamt gesehen ist das keine gute Idee. Was soll auf Geräten geschehen, die einen schmaleren Bildschirm haben?

Die Syntaxhervorhebung zeigt einen Fehler in deinem CSS.

https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Inhalte_zentrieren

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Isgesamt gesehen ist das keine gute Idee. Was soll auf Geräten geschehen, die einen schmaleren Bildschirm haben?

Er sagt’s und verweist auf

https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Inhalte_zentrieren

worin steht div { width: 30em } 😟

Das Wiki ist in Teilen mit äußerster Vorsicht zu genießen. Oder anders gesagt: Es ist ungenießbar.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Apsel

Isgesamt gesehen ist das keine gute Idee. Was soll auf Geräten geschehen, die einen schmaleren Bildschirm haben?

worin steht div { width: 30em } 😟

Du unterschlägst den Absatz vor diesem Beispiel:

Allgemein sieht das zu zentrierende Element nur dann auch optisch zentriert aus, wenn der Inhalt gut in die vorgegebene Breite hineinpasst. Ist das Element größer als die vorgegebene Breite, dann ragt es rechts hinaus; ist es jedoch kleiner, wird es an den linken Rand der vorgegebenen Breite gerückt:

(Hervorhebungen von mir). Das ist das Beispiel für ältere Varianten, deren Problematik bewusst durch ein Beispiel (siehe die zwei sehr schmalen, bzw. zu breiten Textabsätze) erläutert werden sollte.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Du unterschlägst den Absatz vor diesem Beispiel:

Nutzer kopieren Quellcode, ohne die Absätze davor oder danach zu lesen.

Es sollten keine Beispiele im Wiki stehen, wie man’s nicht macht; sondern nur Beispiele, wie man’s richtig macht.

Das ist das Beispiel für ältere Varianten, deren Problematik bewusst durch ein Beispiel (siehe die zwei sehr schmalen, bzw. zu breiten Textabsätze) erläutert werden sollte.

Nein, ältere, nicht zu empfehlende Varianten sollten nicht lang und breit erläutert werden.

LLAP 🖖

[TS]

Hello,

Es sollten keine Beispiele im Wiki stehen, wie man’s nicht macht; sondern nur Beispiele, wie man’s richtig macht.

Da bin energisch gegenteiliger Meinung!

Da es keinen Königs- oder gar Kaiserweg gibt, wie "man etwas richtig macht", können nicht alle möglichen Lösungswege einer Aufgabenstellung abgebildet werden. Und schon gar nicht sind Kraft und Platz dafür vorhanden, auch noch die eigentlich notwendigen Diskussionen dazu zu führen und niederzuschreiben, wann der eine oder wann der andere Weg besser ist.

Es ist aber möglich, die/den häufigsten Fehler "nicht so bitte -> warum nicht?" abzubilden. Das Beispiel sollte aber auf den ersten Blick als Negativbeispiel erkennbar sein, so wie hier im Forum z. B. mit der Formatierung :bad

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Es ist aber möglich, die/den häufigsten Fehler "nicht so bitte -> warum nicht?" abzubilden. Das Beispiel sollte aber auf den ersten Blick als Negativbeispiel erkennbar sein, so wie hier im Forum z. B. mit der Formatierung :bad

ACK.

Ich hatte erst angedacht, sowas auch in einem Nebensatz zu erwähnen. War wohl dem Feierabend geschuldet, dass ich’s dann doch weggelassen hatte. 😉

Aber dann bitte nur wirklich häufige Fehler, die man allenthalben im Web findet. Feste Breiten für Container fallen wohl darunter.

LLAP 🖖

[Gunnar Bittersmann]

@@LAW-Web

Hallo! Bin ganz neu hier und nicht sehr erfahren. Hoffentlich bin ich hier richtig?!

Ja. Ein kleiner Hinweis am Anfang: Das Forum verwendet Markdown-Syntax; da musst du ein paar Dinge beachten. Ich hab deinen Beitrag mal leserlich gemacht.

Ich möchte meine Webseite in einer Breite von 1000 px im Browser zentrieren und finde keinen Weg.

Dass das keine gute Idee ist, hat Matthias schon gesagt. Der Container sollte nicht eine feste Breite haben, sondern eine maximale Breite. In CSS also die max-width-Eigenschaft verwenden.

Noch besser: Vergessen, dass es Pixel gibt und Angaben relativ zur Schriftgröße in em bzw. rem tätigen.

Ein wrapper-Element gibt es in HTML nicht. Brauchst du auch nicht. Wie man das mit html und body hinbekommt, kannst du anhand dieses Beispiels sehen.

(Welchem man sein Alter auch ansieht. Die ganzen Vendor-Präfixe für runde Ecken und Schatten können weg. Und <!DOCTYPE html> anstatt XHTML 1.0; außerdem fehlt die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0"/>, damit das auf Mobilgeräten vernünftig dargestellt wird.)

Die CSS-Datei sieht z.zt. so aus:

Darin ist ein } zu viel; dafür in der HTML-Datei ein > zu wenig.

Und

height: 100.3%;

sollte auch ferner Vergangenheit angehören. Wenn du was auf volle Höhe setzen musst, dann 100%.

LLAP 🖖

[MudGuard]

Hi,

außerdem fehlt die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Wer ist eigentlich auf die blödsinnige Idee gekommen, die default-Werte für dieses Zeug (width/initial-scale) auf unsinnige Werte zu setzen? Warum sind diese Werte (device-width, 1.0) nicht der Default? So sind doch alte Seiten kaputtgemacht worden - da muß man jetzt extra ran und dieses meta-Ding einfügen …

height: 100.3%;

sollte auch ferner Vergangenheit angehören. Wenn du was auf volle Höhe setzen musst, dann 100%.

Vielleicht geht es nicht um volle Höhe, sondern um das Erzwingen eines vertikalen Scrollbars? (Wobei dann auch min-height besser wäre …)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

außerdem fehlt die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Wer ist eigentlich auf die blödsinnige Idee gekommen, die default-Werte für dieses Zeug (width/initial-scale) auf unsinnige Werte zu setzen? Warum sind diese Werte (device-width, 1.0) nicht der Default? So sind doch alte Seiten kaputtgemacht worden - da muß man jetzt extra ran und dieses meta-Ding einfügen …

Was blöd ist, sind „Web“seiten, die für eine gewisse Mindestbreite designt sind. (Was ein Oxymoron ist.)

Und das Blödeste daran: Diese Seiten haben keinerlei Kennzeichnung, dass sie blöd sind. Um diese Myonen von existierenden Seiten dennoch auch Smartphones darzustellen, gehen Browser davon aus, dass ungekennzeichnete Seiten eben blöd sind, setzen die Breite auf 960px und verkleinern, so dass es in den Viewport passt. So erhält der Nutzer einen Überblick und kann dann in die Seite hineinzoomen.

Wenn man nun als Webseitenautor nicht blöd ist, designt man Seiten so, dass diese sich dem Viewport anpassen. Aus eben genanntem Grund muss man das allerdings dann kenntlich machen – mit einer meta-viewport-Angabe.

—yours truly

LLAP 🖖