Dynamisches Layout mit dynamischer Navileiste

[jary]

Ich probiere mich gerade an einem dynamischen Layout aus.
Bin leider autodidakt und kenne noch nicht so viele Möglichkeiten.

Der Inhalte-Block soll immer zentriert sein. Das habe ich mit div Containern und Prozentangaben gelöst.
Auch das Headerbild wächst und schrumpft mit der Seite mit.

Meine Navigationsleiste soll jetzt im, bzw. über dem Headerbild liegen. Muss also genauso mit schrumpfen und wachsen.

Einfach wäre es natürlich, die Navigation in das Headerbild zu integrieren und das ganze zu einer Imagemap zu machen, ist mir aber nicht flexibel genug, wenn ich an der Navileiste mal was ändern will.

Wollte über das Headerbild mehrere div Boxen legen, die auch wieder mit Prozentangeben versehen sind. Allerdings müsste je die grundlegende div Box eine feste Größe haben, die aber je nach Fenstergröße immer an die Headergrafik angepasst ist, damit sich alle darin befindenden div Boxen auch wieder entsprechend ausrichten können...

Bin ich auf dem Holzweg? Gibt es andere Möglichkeiten?

 

[Efchen]

Der Inhalte-Block soll immer zentriert sein. Das habe ich mit div Containern und Prozentangaben gelöst.

Da das eine layouttechnische Frage ist, ist es irrelevant, mit welchem Tag Du das machst, bzw. wäre es falsch, ein bestimmtes Tag dafür einzusetzen, nur um eine Zentrierung zu erreichen.
Inline-Elemente zentriert man mit text-align:center; und Block-Elemente mit margin:0 auto;
Welches Tag man benutzt, hängt von der Semantik, also vom Inhalt ab.

Auch das Headerbild wächst und schrumpft mit der Seite mit.

Grafiken vom Browser skalieren zu lassen ist eine schlechte Idee, weil die Qualität doch sehr leidet.

Meine Navigationsleiste soll jetzt im, bzw. über dem Headerbild liegen. Muss also genauso mit schrumpfen und wachsen.

Kommt ein bisschen auf Deinen Code an. Und das Bild. Ich würde gern mal die Seite sehen.

P.S.: Eine Layoutfrage hätte doch besser ins CSS-Forum gepasst, weil HTML schließlich nichts mit dem Layout zu tun hat.

 

[jary]

Okey, beim nächsten Mal Layoutfragen ins CSS-Forum...

An den Qualitätsverlust beim browserskalieren der Headergrafik habe ich auch noch gar nicht gedacht.

Hier mal ein Entwurf:
(den Code überarbeite ich erst noch mit dem margin:0 auto; dankeschön dafür schonmal.)

Die vier einzelnen Bilder gehören nicht mehr zum Header, die Navileiste soll in dem schwarzen Balken platz finden.

 

[Efchen]

Und was genau ist jetzt das Problem? Zumal es mir scheint, als würdest Du auf das Skalieren der Bilder eher verzichten wollen.

Im Prinzip sieht das bisher so aus:

<div id="wrapper">
  <h1><img src="haus.jpg" alt="Haus der Musik" /></h1>
  <ul id="Menu">
    <li>...</li>
  </ul>
  <img ... />
  <img ... />
  <img ... />
  <img ... />
</div>

Und dann das übliche in CSS...bin grad zu faul ;-)

Das Hintergrundbild mit den Rahmen musst Du natürlich aufteilen, dem body am besten die braune Hintergrundfarbe geben, dem #wrapper (der zentriert wird) die blaue Farbe, für die Übergänge wohl eher in den wrapper links und rechts noch ein Element rein...usw.

Ist so heiß grad... ;-/

 

[jary]

Dankeschön.
Naja das Problem besteht glaube ich eigentlich nur, WENN man das Bild skalieren lässt. Nämlich wie ich dann das Menü dazu bringe, mit zu skalieren...
Wie würde das denn gehen?

Ansonsten: dein Code ist ja schon sehr schlank...^^
Ich glaube ich muss mich noch deutlich mehr mit CSS und layout-freiem HTML auseinandersetzen.

 

[Efchen]

Im Moment habe ich Schwierigkeiten damit, mir das vorzustellen, das Image zu skalieren, weil ich nicht wüsste, warum man das tun sollte.

Aber Du könntest Image und Menüleiste in einen <div> gruppieren, und das in der Größe ändern. Wenn das Image und die Menüleiste eine Größe bekommen, die abhängig von der Größe des <div> ist (also mit Einheit %; denn width:100% bedeutet dann ja "so breit wie das mich umschließende div), dann skalieren sich die Elemente in dem div mit.

Schönes Wochenende,
-Efchen