Schrift
[thread]2242[/thread]

CSS: vertical-align:middle



<< |< 1 2 >| >> 18 Einträge, 2 Seiten
esskar
 2005-03-07 22:52
#24339 #24339
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
html,body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
font-size: 8pt;
font-family: Tahoma;
color: �
}

.center {
text-align: center;
}

#pageheader {
width: 806px;
}

#pagemenu {
border: 5px;
background-color: #75A920;
font-size: 8pt;
font-family: Tahoma;
color: #FFFFFF;
font-weight: bold;
width: 806px;
height: 45px;
text-align: left;
vertical-align: middle;
}


Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
<body class="center">
<div id="pageheader">
<img src="/perl/gif.pl?rgb=75A920" border="0" width="806" height="15" /><br />
<img src="/perl/gif.pl?rgb=FFFFFF" border="0" width="806" height="2" /><br />
<img src="/images/header.jpg" border="0" width="806" height="113" />
<img src="/perl/gif.pl?rgb=FFFFFF" border="0" width="806" height="2" /><br />
</div>
<div id="pagemenu">
Home | Aktuelles
</div>
</body>


wieso rutscht "Home | Aktuelles" nicht in die verticale Mitte des Div's ?
jan10001
 2005-03-07 23:45
#24340 #24340
User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]
Gilt das nicht nur für Tabellenspalten?
pktm
 2005-03-08 02:19
#24341 #24341
User since
2003-08-07
2921 Artikel
BenutzerIn
[Homepage]
user image
offiziell gilt es nicht nur für Tabellen, praktisch gesehen funktionier es aber nur da wirklich.
Hast du (zur Not, mag ich auch nicht) mal das Attribut valign=middle am div-tag ausprobiert?
http://www.intergastro-service.de (mein erstes CMS :) )
GwenDragon
 2005-03-08 12:29
#24342 #24342
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
Wenn der geneigte Leser sich mal die Definition des CSS2 bitte zu Gemüte führen möchte und auch notfalls in der Definition bei http://www.w3.org/Style/CSS/ nachschauen:
Quote
'vertical-align'
Value:   baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:   baseline
Applies to:   inline-level and 'table-cell' elements
Inherited:   no
Percentages:   refer to the 'line-height' of the element itself
Media:   visual
Computed value:   for <percentage> and <length> the absolute length, otherwise as specified

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Note. Values of this property have slightly different meanings in the context of tables. Please consult the section on table height algorithms for details.

The following values only have meaning with respect to a parent inline-level element, or to the strut of a parent block-level, table-cell, table-caption or inline-block element.
baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
sub
Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
super
Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
text-top
Align the top of the box with the top of the parent element's font.
text-bottom
Align the bottom of the box with the bottom of the parent element's font.
<percentage>
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.
<length>
Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.

The following values align the element relative to the line box. Since the element may have children aligned relative to it (which in turn may have descendants aligned relative to them), these values use the bounds of the aligned subtree. The aligned subtree of an inline element contains that element and the aligned subtrees of all children inline elements whose computed 'vertical-align' value is not 'top' or 'bottom'. The top of the aligned subtree is the highest of the tops of the boxes in the subtree, and the bottom is analogous.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the line box.

The baseline of an 'inline-table' is the baseline of the first row of the table.

A UA should use the baseline of the last line box in the normal flow in the element as the baseline of an 'inline-block', or the element's bottom margin edge, if there is none.


Und etwas ändern:
Code: (dl )
1
2
#pagemenu {
    display: inline-table;

:cool: :)\n\n

<!--EDIT|GwenDragon|1110277943-->
esskar
 2005-03-08 12:59
#24343 #24343
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
[quote=pktm,08.03.2005, 01:19]valign=middle am div-tag ausprobiert?[/quote]
ja; bringt nix!
esskar
 2005-03-08 13:00
#24344 #24344
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
[quote=GwenDragon,08.03.2005, 11:29]Und etwas ändern:
Code: (dl )
1
2
#pagemenu {
    display: inline-table;

:cool: :)[/quote]
werde es testen. danken!
esskar
 2005-03-19 02:59
#24345 #24345
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
hi;
man kann wohl in divs mit line-height arbeiten, damit man mit vertical-align richtig arbeiten kann!

Code: (dl )
1
2
3
4
5
6
7
8
9
.windowtop {
  text-align: left;
  font-size: 8pt;
  font-family: Tahoma;
  background-color: #DCE8E8;
  height: 24pt;
  vertical-align: middle;
  line-height: 24pt;
}


Das ganze zeiht dann so aus
Code: (dl )
<div class="windowtop">Text</div>


wenn jetzt aber Bilder ins Spiel kommen, klappt das ganze nicht mehr!

Code: (dl )
1
2
3
<div class="windowtop">
<img src="img.gif" width="22" height="16" alt=
"Info" />Text</div>


wird alles wieder oben ausgerichtet, und den Text richtet sich nach dem Bild.
Jemand ne Problemlösung parrat?

PS: Tabellen waren immer so schön einfach!\n\n

<!--EDIT|esskar|1111194007-->
GwenDragon
 2005-03-19 13:12
#24346 #24346
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
//Edit: Kann ich hier kein Beispielbild hochladen ???\n\n

<!--EDIT|GwenDragon|1111231774-->
GwenDragon
 2005-03-19 13:15
#24347 #24347
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
Quote
PS: Tabellen waren immer so schön einfach!

Faulpelz! ;)

Eine Frage der Vererbung. Wie wärs damit:
Code: (dl )
.windowtop *
und
Code: (dl )
<div class="windowtop"><div><img src="img.gif" width="22" height="16" alt="Info" />Text</div></div>


<klugshit>CSS und die Art Boxen dar zu stellen ist komplexer als Tabellen. Schau mal bei w3.org das Boxmodel an.</klugshit>\n\n

<!--EDIT|GwenDragon|1111232067-->
esskar
 2005-03-19 14:53
#24348 #24348
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
[quote=GwenDragon,19.03.2005, 12:15]Wie wärs damit:
Code: (dl )
.windowtop *
[/quote]
nachmal?
hab das nicht verstanden; wie und wo bau ich das ein? und was macht es?
<< |< 1 2 >| >> 18 Einträge, 2 Seiten



View all threads created 2005-03-07 22:52.