nicht angemeldet
Ausrichtung
0 0 
MudGuard
0 Ausrichtung - Danke
Ausrichtung
Hallo!
Bitte entschuldigt meine Ignoranz aber ich bin lange weg vom Fenster zum HTML & Co.
<h3>Das ist die Überschrift</h3>
Jetzt will ich, daß die Überschrift auf der ganzen Breite grau hinterlegt wird, daß mache ich mit background-color.
Aber jetzt will ich, daß auf Höhe dieser Überschrift ganz rechts was steht, zB. eine Index-Nummer.
Ich versuchte es in dieser Richtung:
<h3 style="background-color:#E0E0E0">Das ist die Überschrift <div style="display:inline;text-align:right;margin:0">steht ganz rechts auf gleicher Höhe</div></h3>
Aber das bringts nicht. Dann könnte ich mir noch ein Rundherum-Div vorstellen aber es geht doch sicher eleganter?
Beste Grüße
Viennamade
-
css
-----h3 {
background:#E0E0E0;
display:block;
}
.indnr {
text-align: right;
font-size: wie gewünschtpx;
font-weight: wie gewünscht;
}<html>
-----<h3>Das ist die Überschrift <span class="indnr>3</span></h3>
-
h3 {
display:block;
}
.indnr {
text-align: right;
}
<h3>Das ist die Überschrift <span class="indnr>3</span></h3>Ähm, sorry, aber das ist schlicht und einfach falsch.
Ein inline-Element wird durch "text-align: right" nicht plötzlich rechts angezeigt.
Schließlich ist das Element nur so breit, wie sein Inhalt.
Wie soll eine Ausrichtung des Inhalts die Position des spans auf der Seite verändern?Also mal der Einfachheit halber: *Viennamades Beispiel abwandel*
<h3 style="background-color:#E0E0E0">Das ist die Überschrift <span style='position: absolute; right: 10px;'>steht ganz rechts auf gleicher Höhe</span> </h3><h3> ist übrigens bereits ein block-Element. - eben im Gegensatz zu <span>
Schönen Gruß!
-
Hallo Michael,
danke für die Korrektur. So durfte auch ich dazu lernen.
Sehr zerknirscht wegen falscher Angaben im Hilfsfall -
Claus
-
-
Hallo Claus,
Danke, aber das [1] funktioniert m.E. überhaupt nicht, hab's im IE und im FF probiert.
Allerdings hab ich eine Lösung gefunden [2], ob Sie gut ist?
Beste Grüße
Viennamade[1]
css
h3 {
background:#E0E0E0;
display:block;
}
.indnr {
text-align: right;
font-size: wie gewünschtpx;
font-weight: wie gewünscht;
}<html>
<h3>Das ist die Überschrift <span class="indnr>3</span></h3>
[2]
css
---
h3 {background:#E0E0E0;float:left;}
.indnr {text-align: right;background:#E0E0E0;}html
----<h3>Das ist die Überschrift</h3><p class="indnr">3</p>
-
-
Hi,
<h3 style="background-color:#E0E0E0">Das ist die Überschrift <div style="display:inline;text-align:right;margin:0">steht ganz rechts auf gleicher Höhe</div></h3>
Ein inline-Element (und Dein div ist dank display:inline ein solches) ist so breit wie sein Inhalt es erfordert.
text-align kann also gar nicht wirken, da ja keine zu vergebende Restbreite da ist.Mögliche Lösung: h3 relativ positionieren, damit die Basis für die absolute Positionierung des div das h3 ist - und dieses dann absolut ganz rechts positionieren.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo wiederum,
Danke fuer Eure Inputs,
<h3>Das ist die Überschrift</h3>
Aber jetzt will ich, daß auf Höhe dieser Überschrift ganz rechts was steht, zB. eine Index-Nummer.die von MudGuard und von Michael angedeutete Methode, innerhalb der Ueberschrift ein Element absolut rechts zu positioneren hat geholfen. Es ist ein span-Element geworden, es war mir sympatischer.
(PS.: Ich habe es nicht hinbekommen, auf den Punkt genau absolut zu positionieren. Verschiedene Browser zeigen jeweils Unterschiede im Pixelberech - ist im gegenstaendl. Fall nicht wichtig, koennte mit CSS von body bzw. html zusammenhaengen.)
Vielen Dank!
Viennamade-
Freut mich, daß es geklappt hat!
(PS.: Ich habe es nicht hinbekommen, auf den Punkt genau absolut zu positionieren. Verschiedene Browser zeigen jeweils Unterschiede im Pixelberech - ist im gegenstaendl. Fall nicht wichtig, koennte mit CSS von body bzw. html zusammenhaengen.)
Ja, höchstwahrscheinlich.
Es gibt Unterschiede in den Default-margin-Werten,
sowohl zwischen den Browsern, als auch für die verschiedenen Doctypes.Also am besten zu CSS noch
html,body{ margin: 0px; padding: 0px; }hinzufügen, damit <h1> wirklich 100% der sichtbaren Breite fassen kann.
(ja, auch das <html>-Element ist manchmal betroffen :-/ )Hat natürlich den Nachteil, daß Deine Überschrift so auch
auf der linken Seite angepreßt wirkt. Drum also noch:h3{ margin-left: 10px; }oder aber direkt nur die rechte Seite mit 0px definieren.
Geschmacksfrage. ;)Bis denn!
Michael
-