DIV-Container richtig positionieren

[derSchweriner]

Hallo alle zusammen,

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

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. Die Grafik, das Logo und die Navigation ist "FIX". Ebenfalls oben anfangen soll das Hintergrundbild, welches den Beginn aller nachfolgenden Elemente Markiert und unter dem Header durchscrollen kann. Das heist, alles scheint durch den Header etwas durch. So weit - so gut… 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. Habe alles versucht. Mit z-index die Reihenfolge der Sichtbarkeit... Mit clear: left; das floaten aufheben und und und.

Eventuell könnt ihr mir helfen.

Hier mal Auszüge aus meinem Quelltext:

HTML:

...
<div id="ges">
`!-- Header - anfang --`
		<div id="header"> 
    <div id="logo">
      <svg class="oben" viewBox="0 0 2200 180">
        <path d="M-1,-1 L2200,-1 L2200,130 C1500,40,300,180,-1,100" style="fill-opacity: 0.85;" fill="#F0F0F0"></path> 
        <path d="M2200,130 C1500,40,300,180,-1,100" style="stroke-width: 5;" fill="rgba(0,0,0,0)" stroke="#b22222"></path> 
      </svg> 
      <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>
<!-- Header - ende -->

<!-- Mitte - Anfang -->
  <div class="mitte"> 
    <img src="daten/pics/HeaderBilder/schwerin1.jpg" width="100%">        
    <svg class="mitte" viewBox="0 0 2200 130">
      <path d="M2200,33 C1500,-57,300,83,-1,3" style="stroke-width: 5;" fill="rgba(0,0,0,0)" stroke="#b22222"></path> 
      <path d="M2200,33 C1500,-57,300,83,-1,3 v127 L2200,130 Z" style="" fill="#ffffff"></path>
    </svg>
...
  </div>  
<!-- Mitte - ende -->
...
</div>

CSS:

body{ margin:0; padding:0; font-size:100.01%; }
img{ border:0 }
.clearing { clear: both; }
#ges { position:relative; margin: 0px auto; top:0px; width:auto; height:auto; z-index:0; display: block;}
#header { position:fixed; width:100%; top:0px; display:block;}
#logo{ position:relative; top:0px; width:100%; z-index:1;}
a{color:#000; font-family: Arial; font-size: 18px;text-DECORATION: none; font-weight: bold; }
a:hover { color: #b22222; Text-DECORATION: none; }

.oben { z-index:10; position:absolute; }
.mitte { z-index:-10; position:relative; }
.hnav1, .hnav2, .hnav3, .hnav4 { float: left; padding: 5px; } /* border: 2px solid #000;  */
.hnav5 { clear: left; padding: 5px; } /* border: 2px solid #000;  */
.hnav2, .hnav3, .hnav4, .hnav5 { margin-top: 10px; }
.hnav1 { width: 40%;} .hnav2 { width: 18%} .hnav3 { width: 8%;} .hnav4 { width: 8%;} .hnav5 { width: 13%; }
#inhalt{ position:relativee; border: 2px solid #222;}
...

Warum die Vorschau keine Zeilenumbrüche und kein Einrücken anzeigt...? Da seht ihr mal. Da fängt es schon an ;-(

Edit: Ich (JürgenB) habe das mal korrigiert.

Für eure Mühen möchte ich mich schon im Vorfeld recht herzlich bedanken!!!

[MrMurphy1]

Hallo

wenn meine Fragen oder Probleme als noch sehr anfängerhaft durchgehen sollten.

Richtig. Das Problem fängt aber viel früher an als von dir beschrieben und ist in der Regel kaum zu lösen.

Du willst eine Darstellung, die besucherunfreundlich ist und deshalb in HTML und CSS auch nicht vorgesehen ist. Der einzige, der sich daran erfreut, bist du. Um persönliche Vorlieben auszuleben sind Webseiten nicht gedacht.

Sondern der Informationsübermittlung. Und zwar für möglichst viele Personen. Stichworte: Benutzerfreundlichkeit, Zugänglichkeit und Barrierefreiheit.

Zur Informationsübermittlung sind deine Gestaltungswünsche überhaupt nicht erforderlich.

Deshalb sind deine Wünsche nur mit Tricks umzusetzen, die gleichzeitig die Benutzerfreundlichkeit der Seite einschränken.

Gruss

MrMurphy

[derSchweriner]

Der einzige, der sich daran erfreut, bist du. Um persönliche Vorlieben auszuleben sind Webseiten nicht gedacht.

Sorry, aber das verstehe ich nun wirklich nicht. Ich habe ein Bild vor Augen, wie die Seite aussehen soll und es scheitert an der Umsetzung. Warum sollte das "Stapeln" von DIV's ein Problem darstellen? Und warum ist es Benutzerunfreundlich, wenn die Hauptnavigation stehen bleibt? Hat man doch früher mit Frames auch gemacht.

Egal wie unsinnig es in deinen Augen erscheint… Hast du einen Lösungsvorschlag?

P.S.: Vielen Dank für das Formatieren! kannst du mir noch schreiben, wie man das hier bewerkstelligt?

[MrMurphy1]

Hallo

Zunächst zur Klarstellung: Ich habe deine Quelltextschnipsel nicht formatiert.

Hast du einen Lösungsvorschlag?

Klar kann ich das. Aber ich unterstütze keine benutzerunfreundlichen Seiten.

Ich habe aber mal aus deinen Angaben eine Beispielseite erstellt. Das erleichtert Anderen, die dir konkret helfen möchten, die Hilfe. Zudem muss so nicht jeder die Seite selbst erstellen, was die Hilfsbereitschaft im allgemeinen stark mindert.

Beispielseite

Gruss

MrMurphy

[derSchweriner]

Klar kann ich das. Aber ich unterstütze keine benutzerunfreundlichen Seiten.

Ich denke, lieber MrMurphy, du bist ein Schnacker. Sorry, aber ich kann deine Argumente absolut nicht nachvollziehen (hinsichtlich der Benutzerfreundlichkeit) und zu einer Lösung wirst du auch nichts beitragen können.

Dennoch danke für die Beispielseite - wenn gleich sie auch völlig anders aussieht als bei mir.

[JürgenB]

Hallo,

P.S.: Vielen Dank für das Formatieren! kannst du mir noch schreiben, wie man das hier bewerkstelligt?

für einen Zeilenumbruch musst du zweimal <return> einfügen.

Um Quellcode als solchen zu formatieren, gibt es die Schaltfläche </>.

Weitere Hilfe zur Formatierung der Beiträge hier im Forum findest du unter der Schaltfläche ?.

Gruß
Jürgen

[derSchweriner]

Danke Jürgen für die Hilfe! Ich werde es in Zukunft berücksichtigen.

[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

[Gunnar Bittersmann]

@@marctrix

Für einen feststehenden Kopfbereich braucht es eigentlich nur

header {
  position: fixed;
}

Nei-en! Nicht fixed. Wenn, dann sticky. Das hatten wir doch gerade erst. [1, 2]

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

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

Nicht, wenn es sich um Dekoration handelt. Dann brauchen sie ein ungefülltes alt-Attribut. role="none presentation" kann dann nicht schaden. (Wobei das Bild dann besser gar nicht im HTML auftauchen sollte, sondern als Hintergrundbild im Stylesheet.)

Und auch nicht, wenn das Bild anderweiteig beschriftet ist, z.B. per figcaption. aria-labelledby kann dann nicht schaden.

LLAP 🖖

[marctrix]

Hej Gunnar,

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

Nicht, wenn es sich um Dekoration handelt. Dann brauchen sie ein ungefülltes alt-Attribut. role="none presentation" kann dann nicht schaden. (Wobei das Bild dann besser gar nicht im HTML auftauchen sollte, sondern als Hintergrundbild im Stylesheet.)

Ein leeres alt-Attribut kann sinnvoll sein, ja.

Aber das hätte ich dennoch schreiben sollen. Du hast natürlich recht, ich war etwas in Eile. Danke für die Korrekturen!

Marc

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nicht, wenn es sich um Dekoration handelt. Dann brauchen sie ein ungefülltes alt-Attribut. role="none presentation" kann dann nicht schaden.

Hm, Scott O’Hara schreibt in Know your ARIA: 'Hidden' vs 'None': “Neither aria-hidden="true" or role="presentation" are particularly appropriate for hiding img elements. To hide an image from assistive technologies, all one needs to do is set the img’s alt attribute to the empty string.”

LLAP 🖖

[Rolf B]

Hallo Schweriner,

dein CSS ist sehr umständlich, weil Du versuchst, jedes Element zu kontrollieren. Der Browser kann das besser, wenn Du die richtigen Anzeigemodelle wählst. Für Dich interessant ist die Flexbox, float ist für die von Dir gewünschte Darstellung nicht mehr zeitgemäß (das stammte aus der Zeit, wo man Tabellen zu meiden suchte aber Flexbox noch nicht verfügbar war).

Bei position:fixed muss man noch beachten, dass es genau wie position:absolute das fixierte Element aus dem normalen Flow herausnimmt, d.h. die nachfolgenden Elemente werden so positioniert als würde es das fixed-Element gar nicht geben. Du musst den eigentlichen Inhalt also mit einem Margin nach unten schieben. Und zwar mit der Einheit "vw" - wie Viewport Width - weil dein SVG ja ebenfalls mit der Anzeigebreite "atmet". Viewport steht für den Innenraum des Browserfensters; 10vw bedeutet beispielsweise: 10% der Viewport-Breite.

Darüber hinaus hat dein HTML ein paar Anachronismen drin:

• Der Body darf gestyled werden. Es ist nicht nötig, den ganzen Inhalt in ein Extra-DIV zu packen. Weiß der Geier, warum man das vor Jahrzehnten propagiert hatte.
• HTML 5 bringt ein paar Elemente mit, die eine semantische Auszeichnung fördern: header, main, footer, und nav
• Menüpunkte, die nebeneinander stehen sollen, setzt man in eine Liste mit Flexbox-Layout. Man kann dann entweder einen Umbruch vorsehen, wenn die Liste zu schmal wird, oder sorgt mit Media-Abfragen dafür, dass bei zu schmalem Viewport die Menüliste anders gestyled wird (z.B. als Dropdown-Menü).
• Maße legt man nur dann in Pixel fest, wenn es unbedingt nötig ist (z.B. für ein Bild, das nicht skaliert werden soll). Ansonsten verwendet man em oder rem für Dinge, die analog zur Textgröße skalieren sollen, pt für Schriften und vh/vw für Dinge, deren Größe relativ zum Browserfenster sein soll.
• Achso, Schriften: Es gibt ein Leben jenseits von Arial. Da gehört MINDESTENS noch sans-serif hinzu, weil Arial lange nicht auf allen Systemen existiert.

Ich habe hier mal ein bisschen gefiddelt: https://jsfiddle.net/qmu540xf/; in der simplen Version mit Umbruch der Menü-Items bei schmalen Viewports.

Schau Dir das Flex-Tutorial durch, dann verstehst Du, was das Markup tut.

li:nth-of-type(n+2) ist ein Trick, um Abstand ZWISCHEN den List-Items zu produzieren. Dieser Selektor gilt für alle li ab dem zweiten.

Von dem oben genannten Prinzip "alle Menüpunkte in eine Liste" bin ich für den logo-grau Link abgewichen. Dieser Link bleibt links am Rand und muss daher anders formatiert werden, darum habe ich ihn aus der Liste herausgenommen. Es wäre für Bedienbarkeit möglicherweise besser, eine zweistufige Liste zu machen.

Dein Schwerin-Bild wird vermutlich so noch nicht passen, aber ohne Bilder kann ich das schlecht festlegen. Und du müsstest für deine Bilder noch alt-Attribute festlegen, für das logo-grau UNBEDINGT, damit sehbehinderte Anwender vom Screenreader etwas sinnvolles vorgetragen bekommen.

Ob ein fixierter Titel für Sehbehinderte oder Nichtmausnutzer (Screentoucher und Tastaturbenutzer) tatsächlich praktisch ist, kann ich nicht sagen. Mr. Murphy klang eher nicht so.

Edit: Ich habe das parallel zu Marc geschrieben; ich war nur viel langsamer…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ansonsten verwendet man […] pt für Schriften

Im Stylesheet für media print. Für die Bildschirmausgabe aber ist pt noch weniger geeignet als px.

li:nth-of-type(n+2) ist ein Trick […] Dieser Selektor gilt für alle li ab dem zweiten.

li:not(:first-of-type) tut dasselbe, ist aber weniger Trick, sondern besser lesbarer Code.

LLAP 🖖

[derSchweriner]

Super Leute!!!

das sind alles wirklich sehr hilfreiche Tipps. Vielen Dank dafür!!! Ich werde das gleich mal probieren und dann hier den Erfolg (oder Misserfolg) posten.