PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Per CSS Elegante Button zaubern bsp.

Sphinx
2007-06-11, 12:34:29
Ich möchte hier mal ein Beispiel zeigen wie man elegant Buttons mit hilfe von CSS erstellen kann (Firefox+IE ready).Nutze dieses meistens für den Admin Bereich aber ist sicher interressant für einige.

Man kann die Button auch mit kleinen Grafiken(Piktogramm) versehen, welche dann ein OS Gui ähnliches Feeling verschaffen...

Die Url für das Hintergrundbild des Button ist
http://sphinx.elite-marines.de/images/gui/bgbutton.gif

Kann jeder aber selbst_erstellen einen Verlauf der den Buttons einen gewissen 3d Character vermittelt...

http://sphinx.elite-marines.de/cssbottons.jpg

button.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">@import url("/css/beispiel.css");</style>
<title>TestButtons</title>
</head>
<body>

<div id="button">
<ul>
<li title="TestButton">
<a href="">TestButton1</a>
</li>
<li title="TestButton1">
<a href="">TestButton1</a>
</li>
<li title="Germany">
<a href=""><img class="noborder" src="http://sphinx.elite-marines.de/images/flaggs/de.gif" alt="" /> Germany</a>
</li>
</ul>
</div>

</body>
</html>


beispiel.css

/* Test CSS MENU BUTTON */
#button {
padding: 0px;
}

#button ul {
list-style: none;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
border: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:8pt;
color: #333;
clear: left;

}

#button li {
border-bottom : 0px solid #6f7777;
border-right : 0px solid #acb5b5;
margin-left: 0px;
margin-right: 0px;
padding: 1px;
width: 100px;
}

#button li a {
width: 95px;
display:block;
text-align:center;
margin-left: 1px;
margin-right: 1px;
padding-right:0px;
padding-left:0px;
padding-top:2px;
padding-bottom: 2px;
border-top : 1px solid #acb5b5;
border-bottom : 1px solid #6f7777;
border-left : 1px solid #acb5b5;
border-right : 1px solid #6f7777;
background: #fefefe url("/images/gui/bgbutton.gif") repeat-x;
color: #000000;
text-decoration: none;
}

#button li a:hover {
border: 1px #000000 solid;
}

.noborder {
border: 0px;
margin-bottom: -2px;
margin-left: 0px;
padding-top: 0px;
}
DanMan
2007-06-11, 14:59:56
Äh, ja.... und warum mischst du HTML und CSS, wenn du schon eine extra CSS Datei hast? Und "IE6 ready" ist das auch nicht.
Sphinx
2007-06-11, 22:30:03
Äh, ja.... und warum mischst du HTML und CSS, wenn du schon eine extra CSS Datei hast? Und "IE6 ready" ist das auch nicht.

weils einfach so ,=) in der eile copy paste aus meinem quelltext eingefügt wurde da ich an dem Projekt an dem ich arbeite eben noch arbeite *hehe

Aber IE6 funtzt hier ~ "wonder whats wrong"

Edit : Ok ist nun alles wie gehabt in die CSS gepackt Ergebniss is same. Bei gelegenheit räum ich die CSS auch nochmal auf sind viele doppelte und überflüssige Einträge aber bedingt durch copy paste von einem Projekt.

Für das Padding (Firefox+IE gibts einen Workaround) werde ich ebenfalls aktualisieren
Laz-Y
2007-06-11, 23:08:37
Ich sag mal danke für den Tip. Sieht doch edel aus.

Mal ne andere Frage: was ist das für ne Schriftart, in für die Texte IE und firefox auf den Bildern benutzt wird.
Sphinx
2007-06-11, 23:22:00
Ich sag mal danke für den Tip. Sieht doch edel aus.

Mal ne andere Frage: was ist das für ne Schriftart, in für die Texte IE und firefox auf den Bildern benutzt wird.

Silkscreen Expanded
DanMan
2007-06-12, 16:03:02
So ist schon besser, wenn auch nicht perfekt. ;)

Ehrlich gesagt hab ichs im IE6 nicht getestet, aber ich hatte einige Formatierungen gesehen, die der IE6 definitiv nicht kennt. Aber das ist ja Schnee von gestern jetzt.
darph
2007-06-12, 16:22:39
<li title="Germany">
<a href=""><img class="noborder" src="http://sphinx.elite-marines.de/images/flaggs/de.gif" alt="" /> Germany</a>
</li>Eh... X-(


<li id="germany" title="Germany">
<a href="#">Germany</a>
</li>und <style>
#germany a {
background-image: url("de.gif");
background-position: middle left; /* top left je nach Bild, Font, etc */
background-repeat: no-repeat;
padding-left: 20px; /* jenachdem */
}
</style>

Die Flagge ist Teil des Designs und trägt keinerlei Informationswert - sollte also dementsprechend nicht im Markup auftauchen. ;)
Sphinx
2007-06-13, 04:34:04
<li title="Germany">
<a href=""><img class="noborder" src="http://sphinx.elite-marines.de/images/flaggs/de.gif" alt="" /> Germany</a>
</li>Eh... X-(


<li id="germany" title="Germany">
<a href="#">Germany</a>
</li>und <style>
#germany a {
background-image: url("de.gif");
background-position: middle left; /* top left je nach Bild, Font, etc */
background-repeat: no-repeat;
padding-left: 20px; /* jenachdem */
}
</style>

Die Flagge ist Teil des Designs und trägt keinerlei Informationswert - sollte also dementsprechend nicht im Markup auftauchen. ;)

Funktioniert so nicht... mit diesem diesem Beispiel. Die Flagge war ein Beispiel aber da die CSS Datei bei >171 Flaggen wie in diesem Beispiel ganz schön sich aufblähen würde ist es in meinem Beispiel besser das Bild als content einzufügen da es in der PHP Datei in meinem Beispiel als verarbeitung integriert is _ "war auch nur ein beispiel für ein Button mit einem Piktogram"
Nase
2007-06-13, 08:39:55
Funktioniert so nicht... mit diesem diesem Beispiel. Die Flagge war ein Beispiel aber da die CSS Datei bei >171 Flaggen wie in diesem Beispiel ganz schön sich aufblähen würde ist es in meinem Beispiel besser das Bild als content einzufügen da es in der PHP Datei in meinem Beispiel als verarbeitung integriert is _ "war auch nur ein beispiel für ein Button mit einem Piktogram"
Du kannst die CSS-Angabe zur Flagge auch dynamisch erstellen lassen.
darph
2007-06-13, 11:09:54
Dann, wie Nase schon schrub ...


<li class="pictogram de">
<a href="#">Germany</a>
</li>

<style>
li.pictogram a {
background-position: middle left; /* top left je nach Bild, Font, etc */
background-repeat: no-repeat;
padding-left: 20px; /* jenachdem */
}

@import("icons.css.php");
</style>

// icons.css.php
for ($languages as $lang) {
echo('li.'.$lang.' a { background-image: url("'.$lang.'.gif"); }'.'\n');
}


So ließe sich das dann auch automatisieren. Gibt bestimmt auch schönere Methoden - aber daß es viele Datensätze sind, ist keine Ausrede. :)
medi
2007-06-13, 12:49:15
// icons.css.php
for ($languages as $lang) {
echo('li.'.$lang.' a { background-image: url("'.$lang.'.gif"); }'.'\n');
}


So ließe sich das dann auch automatisieren. Gibt bestimmt auch schönere Methoden - aber daß es viele Datensätze sind, ist keine Ausrede. :)

schlechte lösung ;)

http://www.php.lt/benchmark/phpbench.php
darph
2007-06-13, 13:08:46
Hm, interessant.

Trotzdem steht aber noch das Argument im Raum, daß "viel Code zu schreiben" keine geeignete Ausrede ist, um das Markup mit nicht-relevanten Designelementen aufzublähen (man denke an die Screenreader, die dann sagen: "Link: Image: *pausemachweilleeresattribut* Germany").
Sphinx
2007-06-13, 14:43:34
Ich will ja nichts sagen aber Das Piktogramm erscheint "nicht" in diesem Buttonsbeispiel wie ihr es darstellt sowohl firefox als auch ie... ich weiß zwar was ihr meint aber klappt so nicht...

Warum ich es in diesem Beispiel mit dem Img zeige ist ziemlich simple weils ein Beispiel ist - was - wie - es auschauen könnte wenn man einen Button realisiert und wie bei einer Office Applikation auch diverse Piktogramme (Schalter) in html realisieren könnte...

Das mit den Flaggen war ein Beispiel, "ich könnte so gut wie auch dieses Beispiel nehmen" warum ich mich für diesen weg entschieden habe...
Man könnte ja die CSS Datei bei aller liebe zur strikten Trennung auch "überbeladen" mit Funktionen die rein statistisch in einem bsp. Admin Dokument 1x-2x vorkommen...

http://sphinx.elite-marines.de/cssbuttons1.jpg


Hier ist nochmal basierend auf das <ul> <li> eine hilfreiche Seite http://www.yaml.de/artikel/css/navigation.html