Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Coding my Layout

Started by Jarhamn, Aug 06 2008 01:38 PM

You cannot reply to this topic
Go to first unread post

6 replies to this topic

#1 Jarhamn

Young Padawan

Members
4 posts

Posted 06 August 2008 - 01:38 PM

So i have designed a layout that im going to code:
Posted Image

And i want to type in some text in the content boxes. I have tried with tables and iFrame's but it doesn't seem to work (I'm using CS3). I designed this in PS CS3 and sliced the links and saved for web. How am i supposed to do this?

Help greatly appreciated!

Back to top

#2 Tyson D

Young Padawan

Members
85 posts

Gender:Male
Location:Canada

Posted 06 August 2008 - 02:15 PM

Hello,

Firstly as a strong recommendation I would suggest that you avoid using tables and iFrames to lay out your page. You've got all your images so why not use CSS to set this up? In order to better comply with web standards you should be using divs rather than tables for this type of content.

What is your knowledge level of CSS and HTML? If you don't have much then you'll have some learning to do.

When you say it doesn't really work when you tried using tables and iFrames what part didn't work? Try to be specific unless you are expecting someone to slice this up and code for you. I don't mean that in a mean sort of way, I'd like to help but you aren't giving anything specific and I don't plan on coding an entire page for you

Back to top

#3 Jarhamn

Young Padawan

Members
4 posts

Posted 06 August 2008 - 02:26 PM

Obviously i don't expect that, ill provide more information now. Basically a friend, which is a web-designer tried to help me with this and he has been using older versions of Dreamweaver, in which it's apparently easier to put on text. Anyway i was just trying all sorts of way and that's why i tried tables and iFrames, but i understand now that they are not really suitable.

My knowledge in HTML is fairly allright, CSS basic but im definately willing to learn. Would it help if i provided source code or should i post a picture of how it looked like when i tried with tables/iFrames?

Back to top

#4 Tyson D

Young Padawan

Members
85 posts

Gender:Male
Location:Canada

Posted 06 August 2008 - 02:35 PM

Alright, I had a feeling you didn't expect that! Good, you want to learn!
Posting your code/an image of how things turned out would be helpful for people that will try to assist you. Another good thing would be to do a bit of CSS learning. You can use google to help you out. A good resource to help you on the way while you are trying to make your style sheet can be found here:

http://www.w3schools...css/default.asp

There are also many other resources on the web. The layout you've posted should be a good practice. It isn't the most tricky of layouts to code up. Ask questions here if you get stuck!

Back to top

#5 Jarhamn

Young Padawan

Members
4 posts

Posted 06 August 2008 - 02:49 PM

Yep, doing this is part of learning myself

Anyway here comes the code: (Done nothing except imported the slices)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jarhamn-Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body bgcolor="#516b68">
<!-- ImageReady Slices (jarhamnindex.psd) -->
<center>
<table id="Table_01" width="1001" height="1001" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="20">
   <img src="images/index_01.gif" width="1000" height="249" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="249" alt=""></td>
 </tr>
 <tr>
  <td rowspan="16">
   <img src="images/index_02.gif" width="29" height="751" alt=""></td>
  <td colspan="5">
   <a href="index.html">
	<img src="images/jarhamn_03.gif" width="132" height="28" border="0" alt=""></a></td>
  <td colspan="3">
   <img src="images/jarhamn_04.gif" width="132" height="28" alt=""></td>
  <td>
   <img src="images/jarhamn_05.jpg" width="132" height="28" alt=""></td>
  <td rowspan="2">
   <img src="images/index_06.gif" width="2" height="49" alt=""></td>
  <td>
   <img src="images/jarhamn_07.gif" width="132" height="28" alt=""></td>
  <td colspan="2">
   <img src="images/jarhamn_08.gif" width="133" height="28" alt=""></td>
  <td colspan="3">
   <a href="forums.html">
	<img src="images/jarhamnindex_09.gif" width="132" height="28" border="0" alt=""></a></td>
  <td colspan="2">
   <a href="affiliates.html">
	<img src="images/jarhamnindex_10.gif" width="163" height="28" border="0" alt=""></a></td>
  <td rowspan="16">
   <img src="images/index_11.gif" width="13" height="751" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="28" alt=""></td>
 </tr>
 <tr>
  <td colspan="9">
   <img src="images/index_12.gif" width="396" height="21" alt=""></td>
  <td colspan="8">
   <img src="images/index_13.gif" width="560" height="21" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="21" alt=""></td>
 </tr>
 <tr>
  <td colspan="7" rowspan="2">
   <img src="images/index_14.gif" width="254" height="50" alt=""></td>
  <td colspan="5">
   <img src="images/index_15.gif" width="370" height="31" alt=""></td>
  <td colspan="6" rowspan="2">
   <img src="images/index_16.gif" width="334" height="50" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="31" alt=""></td>
 </tr>
 <tr>
  <td colspan="5">
   <img src="images/index_17.gif" width="370" height="19" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="19" alt=""></td>
 </tr>
 <tr>
  <td rowspan="12">
   <img src="images/index_18.gif" width="8" height="652" alt=""></td>
  <td colspan="11">
   <img src="images/index_19.gif" width="616" height="241" alt=""></td>
  <td colspan="3" rowspan="6">
   <img src="images/index_20.gif" width="71" height="332" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/index_21.gif" width="238" height="248" alt=""></td>
  <td rowspan="12">
   <img src="images/index_22.gif" width="25" height="652" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="241" alt=""></td>
 </tr>
 <tr>
  <td colspan="11" rowspan="2">
   <img src="images/index_23.gif" width="616" height="15" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="7" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="4">
   <img src="images/index_24.gif" width="238" height="84" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="8" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_25.gif" width="73" height="13" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/index_26.gif" width="27" height="44" alt=""></td>
  <td colspan="2">
   <img src="images/index_27.gif" width="73" height="13" alt=""></td>
  <td colspan="6" rowspan="2">
   <img src="images/index_28.gif" width="443" height="44" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="13" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_29.gif" width="73" height="31" alt=""></td>
  <td colspan="2">
   <img src="images/index_30.gif" width="73" height="31" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="31" alt=""></td>
 </tr>
 <tr>
  <td colspan="11" rowspan="2">
   <img src="images/index_31.gif" width="616" height="241" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="32" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="6">
   <img src="images/index_32.gif" width="66" height="320" alt=""></td>
  <td colspan="3" rowspan="3">
   <img src="images/index_33.gif" width="243" height="228" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="209" alt=""></td>
 </tr>
 <tr>
  <td colspan="11">
   <img src="images/index_34.gif" width="616" height="15" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="15" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="3">
   <img src="images/index_35.gif" width="79" height="13" alt=""></td>
  <td rowspan="4">
   <img src="images/index_36.gif" width="21" height="96" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/index_37.gif" width="73" height="10" alt=""></td>
  <td colspan="6" rowspan="4">
   <img src="images/index_38.gif" width="443" height="96" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="4" alt=""></td>
 </tr>
 <tr>
  <td colspan="3" rowspan="3">
   <img src="images/index_39.gif" width="243" height="92" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="6" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2">
   <img src="images/index_40.gif" width="73" height="86" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="3" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="images/index_41.gif" width="79" height="83" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="83" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/spacer.gif" width="29" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="8" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="73" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="6" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="21" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="24" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="49" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="73" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="10" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="132" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="2" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="132" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="94" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="39" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="27" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="5" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="100" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="138" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="25" height="1" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="13" height="1" alt=""></td>
  <td></td>
 </tr>
</table>
</center>
<!-- End ImageReady Slices -->
</body>
</html>

Here is the error:
Posted Image

<td colspan="11">
   <img src="images/index_19.gif" width="616" height="241" alt=""><div>TES TEST TEST</div></td>

Here is the part i changed. Obviously it's a simple div tag without attributes, but im not too familiar with this specific tag. Hope this gives you more info!

Will start learning some more CSS asap aswell!

Edited by Jarhamn, 06 August 2008 - 02:49 PM.

Back to top

#6 Hepa7

Young Padawan

Members
16 posts

Gender:Male
Location:USA

Posted 12 August 2008 - 08:15 PM

I would suggest reading http://www.slicingguide.com

Back to top

#7 fudgy

Young Padawan

Members
80 posts

Posted 13 August 2008 - 04:39 AM

i dont use dreamweaver, i use editplus (simple editor, like notepad) and i would suggest you use div attributes not tables & frames. they seem to get a bit messy.

Back to top

Back to Programming and General Web Design · Next Unread Topic →

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users