Fensterbreite Navileiste mit variablen Elementen mit CSS formatieren

Manjo

Manjo

Aktives Mitglied
Thread Starter
Dabei seit
25.07.2005
Beiträge
906
Reaktionspunkte
24
Hallo!

Folgendes Problem:
menu.gif

Die Bereiche 1-3 sind alle variabler Breite, jenachdem wie breit die Texte "Buttonx" sind. Der Bereich 2 soll den Freiraum zwischen 1 und 3 auffüllen. Das tut er aber nicht. Die hier blau gezeichnete Linie fehlt, bzw. ist nur ein Leerzeichen breit.
Mit dem Trick, Bereich 2 100% Breite zuzuweisen, kannn man nicht alle Browser überlisten. Wie geht es?

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
.menu {
	font-weight: bold;
	width:100%;
}
.links {
	border-bottom: 1px solid #000000;
	padding: 0.2em;
	float: left;
}
.filler {
	float:left;
	border-bottom: 1px solid #000000;
	padding: 0.2em;
}
.rechts {
	border-bottom: 1px solid #000000;
	padding: 0.2em;
	float: right;
}
	
-->
</style>
</head>
<body>
<div class="menu">
  <div class="links">Button1</div>
  <div class="links">Button2</div>
  <div class="links">Button3</div>
  <div class="links">Button4</div>
  <div class="links">Button5</div>
  <div class="filler">&nbsp;</div>
  <div class="rechts">Rechts</div>
</div>
</body>
</html>

Viele Grüße,

Manjo.
 
Danke für die Links. Wirklich nicht schlecht. Doch werden überall die Spaltenbreiten absolut oder relativ festgelegt. Was ich möchte, ist, dass die Spaltenbreite von Bereich 1 und 3 durch den Inhalt festgelegt werden, also durch die Länge der Texte, das sich diese von Seite zu Seite ändern können, und der mittlere Bereich 2 sich entsprechend in seiner Breite anpasst, damit er den Zwischenraum stets ganz ausfüllt.
 
probiere mal erst den <div class="rechts">Rechts</div> und dann erst den <div class="filler">&nbsp;</div>!
 
gleiches Ergebnis
 
Ich würde Dir einen etwas anderen Weg gern vorschlagen: Falls Du möchtest, dass zwischen den linken und den rechten Buttons sich ein gleichförmiger Bereich abbildet, der vielleicht soetwas wie ein Hintergrundbild zu einer Art Leiste werden lässt, hätte ich dieses Lösung für Dich:

navigation.png


Das ganze entsteht dann so:
Code: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Test</title>
		<style type="text/css" media="screen"><!--
body {
	font-size: 100.1%;
	font-family: "Lucida Grande", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	background-color: white;
	margin: 0; }
a,  a:link {
	color: white;
	text-decoration: underline; }
a:hover {
	color: #666;
	background-color: #c8ff59;
	text-decoration: none; }
#header {
	background-color: #bce27f;
	border: solid 1px black; }
#menu {
	font-size: 12px;
	line-height: 15px; }
#tools {
	font-size: 12px;
	line-height: 15px;
	float: right; }
#menu ul,  #tools ul {
	margin: 0;
	padding: 0;
	list-style-type: none; }
#menu li,  #tools li {
	background-color: #82a63a;
	float: left;
	padding: 0;
	border: solid 1px white; }
#menu li a:link,  #tools li a:link {
	padding: 5px;
	display: block; }
div.clearer {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 1px;
	font-size: 1px  }
--></style>
	</head>

	<body>
		<div id="header">
			<div id="tools">
				<ul>
					<li><a href="#">Warenkorb</a></li>
					<li><a href="#">Kontakt</a></li>
					<li><a href="#">Hilfe</a></li>
				</ul>
			</div>
			<div id="menu">
				<ul>
					<li><a href="#">Button Eins</a></li>
					<li><a href="#">Button Zwo</a></li>
					<li><a href="#">Button Drei</a></li>
					<li><a href="#">Button Vier</a></li>
					<li><a href="#">Button Viereinhalb</a></li>
				</ul>
			</div>
			<div class="clearer">
				&nbsp;</div>
		</div>
	</body>

</html>

Der Trick ist hier, zunächst einen Bereich (DIV) als Transporter für eine Hintergrundfarbe oder ein Bild zu spannen, der die gesamte Höhe und Breite der Navigation plus der Werkzeuge auf der rechten Seite (Tools) einnimmt. Damit dieser Bereich nicht kollabiert, dadurch dass dort drin mit Umfluss (float) gearbeitet wird, gibt's am Ende noch meinen Standard-Aufräumer (div.clearer).

Desweiteren, damit man ein einfaches Leben hat, habe ich hier nicht den Bereiche der Werkzeuge zur Rechten (Tools) vor der eigentlichen Primärnavigation (menu) genannt. Gibt man damit noch den Befehl, rechts an anderen Bereich vorbei zu fließen, hängt dies daher rechts auf gleicher Höhe mit der linken (Primär-)Navigation.

Für den Bereich zwischen den beiden Navigationslisten sorgt dann der »durchscheinende« Hintergrund, der auch durchaus ein Hintergrundbild in 1 Pixel Breite und ca. 30 Pixeln Höhe haben kann, um ein paar schicke optische Effekte zu erzielen.

Abschließend: Ich habe die Navigationspunkte mit Hilfe von Listen-Elementen (UL, »Unsorted List«) erstellt, da dies zum einen ziemlich praktisch bei der gemeinschaftlichen Formatierung ist, zum anderen bei Programmierung hilfreich ist, sich aber vor allem auch für Screenreader besser eignet, da diese die Aufzählung Deiner Menüpunkte dann auch tatsächlich als Aufzählung erkennen.

Na ja: und es funktioniert auch. ;)

Edit: Download des HTML-Geschwurbels.
 
warum so viele divs?
du kannst problemlos auch den <ul> eine ID oder CLASS geben.
:D
 
pichfl schrieb:
warum so viele divs?
du kannst problemlos auch den <ul> eine ID oder CLASS geben.
:D
Zum Vergrößern anklicken....

Jeder mag solche Dinge ganz nach seinen Wünschen optimieren und damit hilfreiche Erfahrungen sammeln, es ist jedoch in diesem Bereich wichtiger, lesbaren Code zu zeigen, als es durch ungleichförmige Nomenklatur für Anfänger zu schwierig darzustellen.
 
Auf die Idee mit dem hinterlegten Hintergrund war ich auch schon gekommen. Hat jedoch auf Anhieb nicht gefunzt. Danke für Deinen Vorschlag, werde ihn in Ruhe zu Gemüte führen, Hilarious.

Klar bin ich auch schon auf die Idee mit ul gekommen. Nur ist das Menü, so wie ich es oben dargestellt habe, stark vereinfacht. Da gibt es Pulldowns bei hover, die auch mit IE funzen. Und das läuft noch nicht ganz mit li's!

Logisch sind ul's besser als div's in dem Fall, weil sie auch die Menüstruktur richtig abbilden. Das geht bei div's natürlich verloren.
 
Manjo schrieb:
Auf die Idee mit dem hinterlegten Hintergrund war ich auch schon gekommen. Hat jedoch auf Anhieb nicht gefunzt. Danke für Deinen Vorschlag, werde ihn in Ruhe zu Gemüte führen, Hilarious.

Klar bin ich auch schon auf die Idee mit ul gekommen. Nur ist das Menü, so wie ich es oben dargestellt habe, stark vereinfacht. Da gibt es Pulldowns bei hover, die auch mit IE funzen. Und das läuft noch nicht ganz mit li's!

Logisch sind ul's besser als div's in dem Fall, weil sie auch die Menüstruktur richtig abbilden. Das geht bei div's natürlich verloren.
Zum Vergrößern anklicken....

Ja, sollte auch kein erhobener Zeigefinger sein ;) Es hängt eben immer vom jeweiligen Projekt ab. Feature-Wünsche des Kunden und Termindruck sind ja auch noch da... :D
Nur, um das jetzt mal klarzustellen.
 
Generell ist es kein schöner Ansatz mit variablen Abständen zu arbeiten.
Daher auch die Probleme bei diversen Browser.

Hier die Lösung wie du es Cross-Browser-Robust machst:

a) Gib dem Bereich 2 eine feste Breite. Jetzt mal nicht wundern!

b) Nachdem die Seite geladen ist, frage per JS ab, wie groß das Browserfenster ist.

c) Wie groß der zur Verfügung stehende Platz für Bereich 2 ist läßt sich nun errechnen.

d) Korrigiere nun über DOM den festen Wert von Bereich 2.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten