Miniportfolio mit HTML, PHP und Javascript (jQuery) - fortgeschritten

Cascading Stylesheets werden im der Webseite eingebunden.

…link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" />

Wie unsere Javascript-Dateien, die wir im Ordner „js“ finden, geben wir auch unsere css-Dateien in ein Subverzeichnis namens „css“. Dies dient in erster Linie der besseren Übersicht über unser Webprojekt.

Die Gestaltung

Der body der Webseite. Grundlegend wird hier definiert, dass die Seite einen weißen Hintergrund hat (#fff), keine Seitenränder besitzt (margin), eine monospace-Schriftfamilie gewählt wird und die Schriftgröße auf 12px gesetzt wird.

body {
	background:#fff;
	margin:0;
	font-family: 'Lucida Console', 'Monaco', monospace;
	font-size:12px;
}

Als nächstes können weitere elementare Eigenschaften der Webseite definiert werden - die Linkstyles:

a:link, a:visited {
	color:#fff;
	text-decoration:underline;
}
a:hover, a:active  {
	color:#fff;
	text-decoration:line-through;
}

:focus, *:focus {
	outline: 0;
}

Die .thumb Klasse - Style jedes Elements

.thumb {
	height:200px;
	margin:0;
	float:left;
	position:absolute;
	cursor:move;
}

Da eine Drag&Drop Eigenschaft der Elemente voraussetzt, dass jede Komponente eine fixe Position innerhabl des HTML-bodys hat setzen wir die Eigenschaft "position" auf "absolute. Zusätzlich geben wir jedem Element noch ein cursor:move Attribut, damit der User auf den ersten Blick leicht erkenne kann, dass es sich beim aktuellen Element um ein "ziehbares" handelt.

Als nächstes definieren wir die Ausnahmen und spezifischen Merkmale der jeweilig-ausgelesenen Formate.

Somit bekommt eine ausgelesene Textdatei die Klasse .text zugewiesen:

.text {
	background:yellow;
	padding:20px;
	overflow:hidden;
	max-width:500px;
	white-space:nowrap;
	height:auto !important;
}

Wichtig hierbei ist, dass jedes "Textfeld" eine automatische Höhe mit "height:auto" zugeteilt bekommt.

Jedes Textfeild unterstützt sowohl Links als auch andere HTML Attribute. Somit kann innerhalb einer ausgelesenen Textdatei z.b. eine Linkliste ausgegeben werden. Damit auch diese Links innerhalb eines Textfeldes ordnungsgemäß gestyled sind schreiben wir folgendes:

.text a:link, .text a:visited {
	color:#000;
	text-decoration:underline;
}
.text a:hover, .text a:active {
	color:#000;
	text-decoration:line-through;
}

Jeder Ordner in unserem "Mini-Portfolio" hat die Klasse .folder zugeteilt bekommen:

.folder {
	width:230px;
	height:10px;
	color:black;
}
.folder img {
	border:none;
	margin-left:-10px;
}
.folder a {
	cursor:default;
}

Um vom Interface einem Betriebsystem und somit bekannten Verhaltensregeln möglichst ähnlich zu sein, soll jeder Ordner einen normalen Mauszeiger zugeteilt bekommen - so wie es der durchschnittliche User von einem Betriebsystem wie Windows, Mac Os oder Linux gewohnt ist.

Handelt es sich beim ausgelesenen Element um eine unterstützte Datei wie z.B. ein .pdf oder ein .doc so kommt die Klasse .file ins Spiel.

.file {
	width:160px;
	height:10px;
	color:black;
}

.file img {
	border:none;
	height:206px;
}

Da Ordner und Dateien nicht nur ein Symbol abbilden sollen sondern auch den Namen darunte damit klar wird um was es sich denn überhaupt handelt, hat jeder Ordner und jede Datei unterhalb des Symbols ein span-Element angehängt das den Namen der Datei trägt. Diese span-Element hat die Klasse .desc zugewiesen bekommen.

.desc {
	background:#fff;
	padding:5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height:20px;
}

Mit CSS3 wurde erstmals die Möglichkeit eingeführt mit purem CSS abgerundete Ecken auf Elemente anzuwenden. Derzeit unterstützen nur eine limitierte Anazhl von Browsern abgerundete Ecken.

Das Webkit Projekt auf dem z.B. Apples Safari aufbaut verlangt ein -webkit-border-radius und Mozilla Firefox verlangt ein -moz-border-radius um einem Element runde Ecken zu geben.

Brotkrümel-Links

Da es sich bei der Brotkrümelstruktur um simple Text-Hyperlinks handelt reicht es die Textfarbe der Links zu definieren. Schriftart und Schrift wurde übergreifend in unserem body-Selektor definiert. Das !important Attribut überschreibt bereits vorher definierte Eigenschaften.

.breadcrumbs a{
	color:#000 !important;
}