mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 13:53 Benutzername: Passwort: Auto-Login

Thema: Header-BG trotz Breitenangabe auf komplette Fensterbreite? vom 20.11.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Header-BG trotz Breitenangabe auf komplette Fensterbreite?
Autor Nachricht
dOubb.
Threadersteller

Dabei seit: 19.05.2009
Ort: Welver
Alter: 32
Geschlecht: Männlich
Verfasst So 20.11.2011 20:01
Titel

Header-BG trotz Breitenangabe auf komplette Fensterbreite?

 Antworten mit Zitat Zum Seitenanfang
Hallohallo,

steh vor folgendem Problem:

Haben einen Wrapper, der alle DIV-Container umschließt. Inbegriffen der Header. Die Hintergrundfläche des Heiders soll jedochh über die gesamte Breite gehen. Der Textinhalt samt Menü soll natürlich im Wrapper bleiben. Wie realisiert man sowas?

Hier der bisherige HTML-Code:

Code:
<body>
   <div id="wrapper">
       <div id="header">
           <h1><a href="./index.htm">Logo</a></h1>
            <ul id="menu">
                <li class="startseite chosen"><a href="./index.htm">Startseite</a></li>
                <li class="ueber-mich"><a href="./ueber-mich.htm">Über mich</a></li>
                <li class="kontakt"><a href="./kontakt.htm">Kontakt</a></li>
            </ul>
        </div>
        <div id="content">
           <h2><img src="./layout/startseite/perspektive.png" alt="Perspektive wechseln" /></h2>
            <p>Absatz 1</p>
           <h2><img src="./layout/startseite/ideenreich.png" alt="Ideenreich handeln" /></h2>
            <p>Absatz 2</p>
        </div>
    </div>
</body>



CSS:

Code:
* {
   
   margin: 0;
   padding: 0;
   border: 0 none;
   
}

html {
   
   background: #fafafa url(../layout/background.jpg);
   
}

#wrapper {
   
   width: 719px;
   min-height: 400px;
   margin: 0 auto;
   
}

#header {
   
   width: 791px;
   height: 400px;
   background: #677477;
   
}
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mo 21.11.2011 01:33
Titel

Antworten mit Zitat Zum Seitenanfang
Da der Sinn des Headers wohl die horizontale Zentrierung ist, mit diesem Block überhaupt nicht. Ergänze ein weiteres Div oder benutz das Body-Element.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 21.11.2011 12:29
Titel

Antworten mit Zitat Zum Seitenanfang
Wie wäre es den Header außerhalb des Wrappers zu platzieren * Keine Ahnung... *
  View user's profile Private Nachricht senden
CreativePixel

Dabei seit: 20.09.2011
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.11.2011 00:59
Titel

Antworten mit Zitat Zum Seitenanfang
Abend,

tausche mal html durch body aus in deinem CSS.

also CSS:

Code:

* {
   
   margin: 0 auto;
   padding: 0;
   border: none;
   
}

body {
   margin:0 auto;
   padding:0; 
   background: #fafafa url(../layout/background.jpg);
   
}

#wrapper {
   
   width: 719px;
   height:100%;
   margin: 0 auto;
   
}

#header {
   
   width: 100%;
   height: 400px;
   background: #677477;
   
}


Erklärung:

Header vererbt seine breite von wrapper.
Wrapper ist nur so hoch wie das Element was darin ist, also 400px. (Hier findet auch wieder eine Vererbung statt.)

Hoffe es klappt wenn nicht dann SelfHTML.

Viel spaß damit.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Div Element bei bestimmter Fensterbreite verschwinden lassen
AP Div verschiebt sich wenn sich die Fensterbreite ändert
komplette Tabelle verlinken in IE
komplette webseite ausdrucken
Komplette Seite zentrieren
Download komplette Internetseite
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB