Fensterbreite Navileiste mit variablen Elementen mit CSS formatieren

Diskutiere mit über: Fensterbreite Navileiste mit variablen Elementen mit CSS formatieren im Web Page Design Forum

  1. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert seit:
    25.07.2005
    Hallo!

    Folgendes Problem:
    [​IMG]
    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.
     
  2. hossa

    hossa MacUser Mitglied

    Beiträge:
    309
    Zustimmungen:
    0
    Registriert seit:
    03.04.2005
  3. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert seit:
    25.07.2005
    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.
     
  4. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    probiere mal erst den <div class="rechts">Rechts</div> und dann erst den <div class="filler">&nbsp;</div>!
     
  5. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert seit:
    25.07.2005
    gleiches Ergebnis
     
  6. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    Registriert seit:
    25.11.2004
    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:

    [​IMG]

    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.
     
  7. pichfl

    pichfl MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    2
    Registriert seit:
    03.08.2005
    warum so viele divs?
    du kannst problemlos auch den <ul> eine ID oder CLASS geben.
    :D
     
  8. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    Registriert seit:
    25.11.2004
    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.
     
  9. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert seit:
    25.07.2005
    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.
     
  10. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    Registriert seit:
    25.11.2004
    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.
     

Diese Seite empfehlen

Benutzerdefinierte Suche