kostenloser Webspace werbefrei: lima-city

CSS: vertical-align funktioniert nicht !! ??

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   t*********************n

   21:14, 23.12.2008

   Also Leute da bin ich wieder,
   
   ich habe ein weiter Problem und zwar das bei meinem Links der Text nicht vertikal in der Mitte positioniert wird !!
   Ich weiß nicht warum und weiß nicht mehr weiter. Ich werde noch irre !!
   
   Hier der betroffene Teil des CSS Codes:
   

   #menu td {
     	width: 160px;
     	height: 30px;
     	text-align: center;
   }
   
   #menu a {
     	display: block;
     	width: 150px;
     	height: 28px;
     	margin-left: 12px;
     	color: #FFFFFF;
     	text-decoration: none;
     	background-image: url(../grafik/link/link1.png);
   }
   
   #menu a:link {
     	color: #FFFFFF;
     	vertical-align: bottom;
   }
   
   #menu a:visited {
     	color: #FFFFFF;
   }
   
   #menu a:hover {
    	color: #FFFFFF;
     	border: 0;
     	background-image: url(../grafik/link/hover1.png);
   }
   
   #menu a:active {
     	color: #FFFFFF;
     	background-image: url(../grafik/link/active1.png);
   }

   
   
   Bin jeder Hilfe dankbar

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. prog

   

   prog hat kostenlosen Webspace.

   21:22, 23.12.2008

   Tja, das mit dem vertical-align ist so eine Sachen. Da musst du dich mit Notlösungen zurechtfinden, da das nicht mit allen Elementen funktioniert:
   

   
   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.

   
   Quelle: http://www.css4you.de/Texteigenschaften/vertical-align.html
   
   Notfalls kannst du die line-height auf 250% o.Ä. setzten. Das geht jedoch wiederum nur mit einzeiligen Texten, oder ein Tabellfeld nehmen. Da landet der Text automatisch in der Mitte.
   
   Gruß, Prog

4. i-spacke

   

   i-spacke hat kostenlosen Webspace.

   21:24, 23.12.2008

   Das mit dem Zentrieren ist immer so eine Sache für sich! ;S
   
   Kannst du zusätzlich noch den HTML-Teil posten und sagen, in welchem Broswer du das Problem hast?
   
   P.s.: Versuche vorerst vielleicht schonmal ein "text-align:center" bei "#menu a" hinzuzufügen, vielleicht reicht das schon. Ansonsten sind "margin:auto" oder "body,html{padding:0px;height:100%;width:100%}" gewisse Wunderwaffen, was das Zentrieren betrifft. ;) Aber wie bereits gesagt, ließe es sich mit mehr Informationen besser helfen.
5. Autor dieses Themas

   t*********************n

   21:40, 23.12.2008

   Es soll au keinen Fall keine Browserspezifische Seite werden.
   
   Ich habe jetzt schon etliche sachen probiert.
   
   @prog:
   das problem ist ich kann ja nicht einfach ein td hineinsetzen.
   
   @i-spacke:
   ich hab es der definition des a-Tags hinzugefügt, aber das hat auch nichts geändert.
   
   Danke trotzdem für die Bemühung.
   
   Beitrag geändert: 23.12.2008 21:40:23 von tactical-airsoft-berlin

6. i-spacke

   

   i-spacke hat kostenlosen Webspace.

   21:42, 23.12.2008

   Dann wäre es echt toll, wenn du uns auch noch den HTML-Code liefern könntest. Per Spekulation lässt es sich einem immer nur sehr mühseelig und langwierig helfen...
   
   Edit: Rechtschrieb ;)^^
   
   Beitrag geändert: 23.12.2008 23:00:29 von i-spacke
7. Autor dieses Themas

   t*********************n

   21:44, 23.12.2008

   Naja der Code ist ja kein Besonderer:
   
   <table>
   <tr>
   <td>
   <a href="../">Startseite</a>
   </td>
   </tr>
   <tr>
   <td>
   <a href=".">News</a>
   </td>
   </tr>
   <tr>
   <td>
   <a href="../team/">Team</a>
   </td>
   </tr>
   <tr>
   <td>
   <a href="../rules/">Regeln</a>
   </td>
   </tr>
   <tr>
   <td>
   <a href="../gally/">Gallerie</a>
   </td>
   </tr>
   <tr>
   <td>
   <a href="../sponsor/">Sponsoren</a>
   </td>
   </tr>
   </table>
   
   

8. i-spacke

   

   i-spacke hat kostenlosen Webspace.

   22:47, 23.12.2008

   http://www.css4you.de/Texteigenschaften/line-height.html
   Einfach bei "#menu a" ein "line-height:28px" oder wie halt die Höhe sein soll einfügen und dein Problem sollte gelöst sein.
   
   Edit: @tct Richtig, aber mit barrierefreiem Design haben es selbst viele, die es versuchen nicht so wirklich am Hut...
   
   Beitrag geändert: 23.12.2008 23:04:30 von i-spacke

9. tct

   

   tct hat kostenlosen Webspace.

   22:51, 23.12.2008

   
   http://www.css4you.de/Texteigenschaften/line-height.html
   Einfach bei "#menu a" ein "line-height:28px" oder wie halt die Höhe sein soll einfügen und dein Problem sollte gelöst sein.
   

   
   Richtig, wobei ich das ganze eher in eine Liste packen würde. Das ist nicht nur übersichtlicher, sondern auch "richtiger", da Tabellen nicht zum designen der Seite verwendet werden sollten.
10. Autor dieses Themas

    t*********************n

    22:55, 23.12.2008

    Danke !! Danke Leute !! ,, so funktioniert es. . nochmals vielen dank !!
    
    

11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?