Anzeige - [Hier werben / Mediadaten]
(?) Tags raten (?) (edit)
 
Reply to this topicStart new topicStart Poll
> li vertical-align middle, ich steh glaub auf dem schlach....
spaceman007
Geschrieben am: Fr 29.06.2007, 10:03
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 124
Mitglied seit: 23.03.2005


hallo zusammen...

ich glaub ich steh auf dem schlauch..

folgender Code:

CODE

<style>
ul li
{
 list-style:none;
 width:50px;
 height: 40px;
 background-color:#CC0066;
 vertical-align:middle;
 border: 1px solid black;
}
</style>

<ul>
  <li>text</li>
  <li>text text text text </li>
</ul>


um flexibel für andere Sprachversionen zu sein, versuchte ich für die Navigation 40px höhe zu reservieren und den Text in der Mitte des li darzustellen. falls der Text umbricht, werden in den 40px dann beide Textzeilen angezeit.. soweit die Theorie...

Nun die Praxis.. kann mir jemand erklären warum der vertical-align:middle hier nicht funktioniert?

Thanks

Gruss

Spaceman007


--------------------
think-> google -> post
http://www.buechergestell.ch
http://www.pickup-artists.ch
http://www.web24.ch Die neue Schweizer Suchmaschine!
Top
PMEmail Poster
Top
 
 
Crazymind
#2 Geschrieben am: Fr 29.06.2007, 10:30 (+00:27)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 187
Mitglied seit: 25.02.2005


meinst du vielleicht anstatt vertical-align:middle text-align:center?


--------------------
www.crazymind.ch - Webdesign, Bildbearbeitung, Animationen
Top
PMEmail Poster
Top
 
spaceman007
#3 Geschrieben am: Fr 29.06.2007, 11:21 (+00:51)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 124
Mitglied seit: 23.03.2005


Nein nein, ich mein schon vertical-align.

Der Text soll sich in der Mitte des li (Auf die Höhe bezogen) befinden.


--------------------
think-> google -> post
http://www.buechergestell.ch
http://www.pickup-artists.ch
http://www.web24.ch Die neue Schweizer Suchmaschine!
Top
PMEmail Poster
Top
 
Crazymind
#4 Geschrieben am: Fr 29.06.2007, 11:48 (+00:27)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 187
Mitglied seit: 25.02.2005


ich bin nicht so der CSS hirsch. Aber anscheinend funktioniert das vertical-align nicht im li. Weiss jemand warum?

so funktionierts:

CODE
<style>
ul li
{
list-style:none;
width:50px;
height: 50px;
background-color:#fff;
border: 1px solid black;
}
.middle {vertical-align: middle;}
</style>

<ul>
 <li><p class="middle">text</p></li>
 <li>text text text text </li>
</ul>


--------------------
www.crazymind.ch - Webdesign, Bildbearbeitung, Animationen
Top
PMEmail Poster
Top
 
Crazymind
#5 Geschrieben am: Fr 29.06.2007, 11:51 (+00:03)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 187
Mitglied seit: 25.02.2005


Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.

Wahrscheinlich liegt es daran dass li kein inline element ist, bin mir aber nicht sicher.

Grüsse, Crazy


--------------------
www.crazymind.ch - Webdesign, Bildbearbeitung, Animationen
Top
PMEmail Poster
Top
 
Maik
power-labels AG
#6 Geschrieben am: Fr 29.06.2007, 17:20 (+05:28)
Report PostQuote Post

AyomRank 5
**********

Gruppe: Member (aktiv)
Beiträge: 485
Mitglied seit: 16.03.2006


die Denkweise ist falsch. vertical-align richtet den Inhalt eines Elements nicht an der Größe des Elements aus, sondern es richtet ein Element nach dem anderen Element aus. Ausnahme sind Elemente, die die Eigenschaft display: table-cell aufweisen, was standardmäßig bei Tabellenzellen ist.


--------------------
Top
PMEmail PosterUsers WebsiteICQ
Top
 
spaceman007
#7 Geschrieben am: Mo 2.07.2007, 09:46 (+2d 16:26)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 124
Mitglied seit: 23.03.2005


ok, thanks a lot...

Gruss spaceman007


--------------------
think-> google -> post
http://www.buechergestell.ch
http://www.pickup-artists.ch
http://www.web24.ch Die neue Schweizer Suchmaschine!
Top
PMEmail Poster
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:
Trackback-Url: http://www.ayom.com/track/t/19156

Topic Options Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
CSS: vertical-align mit Divs? Josh 3566 7 Di 20.12.2005, 21:22




Anzeige - [Hier werben / Mediadaten]



Anzeigen


[Hier werben / Mediadaten]