marauder: Button (mit image) Text - zentrieren?

Beitrag lesen

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>  

  
  
/* 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...