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;
}

Gruß
Przemy

Meine Css kenntnisse sind nicht riesig aber zenterieren kannst du Elemente in Css nicht! Das musst in in dem HTML-Dokument eingeben also zb. :

<p align="center">Text</p>

In Css kannst du nur in VertikalenBereich etwas mit align machen (schrifft hoch oder runter). Das könnte dann so aussehen:

p {vertical-align:top;}

Hoffe konnte dir helfen

MFG Nördy

Du hast einen sehr veralteten Wissenstand. Natürlich kann man mit CSS zentrieren. Auch ist es falsch, das ins HTML zu schreiben. Und noch fälscher ist es, align="center" dafür zu verwenden.

Vielen Dank euch beiden.
So wie ich das sehe, muss ich dann folgendes in mein Menü einbauen:+

.center-me {
margin: 0 auto;
}

An welcher Stelle füge ich es am besten ein?

Besten Dank

Ohne Link ist das schwierig zu sagen.

Ich kenne zwar nicht den Rest der Seite, aber weil das Menü von dir eine Breite von 100% bekommt, kann es nicht zentriert werden. Das Zentrieren mit "margin: 0 auto" funktioniert, wenn du dem Menü eine feste Breite von z.B. 600px gibst. Bei 100% ist ja links und rechts von der Seite theoretisch kein Freiraum, der das Zentrieren ermöglicht. Kommt aber auf den Aufbau deiner Seite an.

Du musst das "margin: 0 auto" also hier einfügen:

Falls es dann immer noch nicht klappt, bitte den neuen Code oder Link zur Seite posten.

Besten Dank, habe die Breite von 100% auf 905px gesetzt und die entsprechende Zeile hinzugefügt. Jetzt ist es mittig