.

2009-07-06T08:56:00.000-07:00

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

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).


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.


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:
.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:`220`px; left:`50`px; width:`175`px; height:`150`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox2 {position:absolute; top:`220`px; left:`235`px; width:`510`px; height:`150`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox3 {position:absolute; top:`380`px; left:`50`px; width:`435`px; height:`80`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox4 {position:absolute; top:`470`px; left:`50`px; width:`175`px; height:`350`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox5 {position:absolute; top:`470`px; left:`235`px; width:`250`px; height:`350`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox6 {position:absolute; top:`380`px; left:`495`px; width:`250`px; height:`215`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox7 {position:absolute; top:`605`px; left:`495`px; width:`250`px; height:`215`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox8 {position:absolute; top:`220`px; left:`755`px; width:`200`px; height:`600`px; background-color:black; border:1px solid; border-color:white; z-index:3;} .KhAkBox9 {position:absolute; top:`830`px; left:`50`px; width:`905`px; height:`165`px; 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 ^^
^^ With Contents, Friends & Comments ^^
Profile 2.0 Friends Module Profile 2.0 Comments Module

Importing Basic Info Module
Zum Schluß noch ein paar nützliche Anmerkungen und Tipps: And last but not least, just a few helpful explanations and tips:
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

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

2008-10-30T00:35:00.001-07:00

Wichtig Zu Wissen!

Wenn du bereits mit dem Myspace Designer 1.0 gearbeitet hast, musst du erst in Design-Sammelung den 'Neu anfangen' Button anklicken und die Änderungen verwerfen, bevor du mit einem externen code den gewünschten Effekt erzielen kannst.

Important To Know!

If you have already used the Myspace Profile Editor 1.0, you must first click on the 'Start Over' button in Theme Library and Lose Changes then, you can achieve the wished effect with an external code.

HowTos & Stuffs ☆

Profile Styling ☆

Basic ☆

Profile Sections ☆

Tables Styling ☆

Tips & Downloads ☆
Online Editors
Image Animation
Image & Video
Resize Images
Web Browser
Firefox 2
Firefox 3 de
Firefox 3 us
Free System Cleaner
Crap Cleaner de
Crap Cleaner us
Free Image Editors
IrfanView
Paint.NET
Flash Player Plugin
Adobe Flash Player

2008-09-23T22:18:00.000-07:00

Myspace Page Themes

NEW HOME SKIN

Um das Design der "Mein Myspace" Seite zu ändern:

Log dich in MySpace ein.
Klicke unter ProfilBild Tabelle auf "Neue Ansicht".
Klicke Oben Rechts auf "Design Ändern".
Klicke auf das "Design" deiner Wahl.
Klicke auf "Speichern" Button um Design zu speichern.

To change the Theme of your "Home" Page:

Log into MySpace.
Click on "New Home Skin" below your Profile Pic Table.
Click on "Page Themes" top right corner of the page.
Click on "Design" of your choice.
Click on "Save" button to save the theme.

CLASSIC VIEW

Um zum "Klassischen Ansicht" zurück zu kommen:

Log dich in MySpace ein.
Klicke Oben Rechts auf "Design Ändern".
Klicke Oben Links auf "Zurück Zur Klassischen Ansicht".

To back to "Classic View":

Log into MySpace.
Click on "Page Themes" at the top right corner of the page.
Click on "Back To Classic View" at the top left corner of the page.

2008-09-23T22:15:00.002-07:00

Myspace Profile Editor

Der hauseigene MySpace Profil Editor (Profile Designer) beinhaltet einige Designs und ist mit einigen Optionen ausgestattet, womit du dein Profil gestalten kannst.
Das merkwürdige ist aber, daß die Version in Myspace.us eine "Beta" ist und in Myspace.de nicht!
Fakt ist aber, so lange der Profil Editor eine Beta-Version Eine Beta-Version ist die erste Version eines Programms in der Testphase, das vom Hersteller zu Testzwecken veröffentlicht wird, in der Hoffnung, dass die Benutzer dem Programmierer die Fehler mitteilen, so dass dann die gefundenen Fehler vor dem Release beseitigt werden können. ist, wirst du damit Probleme oder Unstimmigkeiten haben können.
Die häufigsten Fehler, die dann auftreten, sind:
Der Hintergrund erscheint nicht, Kontakt-Tabelle bleibt unsichtbar und der Text ist unformatierbar. Danach hat man nur noch die Möglichkeit alles zu löschen, was man bisher mit dem Designer gemacht hat.

Denk aber daran:

Bevor du den Myspace Profil Designer benutzt, solltest du alle externe Codes, die du bereits
manuell eingefügt hast, löschen.
Nachdem du den Myspace Designer benutzt hast, kannst du keinen externen Code mehr einfügen.
Externe Codes werden erst dann wieder bei dir funktionieren, wenn du den Code von Profile Designer gelöscht hast (HowTo folgt).

MySpace Profile Editor (Profile Themes Beta) contains several themes, and provides options which you can use to personalize your MySpace Profile.
But, until the Profil Editor is a Beta Version A Beta version is a program in the testing phase which is published and probably has several unreported problems. During this point, the developers will collect feedback from users about the product's usability, so that they can get rid of the errors before it is deemed ready for release. , you will have relating problems including discrepancies with it.
The most frequent errors after using the Editor are:
Your background does not appear, your contact table remains invisible, and the text is unformatable. The only real choice you have, would be to clear out what you have already done with the 'Editor'.

Keep this in mind:

Before you use the Myspace Profile Editor, you should delete all external codes which you have already inserted manually.
If you have already used the MySpace Profile Editor, you won't be able to use any external codes before you clean up the attached code of Myspace Profile Editor (HowTo follows).

Clearing Out Editor's Code
Um den Code von "Myspace Profil Editor" zu löschen: Log dich in MySpace ein. Klicke neben ProfilBild auf "Profil Bearbeiten". Profil Designer >> Design-Sammelung Neu beginnen >> Änderungen Verwerfen Trotzdem Fortfahren To clear out the "Myspace Profile Editor" Code: Log into MySpace. Click on "Edit Profile" next to your Profile Pic. Profile Themes >> Theme Library Start Over >> Lose Changes Continue Anyway

2008-09-17T23:45:00.001-07:00

2008-09-09T20:46:00.000-07:00

Creating Simple 1.0 Overlay Layout

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:`80`px; left:`50`px; width:`175`px; height:`150`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox2 {position:absolute; top:`80`px; left:`235`px; width:`510`px; height:`150`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox3 {position:absolute; top:`240`px; left:`50`px; width:`435`px; height:`80`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox4 {position:absolute; top:`330`px; left:`50`px; width:`175`px; height:`350`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox5 {position:absolute; top:`330`px; left:`235`px; width:`250`px; height:`350`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox6 {position:absolute; top:`240`px; left:`495`px; width:`250`px; height:`215`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox7 {position:absolute; top:`465`px; left:`495`px; width:`250`px; height:`215`px; 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 ^^

Importing Sections
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>
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
<style> .KhAk {Hide Friends Space} table.friendSpace {display:none;} </style>	↔	`Friends Space`
<style> .KhAk {Hide Friend Comments} table.friendsComments {display:none;} </style>	↔	`Friend Comments`
<style> .KhAk {Hide Mini Player} table table div {display:none;} table table table div, table table td.text div { display:inline !important;} </style>	↔	`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.

2008-09-07T18:23:00.000-07:00

Creating Simple Artist 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:`10`px; left:`20`px; width:`285`px; height:`50`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox2 {position:absolute; top:`75`px; left:`20`px; width:`285`px; height:`275`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox3 {position:absolute; top:`365`px; left:`20`px; width:`285`px; height:`60`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox4 {position:absolute; top:`450`px; left:`20`px; width:`285`px; height:`250`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox5 {position:absolute; top:`450`px; left:`325`px; width:`215`px; height:`250`px; background-color:black !important; border:1px solid; border-color:white; z-index:3;} .KhAkBox6 {position:absolute; top:`450`px; left:`560`px; width:`215`px; height:`250`px; 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 ^^

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.

.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.

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.

.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

2008-08-17T21:28:00.001-07:00

CSS Image Rollover

° ↓ Introduction: ↓ °

Häufig sieht man in einer Webseite ein Bild, das durch ein anderes Bild ersetzt wird, wenn die Maus darüber gerollt wird.
Hier sind zwei einfache CSS Tutorials, wie das auf Myspace zu realisieren ist:

Often, you see in a web page an image which is replaced with another image if the mouse rolled over it.
Below are two simple CSS tutorials to how it is realized on myspace:

° ↓ Example: ↓ °

- Fahre mit der Maus über das Bild um den Effekt zu sehen.

- Hover your mouse over the image to see the effect.

° ↓ Notice: ↓ °

Stelle fest, dass du "Zwei Bilder" mit exakt "Derselben Größe" ausgewählt hast und lade sie hoch.

Make sure that you selected "Two Images" with exactly the "Same Size", and upload them on a hosting site.

° ↓ Like: ↓ °

Image I

Image II

°"Image Hosting Sites"°

°photobucket.com°

°tinypic.com°

° ↓ Code I: ↓ °

° ↓ Code II: ↓ °

° ↓ Note: ↓ °

☼- Ändere die Breite/Höhe in der Größe deines Bildes.
☼- Ersetze die "Image URLs" (I/II) durch deine eigene URLs.
☼- das Bild wird Klickbar sein, also ersetzte auch "Your Page URL" mit
der URL deiner Wahl (Home Page etc.).

☼- Ändere die Zahl "1" ODER "2" in 3, 4, und 5 etc.,
wenn du vorhast multiple Bilder
auf deinem profil einzufügen.

☼- Change the width/height to the size of your Image.
☼- Replace the "Image URLs" (I/II) with your own URLs.
☼- The image will be clickable, and you can replace "Your Page URL"
with your own (Home Page etc.).

☼- If you want to add "different" Images at the multiple
places on your profile:
Add the entire code BUT change:
the class numbers "1" OR "2" to 3, 4, and 5 etc.

2008-05-04T07:22:00.001-07:00

CSS Hack: IE (6) Underscore Hack

Um die Darstellungs-Problematik in verschiedenen Browsern zu umgehen, kommt man ohne Tricks nicht mehr aus! Dabei ist dem Internet Explorer besondere Aufmerksamkeit zu schenken.
- Nun da gibt es genügend Mittel und Wege aber wir befassen uns hier nur mit dem "Unterstrich-Hack" von Petr Pisar.
Er hat unterallem herausgefunden, daß ein Unterstrich (_) vor CSS Befehlen (validiert zwar nicht das CSS) dafür sorgt, daß die Befehle von allen Browsern ignoriert aber von Internet Explorer richtig erkannt und umgesetzt werden.

In Netscape 4.x werden aber damit alle CSS-Befehle im selben Selektor scheitern.
MacIE hat diesen/e fehler/Eigenschaft nicht.

Beispiel:

Kopiere diesen Code in "Über Mich" und schau dir den Unterschied in FF und IE an.

<style> .MeinTest { color: red; _color: blue; } </style> <p class="MeinTest"> Das Ist Ein Unterstrich-Hack Test </p>

- Wir machen uns diese Eigenschaft zunutze und z.B. positionieren einen Banner,
der in Internet Explorer völlig deplatziert dargestellt wird.
Also wird in den code, innerhalb der geschweiften Klammern des Selectors, dementsprechend zusätzliche Angaben extra für IE eingefügt.

To have the same look in different browsers, sometimes it is necessary to use the CSS Hack. Thereby, the special attention is to be given to the Internet Explore.
We concern here only with "underscore hack" from Petr Pisar.
He found out that Internet Explorer ignores an Underscore (_) at the beginning of any CSS property name, interpreting the declaration as if the underscore wasn’t there. Other browsers do not recognise the property and ignore the declaration.

However, in Netscape 4.x it will fail all CSS orders in the same Selektor.
MacIE doesn't have this bug/feature.

Example:

Copy this code in your "About Me" and, look the difference between FF and IE.


<style> 

.MyTest {
color: red;
_color: blue;
} 

</style> 

<p class="MyTest"> This Is An Underscore Hack Test </p>

- The underscore hack can be used for example to position a banner which is completely displaced in Internet Explore.
Accordingly, we insert for IE additional properties in the code within the braces of the same selector.

The CSS syntax: a selector, a property and a value:
selector {property: value;}
EXAMPLES
Other Browsers	Internet Explorer
property: value;	`_`property: value;
`background: green;`	`_background: red;`
`background-attachment: fixed;`	`_overflow: scroll;`
`position: fixed;`	`_position: absolute;`
`width: number`px`;`	`_width: number`px`;`
`height: number`px`;`	`_height: number`px`;`
`padding: number`px`;`	`_padding: number`px`;`
`top: -/+number`px`;`	`_top: -/+number`px`;`
`left: -/+number`px`;`	`_left: -/+number`px`;`
`margin-top: -/+number`px`;`	`_margin-top: -/+number`px`;`
`margin-left: -/+number`px`;`	`_margin-left: -/+number`px`;`

2008-04-18T16:50:00.001-07:00

Construction Of HTML Tables

" HTML BASIC TABLES "

" HTML CODE " " OUTPUT / DESCRIPTION "


<table border="1" align="center"> 


<caption>Table Caption</caption> 

  <tr> 

    <th>Title 1</th> 

    <th>Title 2</th> 

  </tr> 

  <tr> 

    <td>Row 1, Cell 1</td> 

    <td>Row 1, Cell 2</td> 

  </tr> 

  <tr> 

    <td>Row 2, Cell 1</td> 

    <td>Row 2, Cell 2</td> 

  </tr> 

</table>

Table Caption
Title 1	Title 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

" Table with 3 rows and 2 cells "

Each table starts with a table tag.
Each table row starts with a tr tag.
Each table header starts with a th tag.
Each table data starts with a td tag.

To display a table with borders, you will have to use the
"border attribute".
To hide borders use the number "0".

To align tables use the "align attribute".
Values are left/center/right.

To have a table with background color, use the
"bgcolor attribute" (bgcolor="blue").
The attribute can be also used in tr/th/td tags.
But, you can use styles instead
(style="background-color:blue;").


<table border="1"> 

  
  <colgroup> 

    <col width="80"> 

    <col width="100"> 

    <col width="120"> 

  </colgroup>  


  <tr> 

    <th>Title 1</th> 

    <th>Title 2</th> 

    <th>Title 3</th> 

  </tr> 

  <tr> 

    <td>Row 1, Cell 1</td> 

    <td>Row 1, Cell 2</td> 

    <td>Row 1, Cell 3</td> 

  </tr> 

  <tr> 

    <td>Row 2, Cell 1</td> 

    <td>Row 2, Cell 2</td> 

    <td style=" background-color:221711; border:1px orange solid; color:orange;"> Row 2, Cell 3</td> 

  </tr> 

</table>

Title 1	Title 2	Title 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

" Table with 3 rows and 3 cells "

The example shows a colgroup that has three columns of DIFFERENT widths.

In HTML you can use tables to create borders around a text.
But, with the CSS border properties you can create borders with nice effects, and it can be applied to any ELEMENT (th/td etc.).
You can also add backgrounds and, format your text in the CELLS.

°Border-Style And Text Properties°
°HTML 6-Digit Hex Color Codes°


<table border="1"> 

  
  <colgroup width="100" span="3">
  </colgroup>  

  <tr> 

    <th>Title 1</th> 

    <th>Title 2</th> 

    <th>Title 3</th> 

  </tr> 

  <tr> 

    <td>Row 1, Cell 1</td> 

    <td> &nbsp; </td> 

    <td>Row 1, Cell 3</td> 

  </tr> 

  <tr> 

    <td>Row 2, Cell 1</td> 

    <td>Row 2, Cell 2</td> 

    <td>Row 2, Cell 3</td> 

  </tr> 

</table>

Title 1	Title 2	Title 3
Row 1, Cell 1		Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

" Table with 3 rows and 3 cells "

The example shows a colgroup that has three columns with the SAME width.

To have empty Cells in a Table:
Add a non-breaking space ( ) to the data cells you wish.

Source:

°w3schools.com°
°selfhtml.org°

Myspace Tables:
°Create New Sections And Tables°


" TAG "	" DESCRIPTION "
<table>	Defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables.
<caption>	Defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table.
<colgroup>	Defines groups of table columns (column group). The colgroup element is an empty element that contains col tags or attributes only.
<col>	Defines the attribute values for one or more columns in a table (column). The col element is an empty element that contains attributes only. Use this element when you want to specify different attribute values to a column inside a colgroup.
<tr>	Defines a table row (table row). This element goes inside the table element.
<th>	Defines a table header cell in a table (table header). The text within the th element usually renders in bold.
<td>	Defines a table cell (table data). To create columns, you must specify td elements within a tr element. A data cell can contain text, images, lists, paragraphs, forms, tables, etc.


" TAG "	" BESCHREIBUNG "
<table>	Leitet eine Tabelle ein (table = Tabelle). In einem <table>-Tag können Tabellenköpfe, Tabellenzeilen, Tabellendaten, und andere Tabellen eingefügt werden.
<caption>	Definiert eine Tabellenüberschrift. Das Element muss unmittelbar nach dem einleitenden <table>-Tag notiert werden. Es wird zenteriert über die Tabelle dargestellt und kann nur einmal angegeben werden.
<colgroup>	Damit wird eine Vorab-Definition der Tabellenspalten eingeleitet (column group). Das colgroup Element ist ein leeres Element und beinhaltet nur col-Tags oder Attribute.
<col>	Definiert die Attributen-werte für eine oder mehrere Spalten in einer Tabelle (column). Das col Element ist ein leeres Element und beinhaltet nur Attribute. Das erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw.
<tr>	Leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Das Element wird innerhalb einem Tabellen-Element eingefügt.
<th>	Leitet eine Kopfzelle ein (th = table header = Tabellenkopf). Der Text in einem th Element wird immer in Fett-Schrift angezeigt.
<td>	Leitet eine normale Datenzelle (td = table data = Tabellendaten). In einer Tabellenzelle können beliebige Elemente stehen, d.h. Text, andere Block- und Inline-Elemente und sogar eine weitere Tabelle.

Cellspacing And Cellpadding
To give your table cells a little more breathing room, use `CELLSPACING` and `CELLPADDING`.
" Cellspacing " " Zellenabstand "	" Cellpadding " " Zelleninnenabstand "
`CELLSPACING` controls the space between table cells, expressed in pixels. Mit `CELLSPACING` wird den Abstand der Zellen untereinander in Pixeln geregelt.	`CELLPADDING` sets the amount of space between the contents of the cell and the cell wall, expressed in pixels. Mit `CELLPADDING` wird den Innenabstand einer Zelle geregelt, also den Abstand zwischen Zellenrand und Zelleninhalt in Pixeln.
<TABLE BORDER="1" CELLSPACING="10"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>	<TABLE BORDER="1" CELLPADDING="10"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

2008-04-14T19:20:00.001-07:00

KhAk's
Design

C reate HTML/CSS DIV Container

.:*K*:._.:*h*:._.:*A*:._.:*k*:._.:*s*:._.:*D*:._.:*e*:._.:*s*:._.:*i*:._.:*n*:.

" Using <div> Tag To Inserting/Aligning/Formating/Positioning Contents "

Das HTML-Tag <div> ist ein Container und kann mehrere Elemente wie Text, Grafiken, Tabellen, andere DIVs usw., in einen gemeinsamen Bereich einschließen, positionieren, und allgemeine Elemente für Textbereiche mit der Hilfe von CSS nach Wunsch formatieren. Dazu werden die Attribute class, id und style benutzt.
- Das HTML-Tag <div> läßt sich auch durch <p> oder für Inline-Bereiche durch <span> ersetzen.

The <div> tag is a container and defines a division/section. It can contain and position every HTML element, or also, several elements such as text; graphics; tables; other DIVs; etc. The general text elements can be formatted as we wish with CSS rules.
- Use the <div> tag to group block-elements to format them with class, id and styles.
- The HTML tag <div> can be also replaced with <p> or for inline elements with <span>.

" Aligning Text or Contents "
" HTML "	" Value "
<div id="KhAkDiv1" align="`center`"> `Your Text/Image Tag/Contents Here` </div>	(div = division = Bereich) `left right center justify`
align="`center`" Aligning The DIV. °Adding Images And Videos°

" Formating Text Paragraph With Styles "
" HTML/ INLINE STYLES (CSS) "	" CSS - HTML "
<div id="KhAkDiv2" align="`center`" style=" color:`Your Text Color`; font-size:`10`px; font-family:`sans-serif`;"> `Your Text Paragraph Here` </div>	<style> .K {Formating Text Paragraph} .KhAkDiv3 { color:`Your Text Color`; font-size:`10`px; font-family:`sans-serif`; } </style> <div class="KhAkDiv3" align="`center`"> `Your Text Paragraph Here` </div>
Change the "`colored values`" to format your Text. °HTML Hexadecimal Color Code°

" Create A DIV Container " " With Width/Height, Background And Borders "
" HTML/ INLINE STYLES (CSS) "	" CSS - HTML "
<div id="KhAkDiv4" align="`center`" style="width:`250`px; height:`100`px; background-color: `Your Color`; background-image:url(`Your Image URL`); border:`2`px `red solid`; color:`Your Text Color`; font-size:`10`px; font-family:`sans-serif`; text-align:`center`;"> `Your Text/Image Tag/Contents Here` </div>	<style> .K {Creating Div} .KhAkDiv5 { width:`250`px; height:`100`px; background-color: `Your Color`; background-image:url(`Your Image URL`); border:`2`px `red solid`; color:`Your Text Color`; font-size:`10`px; font-family:`sans-serif`; text-align:`center`; } </style> <div class="KhAkDiv5" align="`center`"> `Your Text/Image Tag/Contents Here` </div>
Change the "`colored values`" to sweet your needs. text-align:`center`; Aligning The Text Paragraph In The DIV-Box. °Background Properties° °CSS Border And Text Properties°

" CSS DIV Container: POSITION "

" Einfache Beispiele Um DIVs Auf'm Profil (absolute) Zu Positionieren (top - left)"
" Simple Examples Of (absolute) Positioning A DIV On The Profile (top - left) "

" CSS - HTML CODE " " DESCRIPTION "


<h2> Header 2 </h2> <br> 

<img src="YOUR IMAGE URL"> <br> 

TEXT TEXT TEXT

</div>

Inhalt der Divs wird in Obere linke Ecke der Seite angezeig.
`left: top:`	Regelt den Abstand nach links (zum linken Browserrand). Regelt den Abstand nach oben (zum oberen Browserrand).

The contents Will be shown on the top left corner of your Page.
`left: top:`	Sets the Distance of elements to the left side of the page. Sets the Distance of elements to the top of the page.


<h2> Header 2 </h2> <br> 

<img src="YOUR IMAGE URL"> <br> 

TEXT TEXT TEXT

</div>

Inhalt der Divs wird in Obere rechte Ecke der Seite angezeig.
`right:`	Regelt den Abstand nach rechts (zum rechten Browserrand).

The contents will be shown on the top right corner of your Page.
`right:`	Sets the Distance of elements to the right side of the page.

Um den DIV zu positionieren, passe die zahlen von "left und top" an.
To positioning the DIV adjust the "left and top" Numbers.

°CSS position Property°
°CSS Positionsart: position°

" DIV Container Auf'm Profil (absolute) Positionieren: (-/+) MARGIN / Z-INDEX (Layer) "
" (absolute) Positioning A DIV Container On The Profile: (-/+) MARGIN / Z-INDEX (Layer) "

" HTML/ INLINE STYLES (CSS) " " CSS - HTML "

Your Text/Image Tag/Contents Here

</div>

<div class="KhAkDiv9">
Your Text/Image Tag/Contents Here
</div>

Um das DIV zu positionieren, Pass die "`margin-left` und `top`" Zahlen an.
`left:50%;`	Damit legt man einen Punkt in der Seitenmitte fest (bei jeder Auflösung). Und mit negative od. positive margin verschiebt man das Element nach links or rechts.
`margin-left:`	Regelt den Abstand zum linken Nachbarn Element oder linken Seitenrand. `Oder hier in diesem Fall von der Seittenmitte aus.` Negative/Positive Werte sind erlaubt (Wenn sich Elemente überlappen sollen).
`z-index:`	Wenn sich mehrere Layer (<div>-Bereiche) teilweise/ganz überlappen sollen, wird die Reihenfolge der einzelnen Layer mit z-index festlegelegt.

To positioning the DIV adjust the "`margin-left` and `top`" Numbers.
`left:50%;`	By setting the CSS left to 50% we put the wrapper left edge to the center of the screen, and then the negative or positive margin will move it more to the left or right.
`margin-left:`	Sets the Distance of element to the neighbour element or left side of the page. `Or hier from the center of the screen.` Negative/Positive values are allowed to overlap the neighbour element.
`z-index:`	Sets the stack order of elements. An element with greater stack order is always in front of another element with lower stack order.

" DIV Container - Überschneidungen " " DIV Container - Overlapping "
" HTML/ INLINE STYLES (CSS) - CODE "	" OUTPUT / EXAMPLE "
<div id="`KhAkDiv10`" style="position:absolute; width:200px; height:100px; `z-index:2`; background-color: 0D6D6F; border: 1px solid #8FD8D8; left: 450px; top: 170px"> KhAkDiv10 z-index:2; </div> <div id="`KhAkDiv11`" style="position:absolute; width:200px; height:100px; `z-index:1`; background-color: 119194; border: 1px solid #AEEEEE; left: 550px; top: 220px"> KhAkDiv11 z-index:1; </div>	KhAkDiv10 z-index:2; KhAkDiv11 z-index:1;

" CSS Eigenschaft: overflow "
" CSS overflow Property "

" DESCRIPTION " " POSSIBLE VALUES "

overflow: auto;
Mit dem CSS Eigenschaft "overflow" kannst du aus jedem Container ein Scrollbarer Box machen. Sie legt fest, wie ein Bereich oder ein Element, der innerhalb eines anderen Elements definiert wird, angezeigt werden soll. Z.B. wenn der Inhalt des inneren Elements großer ist, als die Abmessungen des <DIV>-Bereichs.

overflow: auto;

The overflow property sets what happens if the content of an element overflow its area. The overflow property decides what to do if the content inside an element exceeds the given width and height properties. Eg. in a </div>-Container.

`visible:`	Standard. Der übergroße Inhalt wird angezeigt.
`hidden:`	Der übergroße Inhalt wird abgeschnitten und nicht angezeigt.
`scroll:`	Der übergroße Inhalt wird abgeschnitten. Das übergeordnete Element wird mit Scrollbalken angezeigt, um den Inhalt zu scrollen.
`auto:`	Wenn der Inhalt großer ist als die Abmessungen Des übergeordneten Elements, erscheinen Scrollbalken um den Rest des Inhalts anzuzeigen.

`visible:`	Default. The content is not clipped.
`hidden:`	The content is clipped, but the browser does not display a scroll-bar to see the rest of the content.
`scroll:`	The content is clipped, but the browser displays a scroll-bar to see the rest of the content.
`auto:`	If the content is clipped, the browser should display a scroll-bar to see the rest of the content.

★°overflow-x, overflow-y Tests°★

Suggestion
°CSS Hack: The IE Underscore Hack°
°KhAk's Design: Create MySpace DIV Overlay Layout°
°MySpace DIV overlay° °Div Overlay Tutorial°	°Scrolling Text And Images° °Howto Create Scroll Boxes°
CSS "white-space" Property °www.css4you.de° °www.w3schools.com°

Bg Nostalgia

2008-02-20T18:40:00.000-08:00