Vertikales Ausrichen - mal wieder

[Christian Düsing]

Hallo

ich habe ein sehr ähnliches Problem wie Stefan vor 2-3 stunden. Im Forumsarchiv habe ich auch schon nach einer Lösung gesucht, dohc leider nur auf einen wenighilfreichen Artikel gestoßen.

Ich will ganz einfach eine div box in der links eine Überschrift steht und rechts ein Link. Der link hat eine kleinere Schriftgröße als der die Überschrift und soll aber trotzdem (!!!!) vertikal zentriert sein.
und genau das ist mein Problem.
Ob ich nun 2 div-boxen nebeneinander anordne oder link und überschrift in eine packe, ich schaffe es nicht, dass der Link zentriert ist.

SOweit ich im Archiv gelesen habe, macht das vertikale zentrieren von Inline elementen wohl regelmäßig Probleme.

einer der Versuche sieht so aus:
<div id="titel">hallo hallo<a href="#auswahlbild" id="auswahl">hallo hallo</a></div>

mit:
#titel {padding:3px 20px; vertical-align:middel;}

http://www.feuerwehr-budenheim.de/ausruestung/bekleidung/bekleidung1.htm

vielleicht habt ihr ja noch einen Tipp!

danke,
gruß
Christian

[Hopsel]

Hi,

#titel {padding:3px 20px; vertical-align:middel;}

es heißt ja auch vertical-align: middle;. Davon abgesehen würde ich dem Div eine feste Höhe geben.

MfG Hopsel

[Christian Düsing]

hallo,

Davon abgesehen würde ich dem Div eine feste Höhe geben.

ja ist ja auch so gemeint, ein Tippfehler hier.
ich habe es jetzt einfach mal mit nem Textabsatz ausprobiert:

#abschnitt  {border:1px dashed silver; height:300px; vertical-align: middle;}
<div id="abschnitt">blablabla</div>

geht auch nicht.

komisch komisch,dachte diese Div blöcke wären so ne tolle Alternative zu tabellen...da ging das doch alles einfach.

gruß
christian

[Ashura]

Hallo Christian.

komisch komisch,dachte diese Div blöcke wären so ne tolle Alternative zu tabellen...da ging das doch alles einfach.

<gebetsmühle>
Es geht in strukturell sinnvoll ausgezeichnetem HTML nicht darum, Tabellenelemente durch div-Elemente zu ersetzen.
</gebetsmühle>

Siehe auch: https://forum.selfhtml.org/?t=112162&m=708144

Einen schönen Dienstag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

#abschnitt  {border:1px dashed silver; height:300px; vertical-align: middle;}
<div id="abschnitt">blablabla</div>

geht auch nicht.

logisch. vertical-align ist nicht für Block-Elemente definiert.
Du suchst line-height.

komisch komisch,dachte diese Div blöcke wären so ne tolle Alternative zu tabellen

nein. Für Tabellen für Tabelleneigenschaften und DIVs zum Gruppieren von Elementen. Das ist etwas völlig anderes.

freundliche Grüße
Ingo

[Der Martin]

Hallo Ingo,

logisch. vertical-align ist nicht für Block-Elemente definiert.
Du suchst line-height.

Wie bitte?
Was nützt mir line-height, wenn ich innnerhalb eines Blockelements, dessen Höhe ich nicht kenne, einen Text vertikal zentrieren will?
Das schreit nach einer genaueren Erklärung.

Danke schon im voraus & schönen Abend noch,

Martin

[Ingo Turski]

Hi,

Du suchst line-height.

Wie bitte?
Was nützt mir line-height, wenn ich innnerhalb eines Blockelements, dessen Höhe ich nicht kenne, einen Text vertikal zentrieren will?
Das schreit nach einer genaueren Erklärung.

Die Ausgangsfrage war, wie in _einer_ Zeile zwei Textelemente mit unterschiedlicher Schriftgröße vertikal zu zentrieren sind. Dies ist möglich, indem beiden Elementen der gleiche Wert für line-height zugewiesen wird - natürlich passend zur höheren Schriftgröße.

freundliche Grüße
Ingo

[Christian Düsing]

Hallo

Die Ausgangsfrage war, wie in _einer_ Zeile zwei Textelemente mit unterschiedlicher Schriftgröße vertikal zu zentrieren sind. Dies ist möglich, indem beiden Elementen der gleiche Wert für line-height zugewiesen wird - natürlich passend zur höheren Schriftgröße.

Nein die Ausgangsfrage war, wie ich einen normalen Fließtext, mittels CSS innerhalb einer Bos vertikal ausrichten kann.
Mit dem vertical-align:middle; gehts jedenfalls nicht!

Gruß
Christian

[Ingo Turski]

Hi,

Nein die Ausgangsfrage war, wie ich einen normalen Fließtext, mittels CSS innerhalb einer Bos vertikal ausrichten kann.

Du hast wohl Deine eigene Frage schon vergessen - aber bitte, zur Erinnerung:

Ich will ganz einfach eine div box in der links eine Überschrift steht und rechts ein Link. »» »» Der link hat eine kleinere Schriftgröße als der die Überschrift und soll aber trotzdem (!!!!) vertikal zentriert sein.
und genau das ist mein Problem.

freundliche Grüße
Ingo

[Marian]

Hi Christian Düsing,

http://www.feuerwehr-budenheim.de/ausruestung/bekleidung/bekleidung1.htm

div#seite {width:830px; margin:0 auto; text-align:left;}
warum das? warum nicht width:100%? wenn jemand einen kleinen bildschirm 800*600 hat oder sein fenster nicht maximiert hat oder so?
und wenn jemand einen größeren Bildschirm hat, wird am Rand Platz verschenkt. Wenn du _unbedingt_ pixel nehmen willst, nimm doch bitte 780.

Gruß, Marian

[Christian Düsing]

Hallo

warum das? warum nicht width:100%? wenn jemand einen kleinen bildschirm 800*600 hat oder sein fenster nicht maximiert hat oder so?
und wenn jemand einen größeren Bildschirm hat, wird am Rand Platz verschenkt. Wenn du _unbedingt_ pixel nehmen willst, nimm doch bitte 780.

Grund ist das auswahlbild ganz oben. das ist nunmal schon so breit und wills nicht weiter verkleinern. Meinst du es gibt noch soo viele Leute, die 800x600 haben? Also ich hatte ja schon seeeehr lange nen blöden kleinen 14'er, aber die Zeiten sind bei mir nun auch vorbei.

Gruß
Christian

[Ashura]

Hallo Christian.

Meinst du es gibt noch soo viele Leute, die 800x600 haben?

Das ist irrelevant. Versuche, dein Layout so flexibel wie möglich zu halten, um denjenigen, die weniger Platz für deine Seite zur Verfügung haben (wollen) weniger Steine in den Weg gelegt werden.

Die Bildschirmauflösung ist für das Layout bedeutungslos.
(Es gibt auch Clients, die weder ein Browser sind, noch über eine Bildschirmauflösung, geschweige denn über einen Bildschirm verfügen.)

Einen schönen Dienstag noch.

Gruß, Ashura

[Christian Düsing]

Die Bildschirmauflösung ist für das Layout bedeutungslos.
(Es gibt auch Clients, die weder ein Browser sind, noch über eine Bildschirmauflösung, geschweige denn über einen Bildschirm verfügen.)

na gut dahast du recht!!

Aber jetzt nochmal zu meinem Problem:

gucke dir mla bitte die Seite an:
http://www.feuerwehr-budenheim.de/ausruestung/bekleidung/bekleidung1.htm

ich habe ienfach eine Div-Box und eine Tabelle mit Text gefüllt. Bei der Tabelle kann ich den Text ausrichten, bei der Div-Box nicht. das ist doch komisch.

Danke, ich bin echt verzweifelt.
Gruß
Christian

[Ashura]

Hallo Christian.

ich habe ienfach eine Div-Box und eine Tabelle mit Text gefüllt. Bei der Tabelle kann ich den Text ausrichten, bei der Div-Box nicht. das ist doch komisch.

Nein, standardkonform.
Du solltest lesen, auf was vertical-align wirken darf.

Beachte hierzu aber bitte auch Ingo's Tipps.

Einen schönen Dienstag noch.

Gruß, Ashura