Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

von **rainer** » 12.02.2012, 13:30

Hi Leute

Möchte eine buttonbar erstellen und beise mir daran die Zähne aus..
Habe einen Rahmen, der optisch ein Border ist.
Darin enthalten eine UL/LI.

Nun möchte ich das die beiden äußeren buttons eine fixe breite haben.
Die Buttons die dazwischen liegen, sollen dann den restlichen zwischenraum automatisch ausfüllen und natürlich skalieren sollte der benutzer seine Browserfenstergrösse verändern.

Ich bekomme das einfach nicht hin.. widht: auto, padding: auto; gelingt mir einfach nicht.
Steh da grad echt an.
Anbei eine Skizze wie ich mir das vorstelle. Bild

Bin für jeden Denkanstoss dankbar

lg rainer

von **djheke** » 13.02.2012, 09:29

So vielleicht. Erst ab IE8

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>display:table</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> * { margin:0; padding:0; list-style:none; } .container { margin:20px; } ul { display:table; width:100%; } li { display:table-cell; border:1px solid #000; margin:5px; padding:5px; } h2 { margin:5px; padding:5px; border:1px solid #000; } .fix { min-width:100px; width:100px; } </style> </head> <body> <div class="container"> <ul> <li class="fix"><h2>FIX</h2></li> <li><h2>Box1</h2></li> <li><h2>Box2</h2></li> <li><h2>Box3</h2></li> <li class="fix"><h2>Fix</h2></li> </ul> </div> </body> </html>

von **rainer** » 13.02.2012, 10:41

interessanter ansatz.
tatsächlich war ich schon so verzweifelt, dass ich es mit einer table umsetzen wollte, da gehts ja ganz easy.
werd mal ein wenig googeln ob es bei dem ansatz auch eine lösung für ältere IE gibt.

danke schon mal für den denkansatz!

lg rainer

von **djheke** » 14.02.2012, 13:24

Ach nee, uff dit einfachste kommt man immer zum Schluß.

Code: Alles auswählen: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Toolbar mit fixen außenspalten</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; border:none; } .toolbar { position:relative; margin:20px; min-width:360px; } .toolbar ul { margin:0 100px; } .toolbar li { float:left; width:33.3%; } .toolbar .bl , .toolbar .br { position:absolute; top:0; width:100px; } .toolbar .bl { left:0; } .toolbar .br { right:0; } .toolbar li p { margin:2px; padding:15px 5px; border:1px solid #aaa; text-align:center; background:#eee; } </style> </head> <body> <div class="toolbar"> <ul> <li class="bl"><p>fix</p></li> <li><p>box2</p></li> <li><p>box3</p></li> <li><p>box4</p></li> <li class="br"><p>Fix</p></li> </ul> </div> </body> </html>

von **rainer** » 14.02.2012, 15:51

PERFEKT

ich präsentiere, wenn fertig, das endprodukt

danke schön!!

lg rainer

von **djheke** » 14.02.2012, 21:58

Als Beweis, dass alles funzt.
Buttonbar mit fixen Außenspalten

Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Re: Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Re: Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Re: Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Re: Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Re: Buttonbar erstellen, Linker und Rechter Button fix, dazwisch

Ähnliche Beiträge zu "Buttonbar erstellen, Linker und Rechter Button fix, dazwisch"

Wer ist online?