DIV layers, .... Options

[gtshawtie]

okay, i kinda understand how to do DIV layers. i`ve made about 6 of em ... im just confused about how i get my DIV to look like THIS with the 2 white columns and everything. im not looking for someone to do it for me , i just want to know if there is a tutorial for this? im sorry if its already on the site , im just confused about where i should start to achieve a layout like that.

[GREASEbaby]

Yes, there is a tutorial on the site. Here it is.

It's okay, you don't need to be shy, a lot of people here are very willing to help

[gtshawtie]

thank you.
thats the code that i used b4.
it`s just that i have no clue how to make the columns.
i asked the girl how she did it and she said she made them on adobe ps7.
i juss have no cluse how to do it on there...im an ameture at this lol i hope you dont get annoyed cause i really appreciate all the help.

[*This Confession*]

i can't see her layout
but im guessing since she used photoshop
she has a bg that shows tables and stuff

do you even have photoshop or anything to make a layout with?

and the tutorial that I own yourr face gave you would help a ton with coding.

[gtshawtie]

yes i do ...i have Adobe Photoshop 7.0.
i dont know how to make the colums on there tho

[GREASEbaby]

Could you provide a screenshot of her layout? We can't really know what you're talking about unless you give us an example..

[gtshawtie]

*sorry .
example:

[GREASEbaby]

Here's what I would do:

In photoshop, make the background with the columns on it. Then head over to Myspace Requests and ask somebody to make it for you.

Then ask the person who does to explain it to you step by step.

[gtshawtie]

okay ... i think i can figure out how to make the layout now... the only questions i have now are

1. are the words on her colums DIVS?
2. do you know what the WxH should be?

& thank you for your advice if this doesnt work ill ask someone , i just hate not knowing how to do things for myself so i wanna try first.

[*This Confession*]

if you request it
make sure you provide a lot of resources or a very good discription of what you what the graphics to look like :]

w&h
anything you want it to be..

usually around
800 x 600?
or any height really..

and yes
where her font is
is probably the div for the coding..

unless she just typed it all in the graphics...

[gtshawtie]

thank you.
aiight another question lol im sorry im just desperate to make my own instead of having to depend on someone else.
i plan on makin everything in one for my layout . i want it to be set up like the example i showed you and everything. i decided im going to make my banner and the colums all in one document in adobe ... so when i put this onto my MS do i put it as my backround or as a DIV. thats when it gets confusing for me.

[*This Confession*]

http://www.createblog.com/forums/index.php?showtopic=97397

go there once again

and i think its like the first post
you need to put in like that more than likely

Here's a simple Myspace div overlay.

For your CSS, use one of the CSS stylesheets already provided. Put that in your "About Me".

For your content, you can use this. Put it in "Who I'd Like to Meet":

CODE

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;"><center>
lalalalala this is your content!
</div>

For the image, you only need to change the width and the height to fit your image.

For the content, you can change the class of the div, the left alignment, top alignment, width, height, and overflow. If you want the div to have a scrollbar, use this div code. Open the image in Microsoft Paint to get the alignments.



If I wanted the div to begin where the black dot is, I would use the paintbrush tool and place it where I want the div to begin. Keep the mouse there, and look in the bottom right corner for two numbers separated by a comma. The first number is your left alignment, and the second is your top.

If I wanted a div that continues down the page until it runs out of content, this would be my div code:

CODE

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:100%; overflow: visible;"><center>
lalalalala this is your content!
</div>

The only things that are changed are the height and overflow. Now all you need to worry about is the left alignment, top alignment, and width.

There you have it.

The following was contributed by tcunningham1589.


Description:

This code is used to make your simple div on your profile, whether you are using it for content, or a ghetto way to cover somthing up.
Code:

{ code used in INTERESTS section }
<style>
.div1 {
background-color:000000; color:000000;
border:0px solid; border-color:silver;
width:400px; height:100px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-250px; margin-top:150px;
visibility:visible;}
</style>

{ code used in MUSIC section }
<div class="div1">
content
</div>

*everything in bold is changeable

Positioning

Code:
quick lesson on "position: relative"
top: -45px = moves up 45px
top: 45px = moves down 45px
left: -15px = moves left 15px
left: 15px = moves right 15px

quick lesson on "position: absolute"
top: 0% = moves to top of page
top: 50% = moves to middle of page
top: 100% = moves to bottem of page
left: 0% = moves to left of page
left: 50% = moves to center of page
left: 100% = moves to right of page
margin-left: -15px = moves left 15px
margin-left: 15px = moves right 15px
margin-top: 45px = moves down 45px
margin-top: -45px = moves up 45px

[gtshawtie]

thank you .
one way or another ill figure it out.