Gestalte deine Projektseite

Die hier abgebildeten Codes kannst Du zum gestalten deiner Projektseite verwenden:

Codes für deine Projektseite

/* tag body: Definiert nur Hintergrundoptionen wie Farbe, Bild und Attribute für Bilder */
body {
	background-color:#666666;
	background-attachment:fixed;
	background-image:url(http://realisr.com/images/realisr_logo.png);
	background-position:center;
	background-repeat:no-repeat;	
}

/* class background2: Damit lassen sich überlagerte Hintergrundbilder realisieren, wodurch 
schöne Effekte mit geringen Ladezeiten möglich sind */
.background2 {
	background-color:#666666;
	background-attachment:fixed;
	background-image:url(http://realisr.com/images/realisr_logo.png);
	background-position:left top;
	background-repeat:no-repeat;	
}

/* class project_table: Zwei Tabellen die alles zwischen Projekt-Head und Footer beinhalten.
Hauptsächlich für Hintergrund- und Schriftdefinition aber auch Rahmen und evtl. Größe */
.project_table {
	background-color:#999999;
	font-family:"Times New Roman", Times, serif;
	color:#990000;
}

/* class table1: Spezifikation zu project_table. Definiert die erste der beiden Tabellen.
Inhalt: Projekt-Bewertung, Menü und Gesuche
Direkte Kind-Elemente: .roject_menu, .projekt_network (2 Tabellenspalten ) */
.project_table.table1 {
}

/* class table2: Spezifikation zu project_table. Definiert die zweite der beiden Tabellen.
Inhalt: Projektbeschreibung, Blog, Kommentare, Ähnliche Projekte, Tags
Direkte Kind-Elemente: .left_column, .right_column */
.project_table.table2 {
}

/* class project_menu: Tabellenspalte mit Projekt-Menü und -Bewertung */
.project_menu {
}

/* class projekt_network: Tabellenspalte mit Gesuchen */
.projekt_network {
}

/* class left_column: Tabellenspalte der 2. Projekt-Tabelle
Inhalt: Projekt-Beschreibung, Blog, Kommentare
Direkte Kind-Elemente: .description, .blog, .comments */
.project_table.table2 .left_column {
}

/* class right_column: Tabellenspalte der 2. Projekt-Tabelle
Inhalt: Ähnliche Projekte, Tags
Direkte Kind-Elemente: .more_projects, .tags */
.project_table.table2 .right_column {
}

/* class description: Die Projektbeschreibung
Kind-Elemente: .headline, .box, h2, .short_description, .long_description */
.description {
}

/* class headline: Sich wiederholendes Element für Überschriften verschiedener Blöcke
Eltern-Elemente: .description, .more_projects, .tags
Kind-Elemente: h2, h3 */
.headline {
}

/* class box: Sich wiederholendes Element für Inhalt verschiedener Blöcke
Eltern-Elemente: .description, .blog, .comments, .more_projects, .tags
Kind-Elemente: h2, h3 */
.box {
}

/* class blog: Beinhaltet Blog-Album Vorschau und Blog-Vorschau
Kind-Elemente: .box */
.blog {
}

/* class comments: Beinhaltet Blog-Album Vorschau und Blog-Vorschau
Kind-Elemente: .heading, .box*/
.comments {
}

/* class more_projects: Ähnliche Projekte
Kind-Elemente: .heading, .box */
.more_projects {
}

/* class tags: Tags
Kind-Elemente: .heading, .box */
.tags {
}

/* selector: Beispiel um Stile gezielt Kind-Elementen zuzuweisen */
.project_table .right_column h3 {
}

Beispiele

.description {
	background-color:#666;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
}

.description .headline {
	background-color:#999999;
	font-size:16px;
	font-weight:normal;
	margin: 1px;
}

.description .headline h2 {
	color:#000000;
}

.description .box {
	background-color:#999999;
	font-weight:normal;
	margin: 1px;
}

.description .short_description {
	font-weight:bold;
	
}
.description .long_description {
	background-color:#A8A8A8;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:150%;
	color:#FFFFFF;
}

zurück