Jump to content


Photo
* * * * - 2 votes

The Ultimate Layout Slicing and Coding Guide!


  • Please log in to reply
109 replies to this topic

#81 Hooch

Hooch

    Young Padawan

  • Members
  • Pip
  • 158 posts
  • Location:Brockville, Ontario

Posted 18 October 2005 - 11:48 AM

What a great find!!
1st off, thank you for the detailed info.
Now, my problem is whenever I add text to a content box, it just keeps going to the right. Making the box bigger.
And whenever I hit enter (to stop before the box expands) it leaves wayyy too much space between the lines.
FYI, I made the table into 3 rows, 1 column. Then added another table in the center. It is 1 row, 1 column. This is for the text of course.

Thanks for any help.

Hooch

***EDIT*** I fixed my problem, just paste the code. :)

Edited by Hooch, 18 October 2005 - 03:55 PM.


#82 hp-fanatic

hp-fanatic

    Young Padawan

  • Members
  • Pip
  • 8 posts

Posted 18 October 2005 - 03:53 PM

Can someone please tell me what font is used for the banner?

btw, it's a great tutorial!

#83 HockeyZ39

HockeyZ39

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 21 October 2005 - 02:50 AM

WOW, I want to thank you so very much for this guide. You put so much time into it and I REALLY appreciate it! Not to mention you even take time to answer questions on this fourm about the guide!

I have one question tho, is using the slicing tool in Photoshop and then using the "save for web" function not a good idea? I could see how it would be a bit harder to make the boxes that expand. But it could still be done right? With some very good planning? =)

Sorry if that is a real dumb/newbie question, but I am both! =)

#84 Mooey

Mooey

    Retired P2L Staff

  • Members
  • PipPipPip
  • 587 posts
  • Gender:Male
  • Location:UK
  • Interests:http://500px.com/mikeholman
    http://holmanmedia.net

Posted 21 October 2005 - 05:12 AM

I have one question tho, is using the slicing tool in Photoshop and then using the "save for web" function not a good idea? I could see how it would be a bit harder to make the boxes that expand. But it could still be done right? With some very good planning? =)

Sorry if that is a real dumb/newbie question, but I am both! =)

The reason Faken has done it this is because of the layout, theres expandable content boxes in the design. Also, this is a great way to learn. The code generated is nice and clean, rather than the automated ones that Photoshop do.

I've just used 'save for web' for a site I'm making now, only because of time constraints and lazyness on my part. The code looks a mess but i'm that bothered about it because i'm using an IFrame to load content into.

I'd suggest doing a web site in this way to get use to creating tables and cells rather than generated ones.

ps. There are no stupid questions, only stupid answers :doh:

#85 hobulus

hobulus

    Jedi In Training

  • Members
  • PipPip
  • 346 posts
  • Location:United Kingdom

Posted 21 October 2005 - 05:30 AM

That is a totally amazing Tutorial! Thanks ever so much Faken! You are the man!
I thought I knew about slicing, apparently I didnt.
Awesome Tutorial!

#86 Ckristian

Ckristian

    Honored X Staff

  • Members
  • PipPipPipPip
  • 1,334 posts
  • Gender:Male
  • Location:A blue-green "planet" Mostly harmless
  • Interests:Programming...

Posted 26 October 2005 - 01:57 PM

I finally went through this tutorial today and was able to figure out what slicing was all about :o I'll probably be reading it again a few times and maybe slice a complex layout and see how that goes. B)

Great tutorial Faken :D Well written and 'twas amazingly simple to follow the tut :worthy:

B)

(BTW I'm a 64kbps line and it was well worth the wait ;) )

#87 mthd88

mthd88

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 09 November 2005 - 01:04 PM

Hey, great tut...so far I've run into a few problems that need to be fixed
http://img340.images...illyhtml7tf.jpg
i need to get rid of what ever is going on up at the top, which is circled in white, duh lol, and i need to add a column where the verticle white line is so that i can make a cell? lol for my menu

Here's my code so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Team Vanquish</title>
<style type="text/css">
<!--
body {
	background-color: #474747;
}
-->
</style></head>

<body>
<table width="802" height="100%" border="0" align="center" background="images/main_bg.gif">
  <tr>
    <td width="15" height="161">&nbsp;</td>
    <td width="758" height="161" valign="top" background="images/header_logo.gif">&nbsp;</td>
    <td width="15">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Thanks alot :ph34r:

#88 w0rm

w0rm

    Young Padawan

  • Members
  • Pip
  • 79 posts

Posted 11 November 2005 - 12:30 AM

This tutorials is absolutely amazing. I've neve seen a better one. Awesome job Faken!!! This helped me out SOOO much. :) :P

#89 zer09

zer09

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 06 December 2005 - 11:31 PM

well, this is my first post here at P2L above all else. All I can say is AMAZING! :friends: It really is the Ultimate! I Hope other tutorials would put the same effort as you did with yours. Thanx for sharing the knowledge! :P

Edited by zer09, 06 December 2005 - 11:32 PM.


#90 FK69

FK69

    Young Padawan

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

Posted 27 February 2006 - 04:04 AM

Man this tutorial owns.. I used to look at it yawn cos i dont have dreamweaver but i learnt how to do the whole thing with AceHTML Pro 6!

Support! i've gotten stuck with the Interactive Tranparent Tool. I dont use Coral im using Photoshop. Any help on getting a similar tool on PS and how to use it?

Edited by FK69, 28 February 2006 - 10:33 PM.


#91 Surfing GFX

Surfing GFX

    Young Padawan

  • Members
  • Pip
  • 11 posts

Posted 09 April 2006 - 11:35 AM

omfg amazing i mean all the time you put into this woow props to you :D

#92 chillmode

chillmode

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 19 April 2006 - 10:45 AM

I have this problem that i can see the page very good in Internet Explorer but not in Firefox.
Can somebody tell me what's wrong with my code? I've tried and tried but can't fix this problem!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Footballgaming</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
	margin-top: 0px;
	margin-bottom: 0px;
}
</style></head>

<body>
<table width="934" height="100%" border="0" align="center" background="bilder/main_bg.jpg">
  <tr>
	<td width="42">&nbsp;</td>
	<td width="850" valign="top"><table width="850" border="0">
	  <tr>
		<td><img src="bilder/header_logo.jpg" width="850" height="154"><br></td>
	  </tr>
	</table></td>
	<td width="42">&nbsp;</td>
  </tr>
  <tr>
	<td>&nbsp;</td>
	<td valign="bottom">&nbsp;</td>
	<td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Edited by chillmode, 19 April 2006 - 10:46 AM.


#93 Illuzion1989

Illuzion1989

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 28 June 2006 - 12:19 AM

This is a truely amazing tutorial but I am having one problem probably from my stupidity but...

when I set my BG Image for the table it looks correct inside dreamweaver but when I preview it into browser it is only as tall as my image even though the table height is set to 100% as you explained please help me with this. is there maybe a simpler way all my border is is a 1 px black line all the way down but it blends with my template as page properties lines dont (my dad tried to explain to me to use those and I was like dude they dont look the same and arent lined up right. could you please help me with this problem

MSN: [email protected]
Yahoo: Bigballa_223
AIM: SCARman129
Email: [email protected]

Thank You,
Justin

#94 Genesis446

Genesis446

    Young Padawan

  • Members
  • Pip
  • 4 posts
  • Gender:Male

Posted 28 June 2006 - 03:12 PM

I made it just perfect...i just dont know how to make it CSS because I want to have rollovers but i dont know how to convert it into CSS so can someone please hlep me?

#95 The_pro_designer

The_pro_designer

    Jedi In Training

  • Members
  • PipPip
  • 316 posts
  • Gender:Male
  • Location:South Carolina, USA!
  • Interests:I am a Graphics designer, I work at Target, and I have a beautiful girlfriend names Mckenna. &lt;3 Thats about it.

Posted 10 July 2006 - 10:43 AM

OMG I just finished this tutorial.. for so long I was intemidated..or lazy about it.. Wow I was really doing everything all wrong.. Well.. I was also doing all my coding in anotepad not dreamweaver..but Now I think Im going to use itmore was much easier.. I have version 8 of dreamweaver so the screenshots looked different and since I didnt know much about it it was a bit hard on some parts but for the most part I got through it and It didnt come out bad at all.. and I remember itall so Time to actully make my own template insted of griffens or whoevers..Great tutorial Faken thanks !

#96 Faken

Faken

    Pimpmaster G

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

Posted 10 July 2006 - 10:46 AM

Thanks all :love: Glad everyoe is getting some use out of that tutorial :)

Justin - Can you please post a link or a screenshot of your issue? I'm not really sure what you mean.

Thanks,
Dan

#97 BradyValentino

BradyValentino

    Jedi In Training

  • Members
  • PipPip
  • 360 posts
  • Gender:Male
  • Location:Vancouver
  • Interests:Web design and development. Photography. Astronomy.

Posted 11 July 2006 - 01:32 AM

Never got around to saying this, but thanks so much Dan. This tutorial is the reason I can make a webpage.

#98 Genesis446

Genesis446

    Young Padawan

  • Members
  • Pip
  • 4 posts
  • Gender:Male

Posted 14 July 2006 - 02:03 AM

Dan...I am Justin's brother and what he means is this....




Posted Image






It does this when he uploads it....he oesnt know why either....if you have a soultion for it contact me because he is away for a few months....doing buisness

#99 mannix

mannix

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 31 July 2006 - 02:01 PM

I need help with the expanding content boxes... a few things...

they expand ok if i am careful but...

1. how do i get it to NOT double space when i hit enter (makes lists too long)
2. the width doesnt want to stay fixed (i set the width to the correct number but it just wants to expand) when i change the text a little or even make one word a link it stretches waaay out....

Please help

~mannix

#100 NGPixel

NGPixel

    Senior Programmer

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

Posted 02 February 2007 - 07:05 PM

lol, i'm not sure Dan is the best person to code a layout in CSS/XHTML...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users