CSS - Design auslagern mit Datei

FabianG · 22. Februar 2008

ich wersteh das nicht wirklich wie die datei aufgebaut sein soll, wenn man das Design auslagern will mit CSS.
Kann jemand mal einen fertigen Quelltex einer solchen Datei Posten?

Foster · 22. Februar 2008

Wenns weiter nichts ist

Code

body    {
   	font-family: "Century Gothic", Verdana, Arial;
	font-size: 16px;
	background: url(bilder/bg/metal3.jpg);
	background-repeat: repeat;
	background-attachment: scroll;







	scrollbar-track-color: #EAEAEA;
	scrollbar-arrow-color: #000;
	scrollbar-darkshadow-color: #000;
	scrollbar-face-color: #DDD;
	scrollbar-highlight-color: #DDD;
	scrollbar-shadow-color: #EEE;
	scrollbar-3dlight-color: #FFF;




	overflow-x: hidden;
    	}

















/* 







*/
















/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ LAYOUT - ANFANG ~~~~~~~~~~~~~~~~~~~~~~~~~~ */










   

.layout {
    filter: alpha(opacity=75);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    -moz-opacity: 0.75; opacity:0.75;
    }










        
#z1{
    position: absolute;
    top: 50px;
    left: 50px;
    } 
#sl {
    position: absolute;
    top: 100px;
    left:52px;
    } 
#sr {
    position: absolute;
    top: 100px;
    left: 902px;
    }   
#z2 {
    position: absolute;
    top: 1200px;
    left: 50px;
    }



















/* ~~~~~~~~ SCHATTEN - ANFANG ~~~~~~~~ 
   .................................
   .................................
   .................................
   .................................
   .................................
   .................................
   .................................
   .................................*/ 







.layout2 {
    filter: alpha(opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    -moz-opacity: 0.20; opacity:0.2;
    }













    
#sz1{
    position: absolute;
    top: 37px;
    left: 44px;
    }  
#ssl {
    position: absolute;
    top: 99px;
    left: 47px;
    }  
#ssr {
    position: absolute;
    top: 99px;
    left: 909px;
    }
#sz2 {
    position: absolute;
    top: 1211px;
    left: 46px;
    }  






















    
.schatten{
    position: absolute;
    top: 99px;
    left: 97px;
    width: 812px;
    height: 1112px;
    background: #9F9F9F ;
    filter: alpha(opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    -moz-opacity: 0.20; opacity:0.2;
    }      



















/*................................
 .................................
 .................................
 .................................
 .................................
 .................................
 .................................
 ~~~~~~~~ SCHATTEN - ENDE ~~~~~~~~ */     













    
.bg{
    position: absolute;
    top: 100px;
    left: 102px;
    width: 800px;
    height: 1100px;
    background: #FBFBFF;




    filter: alpha(opacity=75);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    -moz-opacity: 0.75; opacity:0.75;
    }













.main	{
    	position: absolute;
    	top: 100px;
    	left: 102px;
    	width: 800px;
    	height: 1100px;
    	}







/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ LAYOUT - ENDE ~~~~~~~~~~~~~~~~~~~~~~~~~~~




.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................




 ~~~~~~~~~~~~~~~~~~~~~~~~~~ INHALT - ANFANG ~~~~~~~~~~~~~~~~~~~~~~~~~~*/






















a:link, a:visited, a:active{
	color: #7C0 ;
	text-decoration: underline;
	}




a:active, a:hover{
	color:  #7C0;
	text-decoration: none;
	}




#ausblenden
	{
	position: absolute;
	top: 90px;
	right: 90px
	}




/*
.bgprofile{
	position: absolute;
	top: 61px; 
	left: -36px; 
	width: 800px; 
	height: 800px; 
	background: url(bilder/bg/profile.gif) no-repeat;
	}
*/







.cl 	{
    	font-size: 30px;
    	font-family: "Bookman Old Style";
    	}	










.datum	{
	position: absolute;
	top: 130px;
	left: 0px;
   	width: 800px;
   	height: 30px;
   	border-bottom: 2px solid #29E;
   	padding: 9px 10px 0px 5px;
   	text-align: right;
	}










.focused{
	background-color: #AACAEA;; 
	display: block;  
	height: 23px; 
	width: 190px;
	margin: -7px;
	padding-top: 7px;
	vertical-align:bottom;
	cursor: pointer;
	border-bottom: 1px solid #000;
	}










.gruppe	{

	}
















h1	{
	font-size: 30px;
	font-family: "Century Gothic";
	color: #333;
	text-decoration: none;
	font-weight: normal;
	}







h2	{
	color: #9D0;
	font-size: 17px;
	font-weight: normal;
	}
















.infobild{
	position: absolute;
	top: 20px;
	right: 100px;
	}





.inhalt	{
	width: 810px;
	height: 100%;
	font-family: "Century Gothic";
	color: #222;
	border: 0px solid #000;




	position: absolute;
	top: 250px;
	left: 20px;
	}




























.quote	{
	color: #9D0;
	font-weight: bold;
	}

























.seite	{
	width: 200px;
	font-weight: bold;




	position: absolute;
	bottom: 0px;
	left: 390px;
	}














































.text	{
    	font-size: 17px;
	text-align: justify;
	width: 360px;
    	vertical-align:top
	}










.titel	{
	width: 800px;
	height: 130px;
    	font-family: "Curier";
	font-size: 58px;




	position: absolute;
	top: 20px;
	left: -60px;
	}










.titelbild{
	width: 105px;
	height: 105px;

	position: absolute;
	top: 0px;
	right: 25px;
	}



















/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ INHALT - ENDE ~~~~~~~~~~~~~~~~~~~~~~~~~~~




.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................
.....................................................................




 ~~~~~~~~~~~~~~~~~~~~~~~~~~ DROPDOWN MENU - ANFANG ~~~~~~~~~~~~~~~~~~~~~~~~~~ */










.menu ul{
    	list-style-type: none;
	padding: 0px;
    	margin: 0px;




    	position: absolute;
    	top: -70px;
    	left: 0px;
    	}







.menu li{
    	float: left;
    	position: relative;
    	z-index: 100;
    	}







.menu table{
    	position: absolute;
    	border-collapse: collapse;
    	z-index: 80;
    	left: -1px;
    	top: 25px;
    	}
















/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */






















.menu a, .menu a:visited, menu:visited{
    	display: block;
    	font-size: 12px;
    	width: 190px;
    	padding: 7px 0px 7px 0px;
    	color: #000001;
    	background: #CDE;
    	text-decoration: none;
    	margin-right: 1px;
    	text-align: center;
    	}







.menu a:hover{
    	color: #000;
    	background: #AACAEA;
    	}







.menu ul ul, .menu ul ul:visited{
    	visibility: hidden;
    	width: 149px;
    	height: 0;




    	position: absolute;
    	top: 30px;
    	}




.menu ul a:hover{
	color: #000;
	}













/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



















.menu ul ul a, .menu ul ul a:visited{
    	background: #FFFFFD;
    	filter: alpha(opacity=95);
    	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    	-moz-opacity: 0.95; 
	opacity: 0.95;
    	}







.menu ul ul a:hover{
    	background: #EAF0F7;
    	}







/*
.menu ul ul a:visited{
    	background: #FFFFFE;
    	}
*/













/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



















.menu ul li:hover ul, .menu ul a:hover ul{
    	visibility: visible;
    	}










/* ================================================================
The original version of this menu and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
=================================================================== */

























/* ADDS AND CHANGES */







.mmtitel{
	color:#555;
	text-align: center;
	border:  0px solid #000;
	}

Alles anzeigen

FabianG · 22. Februar 2008

das is nicht normal das dass so lang ist oder???

wenn wol lass ichs glaub ich lieber doch,
wenn nich: "hat jemand was klürzeres???"

Foster · 23. Februar 2008

Ist nich unbedingt normal.
Eine Hälfte ist nur von einem CSS-Dropdownmenü von <a class="postlink" href="http://www.cssplay.co.uk">http://www.cssplay.co.uk</a> und ein anderer großer Teil auch von einem ziemlich verkorksten Layout

Für den Syntax kannst du dir ja einfach irgendein Element raussuchen und es dir genau anschaun.
Eine so lange CSS-Datei hab ich aber glaub ich vorher auch noch nie gehabt und ich beschäftige mich mit HTML und CSS ja nun auch schon ein Weilchen...
Du brauchst solltest dir deswegen also nicht allzu viele Gedanken machen. An CSS kann man sich ja ganz langsam rantasten...

Edit:
Hier hätte ich beispielsweise den Inhalt einer etwas kürzeren und überschaubareren CSS-Datei:

Code

h1   	{font-size: 18pt;}
h2   	{font-size: 14pt;}
h3	{font-size: 13pt;}
















#vbsp .head
	{
	font-size: 12px;
	}







.vbsphr	{
	width: 100%;
	border-bottom: 5px double #5868A8;
	}







.gmbh	{
	border: 5px double #000000;
	width:500px; height: 300px;
	background-image: url(../bilder/sindel.jpg);
	padding: 8px;
	}







.headline
	{
	font-color: #000000;
	font-size: 20px;
	}







.inhalt a.link, .inhalt a.link:visited
	{
	color: #000;
	background: #D6ECFF;
	text-decoration: none;
        	padding: 0px 2px 0px 2px;
	}
   /*
.inhalt a.link:hover
	{
	color: #FFF;
	background: #A0C0FF;
	text-decoration: underline;
        	padding: 0px 2px 0px 2px;
	}*/







.inhalt a.link:hover
	{
	color: #000;
	background: #FFF;
	text-decoration: underline;
        	padding: 0px 2px 0px 2px;
	}
           /*
         padding: 10px 10px 10px 10px;
	padding: top right bot left;
*/







#vbsp .vbsptop, #vbsp .vbsptop img
	{
 	font-size: 12px;
         padding: 0px 70px 0px 70px;
         border: 0px;
         }




.slider
	{
         title:  nacasdfh oben;
         }

Alles anzeigen

Die Einrückungen haben nichts zu bedeuten. Die dienen nur der Überschaubarkeit...
Manchmal sind diese auch etwas durcheinander, weil ich zT auch mit verschiedenen Editoren arbeite, die die Zeilen entsprechend immer etwas unterschiedlich weit einrücken

FabianG · 23. Februar 2008

oke, danke...
aber irgendwie versteh ich das ganze noch nicht so ganz...

Foster · 23. Februar 2008

Also... Jeder Block steht für ein HTML-Element und gibt dessen Formatierungen an.
Das was immer vor { und } steht ist der Name des Element, also zB h1 für eine große Überschrift oder .headline für ein Div-Element, dem ich den Namen headline zugeordnet hab (in der HTML-Datei also: <div class="headline">. Der . (Punkt) dann in der CSS-Datei ist notwendig, um zu sagen, dass es eine Klasse ist; .headline bedeutet also: "Element, das das Wort 'headline' als Klasse hat ").

Code

h1      {font-size: 18pt;}




.headline 
   { 
   font-color: #000000; 
   font-size: 20px; 
   }

Alles, was dann in den geschwungenen Klammern ( { } ) steht, sind die Angaben für das Element, die sich wie folgt aufbauen:
Eigenschaft: Wert;
Nach der Eigenschaft ganz einfach immer ein Doppelpunkt und nach dem Wert ein Semikolon ( ; ), damit weitere Eigenschaften dazugefügt werden können (ist nach dem letzten Wert in der Klammer nicht zwingend notwendig, aber empfehlenswert).
Das ist eigentlich schon alles, was es zum CCS-Syntax zu sagen gibt. Beispiele für Eigenschaften und Werte kannst du dir ja aus dem Quelltext oben raussuchen und anschauen.

Zum allgemeinen Aufbau einer CSS-Datei gibts eigentlich überhaupt nichts zu sagen
Es gibt weder Header- noch Footer-Bereiche oder ähnliches.
Alle Blöcke für die Elemente werden ganz einfach aneinander gereiht und solange der oben beschriebene Syntax eingehalten wird, kann eigentlich auch garnix schief gehen.[/code]

FabianG · 23. Februar 2008

Danke... aber das macht das design doch nicht anders wie ohne css oder? nur einfacher?

Foster · 24. Februar 2008

Wie "ohne CSS" ? oO

FabianG · 24. Februar 2008

ja man kann doch html ohne CSS machen! also so wie ich das verstanden hab, macht CSS das design nur einfacher, nicht besser...

Foster · 24. Februar 2008

Einfacher auf jeden Fall. Besser aber auch.
Man hat mit CSS eine viel breitere Palette der Gestaltungsmöglichkeiten zur Verfügung.
Zum Beispiel kann man mit CSS den Rahmen von Elementen vielfältigste Farben verpassen und dann noch einen border-style, wie zB gestrichelt oder doppelt anfügen. Mit HTML dagegen kann man lediglich border="X" einstellen und hat dementsprechend einen dickeren oder dünneren Rahmen.
Außerdem kann man mit CSS diese schönen Hover-Effekte erzeugen (zB Farbwechsel beim Überfahren eines Links).
All solche Sachen sind mit HTML ganz einfach nicht möglich, da es, wie der Name schon andeutet, eigentlich nur eine Sprache für das Layout ist (HTML = Hypertext Markup Language = Hypertext Auszeichnungssprache).
CSS (das Cascading Stylesheet) dagehen ist entwickelt worden, um HTML in rein optischer Hinsicht zu ergänzen.
Meiner Meinung nach ist CSS auch einer wirklich sehr feine Sache, da sich damit, wenn man es nur richtig anwendet, die schönsten Webseiten erstellen lassen und es auch sehr leicht anwendbar ist (das einzige, was man wirklich lernen muss, sind die einzelnen Eigenschaften, die man zuweisen kann und deren Werte).

CSS - Design auslagern mit Datei

Jetzt mitmachen!

Teilen