Jump to content


* * * * - 2 votes

The Ultimate Layout Slicing and Coding Guide!


  • You cannot reply to this topic
109 replies to this topic

#51 Faken

    Pimpmaster G

  • Admin
  • 5,918 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 31 July 2005 - 10:35 PM

ChaZ, on Jul 30 2005, 09:46 AM, said:

Hey, I'm having a problem in Dreamweaver, it looks like this:

http://img230.images...reenshot0fu.jpg

Can anyone help please? Anyway, Great tutorial!
Looks like you have the background set to the table AND the middle cell.

Faken

#52 Faken

    Pimpmaster G

  • Admin
  • 5,918 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 31 July 2005 - 10:36 PM

Cloud54367, on Jul 31 2005, 11:16 PM, said:

Ok my problem is I Didnt have a constant background. So when we did the side bar I have a gap between my header and footer. What can i do I tried making a BG and making it the BG of the middle But it leaves this like 1 mm gap between the top and middle and then middle and bottom Instead of being flush. So it really looks Bad. Please help Thx
Screenshots or a link to the page you are having issues with would be VERY helpful. I'm a bit confused with your post at the moment.

Faken

#53 Cloud54367

    Young Padawan

  • Members
  • Pip
  • 45 posts

Posted 31 July 2005 - 11:02 PM

http://i3.photobucke...54367/Ublah.jpg

The middle content and side bar Middles Are both BG images not normal inporteted images But i tried making them so and the grey bar was still there

Edit by Jaymz: Fixed link :D

Edited by Jaymz, 01 August 2005 - 12:16 AM.


#54 Cloud54367

    Young Padawan

  • Members
  • Pip
  • 45 posts

Posted 01 August 2005 - 12:43 AM

That link doset work
http://i3.photobucke...54367/Ublah.jpg

does

#55 Faken

    Pimpmaster G

  • Admin
  • 5,918 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 01 August 2005 - 10:40 PM

Cloud54367, on Aug 1 2005, 01:43 AM, said:

That link doset work
http://i3.photobucke...54367/Ublah.jpg

does
Sorry... your image is so tiny I can't see a thing.

Faken

#56 Cloud54367

    Young Padawan

  • Members
  • Pip
  • 45 posts

Posted 01 August 2005 - 11:02 PM

Thanks anyway dude. But i figured it out I was leaving cell padding and spacing blank instead of putting them to 0. Geuss thats what happens when you dont look at all the screen shots. Just figure you know stuff. Anyway works good now Thanks alot. Just so hard with 56k. Ausome tutorial btw except i found it extremly hard to match up the nav bar Buttons. How did you slice them so perfectly without missing a pixel?

#57 Cloud54367

    Young Padawan

  • Members
  • Pip
  • 45 posts

Posted 01 August 2005 - 11:37 PM

Really sorry to keep bothering you but i have another problem. If you look at my layout
http://i3.photobucket.com/albums/y81/Cloud...dLayoutcopy.png
I have the content box beside the ad bar I made. Everything looks great but now i dont know how im supposed to build my nav bar boxes without messing up the ad bar. And Theres another box below it. Heres what it looks like in dream weaver
http://i3.photobucket.com/albums/y81/Cloud...tled-10copy.png

#58 edskii

    Young Padawan

  • Members
  • Pip
  • 49 posts

Posted 03 August 2005 - 10:32 AM

Lil bit of a problem for me as well, should be easy to solve though.

I'm stuck on lesson 7b - First section of STEP E.

I insert the header_nav_button_left.gif into the top left blank cell, all is ok. I then press the right arrow key so that the cursor is on the right hand side of the image, and finally change the width of the cell to '10' in the properties box...nothing happens, the cells stay the same size.

I didn't think this small problem needed a screenshot but just ask me if you need one.

Ta

Edited by edskii, 03 August 2005 - 11:27 AM.


#59 Faken

    Pimpmaster G

  • Admin
  • 5,918 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 04 August 2005 - 12:08 AM

Cloud54367, on Aug 2 2005, 12:37 AM, said:

Really sorry to keep bothering you but i have another problem. If you look at my layout
http://i3.photobucket.com/albums/y81/Cloud...dLayoutcopy.png
I have the content box beside the ad bar I made. Everything looks great but now i dont know how im supposed to build my nav bar boxes without messing up the ad bar. And Theres another box below it. Heres what it looks like in dream weaver
http://i3.photobucket.com/albums/y81/Cloud...tled-10copy.png
I'm afraid I can't explain this to you without basically going over the entire tutorial I wrote tailored to your layout. If you want me to slice it, PM me and I can do that for $35 and you can see what I did with the layout for the future. I don't mind helping people out, but from your question, I don't think you understand the concept of using tables to form your content, and I'd basically have to teach you from the ground up.

Sorry I can't help you more than that...

Faken

#60 Faken

    Pimpmaster G

  • Admin
  • 5,918 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 04 August 2005 - 12:10 AM

edskii, on Aug 3 2005, 11:32 AM, said:

Lil bit of a problem for me as well, should be easy to solve though.

I'm stuck on lesson 7b - First section of STEP E.

I insert the header_nav_button_left.gif into the top left blank cell, all is ok. I then press the right arrow key so that the cursor is on the right hand side of the image, and finally change the width of the cell to '10' in the properties box...nothing happens, the cells stay the same size.

I didn't think this small problem needed a screenshot but just ask me if you need one.

Ta
Does the cell's width change when you set the others next to it? DW is funny sometimes and doesn't size the cell properly until you do the others.

Faken

#61 edskii

    Young Padawan

  • Members
  • Pip
  • 49 posts

Posted 04 August 2005 - 12:57 PM

Nope, none of the cells change width or height, I tried all of them in the table :/

Shall I send you my index ? <3

Edited by edskii, 04 August 2005 - 12:59 PM.


#62 Maxx-Designs

    P2L Jedi

  • Members
  • PipPipPip
  • 681 posts
  • Location:Australia

Posted 07 August 2005 - 05:09 AM

hey, its a great tut and all but its so long and i cant adapt with corel i use photoshop could someone make a tutorail with just like css and div layers because right now i use iframes and this tutorial yuou made is to big to understand

Thanks

#63 Joebean

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 12 August 2005 - 11:38 AM

Wow, really great slicing guide!!! Well I'm having some trouble at lesson 6a. The other night I almost finished, but got tired and quit. Now when I started over, I tried to go to table>Split cell, but I got this.

#64 Bengo

    Young Padawan

  • Members
  • Pip
  • 80 posts
  • Interests:Art, Graphic Design, Web Design

Posted 14 August 2005 - 11:12 PM

Once again I feel like an idiot, I apologize for the pms Faken. Now, I did find a problem in the coding: http://www.slicinggu...ve/index10.html
Notice how at the bottom-left corner there is a little problem, I think you should notice it right away. The image is like, kinda messy.

#65 Donna

    Retired P2L Queen!

  • P2L Staff
  • PipPipPipPip
  • 12,330 posts
  • Gender:Female
  • Location:B.C Canada

Posted 14 August 2005 - 11:24 PM

Bengo, on Aug 15 2005, 05:12 PM, said:

Once again I feel like an idiot, I apologize for the pms Faken. Now, I did find a problem in the coding: http://www.slicinggu...ve/index10.html
Notice how at the bottom-left corner there is a little problem, I think you should notice it right away. The image is like, kinda messy.
Post a screenshot, looks ok to me

#66 Faken

    Pimpmaster G

  • Admin
  • 5,918 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 15 August 2005 - 12:13 AM

I see what you mean... good catch! I'll fix it when I get a second... probably just a slice error of 1 pixel on that bottom corner image :)

Faken

#67 Bengo

    Young Padawan

  • Members
  • Pip
  • 80 posts
  • Interests:Art, Graphic Design, Web Design

Posted 15 August 2005 - 12:15 AM

:> Score one for country Bengo!

#68 Rainman51

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 21 August 2005 - 02:42 PM

FAKEN you are the master!! :(
great tutorial! thanks to put in all the effort.

Now i have a question. How can i easely replace my main navigation buttons into rollover images? Like on mouse over : a outerglow and on click :change color.
Because they allready are gifs when you save them in photopaint :)
You cant adjust the content of the font.

Any suggestions?

maybe you can make a new awesome tutorial about that ! :)

thanx in advance

Rainman51 [BE]
www.jarno51.tk
4x Belgian Champion Pocketbike

my site is the first slicing i did! Not done with this tutorial! Have mercy please...

#69 NGPixel

    Senior Programmer

  • P2L Staff
  • PipPipPipPip
  • 1,410 posts
  • Gender:Male
  • Location:Montreal, Canada
  • Interests:Web Design : Coding : Animation

Posted 21 August 2005 - 02:58 PM

in dreamweaver, you have a behavior take make all the necessary codes for this.

#70 Scorpion

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 02 September 2005 - 07:35 PM

Hi!

I would like to thank Faken for this great tutorial he made, It is very helpful and very professional. I've done all the steps and everything successfully!

Here is my website I made all by myself : www.totalfrag.com/test/

Now that I got my website sliced and coded, what is the next thing I should do? Now I want to fix the text colors, sizes and font, but I am not sure on how to do that. Some people said CSS Stylesheet...If there is a superb tutorial out there just like www.slicingguide.com that I can use, I would be thankful.

Now my other question...how do I create pages? Some people said IFrames, and others said PHP Includes are way better...so I'm totally confused as I want to get this website up and running as soon as possible, and looking sweeeeeeeeet :ph34r:

One last question, how come I got an empty space right under the footer? I looked all over the code and everything, but couldnt find the error :(

Best Regards,
Scorpion





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users