Verständnisfrage Seitenlayout mit Kopf und zwei Spalten

[frankx]

Hellihello,

irgendwie hakts bei mir heute:

Mein Verständnis vom Seitenlayout und auch praktiziert:

Überschrift <h1> thront über allem.

Das Menü links wird gefloatet, bekommt deshalb auch eine Breite verpasst. Der Inhalt rechts erhält einen Margin links angepasst an die Breite des Menüs.

Nun aber wollte ich oben links noch ein Bild reinpacken:

• als Background ist nicht so gut, weil dann kann ich den Abstand top/left nicht kontrollieren.

• absolut positioniert, dem Body ein position:relative verpasst, funktioniert, scheint mir aber "uncool".

• im <h1>-Tag wäre nicht unlogisch, denn es ist das Bild (Foto eines Hausnamens), das auch im Titel ausgeschrieben wird. Aber dann krieg ich es im h1 ja nicht nach links gerückt, und den Titel trotzdem zentriert oder? Außerdem macht das Bild dann den h1-Block höher, und die weitere Textüberschrift krepelt am Boden. Um diese in die Mitte zu bekommen, müsste ich ja die Line-height hochsetzen, an die Höhe des Bildes angepasst, oder. Aber das ist ja auch irgendwie krepelig finde ich.

• Das Bild links vom h1-Tag. Ist semantisch nicht so schön. Floaten lassen. Dann aber ist der Text im h1 zwar zentriert, aber nicht mehr auf die volle breite gesehen, oder? Zudem floatete dann, ob der Bildhöhe auch das Menü, was unschön aussah. Dann müsste ich das menü-div/ul und content-div wohl noch mit clear:left versehen?

Oder soll ich lieber eine Tabelle nehmen, oder ein Frameset? *eknw*

Dank und Gruß,

frankx

[suit]

Oder soll ich lieber eine Tabelle nehmen, oder ein Frameset? *eknw*

ja, tabellen sind cool

was hälst du davon:

<div id="header">
  <h1>frankx' Ponny-Website</h1>
</div>

#header {
  position: absolute;
  background: url() no-repeat x y;
}

h1 {
  position: absolute;
}

[frankx]

Hellihello

Oder soll ich lieber eine Tabelle nehmen, oder ein Frameset? *eknw*
ja, tabellen sind cool

Du konntest mein private acronym entziffern? bzw. translated acronym?

was hälst du davon:

<div id="header">
  <h1>frankx' Ponny-Website</h1>
</div>

oder

<h1>frankx Pony-Hof</h1>

h1 {
  background: url(Ponyhof-namenzug-Foto.jpg) no-repeat x y;
}

h1 ist ja schon eine "id" eigentlich.

Wozu hast Du die absoluten Positionierungen eingeführt?

Dank und Gruß,

frankx

[suit]

Du konntest mein private acronym entziffern? bzw. translated acronym?

nein, aber tabellen sind cool :D

h1 ist ja schon eine "id" eigentlich.

ja schon, aber soweit ich dich verstanden habe, willst du ein bild im header haben und den text dazu getrennt positionieren - dazu brauchst du mindestens ein weiteres element, wenn ich dich richtig verstanden habe

alternativ gehts auch so

<h1><span>frankx Pony-Hof</span></h1>

Wozu hast Du die absoluten Positionierungen eingeführt?

warum nicht ;) wenn du die überschrift ausserhalb des headers positionieren willst und den header wo anders hin, als er im quelltext ist

ich kenne dein vorhaben nicht (visuell), darum hab ich geraten

[frankx]

Hellihello

h1 ist ja schon eine "id" eigentlich.
ja schon, aber soweit ich dich verstanden habe, willst du ein bild im header haben und den text dazu getrennt positionieren - dazu brauchst du mindestens ein weiteres element, wenn ich dich richtig verstanden habe

Na, deine Background-Variante funktioniert ja, also Background für die h1. Der Background beeinflusst ja den Rest nicht.

<h1><span>frankx Pony-Hof</span></h1>

jau.

Wozu hast Du die absoluten Positionierungen eingeführt?
warum nicht ;) wenn du die überschrift ausserhalb des headers positionieren willst und den header wo anders hin, als er im quelltext ist

ich kenne dein vorhaben nicht (visuell), darum hab ich geraten

______
|      |
| foto |          foto-schriftzug-als schrift - hallo hallo
|______|_____________________________________________________

link1 |      very important content of link1 oder link2 or etc.pp.
 link2 |
 link3 |
 etc   |

Dank und Gruß,

frankx

[Felix Riesterer]

Lieber frankx,

Das Menü links wird gefloatet, bekommt deshalb auch eine Breite verpasst. Der Inhalt rechts erhält einen Margin links angepasst an die Breite des Menüs.

das gibt meiner Erfahrung nach Ärger, da das Inhaltselement in seiner "Breite" den gesamten verfügbaren Bereich verbraucht. Der margin ändert daran nichts. Er regelt nur, wie weit eventuelle border vom Rand der verfügbaren Fläche weg sein müssen. Er gibt keinesfalls den frei werdenden Bereich als "unverbraucht" frei!

Ich rate Dir daher zu einer absoluten positionierung des Menüs, wenn Du den Inhalt in seiner Breite variabel halten möchtest. Beispiel

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[frankx]

Hellihello Felix,

Lieber frankx,

Das Menü links wird gefloatet, bekommt deshalb auch eine Breite verpasst. Der Inhalt rechts erhält einen Margin links angepasst an die Breite des Menüs.

das gibt meiner Erfahrung nach Ärger, da das Inhaltselement in seiner "Breite" den gesamten verfügbaren Bereich verbraucht. Der margin ändert daran nichts. Er regelt nur, wie weit eventuelle border vom Rand der verfügbaren Fläche weg sein müssen. Er gibt keinesfalls den frei werdenden Bereich als "unverbraucht" frei!

Hier scheint mit die absolute Positionierung auch sinnvoll. Wenngleich jetzt rein logisch: Wenn das Menü links umflossen wird, dann stößt der Inhalt nie daran. Er würde ohne den Margin-left, wenn er denn länger als das Menü wird, das Menü auch unten umfließen. Das aber verhindert der Margin-left doch konsequent, oder?

Ich rate Dir daher zu einer absoluten positionierung des Menüs, wenn Du den Inhalt in seiner Breite variabel halten möchtest. Beispiel

Dein Hund? (;-).

Dank und Gruß, frankx aka

frankx

[Felix Riesterer]

Lieber frankx,

Wenngleich jetzt rein logisch: Wenn das Menü links umflossen wird, dann stößt der Inhalt nie daran. Er würde ohne den Margin-left, wenn er denn länger als das Menü wird, das Menü auch unten umfließen. Das aber verhindert der Margin-left doch konsequent, oder?

in meinen Quelltexten steht der Inhalt immer zuerst. Ein Menü steht immer danach. Daher habe ich für diese Lösung stillschweigend einen so gehaltenen HTML-Code vorausgesetzt. Wenn diese Reihenfolge jedoch anders herum ist, dann hast Du mit float tatsächlich Möglichkeiten, die ich so nicht habe.

Dein Hund? (;-).

Nein, das ist ein möglicher Standardhintergrund von Puppy Linux, welches ich in unserem Internetcafe verwende.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[suit]

in meinen Quelltexten steht der Inhalt immer zuerst. Ein Menü steht immer danach. Daher habe ich für diese Lösung stillschweigend einen so gehaltenen HTML-Code vorausgesetzt. Wenn diese Reihenfolge jedoch anders herum ist, dann hast Du mit float tatsächlich Möglichkeiten, die ich so nicht habe.

da kann ich dir auch nicht ganz folgen, bei mir sind die menüs auch immer nach dem inhalt, allerdings ist das menu nur dann absolut positioniert, wenn es über dem inhalt drüber ist - wenns links oder rechts daneben liegt, habe ich auch mit float keine probleme

[Felix Riesterer]

Liebe(r) suit,

allerdings ist das menu nur dann absolut positioniert, wenn es über dem inhalt drüber ist - wenns links oder rechts daneben liegt, habe ich auch mit float keine probleme

auch dann nicht, wenn die Breite des Inhalts variabel sein soll? Dann bitte ich Dich um einen Link auf eine Deiner Seiten, auf denen das so sein soll!

Liebe Grüße aus Ellwangen,

Felix Riesterer.