vertical-align ohne Funktion

[gary]

Gute Nacht zusammen,

Ich habe folgenden CSS-Code:

div.wc_wash {
            position:fixed;
            float: none;
            right: 5px;
            width: 163px;
            height: 134px;
            background-image: url(soap_dish.png);
            text-align: center;
            vertical-align: middle;
            }

In diesem Div-Container befindet sich ein Link-Text. Der reagiert auf die text-align: center; - Anweisung tadellos :-)

Auf die vertical-align: middle; - Anweisung aber leider nicht :-(

Ich hätte aber gerne den Link "Home" auf der Seife platziert - zu sehen hier.

Viele Grüsse gary

[Malcolm Beck´s]

hi,

In diesem Div-Container
vertical-align: middle;

Gibt es eigentlich irgendwas, für das du eine Suchmaschine deiner Wahl bemühen würdest?
Dann hättest du zumindest in diesem Falle hier nicht solang auf eine Antwort warten müssen.

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

google?q=vertical align

Ich hätte aber gerne den Link "Home" auf der Seife platziert - zu sehen hier.

Ein "zu finden rechts Oben" wäre hilfreich gewesen.

grüße

[afra]

Hallo!

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

Sorry, aber das bezieht sich nur auf Tabellenzellen und genau das sollte er an dieser Stelle tunlichst nicht tun.

Da aber an dieser Stelle die absolute Höhe des Elements a und des Container bekannt sind, kann das mittels einer definierten Breite und Höhe des Ankers, einer verticalen und horizontalen positionierung auf 50% und eines zurückstellens mittels negativen margins erreicht werden.

Schönen Gruß

Afra

[Malcolm Beck´s]

hi,

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

Sorry, aber das bezieht sich nur auf Tabellenzellen und genau das sollte er an dieser Stelle tunlichst nicht tun.

Ich weiss worauf sich vertical:align; bezieht, daher hatte ich nur folgende 2 Zeilen zitiert

In diesem Div-Container
vertical-align: middle;

...wird nicht gehen.

Hätte ich wohl dazu schreiben sollen. Ich hatte mich nur gefragt wo Gary vertical:align; her hat, da hätte er doch sehen müssen, das es um Tabellen geht.

Da aber an dieser Stelle die absolute Höhe des Elements a und des Container bekannt sind, kann das mittels einer definierten Breite und Höhe des Ankers, einer verticalen und horizontalen positionierung auf 50% und eines zurückstellens mittels negativen margins erreicht werden.

Die Freude, es selbst raus zu finden wollte ich dem Gary aber nicht vorweg nehmen.

grüße

[gooxsy]

Hi Malcolm,

Die Freude, es selbst raus zu finden wollte ich dem Gary aber nicht vorweg nehmen.

Danke für diese Formulierung. Das war mein erstes Lächeln heute an diesem beschissenen Tag.

mfG

gooxsy

[gary]

Morgen Leute,

Sorry, aber ich glaube ich war in letzter Zeit zu viel am perlen.
Also den Link ne classe verpassen:

<li><a class="OnSoap">href="online-journal-ceta.shtml">Home</a></li>

Und dann in CSS so:

div.wc_wash {
            position:fixed;
            float: none;
            right: 5px;
            width: 163px;
            height: 134px;
            background-image: url(soap_dish.png);
            text-align: center;
            vertical-align: middle;
            }
plus:

a.OnSoap {
         Einstellspielereien...
         }

Bedenkt ich habe bereits zwei Sorten a's (a's und a' in li's)

Die Freude, es selbst raus zu finden wollte ich dem Gary aber nicht vorweg nehmen.

Normal würde ich dir Recht geben und bin auch dafür. Aber nach sechs Stunden  Microschrott-Download für das SP3, welches zu allem übel auch noch zwei mal abgebrochen ist und bis jetzt immer noch nicht auf dem PC ist, bin ich für Hilfestellung mehr als Dankbar. Ist schliesslich verdammt spät geworden- gestern...

Grüsse gary

[Struppi]

Sorry, aber ich glaube ich war in letzter Zeit zu viel am perlen.
Also den Link ne classe verpassen:

<li><a class="OnSoap">href="online-journal-ceta.shtml">Home</a></li>

und zuwenig am CSSen, du kannst die CSS Angaben auch verschachteln um einzelne Elemente zu selektieren:

li a {}

Vermutlich noch besser:

ul.klasse li a {}

Struppi.

[gary]

Hi Struppi,

Sag mal bin ich jetzt echt zu blöde einen simplen link zu platzieren?

CSS-Code:
div.wc_wash {
            position:fixed;
            float: none;
            right: 5px;
            width: 163px;
            height: 134px;
            background-image: url(soap_dish.png);
            text-align: center;
            }

ul.OnSoap li a {
               margin-top: 50%;
               }
Html-Code:
<div class="wc_wash">
<ul class="OnSoap">
<li><a href="online-journal-ceta.shtml">Home</a></li>
</ul>
</div>

Was soll ich sagen: der Link Home ist immer noch nicht auf der Seife!

Viele Grüsse gary

[Struppi]

Sag mal bin ich jetzt echt zu blöde einen simplen link zu platzieren?

Nein, aber jetzt machst du wieder andere Fehler.

ul.OnSoap li a {
               margin-top: 50%;
               }

margin hat bei inline Elementen keine Wirkung.

Struppi.

[gary]

Hi Struppi,

margin hat bei inline Elementen keine Wirkung.

Seit wann denn das? Sorry, aber das höre ich zum ersten mal. Und was soll ein inline-Element sein?

Ich habe jetzt das probiert:

<div class="wc_wash">
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<ul class="OnSoap">
<li><a href="online-journal-ceta.shtml">Home</a></li>
</ul>

Geht aber irgendwie auch nicht. Ich mache jetzt gleich ein Foto vom Link "Home" und füge das sch***ding als klickbares img ein... =:-O

Verzweifelte Grüsse gary

[Malcolm Beck´s]

hi,

margin hat bei inline Elementen keine Wirkung.
Seit wann denn das? Sorry, aber das höre ich zum ersten mal. Und was soll ein inline-Element sein?

...

Surfst du zufällig mit einem Browser, der leichte "Behinderungen" hat, was die Websitedarstellung angeht?  (siehe "Beachten Sie")

grüße

[Gunnar Bittersmann]

@@gary:

In diesem Div-Container befindet sich ein Link-Text. Der reagiert auf die text-align: center; - Anweisung tadellos :-)

Auf die vertical-align: middle; - Anweisung aber leider nicht :-(

Works as designed. [CSS2 §10.8.1]

Dass es eine „allwissende Müllhalde namens Archiv“ [Orlando] gibt, weißt du aber schon?

Live long and prosper,
Gunnar

[gary]

Hallo zusammen,

Habs nach langem Probieren hinbekommen:

ul.OnSoap {
          padding-top: 85px;
          padding-left: 25px;
          }

Nur ul selektieren (ohne li und a)

Gruss und Dank

gary

[Struppi]

Habs nach langem Probieren hinbekommen:

Gary's way

ul.OnSoap {
          padding-top: 85px;
          padding-left: 25px;
          }

Nur ul selektieren (ohne li und a)

ul ist auch ein Blockelement, du kannst aber auch li verwenden oder aus a ein Blockelement machen.

Struppi.