Banner zentriert sich nicht richtig im Header

**petz_e** · 29-04-2008, 10:59

Hallo,

hier ist ein Seitenaufbau der leider nicht so funktioniert wie ich mir das vorstelle.

Der schwarze Header soll sich über die gesamte Breite erstrecken, 90Pixel gross sein. Im Header befinden sich unten zwei 8 Pixel grosse Trennlinien zu optischen Trennung, diese sind natürlich auch über die gesamte Breite gestreckt. Der Seiteninhalt soll 636 Pixel breit sein und zentriert ausgerichtet sein. Das Banner (oder Text, Menu, Links usw.) welches sich im Header befindet soll die gleiche Breite wie der Seiteninhalt haben, also 636 Pixel.

Hier ist mein HTML:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Test Design</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css" media="screen">
  	  @import "helper/styles2.css";
    </style>
    
  </head>
  <body>
  
    <div id="header">
      <div id="banner">
        <h1>Titelleiste</h1>
        <p> bla bla bla bla bla</p>
      </div>
      <div id="firstLine"></div>
      <div id="secondLine"></div>
    </div>
    
    <div id="page">
      <div id="content">
        <p>Seiteninhalt</p>
      </div>
    </div>
    
  </body>
</html>

Und das CSS:

HTML-Code:

  html {
    height: 100%;
  }
  
  /* Zero default margin & padding around common elements */
  body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
  	margin: 0;
  	border: 0 none transparent;
  	padding: 0;
  }
  
  body {
    height: 100%;
    background-color: #333;
    color: #000;
    font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    text-align: center;
  }
  
  #page {
    width: 636px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #fff;
    text-align: left;
  }
  
  #header {
    padding: 0;
    height: 90px;
    color: #fff;
    background-color: #000;
    text-align: center;
  }
  
  #banner {
    height: 74px;
    width: 636px;
    background-color: #bbb;
  }
  
  #firstLine {
    height: 8px;
    background-color: #074a97;
  }
  
  #secondLine {
    height: 8px;
    background-color: #4784ca;
  }
  
  #content {

  }

Bei mir wird der Header und Seiteninhalt richtig angezeigt, das Banner wird jedoch direkt an den linken Rand geklebt und nicht zentriert ausgerichtet, und das obwohl text-align: center angegeben ist.

Patrick

**petz_e** · 29-04-2008, 11:02

Also, wenn ich das Banner im Header auf 100% Breite einstelle, wird das Banner sehr wohl zentriert ausgerichtet. Sobald jedoch eine feste Breite angegeben wird, rutscht das Banner an den linken Rand.

EDIT: Benutze übrigens Firefox.

Patrick

**anna55** · 29-04-2008, 11:19

Wie wäre es denn bei Deinem div Banner auch mit einem

PHP-Code:


margin: 0 auto;

Und sorg doch bitte mal für einen ordentlichen Doctype.

**petz_e** · 29-04-2008, 11:23

Hi,

danke, durch das margin: 0 auto; siehts jetzt so aus wie ich mir das vorgestellt habe. Doch wieso das jetzt so ist, kapier ich nicht. Was hat der Aussenabstand denn damit zu tun? Der wurde ja schon in einer der ersten Zeilen auf 0 gesetzt.

Patrick

**anna55** · 29-04-2008, 11:34

Du hast div Page ja auch schon so zentriert. auto meint, dass die Außenabstände gleich groß sein sollen, damit rückt der Inhalt halt 'automatisch' in die Mitte. text-align:center funktioniert im FF nicht. Ist eigentlich - wie der Name schon sagt - für das Zentrieren von Text z.B. bei Blockelementen wie <p> da.

**petz_e** · 29-04-2008, 11:38

Zitat von anna55

Du hast div Page ja auch schon so zentriert. auto meint, dass die Außenabstände gleich groß sein sollen, damit rückt der Inhalt halt 'automatisch' in die Mitte. text-align:center funktioniert im FF nicht. Ist eigentlich - wie der Name schon sagt - für das Zentrieren von Text z.B. bei Blockelementen wie <p> da.

Ah, ok danke. jetzt wird mir einiges klar.

Patrick

Thema: Banner zentriert sich nicht richtig im Header

LinkBack

Themen-Optionen

Anzeige

Banner zentriert sich nicht richtig im Header

AW: Banner zentriert sich nicht richtig im Header

AW: Banner zentriert sich nicht richtig im Header

AW: Banner zentriert sich nicht richtig im Header

AW: Banner zentriert sich nicht richtig im Header

AW: Banner zentriert sich nicht richtig im Header

Ähnliche Themen

Zufallsgenerator + Banner wechsel

Darstellungsproblem

Problem mit Rowspan bei Fixed table header

Menü lässt sich nicht richtig ausrichten???

Brauche Banner Rotation (dringend)

Lesezeichen

Lesezeichen

Berechtigungen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen