Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Profil Design (Basics)



Ranking: +4   Kommentare: 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
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
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.

Code:


p{

color: #00000;

margin: 10px;

}




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
Element Selector


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

Code Browser
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



Code:




#main_right {

float:right;

margin-top: -15px;

width:429px;

background-color: #cdcdcd;

border-left: solid 1px #bdbdbd;

border-top: solid 1px #252525;

}



#main_left {

float:left;

width:560px;

margin-top: -15px;

background-color: #cdcdcd;

border-top: solid 1px #252525;

}




main left/right
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.

Code:




#main_right {

float:left;

margin-top: -15px;

width:429px;

background-color: #cdcdcd;

border-left: solid 1px #bdbdbd;

border-top: solid 1px #252525;

}



#main_left {

float:right;

width:560px;

margin-top: -15px;

background-color: #cdcdcd;

border-top: solid 1px #252525;

}




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

Veröffentlicht von: dbrandt
Veröffentlicht am: 4 Feb. 2010
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: design Profil redesign


Themenverwandte Tutorials


Kommentar(e) (4)


DalShiem sagt:

Tolles Tutorial, danke!

21 Feb. 2010 12:40:20 • Antworten


_Fabi sagt:

Wünschenswert wäre es wenn du das nächste mal deine Sätze besser formulierst.
Ansonsten kann ich nichts weiteres bemängeln, ist halt ein kleiner Einblick in das FF-Addon Firebug.

11 Feb. 2010 09:07:04 • Antworten


dbrandt sagt:

Zitat roxsdaddy8:

danke top!


kein problem :)

5 Feb. 2010 17:54:26 • Antworten


roxsdaddy8 sagt:

danke top!

5 Feb. 2010 16:47:15 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder