Div Layout II

[Melfina]

Description: Second part of the div layout tutorial. Final touches & coding.
Tutorial URL: http://celestial-star.net/tutorials/35-div-layout-ii/

You may comment this tutorial here or ask for help.

[ems]

Hi
i have been having troubles following this step of div layer coding that Melfina has made

i dotn understand this part!!
5. We need the boxes to expand with the text and content of your page, so we need to put a background image. With Photoshop, right click on the Rectangular marquee tool and select single row marquee tool. Click on the bottom of the layout psd. Go to Image > Crop and File > Save for web. Save it as a 60 quality JPG and name it background.jpg (save it on the images folder of the layout). Do not save the PSD now eh?

is the psd layer the background layer or....
and whenvr i do it, it doesnt work!!
can anyone give me a screeshot of where exactly to click???
thanks!! 

ps i would upload a live version for u to see, but my site isnt published yet so..

[Melfina]

Hi,

I merged your topic with this one, as from now on help on each tutorial will be given here.
Try checking step number 8 of this tutorial:
http://celestial-star.net/tutorials/38-table-layout-div-style/

There you can also see a screenshot of it. If you still can't understand it, I'll try and explain it better.

[ems]

OMG thank u sooo much
u are amazing
it works...

how did u learn all these stuff anyway>

[ems]

how do u make a table in the boxes?

[Blackstone]

What do you mean?

[nicolee]

I'm having a problem with the "Save for Web" option in Photoshop 7.
It isn't working for me.

So I was wondering is there is any other way that I could save it?
If it helps, I have Adobe Illustrator, as well as Paint Shop Pro 8 and 9, and Animation Shop 3.
I've already made my layout, and I would really like to use divs.
Any help is greatly appreciated.

[Melfina]

Yes, you may just save the image just as a JPEG and code it normally without slices. Instead of using "Save for web" use "Save as..."

You can check this tutorial for the coding:
http://celestial-star.net/tutorials/54-valid-div-layout/

[stylt]

um...i've finished everything on the tutorial but when i put the HTML in, my images don't appear on the webpage...

[fallenangel1085]

ok i feel really dumb asking this, but im only use to making iframe layouts. i have no clue how to make a div...i read tutorials on how to make them in psp 8 but they only tell me how to make the image, they dont tell me how to do the slicing and the header/footer things. i know how to make the images but no clue how to make a complete div layout, and how to code it. is there anyone who has a good detailed tutorial out there?or anythong who can maybe help me out somehow, i really want to make this on my own. if anyone can help thank you!

[Plutopia]

Sorry but I didn't understand from step 4 to 6
PLz tell me

[shunbul]

hi, i really like your tutorial a lot, and i'd like to thank you so much.

i have a tiny question about the repeat. i get why we repeat the layer and crop it (coding the layout >> step 6)... but you see the problem is here, i made my layer with some good effects, and i need it to repeat on the right too, so can you plz help me with the codings?

 


here i'll printscreen and upload the site image that i made

[katie-kate]

Copy that image that you want to repeat across the page, save it, and put this in your css:

body {background:url('image.jpg');
   repeat: repeat-x;}

Replace image.jpg with the name of your image and you're all set.

[shunbul]

 

thanks a lot! u've been a G-R-E-A-T help! i really appreciate it!

i hope to see more of ur awesome tutorials, keep up the good work!

[Ivystar]

Very Nice. =) 10/10

I love div layers. They're so easy and turn out simply beautiful.