fixed-Element nicht sauber zentriert
Ngar
- css
Hallo zusammen,
ich beschäftige mich gerade mit fixierten Elementen, doch leider bekomme ich die zentrierte Darstellung im Mozilla Firefox nicht sauber hin.
Mit diesem Code, wird zwar der Text in die Mitte gerückt, aber so daß der erste Buchstabe zentriert ist und der Rest angehangen ist, und nicht der gesamte Text zentriert ist.
Wie bekomme ich es hin, das der Schriftzung insgesamt zentriert dargestellt wird?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
#header {
font-size: 0.83em;
text-align:center;
}
#header h1 {
position:fixed;
display: inline;
}
</style>
</head>
<body>
<div id="header">
<h1>Dies ist eine Überschrift</h1>
</div>
</body>
</html>
Regards
Ngar
ich beschäftige mich gerade mit fixierten Elementen, doch leider bekomme ich die zentrierte Darstellung im Mozilla Firefox nicht sauber hin.
am besten liest du dir nochmal durch, was position fixed eigentlich tut und warum man es nicht, obwohls für manche dinge in der tat praktisch ist, dennoch nicht verwenden soll - bzw warum man es zum zentrieren garnicht verwenden soll
Wie bekomme ich es hin, das der Schriftzung insgesamt zentriert dargestellt wird?
indem du margin: auto für die zentrierung verwendest, wie es sich gehört - position: fixed ist denkbar ungünstig für dieses unterfangen
ich beschäftige mich gerade mit fixierten Elementen, doch leider bekomme ich die zentrierte Darstellung im Mozilla Firefox nicht sauber hin.
am besten liest du dir nochmal durch, was position fixed eigentlich tut und warum man es nicht, obwohls für manche dinge in der tat praktisch ist, dennoch nicht verwenden soll - bzw warum man es zum zentrieren garnicht verwenden soll
position:fixed verwende ich nicht zum zentrieren, sondern damit beim runterscrollen diese Überschrift stehn bleibt, aber diese Überschrift halt zentriert dargestellt werden soll.
position:fixed verwende ich nicht zum zentrieren, sondern damit beim runterscrollen diese Überschrift stehn bleibt, aber diese Überschrift halt zentriert dargestellt werden soll.
position: fixed;
left: 50%;
width: 20em;
margin-left: -10em;
damit ist der text quasi zentriert und unabhängig wächst mir skalierender schriftgröße mit
alternativ, wenn du lieber mit absoluten angaben arbeitest - ein anderes element rundherum, dieses bekommt folgende angaben
position: fixed;
left: 50%;
width: 500px;
margin-left: -250px;
text-align: center;
die überschrift drinnen
display: inline; (da sich text-align: center; nicht auf block auswirkt)
Vielen Dank!
Doch eine Frage habe ich noch. Im Mozilla Firefox wird es nun wie gewünscht dargestellt, jedoch wird diese Überschrift nun im Internet Explorer um soviel nach links verschoben, wie es vorher im Mozilla Firefox nach rechts verschoben war.
Gibt es eine generelle Lösung, oder muss ich auch eine Browserweiche zurückgreifen? bzw das gleich ganz sein lassen ...
Regards
Ngar
Doch eine Frage habe ich noch. Im Mozilla Firefox wird es nun wie gewünscht dargestellt, jedoch wird diese Überschrift nun im Internet Explorer um soviel nach links verschoben, wie es vorher im Mozilla Firefox nach rechts verschoben war.
ich vermute mal internet explorer 6 - der versteht kein position: fixed - einer der gründe warum man es nicht verwenden sollte
Gibt es eine generelle Lösung, oder muss ich auch eine Browserweiche zurückgreifen? bzw das gleich ganz sein lassen ...
ja es gibt eine lösung - die suchmaschine deiner wahl wird dir sicher bei einer suche nach "position fixed internet explorer" auskunft geben - und auch darüber, dass es prinzipiell eine schlechte idee ist, position: fixed fürs layout zu nutzen - aber das sagte ich bereits ;)
btw: natürlich gibt es fälle wo es "sinnvoll" ist - zb "vollbild"overlays (wie zb die verschiedenen lightboxvarianten)