Jump to content


Photo
* * * * - 2 votes

The Ultimate Layout Slicing and Coding Guide!


  • Please log in to reply
109 replies to this topic

#61 edskii

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

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

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

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

Donna

    Retired P2L Queen!

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

Posted 14 August 2005 - 11:24 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.

Post a screenshot, looks ok to me

#66 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 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

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

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

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

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

#71 syndrome

syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 September 2005 - 01:44 PM

For the space under the footer. put this in your head tag :lol:

<style type="text/css">
body{
margin-bottom: 0px;
}
</style>


#72 Scorpion

Scorpion

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 03 September 2005 - 07:12 PM

Alright thanks, but dont I need to create a CSS Stylesheet? What is a CSS Stylesheet anyways? Isnt it for text size, colors, and fonts?? :D

#73 Scorpion

Scorpion

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 04 September 2005 - 03:42 AM

For the space under the footer. put this in your head tag ;)

<style type="text/css">
body{
margin-bottom: 0px;
}
</style>

Heyyyy it worked!! ;) thank you :P What is the next step now?? I wanna finish this website as soon as possible lol and launch it live babe!! :D

#74 Marxx

Marxx

    Young Padawan

  • Members
  • Pip
  • 116 posts
  • Gender:Male
  • Location:Finland

Posted 04 September 2005 - 02:59 PM

Absolute fantastic job!
That's for this big and professional tutorial!!

#75 syndrome

syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 04 September 2005 - 03:08 PM

Alright thanks, but dont I need to create a CSS Stylesheet? What is a CSS Stylesheet anyways? Isnt it for text size, colors, and fonts?? ;)

Yes check out some of the tutorials in the database ;)

#76 Scorpion

Scorpion

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 05 September 2005 - 02:28 AM

There are alot, which one do you recommend me read? please provide a link. Thank you!

#77 syndrome

syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 06 September 2005 - 02:29 AM

Il give you this one: ::LINK::

Please just look through the database though

#78 bigtroy

bigtroy

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 06 September 2005 - 09:23 PM

Nice guide :rolleyes: Would be sweet if you could make a printable version or pdf for it, even if u charged a couple of dollars donation for it.

#79 FK69

FK69

    Young Padawan

  • Members
  • Pip
  • 57 posts
  • Location:Melbourne, Australia

Posted 09 September 2005 - 09:16 AM

im sure the slicing guide is tops but theres one problem for most people out there how we spose to complete this guide if some of us cant afford DreamWeaver?

Edited by Moderator. Keep those references to yourself.

Edited by Jaymz, 09 September 2005 - 02:59 PM.


#80 dna_05

dna_05

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 24 September 2005 - 08:55 AM

Hi,

first i wanted to thank you for your huge and really helpful work..

second.. a littel little question..

i've got the same problem of scizor.. but i don't understand where to put the >br> in my code...


here it is..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
background-color: #9a9a9a;
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>

<body>
<table width="700" height="800" border="0" align="center" background="main_bg.gif">
<tr>
<td width="17">&nbsp;</td>
<td width="653" align="left" valign="top"><img src="header_logo.gif" width="653" height="103" /><img src="header_top.gif" width="652" height="24" />
<table width="100%" border="0"cellspadding="0" cellspacing="0">
<tr>
<td><img src="btt_sx.gif" width="12" height="26" /><img src="btt_1.gif" width="76" height="26" /><img src="btt_2.gif" width="48" height="26" /><img src="btt_3.gif" width="52" height="26" /><img src="btt_4.gif" width="72" height="26" /><img src="btt_5.gif" width="75" height="26" /><img src="btt_6.gif" width="86" height="26" /><img src="btt_7.gif" width="103" height="26" /><a href="#"><img src="btt_8.gif" width="126" height="26" border="0" /></a></td>
</tr>
</table></td>
<td width="16">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


(i didn't slice your layout but one of my own..)
tell me if you need screenshots of both FF and IE viewings..

thanks in advance.. and keep up the good work ;)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users