tutorials - CSS-Code Iceblue-einfach

Einfacher Iceblue-Code: Erklärung!

CSS Codes für das Design ICEBLUE. So ist ein CSS Code aufgebaut:

	<style type="text/css"> <!--
01	td.nav{background-image: url(http://BILD-LINK.jpg)}
02	td.nav:hover{background-image: url(http://BILD-LINK.jpg);}
	td.edit_below_nav{visibility: hidden;}
	td.edit_content{background-image: none;width: 0px;}
	td.edit_rechts_cbg{background-image: none;}
	td.nav a{color: #1172EA;font-size: 12px;font-weight: bold;text-align: center;}
03	body {background-image:url(http://BILD-LINK.jpg);}
	td.edit_navi_headbg{background-image: none;}
	td.edit_rechts_sbg{visibility: hidden; width: 0px ;}
	td.edit_rechts_bottom{background-image: none;}
	td.shouty{color:#FFFFFF;background-image: url(URL);background-color: #993300;border: 3px solid #c6c5c5;} td.shouty2{color:#FFFFFF;background-image: url(URL);background-color: #993300;border: 3px solid #c6c5c5;} td.shouty3{color:#FFFFFF;background-image: url(URL);background-color: #993300;border: 3px solid #c6c5c5;} td.shouty4{color:#FFFFFF;background-image: url(URL);background-color: #993300;border: 3px solid #c6c5c5;} td.shouty5{color:#FFFFFF;background-image: url(URL);background-color: #993300;border: 3px solid #c6c5c5;}
	td.edit_rb_footer{visibility: hidden; width: 0px ;}
04	td.edit_content_top{background-image: url(http://BILD-LINK.jpg);}
05	td.edit_content_top:hover{background-image: url(http://BILD-LINK.jpg);}
06	td.edit_content_bottom2{background-image: url(http://BILD-LINK.jpg);}
	td.edit_content_bottom{visibility: hidden;width: 0px;}
07	td.nav_heading{background-image: url(http://BILD-LINK.jpg);}
08	td.sidebar_heading{background-image:url(http://BILD-LINK.jpg);}
	td.nav_heading a{color: #1172EA;font-size: 12px;font-weight: bold;text-align: center;}
	td.edit_content_bottom2 a{color: #1172EA;font-size: 12px;font-weight: bold;text-align: center;}
	td.edit_content_bottom2 a{color: #1172EA;font-size: 12px;font-weight: bold;text-align: center;}
	td.sidebar_heading a{color: #1172EA;font-size: 12px;font-weight: bold;text-align: center;}
	td.headline2{color: #1172EA;font-size: 12px;font-weight: bold;}
	--> </style>

BILD-LINK's einsetzen - fertig!

Hier die Erklärung zu den Codes:

01	[ Normaler Button ] -> Button der Navigation
02	[ HoverButton ] -> Button der sichtbar wird, wenn man mit der Maus darüber fährt
03	[ Hintergrund ] -> Der ganze Hintergrund der Homepage
04	[ Balken über dem Content ] -> Balken über dem Content
05	[ Balken über dem Content mit Hover-Effekt ] -> Man kann auch diesen Balken mit Hover-Effekt ausstatten
06	[Balken unter dem Content ] -> Balken unter dem Content
07	[ Balken über der Navigation ] -> Balken über der Navigation
08	[ Balken über den Boxen ] -> Balken über den Boxen