Suche im Forum:
Suchen


Autor Nachricht
Beitrag08.10.2011 um 09:31 (UTC)    
Titel: [Vorlage] Iceblue mit horizontaler Navigation (CSS Design)

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:
<div id="design">


Text unter dem Design:
Code:
</div>


CSS-Code ohne Style Tags:

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


Das Design darf frei verwendet und bearbeitet (eher ungeeignet) werden. Das Anbieten des Designs auf seiner eigenen Seite ist nicht gestattet.


Liebe Grüße, David
Beitrag08.10.2011 um 13:02 (UTC)    
Titel:

gut gemacht Very Happy , aber eine anleitung zum einfügen der seiten wäre für manchen hilftreich, oder?

früher hiess es zwar, dass ein css design nicht für anfänger geeignet ist, aber das gilt wohl schon lange nicht mehr. deshalb ist das forum voll von wiederholenden fragen bezüglich css designs Wink

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Beitrag08.10.2011 um 13:10 (UTC)    
Titel:

Ich verstehe zwar nicht genau was du meinst, aber es wurde die Standartnavigation verwendet. Also taucht jede Seite, die jemand erstellt, automatisch in der Navigation auf.

Gruß
Beitrag08.10.2011 um 13:21 (UTC)    
Titel:

ach so, mich hatte das in deinem quellcode verwirrt.

Code:
<a href="/Startseite.htm" class="menu"><span>Startseite</span></a></li>
               <li class="nav_element" id="nav_Statistiken">
<a href="/Statistiken.htm" class="menu"><span>Statistiken</span></a></li>
               <li class="nav_element" id="nav_Home">
<a href="/%3Ca-href%3D-g-%23-g-%3EHome%3C-s-a%3E.htm" class="menu"><span><a href="#">Home</a></span></a></li>
               <li class="nav_element" id="nav_Portfolio">
<a href="/%3Ca-href%3D-g-%23-g-%3EPortfolio%3C-s-a%3E.htm" class="menu"><span><a href="#">Portfolio</a></span></a></li>
               <li class="nav_element" id="nav_Blog">
<a href="/%3Ca-href%3D-g-%23-g-%3EBlog%3C-s-a%3E.htm" class="menu"><span><a href="#">Blog</a></span></a></li>
               <li class="nav_element" id="nav_About">
<a href="/%3Ca-href%3D-g-%23-g-%3EAbout%3C-s-a%3E.htm" class="menu"><span><a href="#">About</a></span></a></li>


hinweis:

so etwas ähnliches gab es auch als direktes iceblue, allerdings weist der code dort, mit rechte boxen, fehler auf: http://www.homepage-baukasten.de/forum/viewtopic.php?t=120123

vielleicht könnte man mal beide treads zusammenführen und im bereich css als "iceblue mit einfacher navigation oben" oben anpinnen.

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell



Zuletzt bearbeitet von 6p-iceblue am 08.10.2011, 14:31, insgesamt 4-mal bearbeitet
Beitrag08.10.2011 um 17:53 (UTC)    
Titel:

hehe... Ich habe in das Feld des Seitentitels einfach Links reingeschrieben, damit der Besucher nicht von der Seite verschwindet und auf einer leeren Seite landet, wo kein Design da ist. Ich benutze die Seite für mehrere Designs und so braucht nicht jedes Design eine eigene Homepage.

Deine Idee klingt aber gut!

Liebe Grüße, David
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de