Thema: CSS Frage

Halli Hallo,
irgendwie stehe ich zu später Stunde immer auf dem Schlauch.

Also das ist die Seite:
http://goaly099.de/demopage/joomla/

So soll das Design am Ende aussehen:
http://goaly099.de/daten/grafiken/po...o/vonliehn.png

Folgende kleine Probleme:

1. Wie bekomme ich die einzelnen Menülinks an den Titel heran?
2. Die Navigation soll ja auch eine Endgrafik bekommen, wie kann ich das realisieren?


Hier die .css:

Code:

/* CSS Document by www.goaly099.de | vonliehn_v1.0*/

body {
font-family: Arial;
font-size: 12px;
color: #3d3d3d;
background-image: url(../images/vonliehn_bg.png);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}

#container {
width: 820px;
}

#header {
width: 820px;
height: 145px;
background-image: url(../images/vonliehn_header.png);
background-repeat: no-repeat;
}

#content_box {
width: 820px;
background-image: url(../images/vonliehn_content_bg.png);
background-repeat: repeat-y;
}

#navigation_left {
width: 220px;
text-align: left;
padding-left: 20px;
float: left;
}

#content {
width: 530px;
text-align: left;
float:left;
}

#footer {
width: 820px;
height: 50px;
background-image: url(../images/vonliehn_footer.png);
background-repeat: no-repeat;
clear: both;
}

#footer_text {
width: 820px;
padding-top: 30px;
}

a:link, a:visited, a:active, a:hover{
text-decoration: none;
color: #3d3d3d;
font-size: 12px;
}

a:active, a:hover{
text-decoration: none;
color: #d7d971;
}

a.navi_footer:link, a.navi_footer:visited, a.navi_footer:active, a.navi_footer:hover{
text-decoration: none;
color: #d7d971;
font-size: 12px;
}

a.navi_footer:active, a.navi_footer:hover{
text-decoration: none;
color: #d7d971;
}

h1 {
font-size: 16px;
color: #3d3d3d;
}

h2 {
font-size: 15px;
color: #3d3d3d;
}

h3 {
font-size: 14px;
color: #3d3d3d;
}

table.moduletable {
font-family: Arial;
font-size: 12px;
color: #3d3d3d;
}

table.moduletable th {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FF0000;
width: 200px;
height: 80px;
background-image: url(../images/vonliehn_menue_bg.png);
background-repeat: no-repeat;
padding-left: 15px;
padding-top: 15px;
}

a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {
background-image: url(../images/vonliehn_menue_link_bg.png);
background-repeat: repeat-y;
width: 200px;
display: block;
padding-left: 25px;
text-decoration: none;
font-weight: normal;
color: #829300;
font-size: 12px;
}

a.mainlevel:active, a.mainlevel:hover, a.mainlevel:focus {
color: #3d3d3d;
font-size: 12px;
text-decoration: none;
font-weight: normal;
}

a.sublevel:link, a.sublevel:visited, a.sublevel:hover {
text-decoration: none;
font-weight: normal;
color: #829300;
font-size: 12px;
}

a.sublevel:active, a.sublevel:hover, a.sublevel:focus {
color: #3d3d3d;
font-size: 12px;
text-decoration: none;
font-weight: normal;
}

.small {
font-family: Arial;
font-size: 10px;
color: #3d3d3d;
}

.createdate {
font-family: Arial;
font-size: 10px;
color: #3d3d3d;
}

.contentheading, .componentheading {
width: 530px;
height: 45px;
font-weight: bold;
font-family: Arial;
font-size: 12px;
color: #3d3d3d;
background-image:url(../images/vonliehn_head_bg.png);
background-repeat: no-repeat;
padding-left: 10px;
}

Währe super wenn mir jemand helfen könnte, komme irgendwie nicht mehr weiter.

Schon einmal Dankeschön!

Oh Oh Oh bin ich blind, ich sitze hier schon seit 2 Std. herum und hab alles mögliche versucht. Ok, die erste Sache habe ich somit gelöst.

Mhhh, rounded Module? Da habe ich ja noch gar nichts von gehört, da muss ich wohl google mal quetschen.

Trotzdem schon mal Danke!

Und nochmals Dankeschön, werde mir die Links mal Morgen anschauen und versuchen es an meinem Design umzusetzen.