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  1.0  Overlay  Layout


Artists Overlay
Div Overlay
Profile 2.0 Overlay

Standard Profile

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. Es werden der Übersicht halber 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  -  Hiding  Columns

Als erstes werden alle Sektionen der rechten und die der linken Seite außer "Freunde, Kommentare und Miniplayer" versteckt.
Dafür wird der folgende Code in "Über Mich" Sektion eingefügt:

First, we hide all sections of the left and right side except "friend's space, friend's comment, and myspace miniplayer".
Therefore, we insert the following code into the "About Me" section:

<style>
.KhAk {Hide Left Column}
table.profileInfo {display:none;}
table.contactTable {display:none;}
table.userProfileURL {display:none;}
table.interestsAndDetails {display:none;}
table.userProfileDetail {display:none;}
table.userProfileCompany {display:none;}
table.userProfileNetworking {display:none;}
table.userProfileSchool {display:none;}

.KhAk {Hide Right Column}
table.extendedNetwork {display:none;}
table.latestBlogEntry {display:none;}
table.blurbs {display:none;}
</style> 		↔
↔
↔
↔
↔
↔
↔
↔


↔
↔
↔ 		Name/Pic Table
Contact Table
Myspace URL
Interests Section
Details Section
Company Section
Networking Section
Schools Section


Extended Network
Blog Section
Blurbs Section
STEP  2  -  Main Container

Dann fügen wir einen "Haupt Div-Container", worin wir später nach belieben Contents reinsetzen können, ein und 'Freunde und Kommentare' werden darunter zentriert. In folgendem Beipiel ist der Container 800px Breit und 750px 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, and center 'Friends and Comments' below it on our page. In the below example, the main container has a specified width of 800px and height of 750px.
“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”.

Code In "About Me" Section: Code In "Meet" Section:
<style>
.KhAkMainOverlay {position:absolute;
left:50%; top:160px; _top:160px;
margin-left:-400px; _margin-left:-400px;
width:800px !important; height:750px !important;
background-image: url(Your Image URL);
border:2px solid; border-color:white;
background-color:9C661F !important; z-index:1;}
</style> 		</td></tr></table>
</td></tr></table>
</td></tr></table>

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

<table><tr><td>
<table><tr><td>
<table><tr><td>
_top:numberpx;   sets the Distance to the top of the page in IE.
_margin-left:numberpx;   sets the left margin in Internet Explorer.

  • MS Win IE Underscore Hack

  • CSS Background Properties

  • HTML Color Name / Color Code
    • STEP  3  -  Some  Adjustments

    Um die Position von "Freunde und Kommentare" zu korrigieren und den "Player" zu verschieben, wird der folgende Code in "Über Mich" Sektion eingefügt und die farbigen Werte nach Wunsch/Bedarf angepasst:

    To correct the position of "Friends and Comments" and moving the myspace "Player", we insert the following code into the "About Me" section, and the colored values can be replaced as wished.

    <style>
    .KhAk {Friend Space Background Color}
    table.friendSpace {background-color:9C661F !important;}
    .KhAk {Friend Space Borders}
    table.friendSpace {border:2px solid; border-color:white;}
    .KhAk {Friend Space Position}
    table.friendSpace {position:relative; margin-top:610px; _margin-top:600px;}

    .KhAk {Comments Background Color}
    .friendsComments {background-color:9C661F !important;}
    .KhAk {Friends Comments Borders}
    table.friendsComments {border:2px solid; border-color:white;}
    .KhAk {Friends Comments Position}
    table.friendsComments {position:relative; margin-top:10px; _margin-top:20px;}

    .KhAk {Moving MS Mini Player}
    table table div {position:absolute; left:50%; top:195px; margin-left:-380px; z-index:9;}
    table table table div, table table td.text div {position:static; margin-left:0px;}
    </style>
    _margin-top:600/20px;   set the top margin in Internet Explorer.
    STEP  4  -  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.

    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.

    Code In "About Me" Section: Code In "Meet" Section:
    <style>
    .KhAkBox1 {position:absolute; top:80px; left:50px;
    width:175px; height:150px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}

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

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

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

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

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

    .KhAkBox7 {position:absolute; top:465px; left:495px;
    width:250px; height:215px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}
    </style>     		   Das wird in "Main Div" 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>
    STEP  5  -  Define  Page  Formating

    Und zu allerletzt definieren wir einige Seiten-Formatierungen und fügen den folgenden Code in "Über Mich" Sektion ein. Weitere spezifische Formatierungen entnimmst du bitte [] der 'Hauptseite' in den entsprechenden Sektionen.

    And finally, we define some page formatting changes with the following code and insert it into the "About Me" section beneath all other codes. You will find the specific formating [] on the 'Main Page' in the related sections.

    <style>
    .KhAk {Background Properties}
    body {background-color:black;}
    table, tr, td {background-color:transparent; border:none;}
    .KhAk {Text and Link Properties}
    table, tr, td, span, strong, div { color:white; font-family:Verdana; font-size:12px;}
    a { color:white !important; font-family:Verdana !important; font-size:12px !important;}
    a:hover { color:yellow !important; font-family:Verdana !important; font-size:12px !important;}
    a img {border:none !important;}
    .KhAk {Color of Friends and Comments Title}
    .friendSpace td.text .orangetext15, .friendsComments td.text .orangetext15 {color:white !important;}
    .KhAk {Hide Comments Links}
    .commentlinks {display:none; visibility:hidden;}
    .KhAk {Comments Date and Time}
    .blacktext10 {display:block; text-align:center !important; color:E3A869 !important;}
    .KhAk {Background Color of Top Div}
    .profileWidth table td, div.clearfix a:hover { background-color:9C661F !important;}
    .KhAk {Color of Shortcuts}
    div div select, .srchTextfld { background-color:9C661F; color:white !important;}
    div div option {color:white !important;}
    .KhAk {Color of Copyright}
    .bodyContent td div font {color:white !important;}
    </style>

    Fals nötig wird es nachträglich noch paar Einstellungen bezüglich der verschiedenen Positionen vorgenommen, und fertig!

    If necessary, we make some adjustments regarding the different section positions, and we are done!

    ^^ It Will Look Like ^^   View Preview Button

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

    Mehr als Vier Freunde in einer 'Reihe' ist nur in einem "Major Label Bands" Profil oder eben als "Zahlender Inserent" möglich.
    Die Alternative ist eine [] Custom 'Friends List', entweder mit einem Generator oder selbst, zu kreieren.
    Die Breite der Kommentar-tabelle kann mit dem folgenden Code angepasst werden. Er wird in "Über Mich" kopiert und die farbige Zahl angepasst.

    More than Four Friends in a 'Row' is possible only in a "Major Label Bands" Profil or even as "Paid Advertiser" profiles. The alternative way to do that is to create a [] Custom 'Friends List' with a generator or make it by yourself.
    The width of the comment table can be adapted with the following code. It will be pasted into the "About Me" section and adjusted the colored number.

    <style>
    .KhAk {Increase Width Of Comments}
    .friendsComments table {width:790px;}
    .friendsComments table table {width:auto;}
    .friendsComments td.columnsWidening {width:100%;}
    </style>
    Importing  Sections

    Um eine bereits in "STEP 1" versteckte "Profil-Sektion" wiederherzustellen und sie auf der Seite frei zu positionieren, nehmen wir deren Versteck-Code aus "Über Mich" raus und fügen etwas wie der folgende Code unter den anderen Codes ein:

    To recreate/import and position a "Profile Section" that we have already hidden in "STEP 1", we need to take out its code from "About Me", and insert something like the code below into the section beneath all other codes:

    <style>
    .KhAk {Recreating Def. Pic Table}
    table.profileInfo {display:block; position:absolute; left:50%; margin-left:-380px; top:260px; z-index:9;}

    .KhAk {Recreating Contact Table}
    table.contactTable {display:block; position:absolute; left:50%; margin-left:-380px; top:660px; z-index:9;}
    </style>


    Hide Other Content
    ↔ Friends Space
    ↔ Friend Comments
    ↔
    		 Mini Player

    Suggestion

  •   Image Text Wrap
  •   Comments Separator
  •   Create Comments Box
  •   Create Image Navigation


    •   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.
    Du könntest aber auch auf die im Net befindlichen DIV-Generatoren zurückgreifen oder dir ein
    fertiges Div-Layout herunterladen.

      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.
    However, you can also access to the DIV generators on the net or you can
    download a finished Div layout.


     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