KhAkʞɐɥʞ

ʞɐɥʞ

  Ein "Div Overlay Layout" ist die Art, auf fortgeschrittene Weise das MS Profil individuell zu gestalten.
Grundlegend wird erst das Myspace Standard Layout verborgen und dann die Seite mit dem eigenen
überlagert (Layers) und vom neuen aufgebaut, in der Contents beliebig eingefügt werden können.
Div Layouts bieten einem die bessere Möglichkeit seiner Kreativen Gedanken auszudrücken. Aber
bevor wir zu meinem Tutorial über das Kreieren von Div Layouts übergehen, empfehle
ich dies [] Tutorial über 'Div Containers' unter die Lupe zu nehmen.

  A "Div Overlay Layout" is a more advanced way of customizing your Myspace profile.
Basicly, it will hide the default Myspace layout, and then, place new contents over the
top of it (layers), which you can then add pretty much whatever you would like to.
Div layouts are a much better way of expressing your creativity over Myspace.
Before we get round to my tutorial about making div layouts, I recommend
to study carefully this [] tutorial about 'Div Containers'.

Creating  Simple  2.0  Overlay  Layout


Artists Overlay
Div Overlay
Profile 2.0 Overlay

Myspace Profile 2.0

Dieses Tutorial soll auch den Anfängern in Grundzügen die Erstellung, Formatierung und Bearbeitung von CSS-basierten "Div Layouts", soweit es 'Myspace' betrifft, erklären. Es ist aber mit Sicherheit nicht die ultimative Arbeit zu diesem Thema.
Wir wollen im folgenden ein einfaches Layout erstellen, in das wir nach Belieben verschiedene Inhalte einfügen, positionieren und speichern können.
Der Übersicht halber werden alle Container mit einer Hintergrundfarbe und Rahmen versehen.


This article doesn't try to be the definitive work on the subject. It should also describe in detail for beginers - the fundamentals of creating a "DIV Based Layout" with CSS as far as the 'Myspace' is concerned - and allow them to be able to formating and customizing it. Below, we will create a simple 'Div Layout' where different contents can be positioned and saved as we wish.
To keep track of each container position in the tutorial below, they will be provided with a background color and borders.

STEP  1 -  Select  Layout  & Modules

Als allererstes wird auf der "Navigation Leiste" in Menüpunkt "Profil" das Untermenü "Profile designen" angeklickt (1).
- Hier klicken wir auf "Layout ändern" und wählen dann das Layout aus, das wie in folgendem Bild aussieht (2 + 3).
- Dann klicken wir auf "Design auswählen" und wählen in "Alle Designs" das erste Myspace "Design" links oben aus (4 + 5).


First, select from the "Navigation Bar" in the menu "Profile" the submenu "Customize Profile" (1).
- Here, choose "Change Layout", and then select the Layout that looks like on the following Image (2 + 3).
- Then, click on "Select Theme", and in "All Themes" select "No Theme" that is the first one at the top left (4 + 5).

© - Choose Layout

Nun können wir "In Aller Ruhe" die Module, die wir nicht angezeigt haben wollen, ausblenden und die ausgewählte Module untereinander anordnen. Wie z.B:  Basis Info -- Kurzinfo -- Freunde -- Kommentare usw.

Anmerkung:
- Das "Basis Info Modul" kann NUR per einem einfachen CSS Code ausgeblendet werden.
- Das "Kurzinfo Modul" MUSS unbedingt eingeblendet sein, denn darin wird unsere Inhalt einfügt.


Now, we hide all modules that we do not want to show on our div overlay, and we arrange the modules of our choice under each other. E.g. like:  Basic Info -- Blurbs -- Friends -- Comments etc.

Note:
- The "Basic Info Moudle" can be ONLY hidden by using a simple CSS Code.
- We will use the "Blurbs Module" for our content, therefore we DO NOT hide this Module.


© - Choose Layout
STEP  2  -  Costume  Blurbs  Module

Wir verstecken zunächst das "Basis Infos Modul" und löschen die Überschriften des "Kurzinfo Moduls". Dafür wird der folgende Code in das "CSS Feld" eingefügt und den farbigen Wert nach Wunsch/Bedarf angepasst:

To hide the "Basis Info Module" and removing the headings of "Blurbs Module", we insert the following code into the "CSS Field", and the colored value can be replaced as wished.

Put The Code In "{} CSS" Field: Adding CSS Codes

.Khak {Hide Basic Info Module}
div.basicInfoModule {display:none;}

.KhAk {Add Background Color To Blurbs Module}
div.blurbsModule {padding:0px; background-color:DarkGoldenrod;}

.KhAk {Hide Blurbs Header}
div.blurbsModule h3.moduleHead {display:none;}
.KhAk {Hide About Me Header}
div.blurbsModule div.blurbAboutMe h4 {display:none;}
.KhAk {Hide Meet Header}
div.blurbsModule div.blurbLikeToMeet h4 {display:none;}

.KhAk {Move About Me Up}
div.blurbAboutMe {margin-top:-15px;}

STEP  3  -  Some  Adjustments

Um die Breite von "Top Area und Myspace Divs" zu definieren und "Text & Links" zu formatieren, wird der folgende Code in das "{} CSS" Feld eingefügt und die farbigen Werte nach Wunsch/Bedarf angepasst:

To define the width of "Top Area and Myspace def. Divs" and formatting "Text & Links", we insert the following code into the "{} CSS" field, and the colored values can be replaced as wished.

Put The Code In "{} CSS" Field:

.KhAk {Wdth Of Myspace Divs And Top Area}
div.wrap, div#row1, div.contentMid, div.contentMid1, div.contentMid2 {width:1000px;}
div.contentMid, div.contentMid1, div.contentMid2 {padding:0px;}

.KhAk {Top Area - Background Color}
div#header {background-color:black;}
div#googlebar {background-color:DarkGoldenrod;}
div#topnav {background-color:orange;}

.KhAk {Body Background Property}
body {background-color:black; background-image:url(Your Image URL);}

.KhAk {Profile Text Properties}
div.contentMid {color:white; font-family:Tahoma, Georgia, Arial, font-size:12px;}

.KhAk {Profile Link Formating}
div.contentMid a {color:yellow; font-family:Tahoma, Georgia, Arial, font-size:12px;}
.KhAk {Profile Links - Hover Effect}
div.contentMid a:hover {color:red; font-family:Tahoma, Georgia, Arial, font-size:12px;}

.KhAk {Width And Border Of Footer Area}
div#footer {width:970px; background-color:orange; border:10px solid yellow;}

.KhAk {Footer Div - Link Formating}
div#footer a {color:black; font-family:Tahoma, Georgia, Arial, font-size:12px;}
.KhAk {Footer Div - Hover Effect}
div#footer a:hover {color:white; font-family:Tahoma, Georgia, Arial, font-size:12px;}

STEP  4  -  Main Container

Dann fügen wir einen "Haupt Div-Container", worin wir später nach belieben Contents reinsetzen können, ein.
In folgendem Beipiel ist der Container 960px Breit und 800px Hoch.
“Diesem Container kannst du ein selbst kreiertes (Basis-) Bild als Hintergrund zuweisen oder ein Bild per <img>-Tag, mehrere Bilder untereinander oder Slice-Bilder zufügen und dein Content da drauf positionieren”.

We add a "Main Div Container" where we can insert at the later our contents.
In the below example, the main container has a specified width of 960px and height of 800px.
“You can assign to the container a self-created (core-) image as a background, or simply insert the image via <img>Tag, multiple images listed one after the other or your sliced image. Then, position your Content on it”.

Put The Code In "{} CSS" Field: Put The Code In "About Me" Section:

div.KhAkMainOverlay {
width:960px; height:800px;
background-color:transparent;
background-image:url(Your Image URL);
border:10px solid yellow;
z-index:2;}

   <div class="KhAkMainOverlay">

    "Your Main Box For Adding Content
    Or Other <div ...> ... </div> -s"

   </div>

Suggestion

  • MS Win IE Underscore Hack
  • CSS Background Properties
  • HTML Color Name / Color Code
  • CSS Border Style And Properties
    • STEP  5  -  Positionig  Contents 

    Wenn du die von mir  empfohlene Seite studiert hast, musst du nun das Prinzip von Div- Containern und wie man sie mittels "HTML/CSS" oder "Inline-Styles" einsetzt, formatiert, mit Hintergrund und Rahmen oder *Scrollbalken verseht, kennen. Nun können wir (wie das folgende Beispiel) die Seite nach belieben designen und unserer Kreativität freien Lauf lassen.

    - Wie auch immer die Modul-Anordnung bei dir aussehen mag, stehen die "top und left" -Zahlen der folgenden DIVs für den 'Abstand' zum "oberen und linken" Rand des Browsers



    If you have studied the  recommended side you must know the Div-containers' principle, and how to use, format, and occupy it with a background and borders or *scrollbars by means of "HTML/CSS" or "Inline-Styles".
    Now, we can (like the example below) get starting to design the page as we like, and can give free rein our creativity.

    - However, your module arrangement looks the "top und left" numbers in the following DIVs set the 'Distance' to the "top and left side" of the browser.

    Put The Code In "{} CSS" Field: Put The Code In "About Me" Section:

    .KhAkBox1 {position:absolute; top:220px; left:50px;
    width:175px; height:150px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox2 {position:absolute; top:220px; left:235px;
    width:510px; height:150px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox3 {position:absolute; top:380px; left:50px;
    width:435px; height:80px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox4 {position:absolute; top:470px; left:50px;
    width:175px; height:350px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox5 {position:absolute; top:470px; left:235px;
    width:250px; height:350px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox6 {position:absolute; top:380px; left:495px;
    width:250px; height:215px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox7 {position:absolute; top:605px; left:495px;
    width:250px; height:215px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox8 {position:absolute; top:220px; left:755px;
    width:200px; height:600px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    .KhAkBox9 {position:absolute; top:830px; left:50px;
    width:905px; height:165px; background-color:black;
    border:1px solid; border-color:white; z-index:3;}

    		   Das wird in "Haupt Div-Container" eingefügt
       wo es steht:
       This will go into the "Main Div"
       where it says:

       "Your Main Box For Adding Content
       Or Other <div ...> ... </div> -s"



      <div class="KhAkBox1"> This Is Box 1 </div>
      <div class="KhAkBox2"> This Is Box 2 </div>
      <div class="KhAkBox3"> This Is Box 3 </div>
      <div class="KhAkBox4"> This Is Box 4 </div>
      <div class="KhAkBox5"> This Is Box 5 </div>
      <div class="KhAkBox6"> This Is Box 6 </div>
      <div class="KhAkBox7"> This Is Box 7 </div>
      <div class="KhAkBox8"> This Is Box 8 </div>
      <div class="KhAkBox9"> This Is Box 9 </div>

    Und zu allerletzt definieren wir einige Modul-Formatierungen und designen sie nach unseren eigenen Vorstellungen.
    - Weitere spezifische Formatierungen entnimmst du bitte [] der 'Hauptseite' in den entsprechenden Sektionen.

    And finally, we define some module formatting changes, and insert the codes into the "CSS Field" beneath all other codes. - You will find the specific module formating codes [] on the 'Main Page' in the related sections.

    ^^ It Will Look Like ^^   View Preview Button
    ^^ With Contents, Friends & Comments ^^   View Preview Button
  •   Profile 2.0 Friends Module
  •   Profile 2.0 Comments Module

    • Zum Schluß noch ein paar nützliche Anmerkungen und Tipps:
    And last but not least, just a few helpful explanations and tips:

    Importing  Basic Info Module

    Um bereits in "STEP 1" versteckte "Basis Info Modul" wiederherzustellen und es auf der Seite (Main DIV) frei zu positionieren, nehmen wir dessen Versteck-Code aus "CSS Feld" raus und fügen den folgenden Code unter den anderen ein.

    - Wir können individuelle Komponente dieses Moduls [] mit Hilfe 'dieser Seite' löschen/formatieren.


    To recreate/import and position the "Basic Info Module" that we have already hidden in "STEP 1", we need to delete its
    Hide Code from "CSS Field", and insert one of the following codes into the CSS field beneath all other codes.

    - To hide or format individual components of the "Basic Info Module", [] we can use ' this site'.

    Put The Code In "{} CSS" Field:

    .KhAk {Recreating Def. Pic Module}
    div.basicInfoModule {
    background-color:transparent; position:absolute;
    top:240px; left:20px; z-index:9;}

    OR

    .KhAk {Recreating Def. Pic Module}
    div.basicInfoModule {
    background-color:transparent; position:absolute;
    left:50%; top:220px; margin-left:-490px; z-index:9;}

    Beispiele Für Nur Spezifische Elemente aus dem "Basis Info" Modul Verstecken/Positionieren:

    Examples Of Hide/Position Only Specific Elements Of "Basic Info" Module:

    .KhAk {Hide Basic Info Module Except Profile Image}
    div.basicInfoDetails {display:none;}

    .KhAk {Position Profile Pic}
    div.basicInfoModule div.photo {
    background-color:transparent; position:absolute;
    top:140px; left:120px; z-index:9;}




    .KhAk {Position Profile Name Above Pic}
    div.basicInfoDetails h2 {position:absolute;
    top:-30px; left:40px; z-index:9;}

    .KhAk {Reposition Myspace URL}
    div.basicInfoModule span.urlLink {position:absolute;
    top:0px; left:500px; z-index:9;}
    .KhAk {Reposition Contact Links}
    div.basicInfoModule ul.contactLinks {position:absolute;
    top:20px; left:400px; z-index:9;}




    .KhAk {Hide Time And Date}
    div.basicInfoModule blockquote p span.date {display:none;}

    .KhAk {Hide View More}
    div.basicInfoModule blockquote p a {display:none;}



    .KhAk {Positioning Mood}
    div.basicInfoModule blockquote p span.mood {
    position:absolute; top:50px; margin-left:90px; z-index:9;}



    .KhAk {Position View My: photos Videos Blog}
    div.basicInfoDetails div.pageLinks {position:absolute;
    left:50%; top:60px; margin-left:40px; z-index:9;}


    Importing  Myspace Player Module

    Um das "Myspace Player" Modul auf der Seite (Main DIV) zu positionieren, schalten wir dessen Modul wieder ein und fügen den folgende Code in das "{} CSS" Feld unter den anderen Codes ein:

    To position the "Myspace Player", we need to turn on its Module, and insert the code below into the "{} CSS" field beneath all other codes:

    Put The Code In "{} CSS" Field:

    .KhAk {Move Myspace Player}
    div.musicPlayerModule {
    width:0px; height:0px; margin-top:-20px;}

    div.musicPlayerModule object {
    width:300px; height:51px;
    position:absolute; left:50%;
    top:520px; margin-left:60px;
    z-index:9;}



    Suggestion

  •   Profile 2.0 Top Banner
  •   Profile 2.0 Bottom Banner
  •   Create Graphical Navigation
  •   Flipped / Zigzagged Comments
  •   Create 2.0 Contact Table Or Module


    •   Diese Lektion sollte nur als ein Beispiel dienen und dir behilflich sein, ein DIV-Layout zu erstellen.
    Wie du die Informationen verwertest und sie dir zunutze machst, ist gänzlich dir selbst überlassen.

      The above instruct should only serve as an example and be helpful to create a DIV layout.
    It is completely left to yourself to how you exploit the information and its benefit.


     Die verwendete "CSS Klassen, IDs" oder mein
     "Name, Initiale, WebAdr."     in den Codes sind so
      eine Art Credit und dürfen nicht geändert werden.

     The applied "CSS Classes, IDs" or my "Name,
      Initial, Web Adr."     in the codes are a kind of
      Credit and they are not allowed to be changed.       © Copyright 2006- by KhAk






    Eingestellt von KhAk

    Abonnieren Posts (Atom)