[b]DONT POST WITH LESS THAN 3 WORDS IN MY THREAD![/b] [b]Mods..?[/b] Can u check if der's a mistake here.... Im reli not that good with it... Ever wonder ader blogs look like the banner and body are overlapping..? and the sidebar seems longer...? juz lyk my [url=http://bbalonne.blogs.friendster.com/my_gallery/]blog[/url] or put slides in the banner like in [url=http://aprilkiz.fileave.com/samplelayout/samplepreview.html]here[/url]..? hehe.. fine.. I'll share now... [b] Before doing this one[/b], be sure that your layout is already set for the div layers.. Dont know yet..? [url=http://theftalk.com/t25257-Overlapping-banner-body-tutorial-some-add-ons-%28updated%29.html]Proceed here[/url] [b]First, let us study using Div layers[/b]... If you already tried to use overlay profile, this one will be easier to learn... but if you dont have any background in html, hmnn.. juz try it... not that really hard... [b]What is a div..?[/b] The <div> tag defines a division/section in a document that can be positioned anywer in your page using absolute positioning. It can contain images, links, text, and etc... [b]Sample Div block[/b] [quote]<div [b]id[/b]=layer1 style="[b]position[/b]:absolute; [b]top[/b]:20px; [b]left[/b]:20px; [b]width[/b]:300px;[b] height[/b]:300px; [b]padding[/b]:5px; [b]border[/b]: #000000 2px solid; [b]background-color[/b]:#000000; [b]background-image[/b]:url(yourfilename.gif); [b]text-align[/b]:justify; [b]font-family[/b]:Century Gothic; [b]font-size[/b]:12px;[b]Font-color[/b]:#ffffff;"> [b]Content goes here [/b] </div>[/quote] [b]Now, let us define d variables...[/b] [spoiler][b]Id:[/b] This is a unique name for ur element; juz to organize ur layers if u have lots of it.. [b]Top:[/b] This gives the position of the div block from top of the page [b]Left:[/b] This gives the position of the div block from left of the page [b]Padding:[/b] This is the margin of ur element from the borders of ur div; very important in putting text in ur div elements.. U can even specify it like [b]padding-left:2px; padding-right:2px[/b].. and etc.. [b]Border:[/b] Specify the border for ur div tag.. change d color, size, and style [b]Background-color:[/b] Background color or ur div [b]Background-image:[/b]The background image of ur div.. [b]Width:[/b] Specifies the width of your div element [b]Height:[/b] Specifies the height of your div element [b]Font-family:[/b] The font style you want for ur text [b]Font-size:[/b] The font size you want for ur text [b]Font-color:[/b] The font size you want for ur text [b]Position:[/b] can be [b]absolute[/b] or [b]relative[/b].. dont be confused wid these two... u will use[b] absolute[/b] if u will position ur div elements on a specific point.. and use [b]relative[/b] if u will move a div element from its original position... [b]In friendster blogs...? Use absolute in putting div elements in the banner, and use relative if putting divs in the sidebar... k...?[i] dat was my mistake before[/i].. [/b] hope this image helps: [img]http://i25.tinypic.com/313m77o.png[/img][/spoiler] [b]Making div elements scroll...? [/b] all u have to do is add [b]overflow:auto;[/b] in the styles.... for example: [quote]<div id="sayonara" style="position: absolute; width: 220px; height: 150px;left: 250px; top:50px; [b]overflow:auto;[/b]"> Ur Content </div>[/quote] Pretty clear...? hmn.. now, let's proceed to the next step.... [b]Inserting div layers in banner[/b] [b]1.[/b] First, remove this code in ur css... [quote]/*remove banner */ #banner-inner { /*logo*/display:none;visibility:hidden;} .friendster-banner { /*logo*/display:none;} .friendster-banner-nav-wrapper { /*navigation*/display:none;} .friendster-banner-nav { /*navigation*/display:none;}[/quote] Can u see this code too..? *remove the [b]bold[/b] part* only the bold one.. [quote]/* -- Hide the Top Banner Texts (Blog Name and Catchphrase) -- */ #banner h1[b], #banner h2[/b] { display:none; }[/quote] [b]2.[/b] Next step: is juz simple paste ur div elements in the blog catchphrase/description... Hit save, then republish.... [quote][b]Note:[/b] Dont put unnecessary text on ur catchphrase if ur using this one.. coz it'll definitely appear.. juz add the stuffs u wanna show...[/quote] [b]Here's the sample div code[/b] on this [url=http://aprilkiz.fileave.com/samplelayout/samplepreview.html]sample layout[/url]... i ddnt use background images and margins.. all u have to do is add those variables.. [spoiler][quote]<div id="sayonara" style="position: absolute; width: 220px; height: 150px;left: 250px; top:50px; overflow:auto; text-align:justify; font-family:Century Gothic; "> <font color="#ffffff" size="1" > [b]The text content[/b] </div> <div id="slide" style="position:absolute; top: 63px; left:53px; height: 131px; width: 168px;"> [b]The slide content[/b] </div>[/quote] [/spoiler] Pretty easy huh...? Post ur questions now...

Last edited by cUtiEshika (2008-05-19 19:15:22)