Felix Riesterer: CSS: Text an Bildschirm anpassen?

Beitrag lesen

Lieber Daniel,

	<body>
		<div id="outer-wrapper">
			<div id="reg-wrapper">
				<div id="headtext">
					<h1>Register..</h1>
				</div>
			</div>
		</div>
	</body>

im Ernst jetzt?

Schau mal in das Kapitel Warum Layouts mit CSS?, speziell den Teil Trennung von Inhalt und Design! Dein HTML-Code, also das Markup, stinkt geradezu nach Layout-driven Design. Und das ist nicht gut!

Besser so:

<body>
    <main>
        <section id="register">
            <h1>Register</h1>
            <form method="post">
                <ul>
                    <li>
                        <label for="mail">E-Mail</label>
                        <input id="mail" name="mail">
                    </li>
                    <li>
                        <label for="user">gewünschter Benutzername</label>
                        <input id="user" name="user">
                    </li>
                    <li>
                        <label for="pw">Passwort</label>
                        <input id="pw" name="pw">
                    </li>
                    <li>
                        <label for="pw2">Passwortbestätigung</label>
                        <input id="pw2" name="pw2">
                    </li>
                </ul>
            </form>
        </section>
    </main>
    <header>...</header>
    <footer>...</footer>
</body>

Mein Beispiel verwendet jede Menge an verschachtelten HTML-Elementen, die alle jeweils einem ganz speziellen Zweck folgen (main ist der eigentliche Inhaltsbereich, section bildet einen Abschnitt, form ist ein Formular usw.), sodass Deine Divitis ganz und gar unnötig ist.

Du darfst Dir gerne Anregungen aus dem Kapitel Formulare erstellen und gestalten holen, um auch den Rest Deiner Seite mit sinnvollem Markup auszurüsten, welches Du dann mittels CSS gekonnt in Szene setzt.

Liebe Grüße,

Felix Riesterer.