✔ Problem mit der Breite bei der horizontalen Ausrichtung der Listen Navigation

M

Muckel1986

Erfahrenes Mitglied
Guten Tag zusammen,

habe leider ein Problem, zu dem ich noch keine Lösung finden konnte. Bei einem Layout, welches ich gerade erstelle, habe ich als erstes ein DIV-Block, in dem dann eine Liste als Menue ist. Jene ist Horizontal ausgerichtet (also von links nach rechts) und soll auch Mittig zentriert sein.

Das klappt auch, solange die Breite der Liste möglichst gering ist. Bei dem Test habe ich eine Breite von 40% genommen und insgesamt sechs Wörter zum testen. Das ganze aber auf einer recht Breiten Auflösung (1440x900 Pixel), da ich aktuell nur meinen Laptop zum testen habe.

Wenn ich die Breite nun noch kleiner fasse, dann habe ich den Effekt, dass nicht alle Wörter nebeneinander passen, was ja "normal" ist, wenn man die Breite beschränkt. Gebe ich für die Breite einen größeren Wert an, dann ist es leider nicht mehr richtig zentriert.

Da ich das Layout später mit einem Blog-System nutzen möchte und ich keinen Einfluss auf die Inhalte der Webseite haben werde, weiß ich auch nicht, wie viele "Listen Punkte" es geben wird. Werden es weniger, gibt es nicht so große Probleme, doch wenn es zu viele werden und dann eben nicht mehr nebeneinander Platz finden, habe ich das Problem, dass sie dann nach unten "rutschen".

Und genau das ist schlecht. Denn das Layout ist für einen guten Kumpel, der von seinem Auslandsjahr bloggen möchte und daher kann ich auf diese Liste keinen einfluss nehmen. (Sie entsteht durch die "festen Seiten", die er selbst im Administrationsmenue seines Blogs anlegen kann.)

Gibt es eine Möglichkeit, dass man diesen "Fehler" beheben kann? Denn es wäre schön, wenn auch der Punkt der Breite "dynamisch" ist, damit es "egal" ist, wie viele Punkte man in der Liste hat.

Das DIV in dem die Liste ist, schaut so aus:
HTML: 
#kopf {
	display:block;
	margin:0em;
	padding:0.5em;
	background-color:#990000;
	text-align:center;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:0.25em solid #666666;
}

Und die Liste schaut so aus:
HTML: 
#kopf ul {display:block; margin:0 auto; width:40%;}
#kopf li {display:block; float:left; margin:0.15em; }
#kopf li a:link { color:#CCCCCC; text-decoration:none;}
#kopf li a:visited { color:#CCCCCC; text-decoration:none;}
#kopf li a:hover { color:#FFFFFF; font-weight:bold; text-decoration:underline; }

Zu sehen ist das Layout gleich auf dieser Seite. Laut den Validierungs-Test vom W3C ist das Layout auch valid. Zudem habe ich darauf geachtet, dass ich mit Prozentwerten oder der Einheit em arbeite, damit das Layout möglichst barrierearm wird, aber das betrifft dieses Thema ja nicht.

Hoffe ihr könnt mir weiter helfen.
Liebe Grüße und vielen Dank
Tobias/Muckel
 
Hi,

die zweite Variante "a centered floated left menu (unknown width)" (ID-Bezeichner #menu2) des Beispiels Centering Float Left Menus hilft dir hier weiter, um ein floatendes Menü mit unbekannter Breite in seinem Anzeigebereich horizontal zu zentrieren.

mfg Maik
 
Hallo zusammen,

habe die Lösung gefunden, die im Grunde mehr als einfach war. Habe die Elemente als "inline" genommen und somit werden sich durch das "text-algin" des umgebenen DIVs beeinflusst. Die Liste schaut nun so aus:
HTML: 
/* Listen Gestaltung */
#kopf ul {display:block; margin:0em;}
#kopf li {display:inline; margin:0.15em; }
#kopf li a:link { color:#CCCCCC; text-decoration:none;}
#kopf li a:visited { color:#CCCCCC; text-decoration:none;}
#kopf li a:hover { color:#FFFFFF; font-weight:bold; text-decoration:underline; }

Und der DIV-Bereich ist im grunde so geblieben:
Code: 
#kopf {
	display:block;
	margin:0em;
	padding:0.5em;
	background-color:#990000;
	text-align:center;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:0.25em solid #666666;
}

Hast Du eventuell noch ein gutes Tutorial zu "vertical-algin" zur Hand? Das ist mein nächstes Problem, wo ich noch am suchen bin. Habe da ein weiteres DIV, in dem dann ein Titel, ein Zitat oder ähnliches stehen soll. Jenes habe ich auch schon mal zentriert, doch leider ist es in der Höhe noch nicht zentriert. Habe zwar diese Informationen gefunden, doch wenn ich jenes nutzte, dann "mittelt" sich meine Textzeile nur in der Zeile, in der der Text steht.

Nehme ich dann mein DIV-Block und sage ihm, dass er eine Tabellen-Zelle ist, so klappt es dann zwar, dass sich der Text in die Mitte setzt, aber leider ist diese "Zelle" dann nur noch so breit, wie der Text lang ist. Dies lies sich auch durch widht:100% nicht ändern. Der CSS-Teil schaut so aus:
HTML: 
#oben {
	display:table-cell;
	vertical-align:middle;
	height:5em;
	width:100%;
	text-align:center;
	background-color:#999999;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:0.25em solid #666666;
}

Vielleicht hast Du da ja auch einen guten Link zur Hand?

Vielen Dank
Muckel/Tobias
 
Jo, mit display:inline lässt sich das Menü auch horizontal zentrieren. Meine Linkempfehlung bezog sich halt auf deine ursprüngliche float:left-Deklaration für die <li>-Elemente.

Aber sicher hab ich auch zu der neuen Fragestellung einen passenden Link :-)

Ob er dir paßt bzw. zusagt, oder dir in ein paar Minuten nicht wieder was anderes hierzu einfällt, laß ich jetzt einfach mal außer Acht :p


Da in diesem Beispiel der Text mittels vertical-align:bottom am unteren Boxenrand ausgerichtet wird, lautet für die vertikale Zentrierung das angepasste Stylesheet:

Code: 
* {margin:0;padding:0}
.outer {
	position:relative;
	display:table;
	height: 200px;
	width: 200px;
	vertical-align: middle; 
	text-align: center;
	border: 1px solid #CCCCCC;
	background:red;
	float:left
}
.inner {
	width:100%;
	display:table-cell;
	vertical-align:middle;
	position:relative;
}
p{background:blue;border:1px solid #000}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;	position:relative;}
</style>
<![endif]-->


Mit dem Operator "if lt IE 8" im "Conditional Comment" wird der IE8 von der Interpretation des Stylesheet ausgeschlossen, da dieses nur im IE7 und seinen Vorgängerversionen benötigt wird, die für die Anwendung der vertical-align-Eigenschaft auf ein Block-element (hier <div>) die erforderlichen Tabellenformatierungen mittels der display-Eigenschaft nicht unterstützen.

Wenn es sich bei dem vertikal zu zentrierenden Text um einen "Einzeiler" handelt, kann hierfür stattdessen auch die line-height-Eigenschaft genutzt werden:

HTML: 
<div id="oben">
      Ich bin in der Box horizontal und vertikal zentriert.
</div>
CSS: 
#oben {
        line-height:5em;
        text-align:center;
        background-color:#999999;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom:0.25em solid #666666;
}


mfg Maik
 
Vielen Dank,

werde versuchen da durch zu steigen. Die Sache ist halt, dass ich nach dem "Listen-Menue" eine linke Spalte habe. Dort gibt es verschiedene "Boxen" in denen einen kleine Überschrift und dazu eine kurze Erklärung kommen soll. Zum Beispiel um die Kategorien mit ihrer Beschreibung auszugeben oder ähnliches. Die erste dieser "boxen" soll aber ein Logo bzw. eine Landkarte sein (da das Layout für jemanden ist, der aus/von seinem Auslandsjahr bloggen möchte). Neben dieser "Spalte" sind dann noch drei Bereiche übrig. Einmal der "Fuß" der Seite, die ich am Ende unter allen Inhalten ausgeben lasse, das ganze mit clear:both verwirklicht, was ja nichts besonderes ist. Dann habe ich noch ein DIV-Bereich in dem der Inhalt zu sehen sein soll. Jenes ist zwischen der linken Spalte und dem "Browser Ende" angeordnet.

Doch in dem freibleibenden Ecke zwischen dem Listen Menue oben, dem Logo auf der Linken Seite und dem Beginn des Inhaltes, soll noch ein Bereich sein. Jener ist aktuell in Form von einem DIV-Element da. In dem Element ist wiederum ein Text zu finden. Jener soll evtl. der Titel der Webseite werden oder ein Zitat oder so. Und da wäre es einfach schön(er), wenn jener nicht nur horizontal über text-align:center; sondern auch vertikal zentriert ist.

Mit den "Tabellen" Elementen habe ich auch schon mein Glück probiert, es hatte eben nur nicht so ganz geklappt. Aber mit deinem Beispiel bin ich ja optimistisch, dass es doch noch etwas wird.

Liebe Grüße und vielen Dank
Muckel/Tobias
 
Hallo zusammen,

leider muss ich doch nochmal auf dieses Thema zurück kommen. Das Menue konnte ich soweit erstellen, wie man hier sehen kann. Es ist auch in dem Div zentriert und das klappt soweit alles ohne Probleme.

Doch nun gibt es das Problem, dass es sein könnte, dass es evtl. auch Unterpunkte gibt. Also bräuchte ich eine zweite "Ebene" oder ähnliches. Bei Listamatic habe ich ein Beispiel gefunden, doch ich bekomme es leider noch nicht so ganz integriert.

Ein Unterschied besteht darin, dass ich in meinem "Grund Menue" mich einfach auf die "Listen" beziehe, die in dem DIV Kopf sind. Sprich ich habe im css den Listen Bereich mit #kopf ul angesteuert. Das wurde in dem Beispiel anders gemacht - sie haben der Liste eine ID zu geordnet. Dies möchte ich aber eigentlich nicht. Denn mein Layout soll zum Beispiel mit dem Wordpress-Blog eingesetzt werden und daher sollte es möglichst so sein, dass ich nicht an die Funktionen / Tags des "Backend-Systems" heran gehen muss.

Das umgebene DIV habe ich im Grunde so gelassen, wie es war. Lediglich die Textausrichtung habe ich auskommentiert, damit die Liste erstmal wieder Links ist und ich so schauen kann, wie die "Untere Ebene" zu ihrem Oberpunkt steht. Das DIV schaut also so aus:
Code: 
#kopf {
	display:block;
	margin:0em;
	padding:0em;
	/*
	text-align:center;
	*/
	background-color:#660000;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:0.25em solid #666666;
}

Die normale Liste schaut zum "testen" so aus:
Code: 
#kopf ul {display:block; margin:0em; padding:0em; height:2em; border:1px solid #00FFFF;}
#kopf li {
	display:inline;
	/*
	margin:0em 0.25em 0em 0.25em;
	padding:0em 0.15em 0em 0.15em;
	*/
	margin:0em;
	padding:0em;
	background-color:#990000;
	border-top:none;
	border-left:0.05em solid #CCCCCC;
	border-right:0.05em solid #CCCCCC;
	border-bottom:none;}
#kopf li a:link { color:#CCCCCC; text-decoration:none;}
#kopf li a:visited { color:#CCCCCC; text-decoration:none;}
#kopf li a:hover { color:#0099CC; font-weight:bold; text-decoration:underline; }
Der Innen- und Außenabstand soll später auch wieder gesetzt werden, aber zum testen, habe ich es wegen der Zuordnung erstmal so genommen.

In dem Beispiel konnte ich dann lesen, dass die "Listen-Art" mit einem display:none gesetzt wurde, was ich dann auch gemacht habe:
Code: 
#kopf ul ul {display:none;}
#kopf ul ul li {display:block;}

Doch das Ergebnis ist, dass dann die Unterpunkte leider auch nicht angezeigt werden. Leider finde ich meinen Fehler nicht und habe auch über die Boardsuche und auch so im Netz kein tutorial gefunden, welches sich besser anpassen lässt. Hoffe das mir hier geholfen werden kann. Denn es wäre schön, wenn am Ende das Menü wieder horizontal zentriert ist und man bei'm Überfahren (hover) eben unter dem Hauptpunkt der Unterpunkt erscheint. Den aktuellen Zustand kann man hier sehen.

Vielen Dank und eine schöne Woche
Muckel/Tobias
 
Hi,
Muckel1986 hat gesagt.:
Bei Listamatic habe ich ein Beispiel gefunden, doch ich bekomme es leider noch nicht so ganz integriert.

Ein Unterschied besteht darin, dass ich in meinem "Grund Menue" mich einfach auf die "Listen" beziehe, die in dem DIV Kopf sind. Sprich ich habe im css den Listen Bereich mit #kopf ul angesteuert. Das wurde in dem Beispiel anders gemacht - sie haben der Liste eine ID zu geordnet. Dies möchte ich aber eigentlich nicht. Denn mein Layout soll zum Beispiel mit dem Wordpress-Blog eingesetzt werden und daher sollte es möglichst so sein, dass ich nicht an die Funktionen / Tags des "Backend-Systems" heran gehen muss.
Zum Vergrößern anklicken....

Das genannte Listamatic-Menü liesse sich ebenso über den Selektor #navcontainer ul formatieren - die dort verwendete Vorgabe ist also nicht zwingend vorgeschrieben.

Muckel1986 hat gesagt.:
In dem Beispiel konnte ich dann lesen, dass die "Listen-Art" mit einem display:none gesetzt wurde, was ich dann auch gemacht habe:
Code: 
#kopf ul ul {display:none;}
#kopf ul ul li {display:block;}

Doch das Ergebnis ist, dass dann die Unterpunkte leider auch nicht angezeigt werden. Leider finde ich meinen Fehler nicht
Zum Vergrößern anklicken....
So wie's aussieht, fehlt in deinem Stylesheet der Selektor #kopf ul li:hover ul { display:block; } damit die Untermenüs beim Überfahren der Hauptmenüpunkte angezeigt werden.

In dem Listamatic-Menü lautet der entsprechende Selektor:
CSS: 
 ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

Vielleicht solltest du mal den Artikel Son of Suckerfish Dropdowns studieren, wie ein Dropdown-Menü funktionell arbeitet, und daraus deine Lehre für die Umsetzung ziehen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück