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  Artist  Overlay 


Artists Overlay
Div Overlay
Profile 2.0 Overlay

Artist 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  Contents

Als erstes werden wir ein paar Sachen auf dem Profil verstecken. Also, der folgende Code wird in die "Bio" Sektion eingefügt.

First, we will hide only a few things on the Profile. Therefore, the following code needs to be inserted into the "Bio" section.

<style>
.KhAk {Hide Some Contents}
.whitetext12 {display:none;}
.orangetext15 {display:none;}
.lightbluetext8 {display:none;}
table.contactTable {display:none;}
td td td td.text {visibility:hidden;}
td td td td.text * { visibility:visible;}
td td td td {width: 0px; padding: 0px;}
table table td.text div table {display:none;}
.contactTable td td a img {display:inline !important;}
.friendsComments td.text .orangetext15 {display:block;}
.nametext, td.text font strong, td td td td.text a img {display:none;}
.friendSpace td.text .orangetext15 {display:block; margin-top:-12px;}
</style>
STEP  2  -  Main Container

Wir fügen einen "Div-Containern", worin wir später nach belieben Contents reinsetzen können, ein und 'Freunde und Kommentare' werden darunter zentriert. In folgendem Beipiel ist der "Haupt 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 "Div Containers" where we can insert at the later our contents, and center 'Friends and Comments' below them 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 "Bio" Section: Code In "Members" Section:
<style>
.KhAkMainOverlay {position:absolute;
left:50%; top:200px; _top:200px;
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>

</td></tr></table>
</td></tr></table>
<table class="KhAk" style="display:none;">
<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  -  Positioning  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 "Bio" Section: Code In "Members" Section:
    <style>
    .KhAkBox1 {position:absolute; top:10px; left:20px;
    width:285px; height:50px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}

    .KhAkBox2 {position:absolute; top:75px; left:20px;
    width:285px; height:275px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}

    .KhAkBox3 {position:absolute; top:365px; left:20px;
    width:285px; height:60px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}

    .KhAkBox4 {position:absolute; top:450px; left:20px;
    width:285px; height:250px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}

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

    .KhAkBox6 {position:absolute; top:450px; left:560px;
    width:215px; height:250px; background-color:black !important; border:1px solid; border-color:white; z-index:3;}
    </style>     		   Das wird in "Main Div 1" eingefügt
       wo es steht:
       This will go into the "Main Div 1"
       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>
    STEP  4  -  Some  Adjustments

    Um die Position von "Freunde und Kommentare" zu korrigieren und den "Player" zu verschieben, wird der folgende Code in "Bio" 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 "Bio" 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 {Fixing View All Friends Link}
    table.friendSpace table div {position:static !important; margin-left:0px !important;
    border:0px !important; background-color:none !important;}

    .KhAk {Friend Space Position}
    table.friendSpace {display:block; position:absolute; width:445px;
    top:970px; _margin-top:0px; _margin-left:-220px;}


    .KhAk {Comments Background Color}
    table.friendsComments {background-color:9C661F !important;}
    .KhAk {Friends Comments Borders}
    table.friendsComments {border:2px solid; border-color:white;}
    .KhAk {Fixing Comments Links}
    div.commentlinks, div.commentlinks a {position:static !important; margin-left:0px !important;
    border:0px !important; background-color:none !important;}

    .KhAk {Friends Comments Position}
    table.friendsComments {position:relative; margin-top:380px;
    _margin-top:385px; margin-left:45px;}


    .KhAk {Move Atists player}
    table table td.text object {display:block; position:absolute; left:50%; top:210px; margin-left:-70px; z-index:9;}
    </style>
    _margin-top:numberpx;   sets the top margin in Internet Explorer.
    _margin-left:numberpx;   sets the left margin in Internet Explorer.
  •   Positioning Friend Space
  •   Positioning Friends Comments
    • STEP  5  -  Importing  Sections

    Um die "Blogs" und "Myspcae URL" frei auf der Seite positionieren zu können, benutzen wir den folgenden Code.
    Hierbei werden die 'Blogs' Scrollbar gemacht und unter dem Player positioniert. 'Myspace URL' wird in "Box 3" verschoben.

    To position the "Blogs" and the "Myspace URL", we need to use the following code.
    The code makes the 'Blogs' scrollable and position under the player. 'Myspace URL' will move into the "Box 3".

    <style>
    .KhAk {Move Blogs Table}
    table.latestBlogEntry {
    display:block; position:absolute; left:50%; top:570px; margin-left:-70px; width:450px; height:60px;
    border:2px solid; border-color:white; background-color:330000; overflow:auto; z-index:9;}

    .KhAk {Move Myspace URL}
    table table table table table div {
    display:block; position:absolute; top:585px; left:130px; width:260px; height:20px; z-index:9;}
    table table table table div {
    display:block; position:absolute; top:600px; left:130px; width:260px; height:20px; z-index:9;}
    </style>
    STEP  6  -  Define  Page  Formating

    Und zu allerletzt definieren wir einige Seiten-Formatierungen und fügen den folgenden Code in "Bio" 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 "Bio" 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;}
    .KhAk {Formating Links of Music Nav}
    div table td a {color:9C661F !important;}
    div table td a:hover {color:green !important;}
    div.clearfix a {color:white !important;}
    div.clearfix a:hover {color:green !important;}
    .KhAk {XX's Latest Blog Entry}
    .latestBlogEntry .btext {color:DarkOrange !important;}
    .KhAk {Color of Friends and Comments Title}
    .friendSpace td.text .orangetext15, .friendsComments td.text .orangetext15 {color:DarkOrange !important;}
    .KhAk {Comments Date and Time}
    .blacktext10 {display:block; text-align:center !important; color:E3A869 !important;}
    a img {border:none !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 

    Upcoming Shows
    Mit dem folgenden Code werden die Anstehende Shows unter dem Player Positioniert. Allerdings müssen vorher die farbigen Codes aus Step 1 und 3 entfernt werden. Und Die Blogs-Tabelle muß dann um-/repositioniert oder versteckt werden.
    Ich kann leider keine bessere Lösung, die auch unter allen gängigen Browser Versionen gleichermassen funktioniert, anbieten. IE (V. 6, 7) nimmt den Hintergrund, Rahmen und Scrollbalken nicht an.
    Aber zur Not kann man die Shows auch per Hand eintragen und Via DIV positionieren.


    With the following code, we can position the upcoming shows under the Player. But before, the colored codes from Step 1 and 3 must be removed, and the Blogs table that we have already positioned in the above example, should be repositioned or hidden.
    Unfortunately, I can not offer a better solution which also works equally in all usual browser versions.
    Internet Explorer (V. 6, 7) does not support the background, borders, and scrollbars.
    However, if necessary, we can enter the upcoming shows information by ourselves and position them via DIV.
    <style>
    .KhAk {Position The Div Which Contains Both Shows & Player}
    table table td.text div {position:absolute; top:570px; left:430px; z-index:9;}

    .KhAk {Position Player}
    table table td.text object {position:absolute; top:-360px; left:0px; z-index:9;}

    .KhAk {Position Shows}
    table table td.text div td.text span.whitetext12 {display:inline !important;}
    div[id="profile_bandschedule"] {position:absolute; top:570px; left:460px; width:440px; height:60px;
    background-color:330000; border:2px solid; border-color:white; overflow:auto; z-index:9;}
    </style>
  •   Format Upcoming Shows


    • 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 "Bio" kopiert und die farbige Zahl wird 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 "Bio" 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>

    Um bereits in "STEP 1" versteckte "Kontakt-Tabelle" wiederherzustellen und sie auf der Seite frei zu positionieren, nehmen wir deren Versteck-Code aus "Bio" raus und der folgende Code wird unter all den anderen eingefügt.

    To recreate/import and position the "Contact Table" that we have already hidden in "STEP 1", we need to take out its codes from "Bio", and insert something like the code below into the section beneath all other codes.

    <style>
    .KhAk {Recreating Contact Table}
    .contactTable span.whitetext12 {display:inline !important;}
    table.contactTable {display:block; position:absolute; left:50%; margin-left:-385px; top:400px; z-index:9;}

    .KhAk {Resize The Default Contact Table Icons}
    .contactTable td td a img {width:115px; background-color:9C661F !important;}
    </style>


    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