Grafik im header center center positionieren

Status
Nicht offen für weitere Antworten.

GN911

Erfahrenes Mitglied
Hallo,

wie bekomme ich grafik.gif innerhalb von header zentriert positioniert. "HELLO WORLD" soll zentriert über grafik.gif positioniert sein.

HTML:
<style type="text/css">
<!--
  * {
    margin: 0;
    padding: 0;
  }
  #header {
    height: 68px;
    color: #fff;
    background: #fff url(verlauf.gif) repeat-x top left;
    overflow: hidden;
  }
  h6 {
    position: relative;
    width: 480px;
    height: 48px;
    margin-left: -999em;
  }
  h6 span {
    position: absolute;
    background: url(images/grafik.gif) no-repeat center center;
    width: 100%;
    height: 100%;
    margin-left: 999em;
  }
-->
</style>
</head>
<body>
  <div id="header">
    <h6><span>HELLO WORLD</span>Startseite</h6>
  </div>
Gruß, GN911
 
Hi,

kurz und schmerzlos:

Code:
h6 span {
    position: absolute;
    background: url(images/grafik.gif) no-repeat center center;
    width: 100%;
    line-height: 48px; /* zentriert Text vertikal */
    margin-left: 999em;
    text-align:center; /* zentriert Text horizontal */
  }
mfg Maik
 
Hallo,

habe es jetzt so gemacht. Ich benötige dies nicht als Überschrift. Bin mir aber nicht sicher, ob dies in allen Browsern richtig angezeigt wird.

HTML:
<style type="text/css">
<!--
  * {
    margin: 0;
    padding: 0;
  }
  #header {
    height: 68px;
    width: auto;
    color: #fff;
    background: #fff url(verlauf.gif) repeat-x top left;
  }
  #header span {
    position: absolute;
    font-weight: bold;
    text-align: center;
    line-height: 68px;
    background: url(images/grafik.gif) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
  }
-->
</style>
</head>
<body>
  <div id="header"><span>HELLO WORLD</span></div>
</body>
Gruß GN911
 
Hi,

wenn ich die height:100%-Deklaration entferne, stimmt die Darstellung in allen gängigen mir zur Verfügung stehenden Browsern überein:

Code:
  #header span {
    position: absolute;
    font-weight: bold;
    text-align: center;
    line-height: 68px;
    background: url(images/grafik.gif) no-repeat 50% 50%;
    width: 100%;
    /*height: 100%;*/ /* auskommentiert = deaktiviert */
  }
mfg Maik
 
Hi Maik,

in den Browsern "Firefox 3.0.1, Internet Explorer 7.0.5730.11 und Safari 3.1.2 (525.21)" die bei mir installiert sind zoomt er den Text jetzt entsprechend. Was vorher im Safari nicht der Fall war.
Was aber jetzt das Problem ist, ist dass im Safari die grafik.gif unter die Hauptebene geschoben wird.

Gruß GN911
 
Im Safari 3.0.4 (523.12.9) kann ich keine deratigen Darstellungsprobleme entdecken.

Werde mir aber heute Abend die aktuelle Version herunterladen, und das Stylesheet darin überprüfen.

mfg Maik
 
Hi,

FF 2.x und Safari 3.x benötigen zumindest bei mir diese CSS-Regelung, damit das DIV#main beim Skalieren (Zoomen) des Schriftgrads nach unten/oben wandert, seine Ausgangsposition im Fenster also nicht beibehält, und somit vom span-Element nicht "unterwandert" wird:

Code:
#header {
    min-height: 68px;
    color: #56636f;
    background: transparent url(../../images/bg_header.gif) repeat-x top left;
  }
#header span {
    /*position: absolute;*/ /* auskommentiert = deaktiviert */
    display: block;
    font-weight: bold;
    text-align: center;
    line-height: 68px;
    background: url(../../images/bg_konto.gif) no-repeat 50% 50%;
    width: 100%;
  }
mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück