Ausrichtung klappt nicht... :-(

[TigerDE2]

Hi!
Wenn ich ein CSS-Style folgendermasen anlege:
.ueberschrift {
 font-family: Arial;
 font-size: 25px;
 text-align: center;
 font-weight: bold;
 color: #6B7EB3;
 padding-bottom:0px;
 width: 300px;
 border-bottom-width: 2px;
 border-bottom-style:solid;
 border-bottom-color: #6B7EB3;
}
und das Ding zuweise:
<div class="ueberschrift">Text</div><br>
wird das ganze links ausgerichtet.
Kommentiere ich aber /*width: 300px;*/ aus, wird das Ganze mittig platziert.
Wieso?
Was mache ich falsch & wie bekomme ich den Schriftzug mit einer Unterlinie, die länger als der Text ist (weshalb ja text-decoration imho wegfällt), zentriert ausgerichtet?
Danke im Voraus. :)
Christian
P.S.: Ich nutze den IE 6.0.26...

[Kai Lahmann]

hi

text-align: center;

das zentiert den Text innerhalb des Elementes. Im das Element selbst zu zentrieren:

margin-left:auto; margin-right:auto;

Grüße aus Bleckede

Kai

[TigerDE2]

Danke. :)
Aber wenn ich

margin-left:auto; margin-right:auto;

hinzufüge, passiert nichts, und wenn ich den width-Befehl rausmache, geht die Linie über den ganzen Bildschirm.
Ich will aber eine 300px breite Linie unter dem (ca. 150px breiten) Text haben.
Ungefähr so:
           Text
     -----------------

(hoffe, das Board löscht die Leerzeichen nicht... ;o) )
Christian

[DerPilz]

Hallo,

für die linie eine einfache lösung:

einfach vor und nach das unterstrichene wort nonbreaking spaces " "  einfügen bist der strich lang genug ist.

ich weiß ist billig aber das funktioniert

[TigerDE2]

hmmm...
Die Linie ist aber zu dünn... :(
Ausserdem hängt die zu hoch... :-/
Andere Ideen?

[DerPilz]

Dann mach noch ein <div> mit einer <hr> drinnen und positioniere sie ebenfalls mittig und mit einer breitenangabe in prozent wie es dir passt. in der höhe kannst du dann arbeiten wie du willst.

oder du machst ein pixel in der farbe die die linie haben soll und speicherst das als gif ab, und fügst den in das <div> als <img> und sagst dem wie dick und lang das img sein soll. das geht wunderbar.

DerPilz

[Kai Lahmann]

hi

<hr style="width:300px; color:red; background-color:red;" />

bidde sehr - 300px breite Linie! 'color' und 'background-color' sind beide für die Farbe zu setzen - da sind sich die Browser unein.

Grüße aus Bleckede

Kai

[Axel Richter]

Hallo,

wird das ganze links ausgerichtet.

nein!
Weil das div dann nur 300px breit ist. Der Text ist schon zentriert.

Kommentiere ich aber /*width: 300px;*/ aus, wird das Ganze mittig platziert.
Wieso?

Weil das div dann eine Zeile lang ist. Die Linie ist aber dann auch länger.

Was mache ich falsch & wie bekomme ich den Schriftzug mit einer Unterlinie, die länger als der Text ist (weshalb ja text-decoration imho wegfällt), zentriert ausgerichtet?

So müsste es gehen:

<style type="text/css">
<!--
.ueberschrift {
 font-family: Arial;
 font-size: 25px;
 text-align: center;
 font-weight: bold;
 color: #6B7EB3;
 padding-bottom:0px;
 width: 300px;
 border-bottom-width: 2px;
 border-bottom-style:solid;
 border-bottom-color: #6B7EB3;
}
-->
</style>
<div style="text-align:center; width:100%"><div class="ueberschrift">Text</div></div>

Gruß

Axel