CSS Anfängerfrage zum Bau einer simplen Menüleiste

[Phoenixz]

Hallo,

ich bin totaler Anfänger und wollte mir mal den Umgang mit CSS beibringen. Ich hatte vor ein horizontales Menü zu bauen. Dabei sollen die Knöpfe innerhalb der Menüleiste in der Mitte sein und die Texte der Knöpfe sowohl horizontal als auch vertikal zentriert. Den hinteren Teil habe ich bereits geschafft, nur die vordere Anforderung macht mir Probleme.
Das habe ich bisher:

    <div class="menuebar">
        <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li>Test4</li>
        </ul>
    </div>

Und das ist die dazugehörige Stylesheet-Datei

.menuebar
{
	font-size: 12pt;
	border: 1px solid #808080;
	height: 52px;
	width: 100%;
	text-align: center;
}

.menuebar ul
{
	margin: 0px;
	padding: 0px;
}

.menuebar ul li
{
	line-height: 50px;
	width: 100px;
	border: 1px solid #003366;
	background: #66CCFF;
	list-style-type: none;
	float: left;
}

Sobald ich float: left bei ".menuebar ul li" mache, wird es nicht mehr zentrieren und wenn ich das weg mache sind zwar alle zentriert aber untereinander :-/.
Wie kann ich das umgehen?

Vielen Dank
Daniel

 

[Stefan-]

Dein LI wird nicht als Block-Element dargestellt. Setz das mal auf display:block, dann solltest du ein paar Probleme behoben haben. ;-)

 

[Phoenixz]

Hi, danke erstmal, doch das habe ich auch schon versucht, doch brachte mich nicht weiter.
Das einzige was was bringt ist "display: inline-block;" und "float:left" wegmachen. Doch das Problem ist dann, das ich keinen nahtlosen Übergang zwischen den Einträgen habe sonder immer einen Abstand. Habe auch schon versucht mergin und co auf 0 zu setzten, bringt aber alles nichts.

 

[QXARE]

@Stefan, <li> ist von Haus aus in einer Liste ein Blockelement und wird durch float: left; nochmals als Blockelement ausgezeichnet. Man kann sich das display: block; sparen.

@Autor: Was genau möchtest du erreichen, dass das Attribut bei list-style-type: bullet; sowohl horizontal als auch vertikal zentriert wird? Ich weiss nicht sorecht was du mit "Knopf" meinst.


Wenn du das meinst ist mir keine Lösung bekannt die auf die Schnelle nur mit dem Attribut geht.

Du könntest dir eine kleine Grafik basteln, und diese dann als Hintergrund background: url(images/bullet.gif) no-repeat 0 50%; einbinden.

 

[Phoenixz]

Hallo, wie schon erwähnt wurde ich gerne ein horizontales Menü mit Knöpfen bauen.
Ein Knopf entspricht dann bei mir ".menuebar ul li". Den Text der als Listeneintrag gewählt wird (also der Text zwischen <li></li>), soll in der Mitte des Knopfes stehen (sowohl horizontal als auch vertikal betrachtet). Das Funktioniert jetzt soweit!
Doch durch das float:left fangen alle Knöpfe ganz links an und gehen nach rechts. Ich möchte dass aber die Knöpfe in der Mitte sind. Ich habe selbst versuch wenigstens die Knöpfe einfach nur mit einem Abstand irgendwie zu Platzieren. Also bisher funtzt einfach alles nichts, wenn ich float:left setzte sind alle Knöpfe links, egal was ich eintippe oder versuche

 

[QXARE]

Ah ok:

.menuebar
{
	font-size: 12pt;
	border: 1px solid #808080;
	height: 52px;
	width: 100%;
	text-align: center;
}

.menuebar ul
{
	margin: 0;
	display: inline;
	padding: 0;
}

.menuebar ul li
{
	line-height: 50px;
	height: 50px; // für IE 8
	width: 100px;
	border: 1px solid #003366;
	background: #66CCFF;
	list-style-type: none;
	display: inline-block;
}

Weil die Lösung zu schön wäre und ja ein Browser namens IE existiert (Star HTML Hack):

* html .menuebar ul li { display: inline; } // IE6
* + html .menuebar ul li { display: inline; } // IE7

Du kannst die natürlich auch per CC auslagern.

Der Zwischenraum der dir entsteht kommt vom Abstand im HTML selbst und aufgrund der inline-block Eingeschaft. Du müsstest also alle <li>'s aneinanderreihen (ohne Zwischenraum). Ist zwar zum Ansehen net gut aber es erfüllt seinen Zweck und es gibt keine Probleme.

 

[Phoenixz]

Danke t R I A S,

das war bei mir echt ne Geburt. Ich saß an dem Problem über 4 Stunden und habe versucht alles möglich an der Stylesheet Datei zu ändern. Dabei habe ich so manche sehr merkwürdige Ergebnisse erhalten. Irgendwie habe ich bisher so das Gefühl das es fast schon Glücksache ist ob mal das richtige rauskommt. Muss wohl noch ne Menge lernen :-/.

 

[QXARE]

Manchmal muss man einfach länger probieren damit das gewünschte Ergebnis rauskommt, grad weil so viele Browser existieren; ich habs auch grad machen müssen, weiss im Nachhinein aber umso mehr

 

[Eagle-PsyX-]

Hast du zuvor auch alle Einstellungen resetet?

Also mit

* {
  padding: 0;
  margin: 0;
  border: 0;
}

 

[QXARE]

Er hat doch eh dem ul margin 0 und padding 0 gegeben, das reicht vollkommen.