[CSS] Bottom und Center wie ?[Erledigt][NICHT LÖSCHEN BITTE]

Webdesign & Technik HTML & CSS
1

Hi,
Hab ein Problem:

<html>
 <head>
  <style type="text/css">
<!--
.menue {
font-family: Arial;
font-size: 14px;
text-decoration: none;
color: #000000;
text-align: center;
background-image: url(normal.png);
width: 80px;
height: 30px;
display: block;
}
.menue:hover {
font-family: Arial;
font-size: 14px;
text-decoration: none;
color: #000000;
text-align: center;
background-image: url(hover.png);
width: 80px;
height: 30px;
display: block;
}
-->
</style>
 </head>
<body bgcolor="#000000">

<table cellpadding="1" cellspacing="0">
 <tr>
  <td><a class="menue" href="#" title="">TEST</a></td>
 </tr>
</table>

</body>
</html>

Nun der neu code:

<html>
 <head>
  <style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-image: url(background.png);
}
.menue {
font-family: Arial;
font-size: 14px;
text-decoration: none;
color: #000000;
text-align: center;
background-image: url(normal.png);
width: 80px;
height: 30px;
display: block;
}
.menue:hover {
font-family: Arial;
font-size: 14px;
text-decoration: none;
color: #000000;
text-align: center;
background-image: url(hover.png);
width: 80px;
height: 30px;
display: block;
}
-->
</style>
 </head>
<body>

<table cellpadding="1" cellspacing="0">
 <tr>
  <td><a class="menue" href="#" title="">TEST</a></td>
  <td><a class="menue" href="#" title="">TEST</a></td>
 </tr>
</table>

</body>
</html>

Nun im FF2.0.0.15 ist das “TEST” ganz oben und zentriert aber es sollte zentriert und von unten(bottom) aus gerichtet sein …£dit: also unten am Rand "kleben"
Wie bring ich das hin ? Hab schon viel versucht !

MfG fish

2

Versuche mal “bottom:0;” oder “vertical-align:bottom;” einzugeben.

3

wenn du nur Text im .menu hast, musst du nur vertical-align: bottom für .menu verwenden, blockelemente bringst du mit margin-top: auto für das blockelement ganz nach unten :wink:

4

Ne … bottom:0; hab ich schon versucht… vertical-align:bottom; geht nicht …

5

geht auch nicht :neutral_face:

6

Du musst “position:absolute;” und “bottom:0px;” eingeben.

7

dan klebt es unten beim Browser … aber der text in der Tabelle muss ganz unten sein … und zentriert …

8

Notfals musst du das eingeben:

vertical-align:baseline; left:50%;

Anders bekomme ich es komischerweise auch nicht hin. Da muss ein kleiner Flüchtigkeitsfehler sein.

Das muss aber stehen bleiben.

9

[quote=“sumatra70”]Notfals musst du das eingeben:

vertical-align:baseline; left:50%;

Anders bekomme ich es komischerweise auch nicht hin. Da muss ein kleiner Flüchtigkeitsfehler sein.[/quote]

lol…vielleicht füg ich faltsch ein…wie fügst es ein ? bei css oder ,oder wie ?

[code]

TEST TEST
[/code]
10

de.selfhtml.org/css/eigenschafte … ical_align

:wink:

11

meinst du so: http://hummer.bplaced.net/bottom.htm ?

[code]

TEST TEST
[/code]
12

Du hast das sowieso komisch aufgebaut. Wenn du das schon im “a” tag eingebaut hast, kannst du ruhig “a:hover” nehmen. Ich versuche es mal anders aufzubauen.

13

[quote=“michi7x7”]http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

:wink:[/quote]

14

Das 1 Ist das was bei mir kommt das 2 ist das was ich meine …(Mit Paint gemacht ne !)

15

Zumindest ist es so richtig geschrieben:

[code]

<!-- body { margin: 0px; padding: 0px; background-image: url(background.png); } #bla {position:absolute; text-align: center; bottom:0px; padding:1px; vertical-align:baseline; top:auto; } #bla td a { font-family: Arial; font-size: 14px; text-decoration: none; color: #000000; text-align: center; background-image: url(normal.png); width: 80px; height: 30px; display: block; }

#bla td a:hover {
font-family: Arial;
font-size: 14px;
text-decoration: none;
color: #000000;
background-image: url(hover.png);
width: 80px;
height: 30px;
display: block;
}

–>

TEST TEST
[/code] Jetzt muss nur noch die Horizontale Ausrichtung stimmen.
16

@sumatra70:

Ich meine nicht von Browser steht ja oben /.… Thx für die mühe … :neutral_face:

17

[size=200]Häää[/size]

18

Ich habs mit Paint gemacht (Das 2te )

19

So müsste es stimmen. Sonst weiß ich auch nicht mehr weiter.

[code]

<!-- body { margin: 0px; padding: 0px; background-image: url(background.png); } #bla {position:absolute; text-align: center; bottom:0px; padding:1px; vertical-align:baseline; top:auto; left:40%; } #bla td a { font-family: Arial; font-size: 14px; text-decoration: none; color: #000000; text-align: center; background-image: url(normal.png); width: 80px; height: 30px; display: block; }

#bla td a:hover {
text-decoration: none;
background-image: url(hover.png);
display: block;
}

–>

TEST TEST
[/code]
20

nöö…so gehts nicht… es geht genau so: de.selfhtml.org/css/eigenschafte … ical_align :wink: