padding und vertical-align?

[Susanne]

Hallo,

mein persönliches Rätsel am lustigen Rosenmontag lautet: Was muß ich nur tun, um meinen Text in einem <div> top auszurichten? Ich wollte Seitenelemente, die ich sonst mit Tabellen zusammengefummelt hätte, mit Hilfe von <div> darstellen, also z.B. eine "klassische" Aufteilung in Kopfzeile, Navigation links und Inhalte rechts neben der Navigation. Deshalb wollte ich jeweils eine Höhe für diese Elemente mit padding-top festlegen. Aber dann wird der Text immer unten dargestellt? Ich habe es so versucht...

#.test {
 vertical-align: top;
 padding-top: 20px;
 background-color : #fffff0;
}

Wann wird denn "vertical-align" nicht ignoriert?

Btw, gibt es eine empfehlenswerte Schritt-für-Schritt Anleitung, um css-Seiten zu erstellen und dabei eine gewisse theoretische Fundierung zu erlangen? Ich wollte mich an http://www.einfach-fuer-alle.de orientieren, finde sie aber für mein gesundes Halbwissen recht komplex...

Liebe Grüße
Susanne

[Sönke Tesch]

Was muß ich nur tun, um meinen Text in einem <div> top auszurichten?

Deshalb wollte ich jeweils eine Höhe für diese Elemente mit padding-top festlegen. Aber dann wird der Text immer unten dargestellt?

vertical-align: top;
padding-top: 20px;

[x] Du möchtest Dich vor der Benutzung von padding darüber informieren, was "padding" eigentlich ist (http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions).

Gruß,
  soenk.e

[MudGuard]

Hi,

Deshalb wollte ich jeweils eine Höhe für diese Elemente mit padding-top festlegen.

Wie bitte? padding-top legt den Abstand zwischen der oberen Border und dem Inhalt fest, aber nicht die Höhe (height).

#.test {

^^  was soll denn das?

leitet eine id ein. Eine id kann aber nicht leer sein und nicht mit . beginnen.

. leitet eine Klasse ein. Aber das kann es ja auch nicht sein, dann müßte ja einen nichtleere id davorstehen...

vertical-align: top;
padding-top: 20px;
background-color : #fffff0;
}

Ohne weitere Angaben (insbes. zur Höhe) ist vertical-align auch nicht sehr sinnvoll, da dann das Element genau so hoch sein wird wie benötigt...

cu,
Andreas

[Susanne]

Hallo Andreas,

mit Deinen Anmerkungen hast Du mein Problem auf den Punkt gebracht: die www.einfach-fuer-alle.de wollte ich für mich persönlich als Referenzseite benutzen, um zu schauen "wie die das eigentlich gemacht haben". Und in dem zugehörigen stylesheet wurde eben viel mit id's gearbeitet, mir schien es so zu sein, als wäre die Höhe von bestimmmten Elementen mit padding-top festgelegt worden. Wenn ich die Werte dafür verändert habe, hat sich eben die Höhe verändert... aber so einfach isses halt wohl doch nicht.

Deshalb auch die Frage in meinem Posting nach einem Lehrbuch dazu. Ich finde SelfHtml und dieses Forum als Referenz und als fachlichen Austausch unglaublich gut geeignet und lehrreich, aber das Zusammenreimen und "Stümperfragen-im-SelfForum-stellen" ist halt doch ein wenig mühselig...

Trotzdem danke für Deine Denkanstöße.

Liebe Grüße
Susanne

[Joachim]

hi,

aber das Zusammenreimen und "Stümperfragen-im-SelfForum-stellen" ist halt doch ein wenig mühselig...

die sollst Du auch nicht stellen. Lade Dir die Doku runter und lies die Basics durch, dann werden Deine Fragen automatisch kompetenter - und beantwortbar.

Gruesse  Joachim

[erika]

Hallo Susanne,

SelfHtml hört bei CSS leider da auf, wo's richtig interessant wird.
Das heißt: Es wird fast nichts dazu gesagt, wie man Webseiten nur mit CSS gestaltet. Das ist zur Zeit immer noch etwas zeitaufwendig, weil die Browser CSS nicht vollständig und zum Teil auch fehlerhaft interpretieren.
Meine Empfehlung:
Kai Laborenz: CSS-Praxis. Browserübergreifende Lösungen.
Zum Buch gibt es auch eine Website
http://www.css-praxis.de
Dort kannst Du u.a.auch das Inhaltsverzeichnis einsehen.
Es gibt auch interesante Links zum Thema sowie ein Forum mit positiven und auch negativen Äußerungen zum Buch.
Übrigens wird auch die Website "Einfach für alle" interpretiert.
Für die CSS-Experten wird das Buch wahrscheinlich nicht viel Neues bieten, für mich ist es eine anregende Lektüre, wenn ich bloß mehr Zeit hätte ;-)

Grüsse, erika