zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü mittig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2014, 22:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2014
Beiträge: 3
Przemy befindet sich auf einem aufstrebenden Ast
Standard Menü mittig

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.12.2014, 20:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.12.2014
Beiträge: 137
Nördy kann nur auf Besserung hoffen
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.12.2014, 08:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.009
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Nördy Beitrag anzeigen
Meine Css kenntnisse sind nicht riesig aber zenterieren kannst du Elemente in Css nicht! Das musst in in dem HTML-Dokument eingeben
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.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.01.2015, 15:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2014
Beiträge: 3
Przemy befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 08.01.2015, 16:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 485
dazzle89 wird schon bald berühmt werden
Standard

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:

Code:
#cssmenu {
   width: 100%;
   height: 59px;
   padding-bottom: 4px;
}
Falls es dann immer noch nicht klappt, bitte den neuen Code oder Link zur Seite posten.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.01.2015, 03:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2014
Beiträge: 3
Przemy befindet sich auf einem aufstrebenden Ast
Standard

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

Stichwörter
menü, mittig, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr Ceres82 (X)HTML 3 23.08.2013 22:00
Menü mittig ausrichten pomm0 CSS 2 05.04.2012 12:06
drop-down Menü mittig stellen Saleman (X)HTML 1 16.01.2010 02:45
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Menü mittig? jenny79 CSS 12 16.12.2008 21:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:27 Uhr.