marauder: Button (mit image) Text - zentrieren?

Hallo,

im moment bin ich am verzweifeln den meine CSS Buttons lassen es einfach nicht zu den zugeteilten Text (Button Bezeichnung) Pixelgenau zu zentrieren. hier mal ein Ausschnitt aus der CSS-Datei:

/******************************************** SIDEBAR ********************************************/ #sidebar { float: left; width: 160px; color: #333333; margin: 5px 5px 0px 5px; } #sidebar h2 { margin: 15px 5px 10px 5px; font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif; color: #333333; } #sidebar ul.sidemenu { text-decoration: none; margin: 15px 5px 0 5px; padding: 0px; } #sidebar ul.sidemenu li { background-image: url(http:///images/button.gif); background-repeat: repeat; width: 140px; margin: 5px 5px 0px 5px; text-align: center; } * html body #sidebar ul.sidemenu li { height: 1%; } #sidebar ul.sidemenu li a { color:#666; display:block; text-decoration:none;  } #sidebar ul.sidemenu li a:hover { background-image: url(http:///images/button3.gif); background-repeat: repeat; color:#fff; text-decoration: none; border: none;  }

vielleicht weiß ja jemand was ich falsch mache bzw. kann mir helfen... Danke!

  1. Hi,

    im moment bin ich am verzweifeln

    Ach ...

    den meine CSS Buttons lassen es einfach nicht zu den zugeteilten Text (Button Bezeichnung) Pixelgenau zu zentrieren. hier mal ein Ausschnitt aus der CSS-Datei:

    Ohne zugehöriges HTML und *brauchbare* Problembeschreibung wertlos.

    vielleicht weiß ja jemand was ich falsch mache

    /hilfe/charta.htm#tipps-fuer-fragende

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.

    1. hi,

      Ohne zugehöriges HTML und *brauchbare* Problembeschreibung wertlos.

      sorry für die wenigen worte, also folgendes problem:
      ich habe ein Menu in html und css erstellt, jetzt möchte ich das der Text zum button zentriert wird innerhalb der button grafik!?! Bisher leider ohne erfolg  - mit padding hab ich schon padding-left, padding-bottom getestet aber entweder es wird die grafik verzogen oder eben mehrfach dargestellt? Deshalb brauch ich eure hilfe

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="Description" content="" /> <meta name="Keywords" content="your, keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Distribution" content="Global" /> <meta name="Author" content="" /> <meta name="Robots" content="index,follow" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" href="css_styles.css" mce_href="css_styles.css" type="text/css" /> </head> <body> <title></title> <div id="sidebar"> <h2>Quick Links:</h2> <ul class="sidemenu"> <li><a href="#text">button text</a></li> <li><a href="#text">button text</a></li> <li><a href="#text">button text</a></li> <li><a href="#text">button text</a></li> </ul> </div> </body> </html> `` css /* top elements */ * { margin: 0; padding: 0; outline: 0; } body { background-color: #fff; background-image: url(/images/bg.gif); background-repeat: repeat; color: #333333; margin: 15px 0; font-family: Verdana, Tahoma, arial, sans-serif; font-size: 70%; line-height: 1.5em; } /******************************************** WEBSITE LAYOUT ********************************************/ #wrap { width: 790px; background: #CCC url(/images/content.gif) repeat-y center top; margin: 0 auto; text-align: left; } #content-wrap { clear: both; width: 760px; margin: 5px auto; padding: 0; } #header { position: relative; height: 131px; background: #caced1 url(/images/header.gif) no-repeat center top; padding: 0; } /******************************************** WEBSITE NAVIAGTION ********************************************/ #menu { clear: both; margin: 0 auto; padding: 0; background: #e2e2e2 url(/images/menu.gif) no-repeat; height: 40px; width: 790px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 40px; } #menu ul { float: left; list-style: none; margin:0; padding: 0 0 0 20px; } #menu ul li { display: inline; } #menu ul li a { display: block; float: left; padding: 0 12px; color: #fff; text-decoration: none; } #menu ul li a:hover { color: #E00000; } /******************************************** MAIN COLUMN ********************************************/ #main { float: right; width: 555px; margin: 0; padding: 10px 0 0 0; display: inline; } #main h2 { padding: 0; margin-bottom: 0; color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 135%; font-style: normal; font-weight: bold; } #main h2 a { color: #444; text-decoration: none; } #main p, #main h1, #main h2, #main h3, #main ol, #main ul, #main blockquote, #main table, #main form { margin-left: 25px; margin-right: 20px; } /******************************************** SIDEBAR ********************************************/ #sidebar { float: left; width: 160px; color: #333333; margin: 5px 5px 0px 5px; } #sidebar h2 { margin: 15px 5px 10px 5px; font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif; color: #333333; } #sidebar ul.sidemenu { text-decoration: none; margin: 15px 5px 0 5px; padding: 0px; } #sidebar ul.sidemenu li { background-image: url(/images/button.gif); background-repeat: repeat; width: 140px; margin: 5px 5px 0px 5px; text-align: center; } * html body #sidebar ul.sidemenu li { height: 1%; } #sidebar ul.sidemenu li a { color:#666; display:block; text-decoration:none;  } #sidebar ul.sidemenu li a:hover { background-image: url(/images/button3.gif); background-repeat: repeat; color:#fff; text-decoration: none; border: none;  } /******************************************** FOOTER ********************************************/ #footer { color: #333333; background: #caced1 url(/images/footer.gif) no-repeat center top; clear: both; width: 790px; height: 59px; text-align: center; font-size: 90%; } #footer p { padding: 10px 0; margin: 0; } #footer a { color: #FF0000; text-decoration: none; } /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } .clear { clear: both; } /* display and additional classes */ /******************************************** WEBSITE LINKS ********************************************/ a, a:visited { text-decoration: none; color: #c9c9c9; } a:hover { text-decoration: none; color: #c00; } /******************************************** WEBSITE TEXT HEADERS ********************************************/ h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif; } h1 { font-size: 180%; font-weight: normal; color: #555; } h2 { font-size: 160%; color: #88ac0b; font-weight: normal; } h3 { font-size: 135%; color: #666666; } /******************************************** WEBSITE IMAGES ********************************************/ img { padding: 5px; } img.float-right {margin: 5px 0px 10px 10px; } .kontakt {margin-left: 5px margin-rigt: 5px;} .branding { margin-left: 25px; } h1, h2, h3, p { margin: 10px 15px; padding: 0; } ul, ol { margin: 5px 15px; padding: 0 25px; } textarea.farbig { border:3px; margin-left: 25px; margin-bottom: 15px; width:508px; height:105px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; }  /******************************************** WEBSITE TABLES ********************************************/ table.details { margin-left: 10px; margin-bottom: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; } tr.details { background-color: #e2e2e2; color: black; } table.beschreibung { padding: 5px; } </style>

      Danke für eure Hilfe...

      1. Hi,

        ich habe ein Menu in html und css erstellt, jetzt möchte ich das der Text zum button zentriert wird innerhalb der button grafik!?!

        Du verwendest keine Button-Elemente, sondern reine Links - also nenne dich bitte auch so.

        Bisher leider ohne erfolg  - mit padding hab ich schon padding-left, padding-bottom getestet aber entweder es wird die grafik verzogen oder eben mehrfach dargestellt?

        Horizontale Zentrierung über text-align, vertikale bspw. über eine entsprechende line-height (bietet sich aber nur an, wenn der Textinhalt garantiert immer einzeilig ist und bleibt).

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.

        1. hi nochmal,

          werd das mal mit line-height probieren! Danke für den Tipp das mit align wußte  ich schon trotzdem Danke! MAl sehen ob das mit line-height geht... schönen Tag noch

          MFG
          Marauder

  2. hi zum wiederholten male,

    funzt leider immer noch nicht weder mit line height center; middle usw.
    Ich bin am verzweifeln - wen es dann gar nicht will... bleibts halt so!

    MFG
    marauder

    1. Hi marauder!

      funzt leider immer noch nicht weder mit line height center; middle usw.
      Ich bin am verzweifeln - wen es dann gar nicht will... bleibts halt so!

      Die Zeilenhöhe muss den selben Wert wie die Höhe haben, z. B.:

      height:2em; line-height:2em;

      MfG H☼psel

      Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)

      -- "It's amazing I won. I was running against peace, prosperity, and incumbency."
      George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001