vertical-align
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
background
befehl
beispiel
beitrag
beweisen
button
center
element
fragen
funktioniert button
hintergrund
hhen
jeweiligen verwendungszweck
mache
mitte
schaltflche
tabelle
test
versuchen
zustzlichen zeile
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hi,
das attribut, das du suchst ist 'middle' und nicht 'center'
siehe: http://www.css4you.de/Texteigenschaften/vertical-align.html -
Mit middle habe ich es schon versucht bevor ich den Forenbeitrag geschrieben habe - es funktioniert auch damit nicht.
Übrigens:
wenn ich es mit folgendem Code mache würde es funktionieren:
.button
{
vertical-align: middle;
}
aber das löst mein Problem nicht, da sich die Hintergrundfarbe eines links ändern soll wenn man darauf klickt.
Ich verwende es für eine Tabelle:
<table>
<tr>
<td id="button">
<a href="test.php">Test</a>
</td>
</tr>
</table>
Beitrag geändert: 22.6.2007 19:02:00 von swissguy -
hi,
1. jede 'id' darf eigtl. nur einmal pro seite vorkommen, verwende besser 'class'
2. es ist natürlich ein unterschied, ob 'vertical-align' auf #button, das wäre hier also 'td' oder auf 'a' angewendet wird..
versuch doch mal zwei teile zu machen
.button
{
vertical-align: middle;
}
.button a:hover
{
background-color:blue;
} -
Ich kriege das auch mit "class" nicht hin. Woran kann das liegen?
-
Hast du in <td> auch class stehen?
quasi:
<td class='button'>
anstatt von
<td id='button'>
Wenn ja, dann poste doch mal den Code von dem, was du jetzt hast. -
Ja, habe ich.
-
Ich habe mal ein komplettes Dokument erstellt, das funktioniert bei mir. Der Hintergrund des Links ändert sich beim Überfahren:
<html> <head> <title>Test</title> <style type="text/css"> td.button { vertical-align: middle; } td.button a:hover { background-color:blue; } </style> </head> <body> <table> <tr> <td class='button'> <a href='test.php'>Test</a> </td> </tr> </table> </body> </html>
oder möchtest du, dass sich nicht der Hintergrund des Links, sondern der des gesamten Tabellenfeldes ändert? -
Ist das td vor dem Punkt notwendig (td.button)? Ich habe dies jeweils weggelassen, und bis vor kurzem hat das für den jeweiligen Verwendungszweck funktioniert (.button).
-
Ist das td vor dem Punkt notwendig (td.button)? Ich habe dies jeweils weggelassen, und bis vor kurzem hat das für den jeweiligen Verwendungszweck funktioniert (.button).
Nein, es ist nicht zwingend notwendig. Wenn du aber ein <td class="xyz"> und z.B. ein <div class="xyz"> hast, dann kannst du:
über td.xyz {} das <td> ansprechen
über div.xyz {} das <div> ansprechen und
über .xyz {} beide ansprechen.
Ich schreibe den HTML-Tag aber (fast) immer davor, damit ich besser den Überblick behalten kann. -
Blöde Frage, aber wie hast du deine "Schaltflächen" auf deiner Homepage gemacht (Es handelt sich um die Schaltflächen "Ergebnis prüfen", "Zurücksetzen" usw. beim Sudoku-Rätsel)? Auch mit einer Tabelle (oder mit <div>)? So ungefähr sollte die ganze Sache bei mir am Schluss aussehen.
Beitrag geändert: 28.6.2007 18:48:42 von swissguy -
Das habe ich mit einem <input> gemacht. IdR sind das aber dann auch Formulare. Wenn du einen einfachen Link so erstellen willst, dann versuch das mal so:
a.button input { background-color:#fff; } a.button:hover input { background-color:red }
<a href="test.php" class="button"><input type="button" value="Linktext"></a> -
Danke für den Code. Ich habe den Code nun mit einer zusätzlichen Zeile erweitert (height: 50px;). Der Text erscheint immer noch in der Mitte. Das habe ich zuvor nicht geschafft. Dennoch frage ich mich, weshalb der Text bei einem normalen class="button" mit dem Befehl vertical-align: center; nicht zentriert wird.
-
Danke für den Code. Ich habe den Code nun mit einer zusätzlichen Zeile erweitert (height: 50px;). Der Text erscheint immer noch in der Mitte. Das habe ich zuvor nicht geschafft. Dennoch frage ich mich, weshalb der Text bei einem normalen class="button" mit dem Befehl vertical-align: center; nicht zentriert wird.
Weil es
vertical-align:middle;
heißt. Das wurde aber oben schon erwähnt. Hier noch der Beweis:
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align
Oder willst du das Ganze vielleicht horizontal zentrieren:
text-align:center;
wäre da der Befehl.
vertical = senkrecht = zwischen oben und unten (zentriert)
horizontal = (so wie der "Horizont" verläuft) = waagerecht = zwischen links und rechts (zentriert) -
Sorry, habe mich schon wieder verschrieben. Natürlich meinte ich middle aber es funktioniert auch so nicht.
Ich möchte es vertikal zentrieren und nicht horizontal.
Beitrag geändert: 28.6.2007 19:11:14 von swissguy -
Jetzt könnt man fragen, welch ein Beispiel funktioniert nicht? Bei welchem Browser (dem IE ist alles zuzutrauen :P) ?
Es ist folgenes zu beachten:
- man muss class und id richtig vergeben
- es muss immer dem element gesagt werden es soll zentieren das über dem element ist
also wenn du das hast: <td><a></a></td> und a soll zentriert sein, dann muss du das td sagen! Dann weiss td das es alle elemente zentriert anordnen soll
.
gruss Michael
Beitrag geändert: 29.6.2007 10:00:26 von greymiche -
Ich habe es bisher nur mit dem IE versucht. Hier nun ein konkretes Beispiel:
<html>
<head>
<style>
td.button a
{
background: #dddddd;
border: 1px outset;
vertical-align: middle;);
height: 50px;
width: 200px;
text-decoration: none;
}
td.button a:hover
{
background: #dddddd;
border: 1px inset;
vertical-align: middle;);
height: 50px;
width: 200px;
text-decoration: none;
}
</style>
</head>
<body>
<table>
<tr>
<td class="button">
<a href="test.php">Test</a>
</td>
</tr>
</table>
</body>
</html>
Beitrag geändert: 29.6.2007 17:02:23 von swissguy
Beitrag geändert: 29.6.2007 18:02:05 von swissguy -
Du benutzt wieder vertical-align:center anstatt von vertical-align:middle!
Wie es scheint, versuchst du, eine Schaltfläche mit einem Schriftzug in der Mitte zu erstellen.
Das kannst du auch über padding machen. Sie dir mal dieses Beispiel an, und sag, ob das deinen Vorstellungen nahe kommt:
<html> <head> <style type="text/css"> a { padding:10px; background: #dddddd; border: 1px outset; text-decoration: none; } a:hover { border: 1px inset; } </style> </head> <body> <a href='test.php'>Test</a> </body> </html>
Wenn ja, dann könntest du dir die Tabelle sparen. -
Das mit dem "middle" lerne ich wohl nie...;), aber bisher hat es auch so funktioniert.
Das entspricht ziemlich genau meinen Vorstellungen, nur kann ich dann die Höhe in Pixel nicht genau angeben, z.B. height: 50px; -
<html> <head> <style type='text/css'> a { margin:0px; padding:12px 0px; display:block; height:26px; width:100px; text-align:center; background: #dddddd; border: 1px outset; text-decoration: none; } a:hover { border: 1px inset; } </style> </head> <body> <a href='test.php'><span>Test</span></a> </body> </html>
wenn du eine Höhe vergeben willst muss es ein ein Blockelement sein. Inline(Fliesstext) funktioniert keine Höhen- bzw. Breitenangaben. Das verherige Beispiel ist besser, weil es noch funtioniert wenn größere Schrift verwendet wir bei User!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
