Jump to content


Photo
* * * * - 2 votes

The Ultimate Layout Slicing and Coding Guide!


  • Please log in to reply
109 replies to this topic

#41 scizor

scizor

    Young Padawan

  • Members
  • Pip
  • 48 posts
  • Gender:Male

Posted 17 July 2005 - 01:09 PM

<a href="/contactus.php"><img src="images/nav6.jpg" width="82" height="31" border="0"></a><img src="images/nav7.jpg" width="86" height="31">
          <table width="628" border="0" cellspacing="0" cellpadding="0">

try changing this to:
<a href="/contactus.php"><img src="images/nav6.jpg" width="82" height="31" border="0"></a><img src="images/nav7.jpg" width="86" height="31"><br>
          <table width="628" border="0" cellspacing="0" cellpadding="0">

Dude thanks.How come simple solutions are the hardest to come by. :)

#42 Faken

Faken

    Pimpmaster G

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

Posted 17 July 2005 - 10:37 PM

LOL! Good call Jay ;) Looks like he beat me to it!

Faken

#43 Morbodis

Morbodis

    Young Padawan

  • Members
  • Pip
  • 8 posts

Posted 18 July 2005 - 06:48 AM

OMG u have just cleared up all my issues i had with slicing! AWESOME WORK!!!

#44 /quit

/quit

    P2L Che

  • Members
  • PipPipPipPip
  • 1,016 posts
  • Gender:Male
  • Location:New Hampshire

Posted 19 July 2005 - 10:37 AM

Posted Image
This is what i See in dreamweaver

Posted Image
But here is what I see when I preview


here is my code thus far

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #444444;
}
-->
</style></head>

<body>
<table width="622" height="100%" border="0">
  <tr>
    <td valign="top"><table width="622" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="header.jpg" width="622" height="150"></td>
      </tr>
    </table>
      <table width="622" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="rightspacer.jpg"><img src="button1.jpg" width="147" height="33"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>	
</body>
</html>

Any help is greatly appreciated, as I am about to put my head through a wall ;) .

Edited by anti_angel, 19 July 2005 - 10:54 AM.


#45 matdwyer

matdwyer

    Young Padawan

  • Members
  • Pip
  • 22 posts

Posted 20 July 2005 - 12:04 AM

Try

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #444444;
}
-->
</style></head>

<body>
<table width="622" height="100%" border="0">
 <tr>
   <td valign="top"><table width="622" height="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
       <td><img src="header.jpg" width="622" height="150"></td>
     </tr>
   </table><br>
<!-- I put this line break in becuasey ou have your one image as 622 pixels and your code has it as another 622 table beside it. Pressing shift+enter in dreamweaver should do the same thing. -->
     <table width="622" height="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td><img src="rightspacer.jpg"><img src="button1.jpg" width="147" height="33"></td>
       </tr>
     </table>
   </td>
 </tr>
</table>
</body>
</html>


#46 syndrome

syndrome

    P2L patient #4819

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

Posted 21 July 2005 - 11:03 AM

For us Photoshop folks what would an alternative for the Interactive Transparency Tool be? I dont use Corelpaint ;)

Edited by syndrome, 22 July 2005 - 10:49 AM.


#47 ChaZ

ChaZ

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 30 July 2005 - 08:46 AM

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

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

Can anyone help please? Anyway, Great tutorial!

#48 ChaZ

ChaZ

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 30 July 2005 - 09:15 AM

Sorry, last post has been fixed ;)
ChaZ

#49 Cloud54367

Cloud54367

    Young Padawan

  • Members
  • Pip
  • 45 posts

Posted 31 July 2005 - 10:16 PM

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

#50 Faken

Faken

    Pimpmaster G

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

Posted 31 July 2005 - 10:35 PM

For us Photoshop folks what would an alternative for the Interactive Transparency Tool be? I dont use Corelpaint :lol:

Look for something that does gradient transparencies :D

Faken

#51 Faken

Faken

    Pimpmaster G

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

Posted 31 July 2005 - 10:35 PM

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

Faken

    Pimpmaster G

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

Posted 31 July 2005 - 10:36 PM

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

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

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

Faken

    Pimpmaster G

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

Posted 01 August 2005 - 10:40 PM

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

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

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.photobucke...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.photobucke...tled-10copy.png

#58 edskii

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

Faken

    Pimpmaster G

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

Posted 04 August 2005 - 12:08 AM

Really sorry to keep bothering you but i have another problem. If you look at my layout
http://i3.photobucke...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.photobucke...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

Faken

    Pimpmaster G

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

Posted 04 August 2005 - 12:10 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

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




3 user(s) are reading this topic

0 members, 3 guests, 0 anonymous users