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;} |