Hallo,
meine Kenntnisse über CSS sind recht dürftig und ich versuche für meine private Homepage, die ich über Joomla! 3.3 aufgesetzt habe, ein eigenes Template zu bauen. Bin soweit zufrieden, jedoch bekomme ich das Menü, welches ich online über einen CSS-Menü-Generator habe erstellen lassen und mit welchem ich zufrieden bin, mittig zentriert zu bekommen. Habe schon recht viel versucht, kriege es jedoch leider nicht hin. Es ist links-bündig.
Demnach bitte ich euch um Unterstützung, welche Zeile ich ändern muss.
Vielen herzlichen Dank im Voraus.
IM INDEX.PHP
...
<div id="cssmenu">
<jdoc:include type="modules" name="cssmenu" style="xhtml" />
</div><!--#cssmenu-->
...
IM TEMPLATE.CSS
...
@import url(http://fonts.googleapis.com/css?family=Capriola);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
font-family: Capriola, Helvetica, sans-serif;
}
#cssmenu {
width: 100%;
height: 59px;
padding-bottom: 4px;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right ul li {
float: right;
margin-right: 0;
margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
position: absolute;
bottom: 0;
width: 100%;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#cssmenu #bg-one {
height: 10px;
background: #ad1c51;
}
#cssmenu #bg-two {
height: 59px;
z-index: 2;
background: #ad1c51;
}
#cssmenu #bg-three {
bottom: 4px;
height: 55px;
z-index: 3;
background: #ad1c51;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
}
#cssmenu #bg-four {
bottom: 4px;
height: 55px;
z-index: 4;
background: #ffffff;
}
#cssmenu ul {
height: 59px;
}
#cssmenu ul li {
float: left;
margin-right: 4px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 5;
}
#cssmenu ul li a {
padding: 9px 30px 5px 30px;
margin-bottom: 4px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
color: #ad1c51;
font-size: 18px;
text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
border-bottom-left-radius: 30px;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
background: #ad1c51;
color: #ffffff;
}