Das Zauberwort in diesem Fall ist: float Left und margin-left und margin-right
Padding ist in deinem Fall nicht richtig.
Schau Dir mal den folgenden CSS-Code an den Du ja dann auch für Deine
Webseite verwenden könntest. Du kannst die Buttons noch nach Deinen Vorstellungen platzieren. Oben, rechts und Links.
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrackSack - Das Projekt</title>
<style type="text/css">
<!--
#divMitInhalten {
background-attachment: scroll;
background-image: url(img/Backround_rot.png);
background-repeat: no-repeat;
background-position: center center;
height: 800px;
width: 1066px;
padding: 10px;
margin-right: auto;
margin-left: auto;
border: 1.0px solid #333333;
}
.Stil1 {color: #FFFFFF}
#infoButton {
height: 27px;
width: 67px;
top: 0px;
margin-left:114px;
margin-right:50px;
float: left;
}
#BeatsButton {
height: 27px;
width: 74px;
top: 0px;
margin-right:50px;
float: left;
}
#TracksButton {
height: 27px;
width: 133px;
top: 0px;
margin-right: 50px;
float: left;
}
#ActsButton {
height: 27px;
width: 152px;
top: 0px;
margin-right: 50px;
float: left;
}
#KontaktButton {
height: 27px;
width: 108px;
top: 0px;
margin-right: 50px;
float: left;
}
-->
</style>
</head>
<body bgcolor="#000000">
<div id="divMitInhalten">
<div id="infoButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_02.jpg" alt="info" width="67" height="27" />
</div>
<div id="BeatsButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_04.jpg" alt="Beats" />
</div>
<div id="TracksButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_06.jpg" alt="tracks" />
</div>
<div id="ActsButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_08.jpg" alt="acts" />
</div>
<div id="KontaktButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_10.jpg" alt="kontakt" />
</div>
<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p class="Stil1">dafjjka</p>
<p>dafkj</p>
<p align="center"> </p>
</div>
</body>
</html>