DIV-Container richtig positionieren

[marctrix]

Hej derSchweriner,

ich bin neu hier und bitte daher um etwas Nachsicht, wenn meine Fragen oder Probleme als noch sehr anfängerhaft durchgehen sollten.

Das ist doch egal, ob Anfänger oder nicht. Wir lernen alle nicht aus! In diesem Sinne erst mal herzlich willkommen!

Folgendes Problem: Ich möchte auf einer Seite einen Header erzeugen, bei dem ein grafisches Element (zum Teil transparent) den oberen Bereich bedeckt und auf ihm soll ein Logo und die Hauptnavigation liegen.

Hmm — kann ich mir jetzt nicht so gut vorstellen. Hast du mal einen Link zur problematischen Seite und einen Screenshot vom gewünschten Ergebnis?

Sonst muss jeder, der Dir helfen will, das selber nachbauen. Werden vermutlich nur wenige Lust zu haben.

Die Grafik, das Logo und die Navigation ist "FIX".

das wird auf „normalen“ Bildschirmen, also mobilen geraten, die von den meisten Besuchern benutzt werden, aber ziemlich viel Platz rauben…

Nur leider funktioniert das bei mir nicht so richtig. Ich denke, die DIV`s sind falsch formatiert, denn auch alles, was nach dem Hintergrundbild kommt fängt ganz oben an.

Ich denke, da liegt konzeptionell etwas im Argen.

Als erstes wird ein HTML-Dokument erstellt. Das bedeutet, du erstellst eine Text-Datei, in der du mit sogenannten Tags Elemente erstellst. Diese Elemente haben erst mal alle eine logische Bedeutung. Absatz, Überschrift, Navigation, Hauptbereich und anderes mehr.

Erst wenn die logische Struktur des Dokumentes sauber ausgezeichnet ist, kommen ggfs. benötigte Hilfs-Elemente wie div und span ohne jede Semantik dazu, falls sie für Schritt zwei benötigt werden.

Schritt zwei ist das Layout. Auch hierbei gilt es eine sinnvolle Reihenfolge einzuhalten:

Erst mal ein paar grundlegende Dinge festlegen, wie ausreichend kontrastreiches Farbschema, das dem Corporate Design entspricht (falls vorhanden), zu verwendende Schriften festlegen etc…

Danach geht es an die technische Umsetzung des Layouts.

1.) Kümmere dich zunächst um die Darstellung auf Smartphones 2.) Erweiterung Dein Layout für eine vernünftige Desktop-Darstellung (z.B. Mehrspaltigkeit).

Habe alles versucht. Mit z-index die Reihenfolge der Sichtbarkeit... Mit clear: left; das floaten aufheben und und und.

Vermutlich ist inzwischen zu viel Zeugs drin, was gar nicht mehr benötigt wird und sich gegenseitig überschreibt?!?

Für einen feststehenden Kopfbereich braucht es eigentlich nur

header {
  position: fixed;
}

Dem kannst du ggfs. ein Hintergrundbild mitgeben…

Eventuell könnt ihr mir helfen.

Ich hoffe, das bringt Dich einen Schritt weiter.

>       <div class="hnav1"><a href="#"><img src="daten/pics/logo_grau.png" width="230" height="100"></a></div>
>       <div class="hnav2"><a href="#" title="...">Tätigkeitsschwerpunkte</a></div>
>       <div class="hnav3"><a href="#" title="...">Vita</a></div>
>       <div class="hnav4"><a href="#" title="...">Office</a></div>
>       <div class="hnav5"><a href="#" title="...">Terminsvertretung</a></div>
>     </div>
>   </div>

Eine Navigation heißt in HTML nav, eine Liste von Links wird mit ul ausgezeichnet, die ganzen Klassen kannst du dir dann sparen.

Danach legst du Deinen Hauptbereich mit main an und keine „Mitte“…

<img src="daten/pics/HeaderBilder/schwerin1.jpg" width="100%">        

Bilder brauchen immer ein sinnvoll gefülltes alt-Attribut…

Viele Grüße

Marc