ich hätte da ein Problem...
Ich 22x22px große Icons die ich mit meiner ganzen Kreativität aus nem Iconset genommen hab.
Jetzt will ich die untereinander anordnen und daneben noch nen Textlink.
Das soll dann ein Menü ergeben.
So sieht's aus
Die roten Rahmen sind nur zur Übersicht wie groß die divs sind
Hier noch der Code:
- Code: Alles auswählen
<html>
<head>
<title>Polz-Vt.de</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bg">
<div class="banner">
<img src="banner.jpg">
</div>
<div class="menu">
<ul>
<li><a href="index.htm"><img src="home.png">Home</a></li>
<li><a href="index.htm"><img src="events.png">Events</a></li>
<li><a href="index.htm"><img src="technik.png">Technik</a></li>
<li><a href="index.htm"><img src="galerie.png">Galerie</a></li>
<li><a href="index.htm"><img src="kontakt.png">Kontakt</a></li>
</ul>
</div>
</div>
</body>
</html>
Und die style.css:
- Code: Alles auswählen
* {margin: 0; padding: 0;}
body {
background-color: #666666;
}
div.bg {
width: 740px;
height: 800px;
margin: auto;
padding: 0;
border: 1px dashed #FF0000;
background-image: url(background.jpg);
}
div.banner {
width: 650px;
height: 150px;
margin: 0 45px;
top: 10px;
position: absolute;
border: 1px dashed #FF0000;
}
div.menu {
width: 82px;
height: 110px;
border: 1px dashed #FF0000;
margin: 0 45px;
top: 170px;
position: absolute;
}
div.menu ul {
list-style: none none;
margin: 0;
padding: 0;
}
div.menu ul li {
margin: 0;
padding: 0;
}
div.menu ul li a {
width: 82px;
height: 22px;
margin: 0;
padding: 0;
text-decoration: none;
font: bold 18pt Arial;
color: #666666;
display: inline;
}
div.menu ul li a img {
width: 22px;
height: 22px;
margin: 0;
padding: 0;
border: none;
display: inline;
float: left;
}
Kann mir jemand helfen, den Text neben die Grafiken zu kriegen?
Und dann hab ich immer noch n blöden Abstand zwischen den Grafiken
![;-]](./images/smilies/icon_impudently.gif "Extrem frech"){kind=icon}
)