+4   4   |   Bewertung: Keine Berechtigung!  

Servus,
das hier ist mein erstes Tutorial und ist der neuen Funktion, Profil Design, gewidmet.

Ich werde hier nicht von Anfang bis Ende CSS predigen. Warum? Weil es da schon einen Haufen von Tutes gibt und ich den Punkt nicht sehe das Rad neu zu erfinden :).

Was man Braucht:

Ich werde in diesem Tute Firefox benutzen.
Firebug http://getfirebug.com/

Und auf geht's!

Wenn Firebug installiert wurde und der plug-in gelanden wurde, kann es los gehen.

Firebug Start

So sollte es aussehen. Was man jetzt hier vor sich hat ist relativ simpel, das Firebug interface xD. Oben hat man die Hauptmenuleiste, wo man verschiedene Optionen hat. Die wichtigsten fuer dieses Tute sind die HTML und CSS Optionen.


HTML CSS Optionen

Wenn man sein Profil geladen hat, kann man jetzt auf CSS druecken und somit den Stylesheet (CSS) von seinem Profil sehen.

Theoretisch koennte man jetzt im Firebug Interface los legen und den Stylesheet bearbeiten. Hier muss, meiner Meinung nach, jeder selbst entscheiden wo er den Stylesheet bearbeiten will. Ich hab ihn komplett kopiert und dann in einem neuem Tab in das Profil-Design Textfeld gepasted. http://intern.designnation.de/Profil/Design/

Woher weiß ich was was ist?

Also, hier nehme ich jetzt mal an, dass ihr euch ein bisschen ueber CSS belesen habt, oder ein Grundwissen habt.
Der stylesheet listet die Definitionen fuer DIV's und Classes. Jede Definition positioniert/styled ein HTML element im Browser.



Dieses bisschen CSS sagt dem Browser das alles was zwischen den <p></p> Tags liegt schwarz ist und eine 10 pixel Margin hat.
Genau auf diesem Prinzip basiert ein Stylesheet, und somit auch dieses Tutorial. (also doch ein bisschen CSS intro ^^)

Um sein Profil zu editen muss man jetzt eigentlich nur noch wissen welche Class/DIV was rendert.

Um das zu loesen gibt es im Firebug interface eine goldene Funktion xD, den Element Selector


Element Selector

Wenn diese Funktion aktiviert ist, wird jedes HTML-Element umrahmt und im Code browser angezeigt.


Code Browser

Somit weiß man jetzt, welche DIV wo ist (code) und wie die DIV-ID heißt. (Das gleiche gilt fuer classes)

Sprich, wenn ich die DIV mit der ID "header" veraendern will, muss ich diese definition nur noch im CSS finden und aendern.

(wie oben erwaehnt, hatte ich mein CSS ins Profil-Design Textfeld kopiert, hier konnte ich dann durch die Firefox Suchfunktion nach "header" suchen. Erspart Zeit und scrollen. Bestimmt gibt es hier auch andere Wege).

Stylesheet Editieren und Elemente um-stylen

main left/right

Diese zwei DIV's sind die Hauptcontainer fuer die links / rechts Aufteilung des Profils. Durch die float: left; und float: right; Definition wird jeweils festgelegt, welche DIV wo floated. Jetzt muesste es eigentlich logisch erscheinen, das man durch das aendern der float definition, die Positionen der DIV's aendern kann.



Diese Aenderung hat zur Folge, dass #main_left nun rechts floated und #main_right nun links floated.

----

Und da habt ihr's! Das ist das Prinzip hinter einem Profil-Redesign. Jetzt kommt es natuerlich auf Kreativitaet und CSS kenntnisse an, aber wie man sieht, ist's gar nicht schwer einen Anfang zu machen.


Hoffe es macht den Anfang fuer manche leichter und das man dem Tutorial gut folgen konnte.
Gruss,
Dennis