Gernot Back: dynamische horizontale Navigationsleiste

Beitrag lesen

SELF-Forum

dynamische horizontale Navigationsleiste

Gernot Back
– Informationen zu den Bewertungsregeln

Hallo gaby,

Du könntest jeder Box 20% Breite geben.

html und body bekommen dann 100% Breite.

und margin:0 sowie padding:0

Dabei kann es aber, wenn der in Pixeln zur Verfügung stehende Platz nicht glatt durch 5 teilbar ist, im IE zu Aufrundungsfehlern kommen, sodass der letzte BUTTON in die nächste Zeile umbricht.

Mein Lösungsvorschlag ist daher der folgende, bei dem du dir aussuchen kannst, ob du server- oder clientseitig den gedrückten Submit-BUTTON ermittelst und wie du dann entsprechend reagierst:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Fünf Buttons</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
html, body, form, #MainNav {  
      width:100%;  
      margin:0;  
      padding:0;  
}  
  
#MainNav button {  
      width:20%;  
      padding:0;  
      margin:0;  
}

</style>
<!--[if IE]>
<style type="text/css">

  
#MainNav button:first-child {  
      margin-left:-2px;  
}

</style>
<![endif]-->
</head>
<body>
<form method="get" action="#" >
   <div id="MainNav">
      <button type="submit" name="bt1" value="clicked">1. Punkt</button><!--
   --><button type="submit" name="bt2" value="clicked">2. Punkt</button><!--
   --><button type="submit" name="bt3" value="clicked">3. Punkt</button><!--
   --><button type="submit" name="bt4" value="clicked">4. Punkt</button><!--
   --><button type="submit" name="bt5" value="clicked">5. Punkt</button>
   </div>
</form>
</body>
</html>
[/code]
Du kannst also auch ohne Tabelle und ohne Javascript auskommen.

Gruß Gernot

--
super me
Beitrag melden
–
Informationen zu den Bewertungsregeln