• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Container Zentrieren (nicht Möglich)

Lashbeatz

Lashbeatz

Neues Mitglied
Guten Abend,

ich hab ein Problem und zwar versuche zurzeit in einem Container ein Header zu zentrieren und den Hintergrund dieses Container Horizontal zu Wiederholen. Ich hab jetzt folgenden Code

HTML CODE:

Code: 
<!DOCTYPE html>
<html>

<head>

    <title>Startseite</title>

    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="stylesheet.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <div  id="header">
        <img alt="img/header.jpg" src="img/header.jpg" />
    </div>

</body>
</html>

CSS CODE:

Code: 
/* Homepage Stylesheet Script 1.0*/
/* Autor Lashbeatz*/


body
{
  background-image:url(img/bg.jpg);
  background-repeat:repeat-x; float: left;
  background-color:#bcbcbc;
  margin:0px auto;
  min-width:960px;

}

#header
{
  width:100%;
  height:194px;
  background: url(img/header_bg.jpg) repeat-x;
  margin:0px auto;
  text-align:center;

}

Wenn ich jetzt die HTML im Firefox öffne ist der Header zwar zu sehen aber linksbündig und das Hinergrund Image wiederholt sich nur hinter dem Header.

Wär echt nett wenn einer mal über den Code schauen könnte und mir sagt woran das liegt.

Danke

Mfg Lashbeatz
 
Versteh ich nicht bei mir ist der linksbündig und der hintergrund liegt hinter dem header?
Ist das nur ein darstellungsfehler?
 
Als erstes musst du, weil du body zentrierst, dass Html-Element auch eine Hintergrundfarbe geben.
2. floaten und margin:auto funktioniert nicht, also weg mit float:left;.
3. Brauchst du für body noch eine Maximalbreite.

Übrigens, ist body nur so hoch wie sein Inhalt. Und nein, es ist kein Darstellungsfehler. Dir fehlen einfach die Grundlagen.
 
Zuletzt bearbeitet:
Ja da geb ich dir recht, ich muss da aufjedenfall noch vieles wieder auffrischen, lange her als ich das letzte mal so nä Seite geschrieben hab.
Ich hab das jetzt geschafft das der Header zentriert ist, bloss der hintergrund verlauf des header der sich eigentlich über die ganze Seite ziehen soll, liegt immer noch nur hinterm Header

Code: 
body
{
  background-image:url(img/bg.jpg);
  background-repeat:repeat-x;
  background-color:#bcbcbc;
  margin:0px auto;
  width: 960px;
  min-width:960px;

}

#header
{
  width:100%;
  height:194px;
  background: url(img/header_bg.jpg);
  background-repeat: repeat-x;
  margin:0px auto;
  text-align:center;

}

Hab mal ein Foto hochgeladen (links mit Header Eintrag in der HTML und rechts ohne)
 
Ich versteh nicht was das mit der höhe zutun hat, der header bg muss ja nur sozusagen links und rechts vom header dann sich wiederholen.
Ich schreib die Seite mal weiter vll löst sich das Problem dann von selbst sonst Melde ich mich wieder haha
 
Lashbeatz schrieb:
Ich versteh nicht was das mit der höhe zutun hat, der header bg muss ja nur sozusagen links und rechts vom header dann sich wiederholen.
Ich schreib die Seite mal weiter vll löst sich das Problem dann von selbst sonst Melde ich mich wieder haha
Zum Vergrößern anklicken....

Code: 
body
{
  width: 960px;
}

#header
{
  width:100%;
}
 
alles klar ok jetzt geht es, da hätte man auch eigentlich selber drauf kommen können.

Danke für eure hilfe
 
Lashbeatz schrieb:
alles klar ok jetzt geht es, da hätte man auch eigentlich selber drauf kommen können.

Danke für eure hilfe
Zum Vergrößern anklicken....

Noch als Tipp am Rande: Du kannst die im Anhang gezeigten Background-Images auch mit CSS3 abbilden. Das wäre der elegantere Weg. Mach einen Screenshot von der Seite, schneide einen Teil des Hintergrunds aus, lade ihn hier hoch und lass dir automatisch den Gradienten generieren.

http://www.colorzilla.com/gradient-editor/
 
Hallo,

ich denke das man bei neu erstellten Seiten konsequent die Vorteile von HTML5 / CSS3 ausnutzen sollte.

Dazu sollte man

1. Die neuen Elemente wie header, main, nav, footer, article, section u.s.w nutzen

2. Die Abstände flexibel gestalten. Bei schmalen Fensterbreiten sollten margin und padding sich also auch anteilig verringern. Dadurch bleibt der Text auch bei einer Änderung des Zoom-Faktors innerhalb des Fensters und es muss nicht seitwärts gescrollt werden.

3. Bildern die Möglichkeit geben, ihre Größe bei schmalen Fensterbreiten anzupassen.

4. Responsive Design nutzen. Bei schmalen Fensterbreiten sollte dem Text die gesamte Bildschirmbreite zur Verfügung gestellt werden. Dazu lasse ich erst das äußere margin und bei noch schmalerem Fenster das padding verschwinden.

5. Keine bildschirmfüllenden Hintergrundbilder benutzen. Das gibt bei den heutzutage sehr unterschiedlichen Fenstermaßen nur Probleme. Sondern bei Farbverläufen wie schon geschrieben die Möglichkeiten von gradient benutzen. Einmal eingefügt passt es sich flexibel der jeweiligen Fenstergröße an.

Meine Lösung sieht dann so aus:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_29_lashbeatz_01_background_gradient.html

Gruss

MrMurphy
 
Vielen dank für die ganzen tipps, ich muss guck mir jetzt erstmal die zwei seiten von euch an und ich muss mich da ehrlich gesagt nochmal einlesen in die ganze Materie.
Ich hab jetzt das Grundgerüst der Seite soweit fertig, ich stell mal den Link hier rein, falls jemand irgendwelche Verbesserungsvorschläge hat immer her damit :D

lashbeatz.bplaced.net
 
Hallo

falls jemand irgendwelche Verbesserungsvorschläge hat immer her damit
Zum Vergrößern anklicken....

Na ja, du hast halt die üblichen Fehler eingebaut, die die Besucher seit Jahren am meisten nerven:
  • Zu kleine Schrift
  • Zu wenig Kontrast zwischen Schrift und Hintergrund
  • Starres Layout
  • Zweiter Scrollbalken
  • u.s.w.
  • u.s.w.
Technisch passt der Quelltext dann auch dazu:
  • div-Suppe vom feinsten
  • meta charset="ISO-8859-1"
  • Abstände mit leeren div erzeugen
  • unnötige Hintergrundbilder
  • u.s.w.
  • u.s.w.
Die Validierung hast du entsprechend auch noch nicht für die entdeckt:

http://validator.w3.org/check?verbose=1&uri=http://lashbeatz.bplaced.net/

Also eine Anfängeseite nach über 10 Jahren alten Anleitungen. Und irgendwo hast du dann mal gelesen, wenn ich als erstes Schreibe "<!DOCTYPE html>" ist meine Seite aktuell.

Wenn du ein zukunftssichere Seite erstellen willst solltest du die abreißen und nach aktuellem HTML5- / CSS3-Regeln neu aufbauen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
ok danke, jetzt weiss ich aufjedenfall worauf ich das nächste mal achten muss.
Ich setz mich dann mal hin und les mich da jetzt ein und versuch mich dann bald neu an der Seite.

Gruß
Lashbeatz
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben