Vertikal zentrierte Ausrichtung
0 
Felix Riesterer
0 0 0 0 0
0 Felix Riesterer
Vertikal zentrierte Ausrichtung
Matthias Apsel
Gunnar BittersmannHallo,
ich versuche eine Navigationsleiste in CSS zu bauen, bei der die Links mit Hintergrundbildern unterlegt sind.
Das funktioniert ganz gut, nur leider ist der Linktext nicht auf dem Linkbild zentriert, sondern aus irgendeinem Grund oben.
Hier ist der entsprechende CSS Code:
table#Navigation {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
float: left;
border-collapse:collapse;
}
table#Navigation td {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
vertical-align:middle;
border-collapse:collapse;
border: 1px solid #000000;
height: 70px;
}
table#Navigation tr {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
}
table#Navigation a {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
display: block;
font-weight: bold;
font-size: 1.3em;
}
table#Navigation a:link {
color: #000000; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150s.png) no-repeat;
}
table#Navigation a:visited {
color: #555555; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150.png) no-repeat;
}
table#Navigation a:hover {
color: #bbbbbb; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150.png) no-repeat;
}
table#Navigation a:active {
color: #ffffff; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150.png) no-repeat;
}
Hier eine entsprechende HTML Seite, um ihn zu testen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Christian Becker">
<meta name="description" content="Lernen Sie Latein - Latinvm CviqVe: begleitend oder alternativ zu Universitätskursen,
aus Interesse oder bei Problemen in der Schule.">
<meta name="keywords" lang="de" content="Latein, Latinum, Lateinkurs, Nachhilfe, Lernen, alte Sprachen, Lateinisch, Latinum Cuique">
<meta http-equiv="content-language" content="de">
<meta name="date" content="2010-08-15T18:41:37+02:00">
<meta name="robots" content="all">
<meta http-equiv="expires" content="86400">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="generator" content="gedit">
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<title>Test</title>
</head>
<body>
Hallo, schaumerma ob das jetzt geht...
<table id="Navigation">
<tr>
<td><a href="index3.html">Home</a></td>
</tr>
<tr>
<td><a href="screenies.html">Screenshots</a></td>
</tr>
<tr>
<td><a href="howto.html">How to use</a></td>
</tr>
<tr>
<td><a href="modify.html">Modifying</a></td>
</tr>
<tr>
<td><a href="download.html">Downloads</a></td>
</tr>
<tr>
<td><a href="about.html">About me</a></td>
</tr>
<tr>
<td>Testtext</td>
</tr>
</table>
</body>
</html>
Und hier noch ein Bild, wie das ganze aussieht:
Wie man sieht, funktioniert ganz unten "vertical-align" ganz hervorragend, während die in einem <td> stehenden Links nicht so recht wollen.
Wo stelle ich mich dämlich an?
Vielen Dank im Voraus.
-
Lieber Christian Becler,
wie man eine Navigation vernünftig baut, steht in SELFHTML: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Christian Becler,
wie man eine Navigation vernünftig baut, steht in SELFHTML: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>
Liebe Grüße,
Felix Riesterer.
Ja, vielen Dank auch.
Das hat mich ja so weit gebracht, wie ich bin.
Nuja, schau ich halt nochmal.-
Hi,
wie man eine Navigation vernünftig baut, steht in SELFHTML: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>
Ja, vielen Dank auch.
Das hat mich ja so weit gebracht, wie ich bin.Nein, so weit bist du noch nicht, weil du noch ein Tabelle missbrauchst, anstatt die Navigation vernünftig als Liste von Links auszuzeichnen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
wie man eine Navigation vernünftig baut, steht in SELFHTML: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>
Ja, vielen Dank auch.
Das hat mich ja so weit gebracht, wie ich bin.Nein, so weit bist du noch nicht, weil du noch ein Tabelle missbrauchst, anstatt die Navigation vernünftig als Liste von Links auszuzeichnen.
MfG ChrisB
Leute, ihr seid ja wirklich unheimlich freundlich und hilfreich. Ich bin tief beeindruckt. Noch beeindruckter wäre ich allerdings, wenn mir auch jemand mit meinem Problem geholfen hätte.
Ich hatte gedacht, dass sich selfhtml auch an Leute richtet, die nicht hauptberuflich HTML, CSS, JS etc. pp. verwenden.
Dass der CSS Code, den ich gepostet habe, nicht mehr so viel gemein hat mit dem, was im entsprechenden Kapitel steht, liegt daran, dass ich so einiges ausprobiert habe, um zu meinem Ziel zu gelangen. DANACH habe ich in einem anderen Forum gefragt, als Antwort erhalten, dass ich mal hier http://phrogz.net/css/vertical-align/index.html schauen sollte, und dies getan.
Da ich dort fand, dass vertical-align wohl mit Tabellen ganz gut funktioniert, habe ich mein (bzw. das von selfhtml) CSS umgeschrieben und mein Glück mit Tabellen versucht. Als das auch nicht fruchtete, habe ich mir gedacht, ich kann ja mal Leute fragen, die vielleicht schlauer sind, jedenfalls aber mehr Erfahrung haben dürften.Ich habe nicht hier gepostet, um dahin zurückverwiesen zu werden, von wo ich kam (denn offensichtlich habe ich da entweder Verständnisprobleme, oder das, was ich will, wird nicht abgedeckt), mir vorwerfen zu lassen, dass ich lüge, wenn ich sage, dass ich ebendort war, oder darüber belehrt zu werden, dass man Tabellen nicht zu Formatierungszwecken missbrauchen soll.
Kann mir nun also jemand helfen, oder nicht?
--
Seems we made our greatest error when we named it at the start
for though we called it "Human Nature" - it was Cancer of the heart-
Hi,
bitte zitiere sinnvoll – nur das, worauf du dich konkret beziehst, und nicht einfach alles.
Leute, ihr seid ja wirklich unheimlich freundlich und hilfreich. Ich bin tief beeindruckt. Noch beeindruckter wäre ich allerdings, wenn mir auch jemand mit meinem Problem geholfen hätte.
Das versuchen wir ja. Der Erfolg hängt allerdings von deiner Mitarbeit ab.
DANACH habe ich in einem anderen Forum gefragt, als Antwort erhalten, dass ich mal hier http://phrogz.net/css/vertical-align/index.html schauen sollte, und dies getan.
Da ich dort fand, dass vertical-align wohl mit Tabellen ganz gut funktioniert, habe ich mein (bzw. das von selfhtml) CSS umgeschrieben und mein Glück mit Tabellen versucht.Dann solltest du dir abgewöhnen, dein Fähnchen im jeweils aktuellen Wind flattern zu lassen.
Du hattest eine HTML-Struktur gegeben, und nur noch deren konkrete Formatierung stand in Frage. Diese Struktur dann wieder komplett umzuwerfen, sobald du irgendwo irgendetwas anderes beschrieben findest, ist doch wenig zielführend, meinst du nicht?
Kann mir nun also jemand helfen, oder nicht?
Entsorge dir Tabelle, mache eine Liste draus.
Und dann schau in die FAQ, was die bezüglich Zentrierung zu sagen haben.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Hi!
bitte zitiere sinnvoll – nur das, worauf du dich konkret beziehst, und nicht einfach alles.
So besser?
Dann solltest du dir abgewöhnen, dein Fähnchen im jeweils aktuellen Wind flattern zu lassen.
Ich würde das ja eher "Klammern an Strohhalme" nennen.
Du hattest eine HTML-Struktur gegeben, und nur noch deren konkrete Formatierung stand in Frage. Diese Struktur dann wieder komplett umzuwerfen, sobald du irgendwo irgendetwas anderes beschrieben findest, ist doch wenig zielführend, meinst du nicht?
Kommt drauf an. Ich war mir ja nicht sicher, ob die Struktur mit Liste statt Tabelle überhaupt hergab, was ich erreichen wollte. Dann ist es sicherlich zielführender, etwas anderes auszuprobieren, von dem man weiß, dass es klappen könnte, oder nicht?
Kann mir nun also jemand helfen, oder nicht?
Entsorge dir Tabelle, mache eine Liste draus.
Und dann schau in die FAQ, was die bezüglich Zentrierung zu sagen haben.Sodele, habe ich gemacht. Leider hat mir dir FAQ nicht geholfen, nur ein Geistesblitz. Ich habe jetzt mittels "padding-top" erreicht, dass der Linktest in der Mitte des Hintergrundbildes steht.
So:
[code lang=css]ul#Navigation {
width: 190px;
margin: 0; padding: 0;
border: 0;
background-color: none;
}
ul#Navigation li {
list-style: none;
margin: 0;
padding: 0;
height: 70px;
border: none;
}
ul#Navigation a {
display:block;
padding-top: 1em;
font-weight: bold;
text-decoration: none;
color: #000000; background: url(bilder/knopf150s.png) no-repeat;
height: 70px;
}
ul#Navigation a:hover {
padding-top: 1em;
font-weight: bold;
text-decoration: none;
color: #ffffff; background: url(bilder/knopf150.png) no-repeat;
height: 70px;
}
ul#Navigation a:visited {
padding-top: 1em;
font-weight: bold;
text-decoration: none;
color: grey; background: url(bilder/knopf150.png) no-repeat;
height: 70px;[code]Was dann so aussieht:
Ist das jetzt schlechter Stil?
Seems we made our greatest error when we named it at the start
for though we called it "Human Nature" - it was Cancer of the heart-
Om nah hoo pez nyeetz, Christian Becker!
Ist das jetzt schlechter Stil?
auf den ersten Blick nicht, aber es gibt noch Verbesserungspotential:
ul#Navigation a { display:block; padding-top: 1em; font-weight: bold; text-decoration: none; color: #000000; background: url(bilder/knopf150s.png) no-repeat; height: 70px; } ul#Navigation a:hover { color: #ffffff; background: url(bilder/knopf150.png) no-repeat; } ul#Navigation a:visited { color: grey; background: url(bilder/knopf150.png) no-repeat; }Man braucht nur die geänderten Eigenschaften angeben. Sprites sind auch eine gute Idee.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Christian Becker!
Ist das jetzt schlechter Stil?
auf den ersten Blick nicht, aber es gibt noch Verbesserungspotential:
[...]
Man braucht nur die geänderten Eigenschaften angeben. Sprites sind auch eine gute Idee.Matthias
Ah, danke. Werde ich ändern.
Der Vorteil der Sprites erschließt sich mir nicht ganz. Da wird doch dann halt nur eine (größere) Datei geladen statt zweier (kleinerer). Was habe ich nicht verstanden?
-
Om nah hoo pez nyeetz, Christian Becker!
Der Vorteil der Sprites erschließt sich mir nicht ganz. Da wird doch dann halt nur eine (größere) Datei geladen statt zweier (kleinerer). Was habe ich nicht verstanden?
bei dir sinds schon 12.
Wenn du 12 Briefe aus dem Briefkasten holen möchtest, gehst du doch auch bloß einmal und nicht für jeden Brief extra.
Matthias
--
1/z ist kein Blatt Papier.
-
Danke ChrisB und Matthias Apsel.
Werde ich mal versuchen, einzubauen.
-
-
Hi,
Der Vorteil der Sprites erschließt sich mir nicht ganz. Da wird doch dann halt nur eine (größere) Datei geladen statt zweier (kleinerer). Was habe ich nicht verstanden?
Dass HTTP-Requests zu minimieren ein ganz wesentlicher Bestandteil der Operation „beschleunigte Webseite“ ist.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
@@Christian Becker:
nuqneH
Der Vorteil der Sprites erschließt sich mir nicht ganz. Da wird doch dann halt nur eine (größere) Datei geladen statt zweier (kleinerer).
Zur Anzahl der HTTP-Requests kommt noch hinzu: Die eine (größere) Datei mit allen Bildern darin ist deutlich kleiner als die Summe der einzelnen kleinen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Lieber Christian Becker,
Dann solltest du dir abgewöhnen, dein Fähnchen im jeweils aktuellen Wind flattern zu lassen.
Ich würde das ja eher "Klammern an Strohhalme" nennen.
naja, wenn Du hier nach Hilfe fragst, dann kannst Du davon ausgehen, dass wir Dich in aller Regel an die in SELFHTML beschriebenen Beispiele verweisen. Wenn Du dort schon warst, dieses aber nicht verrätst, wie sollten wir das dann "riechen", wenn Deine Dokumentstruktur mit den in SELFHTML beschriebenen Beispielen nichts mehr zu tun hat?
Klar findest Du in anderen Foren andere Vorschläge. Die mögen _visuell_ vielleicht sogar schneller zum gewünschten Ziel führen, aber ob sie _strukturell_ ein sinnvolles Ergebnis bieten, stelle ich in Frage.
Es gab hier schon öfter Leute, die auf ihrer Struktur beharrt haben und ausschließlich den zielführenden Hinweis verlangt haben, damit ihr Ergebnis wie gewünscht aussieht. Dieses Forum macht solche Leute traditionell nicht glücklich. Die finden ihre "Lösungen" dann eben in "anderen Foren". Und dass wir uns nicht darum scheren, wirkt dann eben unfreundlich.
Es kann anscheinend nicht jeder glücklich werden.
Ich habe jetzt mittels "padding-top" erreicht, dass der Linktest in der Mitte des Hintergrundbildes steht.
Wenn man die <li>-Elemente auf display:table-cell setzt, dann greift für ihren Inhalt die Eigenschaft "vertical-align", die ansonsten bei Elementen mit display:block keine Wirkung zeigt. Wenn man dann noch mit line-height:100% spielt, sollte sich der gewünschte Effekt unabhängig der Zoom-Einstellung des Browsers und unabhängig zur gewählten Schriftgröße einstellen.
Da Deine Hintergrundbilder feste Pixel-Größen haben, ist es sinnvoll, den <li>-Elementen eine feste Breite und Höhe in Pixeln zu geben. Mit meinen obigen Hinweisen sollte sich das gewünschte Darstellungsverhalten ohne Padding einstellen.
Ist das jetzt schlechter Stil?
Keinesfalls. Die Dokumentstruktur ist sinnvoll, denn eine Navi ist nun einmal eine (Link-)Liste.
Seems we made our greatest error when we named it at the start
for though we called it "Human Nature" - it was Cancer of the heartWas willst Du damit sagen? Welchen Herzkrebs hast Du irrtümlich für die menschliche Natur gehalten?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Was willst Du damit sagen? Welchen Herzkrebs hast Du irrtümlich für die menschliche Natur gehalten?
Danke schon mal für die Tips.
Die Signatur entstammt einme Lied von Skyclad (Cancer of the Heart). Sie drückt Kritik an der sogenannten "menschlichen Natur" aus, zu der ja auch viele negative Eigenschaften wie Gier, Neid, Eifersucht, Grausamkei, Hass etc. gehören, Nimmt man nun das althergebrachte Bild vom Herz als SItz der Emotionen, so kann man zu dem Schluss kommen, dass diese sogenannte menschliche Natur eher durch Krebserkrankung des Herzens ist.
-
-
-
-
-
-
Lieber Christian Becker,
Ja, vielen Dank auch.
gern geschehen.
Das hat mich ja so weit gebracht, wie ich bin.
Dein Code und der Artikel haben fast nichts gemein. Damit ist der Wahrheitsgehalt Deiner Aussage zweifelhaft.
Nuja, schau ich halt nochmal.
Schauen alleine nützt nichts. Du solltest schon dazulernen. Und vor allem solltest Du auch wollen!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-