[Tomtom84]

Hallo, ich bin ein blutiger Anfänger was Webdesign betrifft und bin gerade dabei eine Webseite auf die Beine zu stellen. Dabei möchte ich den Header als full width ausgeben, doch das funktioniert nicht ganz. Ich habe einen div Container

<div class="header">

Den habe ich über Css folgende Attribute gegeben:

.header{   position: absolute;width: 100%;left: 0;}

Der Header (Hintergrundfarbe weiß) wird nun auch volle Breite angezeigt. Jedoch sind alle anderen Elemente (Navigation, main-column und footer) nach oben gerutscht, so dass diese jetzt den Header überdecken, wo das Logo etc hin soll. Weiß Jemand wie ich das "hoch rutschen" der anderen Elemente vermeiden kann?
Ich würde mich riesig über eure Hilfe freuen.


Hier die Seite: Saale Präzisionswerkzeuge — Just another WordPress site
Grüße Tom

[MrMurphy]

Hallo,

mit "position: absolute" nimmt du den header aus dem Elementenfluss. Folge: Die anderen Elemente können nicht mehr auf den header reagieren.

Du musst dem folgenden Element also einen oberen Abstand (margin-top) in Höhe des headers mitgeben.

Insgesamt solltest du aber auf "position: absolute" verzichten. Einen feststehenden, Platz wegnehmenden, header braucht außer dir niemand.

Gruss

MrMurphy

[Tomtom84]

Hallo,

vielen Dank für Deine Antwort. Sobald ich das

postition:absolute;

raus nehmen, ist der .header aber nicht mehr full width und nimmt trotz des Befehls

width:100%;

die alte Größe wieder ein...(1100px)... Ich bitte nochmals um Hilfe...

[MrMurphy]

Hallo,

dir fehlen leider einige wichtige Grundlagen.

Wenn der header sich in einem Container mit einer Breite von 1100px befindet und er dem Elementenfluss folgt kann er natürlich nicht breiter als 1100px werden.

Du musst den header also über den Container setzen wenn er 100% Breite einnehmen soll. In diesem Fall also vor das div .main_container.

Die beiden div .main_container und #landig-page sind überflüssig und sollten komplett entfernt werden.

Insgesamt ist es guter Stil nur Container zu erstellen die auch benötigt werden. Du leidest unter der Divitis (auch bekannt unter Diveritis und ähnlichen Namen) und erzeugst viel zu viele Container, die dir dann immer wieder Kummer bereiten.

Gruss

MrMurphy

[Tomtom84]

Danke für Deine Nachricht. Hab jetzt den Header full width hinbekommen und lasse mir dort 2 Bilder die ich mit css inline lade anzeigen. Nun stehe ich vor dem nächsten Problem.
Wie kann ich dem Bild rechts eine feste Position geben, sodass es sich erst ab einer Bildschirmbreite von 1100px mit "verschiebt" und ab einer bestimmten Bildschirmbreite nicht mehr angezeigt wird?

Hat Jemand eine Idee?

Grüße

Tom

[MrMurphy]

Hallo,

da gibt es viele Möglichkeiten. Ohne einen Link zu deiner Datei oder den HTML- und CSS-Quelltext kann ich dir nicht weiterhelfen.

Gruss

MrMurphy

[Tomtom84]

Hallo Murphy, danke für deine schnelle Antwort ein Link zur Seite ist weiter oben im Gesprächsverlauf. Aber hier nochmal die Seite: Saale Präzisionswerkzeuge — Just another WordPress site

Danke!!!

[MrMurphy]

Hallo,

so ganz klar ist mir noch nicht was du möchtest, deshalb habe ich mal eine Beispielseite erstellt.

Zunächst solltest du vom div.header die Höhe (height) entfernen. Die Höhe wird vom Inhalt bestimmt.

Dann solltest du die Grafiken direkt in den HTML-Quellcode im body-Bereich einfügen.

Das Logo (linkes Bild) ist in jedem Fall eine Information, die damit in den Quelltext gehört.

Die Bohrer (?) (rechtes Bild) sind ein Zwischending zwischen Information und schmückendem Beiwerk. Sachlich können die also auch direkt in den body-Bereich eingefügt werden.

   <div class="header-start">
      <img src="http://www.saale-praezisionswerkzeuge.de/wp/wp-content/uploads/2015/09/logo-saale-praezisionswerkzeuge.png" alt="Logo">
      <img src="http://www.saale-praezisionswerkzeuge.de/wp/wp-content/uploads/2015/09/bild_header_rechts.png" alt="3 Bohrer">
   </div>

Höhenmäßig nimmt der Header zu viel Platz ein. Es ist ein beliebter Anfängerfehler dem Header zu viel Höhe einzuräumen. Die Besucher ärgern sich dann, dass sie unnötig scrollen müssen um an die eigentlichen Informationen zu gelangen. Ich habe deshalb per CSS die Bilder auf eine Höhe von 100px begrenzt.

Falls du das beibehalten möchtest solltest du beide Bilder in einem Bildbearbeitungsprogramm auf 100px Höhe skalieren. Bilder sollten nicht größer sein als sie in einer Webseite angezeigt werden. Ansonsten kannst du das CSS ja entsprechend deinen Vorgaben anpassen.

Beim CSS habe ich die Breite des main-Bereichs als Vorlage genommen, also die bereits von dir genannten 1100px und die beiden Bilder in dem Bereich jeweils außen angeordnet.

Da die Bilder bei einer Fensterbreite von weniger als 700px gegeneinanderstoßen blende ich das rechte Bild bei weniger Fensterbreite aus. Das CSS dazu sieht dann so aus:

@media all {
   div.header-start {
      overflow: hidden; /* um das float einzugrenzen */
      width: 1100px;
      border: 1px solid blue;
      margin: 0 auto;
   }
   img {
      display: block;
      float: left;
      max-width: 100%;
      max-height: 100px;
      border: 1px solid orange;
      margin: 0;
   }
   img:nth-child(2) {
      float: right;
   }
}
@media only screen and (max-width: 1100px) {
   div.header-start {
      width: 100%;
   }
}
@media only screen and (max-width: 700px) {
   img:nth-child(2) {
      float: none;
      display: none;
   }
}

Eine fertige Seite könne dann so aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bilder im Header verschieben 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
      div.header-start {
         overflow: hidden; /* um das float einzugrenzen */
         width: 1100px;
         border: 1px solid blue;
         margin: 0 auto;
      }
      img {
         display: block;
         float: left;
         max-width: 100%;
         max-height: 100px;
         border: 1px solid orange;
         margin: 0;
      }
      img:nth-child(2) {
         float: right;
      }
   }
   @media only screen and (max-width: 1100px) {
      div.header-start {
         width: 100%;
      }
   }
   @media only screen and (max-width: 700px) {
      img:nth-child(2) {
         float: none;
         display: none;
      }
   }
   </style>
</head>
<body>
   <div class="header-start">
      <img src="http://www.saale-praezisionswerkzeuge.de/wp/wp-content/uploads/2015/09/logo-saale-praezisionswerkzeuge.png" alt="Logo">
      <img src="http://www.saale-praezisionswerkzeuge.de/wp/wp-content/uploads/2015/09/bild_header_rechts.png" alt="3 Bohrer">
   </div>
</body>
</html>

Gruss

MrMurphy

[Tomtom84]

Wow,

vielen Dank für Deine Lösung! Ich weiß gar nicht wie ich mich dafür bedanken soll, dass Du Dich mit meinen Problemen hier rum schlägst...

Dein Code funktioniert wirklich super. Nur zwei Dinge versteh ich darin nicht. Vielleicht kannst du mir das zu meinem Verständnis erklären:

1.

 img { 
max-width: 100%;
margin: 0;

wenn ich max-width für das erste Bild setzt, heißt dass, es wird so groß angezeigt, wie ich es auch hoch lade?
Wieso muss ich margin:0; setzen, wenn ich es nicht angebe ist der Abstand doch auch 0, oder?


2. Wieso ist diese Angabe nötig:

@media only screen and (max-width: 1100px) {
   div.header-start {
      width: 100%;
   }

Das ist doch vorher schon in dem "@media all" Befehl enthalten. Wieso muss ich das hier nochmal deklarieren??

Beste Grüße

Tom

[MrMurphy]

Hallo

wenn ich max-width für das erste Bild setzt, heißt dass, es wird so groß angezeigt, wie ich es auch hoch lade?

Genauer: Höchstens so breit wie es hochgeladen wird. Wenn weniger Platz als die Breite zur Verfügung steht wird es flexibel verkleinert. Damit wird verhindert, das wegen eines zu großen Bildes seitwärts gescrollt werden muss.

Wieso muss ich margin:0; setzen, wenn ich es nicht angebe ist der Abstand doch auch 0, oder?

Stimmt. Manche Angaben mache ich einfach aus Gewohnheit, obwohl sie nicht notwendig sind.

Das ist doch vorher schon in dem "@media all" Befehl enthalten. Wieso muss ich das hier nochmal deklarieren??

Ich hatte eine feste Breite von 1100px vorgegeben, die dann durch die 100% der ersten Media-Angabe überschrieben wird.

Mir fällt grade auf, dass es geschickter ist die Breite mit "max-width: 1100px" im "@media all" anzugeben. Dann könnte die erste Media-Angabe für den header entfallen.

Gruss

MrMurphy