Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Navigations-Menü mit Button-Effekt

Posted by sura1 - 13. November 2008

13nov

Bookmark and Share

Navigations-Menü mit Button-Effekt

button_nav

demo_ausfuhren

Wenn Sie die Höhe der Buttons verändern wollen, müssen Sie wie folgt vorgehen:

Ändern Sie einfach die beiden CSS-Anweisungen line-height und height – machen Sie sie größer, werden die Buttons ebenso größer; wenn die beiden CSS-Befehle kleiner gemacht werden, verkleinern sich im gleichen Augenblick auch die Buttons.

Auszug aus dem CSS-Code:

a.button span {
	          background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
	          float:left;
                 line-height:24px;
                 height:24px;
                 padding:0 10px;
	          border-right:1px solid #777;
	          border-bottom:1px solid #777;
	     }

Durch den CSS-Befehl width:auto; sind die einzelnen Buttons in der Breite flexibel und wachsen mit der Länge des Textes mit!

Auszug aus dem CSS-Code:

a.button {
  float: left;
  font-size: 110%;
  font-weight: bold;
  margin-right: 2px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  color: #333;
  width: auto;
 }

Download Beispieldateien (1,9KB):

zipblau1_klein

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
Free CSS Menus: 14 gratis CSS Menüs
Free CSS Menüs – www13stylesscss

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: