Hallo,
ich habe mal das Standart Design Iceblue als CSS Design gecodet und die Navigation horizontal (oben) gesetzt.
Das Design:
» Bild (Link)
» Livedemo (Link)
Infos zum Design:
» Werbung mittig platziert
» Design mittig platziert
» auch links und nicht nur rechts ein Farbverlauf
» verbreitertes Textfeld
» verbreiterte Box
» durch den Farbverlauf links wurde die gesamte Breite auf 1079px verbreitert
» Unterseiten werden komplett ausgeblendet
» alle Seiten, die nicht mehr in die Navigation passen, werden ausgeblendet
Der Code:
Text über dem Design:
Code: /* WERBUNG ZENTRIEREN */
table[height="102"] {
margin: auto;}
/* HINTERGRUND */
body {
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_background.png);
padding: 0px;
margin: 0px;}
/* DESIGN (ERSTELLTES DIV / DIENT ZUR POSITIONIERUNG) */
#design{
width: 1079px;
margin: 0px auto;}
/* CONTAINER */
#container{
width: 923px;
min-height: 1000px;
padding: 0px 78px 100px 78px;
margin: 0px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_container.png);
background-repeat: repeat-y;}
/* CONTENT CONTAINER */
#content_container{
width: 923px;
height: auto;
float: left;}
/* HEADER */
#header_container{
width: 921px;
height: 97px;
margin: 0px 1px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_header.png);}
/* TITEL VOM HEADER */
h1#header{
width: 901px;
height: 26px;
padding: 10px 10px 68px 10px;
display: block;
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 26px;
font-weight: normal;
text-align: right;
overflow: hidden;}
/* NAVIGATION CONTAINER */
#nav_container{
width: 911px;
height: 42px;
float: left;
margin: 0px 1px;
padding: 1px 5px 0px 5px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_navigation.png);
overflow: hidden;}
/* TITEL NAVIGATION */
#nav_heading{
display: none;}
/* AUFZÄHLUNGSLISTE */
ul#nav{
padding: 0px;
margin: 0px;}
/* NAVIGATIONELEMENTE */
li.nav_element{
height: 22px;
margin: 4px 14px 16px 4px;
padding: 0px 5px;
float: left;
display:block;}
/* NAVIGATIONELEMENTE SCHIRFT */
li.nav_element a{
height: 14px;
display: block;
padding: 2px 0px 6px 0px;
color: #336699;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* NAVIGATIONELEMENTE HOVER */
li.nav_element a:hover{
color: #819FF7;
text-decoration: none;}
/* BESUCHTE SEITE SCHRIFT */
li.checked_menu a{
font-weight: bold;
color: #000000;}
/* BESUCHTE SEITE SCHRIFT HOVER */
li.checked_menu a:hover{
color: #666666;}
/* SCHRIFT DER NAVIAGTION */
a.menu{
float: left;
padding: 0px;
display: block;
color: #fff;
font-style: normal;
text-decoration: none;}
/* SCHRIFT DER NAVIGATION HOVER */
a.menu:hover{
text-decoration: underline;}
/* UNTERSEITEN DER NAVIGATION */
#nav li.subpage {
display: none;}
/* TEXTFELD */
#content{
width: 654px;
height: auto;
padding: 0px 17px 70px 17px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_content.png);
background-position: bottom;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
line-height: 20px;}
/* TITEL TEXTFELD */
h2#title{
width: 648px;
height: 14px;
display: block;
padding: 14px 20px 10px 20px;
margin: 0px -17px 10px -17px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_contenttop.png);
overflow: hidden;}
#title span{
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* SIDEBAR */
#sidebar_container{
width: 213px;
padding: 0px 10px 40px 10px;
margin: 0px 1px;
float: right;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_sidebar.png);
background-position: bottom;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
line-height: 20px;}
/* TITEL SIDEBAR */
#sidebar_heading{
width: 213px;
height: 14px;
display: block;
padding: 2px 10px 8px 10px;
margin: 0px -10px 10px -10px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue2_sidebartop.png);
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
overflow: hidden;}
/* FORMATIERUNG DER LINKS */
a:link,
a:visited{
color: #336699;
text-decoration: none;}
a:hover{
color: #819FF7;}
/* UNNOETIGE KLASSEN */
#counter{display: none;}
#pre_content {display:none;}
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#extraDiv2 {display:none;}
#extraDiv3 {display:none;}
#extraDiv4 {display:none;}
#extraDiv5 {display:none;}
#extraDiv6 {display:none;}
, aber eine anleitung zum einfügen der seiten wäre für manchen hilftreich, oder?
