Log in

View Full Version : help with coding xhtml


cbleep
10-29-2007, 11:22 AM
i made a template in photoshop sliced it and coded the it but i don't understand how to code the side bars i try but the way i do by making them background images doesn't make it validate when submitted to the W3C Mark Up Validator can someone help me please


Thanks in advance
boogyman
10-29-2007, 12:10 PM
can you post the photoshop image and what you have so far?
post the url if available if not use the the [code] tags to wrap the code
cbleep
10-29-2007, 02:43 PM
here is the code

<!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=utf-8" />
<title>....................</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="809" border="0" align="center" cellpadding="0" cellspacing="0" id="cb">
<tr>
<td width="29" height="641" rowspan="10" bgcolor="#FFFFFF"><img src="images/left_border.jpg" alt="" width="29" height="641" /></td>
<td width="751" height="148" colspan="7" valign="top" bgcolor="#C9443F"><img src="images/header.jpg" alt="" width="751" height="148" /></td>
<td width="29" height="641" rowspan="10" bgcolor="#FFFFFF"><img src="images/right_border.jpg" alt="" width="29" height="641" /></td>
</tr>
<tr>
<td colspan="7" bgcolor="#FFFFFF"><img src="images/right_arrows.jpg" alt="" width="38" height="38" /><img src="images/home.jpg" alt="home" width="87" height="38" /><img src="images/articles.jpg" alt="articles" width="98" height="38" /><img src="images/learn+.jpg" alt="learn+" width="98" height="38" /><img src="images/tools.jpg" alt="tools" width="98" height="38" /><img src="images/advertise.jpg" alt="advertise" width="98" height="38" /><img src="images/contacts.jpg" alt="contacts" width="98" height="38" /><img src="images/links.jpg" alt="licks" width="96" height="38" /><img src="images/right_arrows-15.jpg" alt="" width="40" height="38" /></td>
</tr>
<tr>
<td colspan="7" bgcolor="#FFFFFF"><img src="images/top_white.jpg" width="751" height="8" alt="" /></td>
</tr>
<tr>
<td width="10" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
<td width="289" height="26" valign="top" bgcolor="#FFFFFF"><img src="images/chra.jpg" alt="" width="289" height="26" /></td>
<td width="16" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
<td width="289" height="26" valign="top" bgcolor="#FFFFFF"><img src="images/lnava.jpg" alt="" width="289" height="26" /></td>
<td width="12" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
<td width="124" height="26" valign="top" bgcolor="#FFFFFF"><img src="images/adtmt.jpg" alt="" width="124" height="26" /></td>
<td width="11" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td width="289" height="168" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="chra">
<tr>
<td><p>&nbsp;</p>
</td>
</tr>
</table></td>
<td width="289" height="168" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="lnava">
<tr>
<td><p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table></td>
<td width="124" height="382" rowspan="3" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="ads">
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="16" bgcolor="#FFFFFF"><img src="images/htau.jpg" alt="" width="289" height="26" /></td>
<td height="16" bgcolor="#FFFFFF"><img src="images/lsr.jpg" alt="" width="289" height="26" /></td>
</tr>
<tr>
<td width="289" height="188" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="htau">
<tr>
<td>&nbsp;</td>
</tr>
</table> </td>
<td width="289" height="188" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="lst">
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="2" colspan="7" bgcolor="#FFFFFF"><img src="images/redline.jpg" width="751" height="2" alt="" /></td>
</tr>
<tr>
<td height="30" colspan="7" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="footer">
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="7" bgcolor="#FFFFFF"><img src="images/redline.jpg" width="751" height="2" alt="" /></td>
</tr>
</table>
</body>
</html>
boogyman
10-29-2007, 03:43 PM
Thanks for posting that info. There are a few things I see right from the get go.

First is that you shouldn't be using the Transitional DOCTYPE as it was created like 10 years ago when CSS was first coming of age. also you shouldn't be using the XHTML DOCTYPE because IE still doesnt support it, and thus you take advantage of its "improvements" instead you should use the HTML 4.01 Strict DOCTYPE.

Second is that you aren't using the proper layout schema of DIV's and CSS. Tables are designed for records and data, not page layout.

now getting to your specific question. there are a bunch of tutorial websites on the way to create proper 3 column layouts, that will be fluid and scale depending on resolution allowing for maximum accessibility.
take a look at these templates http://www.dynamicdrive.com/style/layouts/category/C9/

and also look on http://howtocreate.co.uk

those should give you a good starting point
cbleep
10-29-2007, 05:37 PM
ok thanks man
djr33
10-29-2007, 06:17 PM
Well, using slices without tables will be extremely difficult. It should be possible to have the page validate including the tables, though a table-less page would render faster.
Twey
10-29-2007, 06:45 PM
Image slices make for fragile, inflexible pages.
jscheuer1
10-30-2007, 04:39 AM
The slow load time for image slices are the images. Despite the claims often made for slices, they take longer to load than a single optimized and otherwise identical image. Absolute positioning can be used to place links and what not over the single image. This is still a poor layout technique.

As far as a table goes though, if the table is laid out with all dimensions present and accounted for, as is the case with virtually all image slice tables generated by software for that, the browser can just go right ahead and render it.

A table can validate as strict HTML 4.01 if all of its attributes (except colspan and rowspan, which are valid strict) are removed and rendered as valid style property/value pairs. This will even give it a rendering speed boost if the:

table-layout:fixed;

property/value is assigned to the table itself.

Slices still have several drawbacks besides the time it takes to load the images (most of these also apply to the single image alternative I mentioned). Font sizes are inflexible, as is the overall size of the layout area. Unless cleverly designed, slices are inaccessible for the blind and those with images disabled. Slices are hard to edit once setup and, for complex layouts, tax the limits of many of the programs designed to produce them.
djr33
10-30-2007, 05:11 AM
If you use slices properly, it can be much smaller than a full image; for example, as is common with layouts, a solid color region can be replaced by a background color, and that's a chunk of image data gone; additionally, it allows mixing formats, such as gifs for simple parts of the image and jpgs for photo regions.
However, slices certainly CAN be misused, and are, frequently.
jscheuer1
10-30-2007, 05:40 AM
If you use slices properly, it can be much smaller than a full image; for example, as is common with layouts, a solid color region can be replaced by a background color, and that's a chunk of image data gone; additionally, it allows mixing formats, such as gifs for simple parts of the image and jpgs for photo regions.
However, slices certainly CAN be misused, and are, frequently.

Yes and no, probably no. I imagine that mixing of formats might be beneficial to overall byte load, but with modern image optimizing techniques, certain regions of an image can be more compressed than others.

No matter what you do, once you start slicing up images, you add to their byte load because each slice requires header and other generic code of the format. You can use background color for solid regions, but in tests I ran, this didn't make up for the bytes required by each separate image. Remember, in one large image, a plain area can be represented by very few bytes, generally less than it takes to write:


.empty {
background:green;
}

and:


class="empty"

and the header information for the surrounding individual images.
cbleep
10-30-2007, 12:42 PM
i would like to get it coded with both html and css but i have no idea where to start i read so many articles and tutorials but i just cant understand css so was wondering if someone could code it for me? please
boogyman
10-30-2007, 02:17 PM
start simple and work your way through it...

before you worry about the background image work on the actual layout. think of what you will need and piece it together 1 bit at a time.



<body>

<div id="header">
-- logo and company info --
</div>

<div id="nav">
-- navigation --
</div>

<div id="content">
-- actual content of the page --
</div>

<div id="footer">
-- copyright / footer info --
</div>

</body>


now you have the layout and you can put in the content of each section
after you put in the info of each section you can start to design the final layout of how its going to look... with the navigation being floated left.. I would suggest using an unordered list


<div id="nav">
<ul>
<li><a href="/url/path">LINK</a></li>
<li><a href="/url/path">LINK</a></li>
<li><a href="/url/path">LINK</a></li>
</ul>
</div>

then you would just use the display property set to inline in your css stylesheet and the links will be floated to the left.


div#nav ul li {
display:inline;
}



there is a start.... just piece it together 1 bit at a time and you will find that it comes alot quicker then you think. you really shouldnt have someone do it for you because then you arent learning anything and when you need to maintain or edit the layout you wont know what to do and you will either break the format or you will need to ask someone else to do it... so its better to invest the time up front to do what is necessary and learn the material

and remember we are here for you if you have a specific problem
jscheuer1
10-30-2007, 02:37 PM
I doubt that you will find someone to do all your work for you, especially as this type of layout is looked at with such a jaundiced eye (at least by most around here).

However, although a thorough understanding of css is complicated, the amount of knowledge required to convert an image slices table to css is minor.

First off, you need a stylesheet, these can be external or in the head of the page, how to do that is well documented around the web, here I will be using the code for one in the head.

Here is one of your cells:


<td width="29" height="641" rowspan="10" bgcolor="#FFFFFF"><img src="images/left_border.jpg" alt="" width="29" height="641" /></td>

We can change that to:


<td id="s_1" rowspan="10"><img src="images/left_border.jpg" alt="" /></td>

It's now valid, but no longer lays out the way we want it to. So we use a style section in the head:


<style type="text/css">
#s_1, #s_1 img {
width:29px;
height:641px;
background-color:#ffffff;
}
</style>


Your next cell:


<td width="751" height="148" colspan="7" valign="top" bgcolor="#C9443F"><img src="images/header.jpg" alt="" width="751" height="148" /></td>


can be:


<td id="s_2" colspan="7"><img src="images/header.jpg" alt="" /></td>


Then add to the existing style section:


<style type="text/css">
#s_1, #s_1 img {
width:29px;
height:641px;
background-color:#ffffff;
}
#s_2, #s_2 img {
width:751px;
height:148px;
}
#s_2 {
background-color:#c9443f;
vertical-align:top;
}
</style>


You will probably need a decent css reference. I like:

http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm
cbleep
11-07-2007, 04:29 PM
thanks to everyone who have help me so far but i am having one problem i don't understand how to get my pages to expand downward when i add more text can someone explain how to do this please

Thanks
jscheuer1
11-08-2007, 08:05 AM
Unless your page has a fixed height and/or some other limitation imposed by style, attributes, or other aspects of its layout, it will expand automatically to accommodate additional text. However, if you are trying to slip text into the image slice table, that's a dicey situation, and one of the reasons I mentioned for not using image slices, they are hard to modify once set up.
cbleep
11-08-2007, 04:48 PM
no i am just using normal divs for the content boxes and just add a bg colour so could i make it so when the content boxes stretches vertically the template resize and adjust automatically?
boogyman
11-08-2007, 04:59 PM
the default for any element is to expand to fit the content within.
It will first try to expand horizontally, and when it reaches the end of the allowable width, it will attempt to expand vertically.

Only "anomoly" to the rule is that by default the page will not expand horizontally beyond the allowable viewport width. What I mean by that is if your browser has a viewport (the part the page loads in) of 800pixels wide, if your element has enough text to fill 1000pixels, the extra 200 pixels will return to the next line. This is assuming that your text is not 1 word or is not some type of picture/movie type media, which in that case creates the horizontal scroll bar that you sometimes see on poorly designed sites.

but basic rule of thumb is that the element, whether it be div p span table tr td th etc... will expand to fit the content unless otherwise limited by viewport/user defined style
cbleep
11-08-2007, 09:02 PM
i have no problem with the content boxes getting larger vertically its only the template it doesn't resizes automatically when the content boxes expands
boogyman
11-08-2007, 09:33 PM
then that means you have placed a restriction in your styles.

width
height

most likely the problem is that you put a restriction on the height.
cbleep
11-09-2007, 08:42 AM
ok thanks