Navigation


Hier ein paar Tips für die linke Navigation.

Im Code wäre das dieser Bereich:

/*Navibuttons, normale Breite 202, Höhe in dem Fall 33 Pixel. Der Border unten und rechts, gibt einen kleinen grauen Schatten, wenn auf 3 gestellt*/
td.edit_button_bg{background-image:url(https://img.webme.com/pic/g/gringo/redicebluebutt1.png);
background-color:#969696;height:33px;border-right: 3px solid #333333;border-bottom: 3px solid #333333;}

/*Navibuttons, Hovereffekt, normale Breite 202, Höhe in dem Fall 33 Pixel. Der Border unten und rechts, gibt einen kleinen grauen Schatten, wenn auf 3 gestellt*/
td.edit_button_bg:hover{background-image:url(https://img.webme.com/pic/g/gringo/redicebluebutt2.png);
background-color:#777777;height:33px;border-right: 3px solid #333333;border-bottom: 3px solid #333333;}

Wie man sieht, ist die normale Breite 203. Allerdings beginnen in dem Design die Buttons nicht genau links, sondern 4 Pixel von dort entfernt.

Wie man im Code erkennt, hab ich rechts und unten deshalb einen Rahmen zugefügt. Dieser Rahmen erhält den gleichen Farbton wie der Hintergrund des Navigationsbereich. In dem Fall dann #333333.

Der Sinn ist hierbei, dass man optisch, links und rechts, den gleichen Abstand hat. Sollte man rechts keinen Rahmen angeben, klebt der Button dann direkt an dem Textfeld.

Dieses würde bedeuten, dass Buttons eine Breite von 199 Pixel haben sollten. Kann ja sein, das Ihr euch selbst welche basteln möchtet oder Ihr animierte Buttons einfügen wollt.

Dieser Bereich ist im Code für die Schriftfarbe und -größe in der Navigation zuständig:

/*Schriftfarbe der Navigation. Navigation voll anklickbar. Buttonhöhe beachten (30)*/
a.rednav{font-family: arial;font-size: 13px;color: #000000;text-decoration: none;display: block;line-height: 30px;}
a.rednav:hover{font-family: arial;font-size: 13px;color: #000000;text-decoration: none;display: block;line-height: 30px;}  

Box 1
 

Buttonbreite 185 Pixel

Buttonbreite 200 Pixel

Buttonbreite 206 Pixel


Das sind Teststreifen, um zu sehen wie die ein oder andere Breite eines Buttons oder Bild wirken würde.

Facebook Like-Button
 
Werbung
 
Box 2
 

Hier kann man Texte reinschreiben oder ein sinnvolles Gimmik einfügen.

Wie wäre es Beispielsweise mit einem Video von Youtube? In diesem Fall, müsst Ihr die Maße des Einbettcodes in 190 x 140 ändern.



 
Hier kann man Texte reinschreiben oder ein sinnvolles Gimmik einfügen. Bilder natürlich auch.
 
Heute waren schon 1 Besucher (7 Hits) hier!
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=