KhAk - Design And Style Your Myspace 1.0

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°
© Designed By KhAk

°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 "

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.

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°