kostenloser Webspace werbefrei: lima-city


kleines Zentrierungsproblem - Hilfe

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    onlineuser

    onlineuser hat kostenlosen Webspace.

    Hi,

    hier mal mein Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
     <link rel="stylesheet" href="format.css" type="text/css">
    </head>
    <body>
      <table width="800" style="height:100%" align="center" border="0" cellspacing="0" cellpadding="0">
        <tr><td height="*"></td></tr>
          <tr>
            <td height="500">															<!--<td height="500" align="center" valign="middle">Inhalt</td>-->
              <table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
                <tr><td id="menue_1"><a href="index.php?menu=s01" id="linkFormatMenu">Text1</a></td><td id="menue_2"><a href="index.php?menu=s02" id="linkFormatMenu">Text2</a></td><td id="menue_1"><a href="index.php?menu=s02" id="linkFormatMenu">Text3</a></td><td id="menue_2"><a href="index.php?menu=s02" id="linkFormatMenu">Text4</a></td><td id="menue_1"><a href="index.php?menu=s02" id="linkFormatMenu">Text5</a></td></tr>
              </table>
            </td>
          </tr>
        <tr><td height="*"></td></tr>
      </table>
    </body>
    </html>
    
    
    
    CSS-File:
    
    #linkFormatMenu {
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    }
    
    #menue_1 a {																			/*menue-grey*/
    height:30px;
    width:160px;
    background-color:#808080;
    text-align:center;
    /*vertical-align:middle;*/
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    display: block;
    }
    
    #menue_1 a:hover {																			/*menue-grey*/
    height:30px;
    width:160px;
    background-color:#FF0000;
    text-align:center;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    }
    
    #menue_2 a {																			/*menue-blue*/
    height:30px;
    width:160px;
    background-color:#000080;
    text-align:center;
    /*vertical-align:middle;*/
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    display: block;
    }
    
    #menue_2 a:hover{																			/*menue-blue*/
    height:30px;
    width:160px;
    background-color:#FF0000;
    text-align:center;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    }


    Folgendes Problem: Warum lässt sich der Text in den Zellen nicht vertikal zentrieren?

    Hab schon alles versucht. Wenn ich im CSS-File das a bei #menue_1 weglasse, dann gehts mit der Zentrierung, nur füllt er dann nicht die gesamte Zelle beim mit der anderen Farbe an, wenn man über den Link fährt.

    Hat jemand eine Idee?

    Liebe Grüsse.

    Beitrag zuletzt geändert: 13.2.2009 0:54:05 von onlineuser
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.


    onlineuser schrieb:
    Hat jemand eine Idee?


    Stelle ganz einfach bei deinen #menue die height auf 32px und setze überall ein padding-top:8px; ein. Z.B.:

    #menue_1 a {																			/*menue-grey*/
    height:32px;
    width:160px;
    background-color:#808080;
    text-align:center;
    /*vertical-align:middle;*/
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    display: block;
    padding-top:8px;
    }


    Du kannst natürlich auch height:28px; und padding-top:7px; machen...

    Ansonsten würde ich dir raten HTML und CSS sauber zu trennen, soll heißen: Formatierung nur im CSS - dann behälst du Überblick besser.
  4. Wenn man schon HTML 4 Transitional benutzt, sollte man auch die schönen präsentationsbezogene Attribute in HTML nutzen:
    <td id="menue1" valign="middle"><a […]></a></td>
    Ryan

    Beitrag zuletzt geändert: 13.2.2009 14:26:31 von ryanblack
  5. Autor dieses Themas

    onlineuser

    onlineuser hat kostenlosen Webspace.

    Hi,

    thx für die Lösungen, jedoch, wenn ich einfach von oben nach unten "einrücke", dann interpretiert das der Firefox falsch. Der vergößert die Zelle dann einfach nochmal um die Pixelanzahl.

    padding-top:4px;


    Aha, das ist wohl ein Problem vom Quirks-Modus im IE, der das falsch macht. Aber wie kann ich verhindern, dass die Zellenhöhe nicht um das von oben eingerückte höher wird.

    Liebe Grüsse.

    Beitrag zuletzt geändert: 13.2.2009 21:52:09 von onlineuser
  6. e********l

    Das ist schon richtig. Die Höhe berechnet sich aus Höhe + Padding + Border. Du musst im CSS deine Paddingwerte vom Höhe Wert abziehen. Dann passt es wieder.
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!