Ergebnis 1 bis 6 von 6
  1. #1
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    Banner zentriert sich nicht richtig im Header

    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

  2. #2
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Banner zentriert sich nicht richtig im Header

    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
    Geändert von petz_e (29-04-2008 um 11:16 Uhr)

  3. #3
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Banner zentriert sich nicht richtig im Header

    Wie wäre es denn bei Deinem div Banner auch mit einem
    PHP-Code:
    margin0 auto
    Und sorg doch bitte mal für einen ordentlichen Doctype.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  4. #4
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Banner zentriert sich nicht richtig im Header

    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

  5. #5
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Banner zentriert sich nicht richtig im Header

    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.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  6. #6
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Banner zentriert sich nicht richtig im Header

    Zitat Zitat von anna55 Beitrag anzeigen
    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

Ähnliche Themen

  1. Zufallsgenerator + Banner wechsel
    Von Jacoby im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 24-06-2007, 15:28
  2. Darstellungsproblem
    Von Schneider im Forum CSS und (X)HTML
    Antworten: 19
    Letzter Beitrag: 15-02-2007, 13:40
  3. Problem mit Rowspan bei Fixed table header
    Von madlymad im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 28-11-2005, 12:09
  4. Menü lässt sich nicht richtig ausrichten???
    Von hoembi im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 14-09-2004, 18:51
  5. Brauche Banner Rotation (dringend)
    Von Rave Casper 8k im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-11-2002, 10:13

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •