Michael Schuerig
2005-08-08 20:03:20 UTC
Ich habe in einer Webanwendung einen Bereich mit Aktionen, die der
Benutzer ausführen kann. Dieser Bereich hat eine feste Breite und die
meisten Elemente darin gehen über die ganze Breite. Die Ausnahme sind
vier "Buttons" (Links mit Rahmen) für die Navigation -- |< < > >| --
die in derselben Zeile stehen. Nun möchte ich erreichen, dass der linke
und rechte Button jeweils mit dem Rand bündig sind und die anderen
Buttons gleichmässig verbleibenden Platz angeordnet werden. Bisher
gelingt mir das leider nicht.
Beispiel (und angehängt):
http://www.schuerig.de/michael/demo/actions.html
Michael
<html>
<head>
<style type="text/css">
body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#actions {
/*
position: fixed;
top: 2em;
right: 1em;
*/
width: 8em;
padding-top: 1.5em;
}
#actions a,
#actions input[type=submit],
#actions input[type=button]
{
display: block;
margin-bottom: 1ex;
font: caption;
text-align: center;
text-decoration: none;
color: ButtonText;
background-color: ButtonFace;
padding: 2px 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
}
#actions a:hover,
#actions input:hover[type=submit],
#actions input:hover[type=submit]
{
color: ButtonText;
background-color: Highlight;
}
#actions .navigation {
padding: 0;
margin: 0 0 1ex 0;
}
#actions .navigation a {
display: -moz-inline-box;
display: inline-block;
width: 1em;
padding: 2px 3px;
margin: 0;
}
#actions p {
padding-top: 1ex;
margin: 0;
}
#actions p.submit {
border-top: 1px dotted #ccc;
}
#actions p input[type=submit],
#actions p input[type=button]
{
margin-left: 0;
padding-left: 0;
margin: 0;
width: 100%;
} </style> </head> <body> <div id="actions"> <a href="#">Liste</a> <p class="navigation"> <a href="#">|<</a> <a href="#"><</a> <a href="#">></a> <a href="#">>|</a>
</p>
<a href="#">Löschen</a>
<p class="submit">
<input name="commit" type="submit" value="Sichern" />
</p>
</div>
</body>
Benutzer ausführen kann. Dieser Bereich hat eine feste Breite und die
meisten Elemente darin gehen über die ganze Breite. Die Ausnahme sind
vier "Buttons" (Links mit Rahmen) für die Navigation -- |< < > >| --
die in derselben Zeile stehen. Nun möchte ich erreichen, dass der linke
und rechte Button jeweils mit dem Rand bündig sind und die anderen
Buttons gleichmässig verbleibenden Platz angeordnet werden. Bisher
gelingt mir das leider nicht.
Beispiel (und angehängt):
http://www.schuerig.de/michael/demo/actions.html
Michael
<html>
<head>
<style type="text/css">
body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#actions {
/*
position: fixed;
top: 2em;
right: 1em;
*/
width: 8em;
padding-top: 1.5em;
}
#actions a,
#actions input[type=submit],
#actions input[type=button]
{
display: block;
margin-bottom: 1ex;
font: caption;
text-align: center;
text-decoration: none;
color: ButtonText;
background-color: ButtonFace;
padding: 2px 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
}
#actions a:hover,
#actions input:hover[type=submit],
#actions input:hover[type=submit]
{
color: ButtonText;
background-color: Highlight;
}
#actions .navigation {
padding: 0;
margin: 0 0 1ex 0;
}
#actions .navigation a {
display: -moz-inline-box;
display: inline-block;
width: 1em;
padding: 2px 3px;
margin: 0;
}
#actions p {
padding-top: 1ex;
margin: 0;
}
#actions p.submit {
border-top: 1px dotted #ccc;
}
#actions p input[type=submit],
#actions p input[type=button]
{
margin-left: 0;
padding-left: 0;
margin: 0;
width: 100%;
} </style> </head> <body> <div id="actions"> <a href="#">Liste</a> <p class="navigation"> <a href="#">|<</a> <a href="#"><</a> <a href="#">></a> <a href="#">>|</a>
</p>
<a href="#">Löschen</a>
<p class="submit">
<input name="commit" type="submit" value="Sichern" />
</p>
</div>
</body>
--
Michael Schuerig Most people would rather die than think.
mailto:***@schuerig.de In fact, they do.
http://www.schuerig.de/michael/ --Bertrand Russell
Michael Schuerig Most people would rather die than think.
mailto:***@schuerig.de In fact, they do.
http://www.schuerig.de/michael/ --Bertrand Russell