Alexander Zerr » Design http://www.xelaz.de Meine Erfahrungen in der Web Entwicklung Mon, 26 Sep 2011 18:30:56 +0000 en hourly 1 Heise Design http://www.xelaz.de/heise-design/ http://www.xelaz.de/heise-design/#comments Tue, 12 Aug 2008 16:38:29 +0000 Alexander Zerr http://www.xelaz.de/?p=37 Wau grad ging ich auf heise drauf und hab erst nicht verstanden was es abgeht. Hab die Seite nochmal Aktualisiert und es wurde mir klar, dass die heise Seite relauncht wurde mit neuer Benutzer Führung und in einem Blog ähnlichen Layout.
So wie man schon an Info Blogs gewöhnt ist, ist auch hier schön Aufgeräumt worden. Und natürlich haben sie für einen Artikel extra Patz geschaffen um schön die Werbung zu verkaufen.
Die anderen Seiten sind gleich geblieben, welche ich eigentlich nicht so viel nutze wie die Start Seie der heise.

]]> http://www.xelaz.de/heise-design/feed/ 0 Input Buttons Part I http://www.xelaz.de/input-buttons-part-i/ http://www.xelaz.de/input-buttons-part-i/#comments Thu, 28 Feb 2008 18:04:09 +0000 Alexander Zerr http://www.xelaz.de/input-buttons-part-i/ Dieses Problem ist schon vielen Hml Designern begegnet. Die Input Buttons sehen einfach in allen Browsern anders aus und im IE noch schlimmer.
Aber man kann sie doch Bändigen die Browser und die Buttons. Man muss nur die CSS anpassen und schon hat man ein 95% Ergebnis.
Die vorteile an solchen Buttons ist die Flexibilität, man kann sie internationalisieren und man hat gleiches Bild in IE, Firefox und Opera.

Also als erstens legen wir ein Input Button an:

<input class="button" type="submit" name="send" value="Mein Text" />

Dann legen wir eine CSS Klasse an:

input.button     {
 display:inline;
 margin:0 5px;
 padding:0px 5px;
 height:21px;
 font-weight:bold;
 font-size:12px;
 color:#000;
 border:1px solid #666;
 background:#ccc;
 cursor:pointer;
 overflow:visible;<;/blockquote>;
}

Der wichtigste Attribut in der CSS, ist das overflow:visible. Es entfernt in dem IE die seitlichen Abstände.

Ihr könnt jetzt eure eigene Styles mischen wie color, margin, padding , background-color und die border.

Man kann mehrere solche Buttons in ein Container tun und Zentriert anzeigen:

<div style="text-align:center">
 <input class="button" type="submit" name="preview" value="Vorschau" />
 <input class="button" type="submit" name="send" value="Absenden" />
</div>

Und hier ist das ergebnis:

Das war erstmal alles zu den Input Buttons, im nächsten Teil werde ich zeigen wie man Web2.0 Buttons mit Runden Ecken und Verlauf macht.

]]> http://www.xelaz.de/input-buttons-part-i/feed/ 0