HTML Forum

**stigma-one** · 06-21-2005, 03:57 PM

hello everyone, please excuse my ignorance/stupidity, i'm a print designer who is doing a website as a favour to some friends. i've designed this site

http://www.stigmatizedesign.com/osfptest/index.html

i need to make the main red box a text space, and i'm guessing i probably need to add a table or something (have i made myself sound stupid yet??) because when i type in that section and press enter or add a <br> then the images in the left column break up.

any ideas on how to help me without getting too technical??? thanks

**metho** · 06-21-2005, 06:17 PM

Oh man - table from **** mode. Below is a version of your page which simplifies the table structure and separates style from structure...

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>
<title>homepage 01 wide sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<style type="text/css">
<!--
body {
	margin-top: 5px;
	background-color: #d90303;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FBFBF9;
}
#container {
	margin-right: auto;
	margin-left: auto;
}
#content {
padding: 8px;
}
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFDFDF;
	background-color: #B42929;
	text-align: center;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #FBFBF9;
	padding-top: 4px;
	padding-bottom: 4px;
	height: 25px;
}
.align_top {
	vertical-align: top;
}
#navCell {
	width: 134px;
}
-->
</style></head>
<body>
<div id="container">
<!-- ImageReady Slices (homepage 01 wide sliced.psd) -->
<table width="701" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">
	<img src="images/index_02.gif" alt="" height="41" width="23"><img src="images/index_03.gif" alt="" height="41" width="52"><img src="images/index_04.gif" alt="" height="41" width="20"><img src="images/index_05.gif" alt="" height="41" width="39"><img src="images/index_06.gif" alt="" height="41" width="64"><img src="images/index_07.gif" alt="" height="41" width="15"><img src="images/index_08.gif" alt="" height="41" width="59"><img src="images/index_09.gif" alt="" height="41" width="24"><img src="images/index_10.gif" alt="" height="41" width="66"><img src="images/index_11.gif" alt="" height="41" width="28"><img src="images/index_12.gif" alt="" height="41" width="48"><img src="images/index_13.gif" alt="" height="41" width="21"><img src="images/index_14.gif" alt="" height="41" width="119"><img src="images/index_15.gif" alt="" height="41" width="19"><img src="images/index_16.gif" alt="" height="41" width="70"><img src="images/index_17.gif" alt="" height="41" width="34"></td>
    </tr>
  <tr>
    <td colspan="2"><img src="images/index_19.gif" alt="" height="41" width="23"><img src="images/index_20.gif" alt="" height="50" width="52"><img src="images/index_21.gif" alt="" height="50" width="20"><img src="images/index_22.gif" alt="" height="50" width="39"><img src="images/index_23.gif" alt="" height="50" width="64"><img src="images/index_24.gif" alt="" height="50" width="15"><img src="images/index_25.gif" alt="" height="50" width="59"><img src="images/index_26.gif" alt="" height="50" width="24"><img src="images/index_27.gif" alt="" height="50" width="66"><img src="images/index_28.gif" alt="" height="50" width="28"><img src="images/index_29.gif" alt="" height="50" width="48"><img src="images/index_30.gif" alt="" height="50" width="21"><img src="images/index_31.gif" alt="" height="50" width="119"><img src="images/index_32.gif" alt="" height="50" width="19"><img src="images/index_33.gif" alt="" height="50" width="70"><img src="images/index_34.gif" alt="" height="50" width="34"></td>
    </tr>
  <tr>
    <td colspan="2"><img src="images/index_35.gif" alt="" height="28" width="23"><img src="images/index_36.gif" alt="" height="28" width="52"><img src="images/index_37.gif" alt="" height="28" width="20"><img src="images/index_38.gif" alt="" height="28" width="103"><img src="images/index_39.gif" alt="" height="28" width="15"><img src="images/index_40.gif" alt="" height="28" width="59"><img src="images/index_41.gif" alt="" height="28" width="24"><img src="images/index_42.gif" alt="" height="28" width="66"><img src="images/index_43.gif" alt="" height="28" width="28"><img src="images/index_44.gif" alt="" height="28" width="48"><img src="images/index_45.gif" alt="" height="28" width="21"><img src="images/index_46.gif" alt="" height="28" width="119"><img src="images/index_47.gif" alt="" height="28" width="19"><img src="images/index_48.gif" alt="" height="28" width="70"><img src="images/index_49.gif" alt="" height="28" width="34"></td>
    </tr>
  <tr class="align_top">
    <td id="navCell"><img src="images/index_50.gif" alt="" height="40" width="134"><img src="images/index_52.gif" alt="" height="43" width="134"><img src="images/index_53.gif" alt="" height="42" width="134"><img src="images/index_54.gif" alt="" height="28" width="134"><img src="images/index_55.gif" alt="" height="38" width="134"><img src="images/index_56.gif" alt="" height="41" width="134"></td>
    <td width="572" rowspan="2">
	<!-- begin content -->
	<div id="content">
	  <div id="lipsum">
        <h4> Lorem ipsum dolor sit amet</h4>
        <p>Consectetuer adipiscing elit. Donec facilisis, turpis a ultricies tristique, pede tellus elementum nibh, et aliquet mauris diam sit amet sapien. Duis in neque. Sed condimentum, turpis vitae consectetuer nonummy, wisi metus rhoncus arcu, at rutrum felis risus quis dolor. Ut facilisis. Etiam diam neque, dignissim sed, blandit in, pulvinar accumsan, pede. Nam posuere felis quis purus. Pellentesque at risus a nunc gravida venenatis. Vivamus porttitor pretium nulla. Nam sit amet arcu ac nunc dapibus tincidunt. Fusce gravida lacus in dui. Sed dui. Suspendisse potenti. Curabitur sem purus, egestas sed, venenatis in, commodo nec, purus. Donec ornare rutrum libero. Nullam libero. Sed vel ipsum. Sed adipiscing commodo augue. </p>
        <p>Proin rutrum, dolor in aliquet imperdiet, neque nisl dignissim lorem, a laoreet neque turpis a ipsum. Donec ultrices. In lobortis. Quisque eu quam. Proin vestibulum. Aenean a tellus et augue malesuada mattis. Fusce varius lectus et justo feugiat tempus. Curabitur a mi ac nulla fermentum eleifend. Praesent imperdiet libero sollicitudin nisl. Donec sollicitudin tincidunt massa. Etiam accumsan elementum diam. Sed nibh. Suspendisse diam. Cras enim. Integer sit amet arcu quis pede mollis tempus. Proin lobortis erat nec risus. Sed vel mi. </p>
        <p>Phasellus neque. Nullam ullamcorper, sem sed nonummy dapibus, lacus est interdum tellus, sed consequat mauris mauris vel turpis. Nunc scelerisque iaculis libero. Integer ac arcu. Curabitur commodo pharetra ligula. Phasellus non orci quis tellus scelerisque tempor. Vestibulum sed turpis vel metus suscipit auctor. Maecenas elementum, neque ac tempus viverra, velit pede rutrum dolor, eu tempor dolor orci in est. Donec sit amet magna et leo venenatis ultricies. Cras pretium. Suspendisse et ligula. </p>
        <p>Suspendisse convallis erat id elit. Integer ac urna. Vestibulum congue purus vel nisl. Donec dictum ultricies lorem. Curabitur rutrum. Suspendisse semper. Donec vitae metus at neque malesuada convallis. Vivamus in nunc. Phasellus lacus. Mauris posuere aliquam quam. Proin dictum, est sit amet fermentum nonummy, purus massa dictum massa, sit amet interdum odio massa et mauris. Duis adipiscing mi in tellus. Mauris gravida, justo vitae tincidunt ornare, elit libero tempus libero, id viverra neque ante nec orci. Curabitur at eros quis ipsum feugiat lobortis. Duis ultricies arcu bibendum tellus placerat imperdiet. In eget nisl vitae est lobortis viverra. </p>
	    </div>
	
	</div>
	<!-- end content -->
	</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    </tr>
  <tr>
    <td colspan="2">
	<!-- begin footer -->
	<div id="footer">
	<p>This is your page footer</p>
	</div>
	<!-- end footer -->
	</td>
    </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- End ImageReady Slices -->
</div>
<!--end container -->

</body>
</html>

**stigma-one** · 06-22-2005, 04:38 AM

thank you very very much!!!
does this have to do with the fact that imageready creates really messy code? what would be the better alternative to slicing the psd file in imageready?
thank you again!!!

**metho** · 06-22-2005, 08:22 AM

Pull out a calculator and slice up the images yourself. Ya, imageready and firewroks writes terribly bloated code.

Personally, I export a flat tiff file to fireworks > slice and dice > export slices with no html > construct the webpage using as little code as possible (the calculator is for calculating element dimensions to contain images).

Your header image should only be a single image to reduce the number of connections required to download the page media. Your navigation menu doesn't need to be images. A text menu will suffice for the top horizontal navbar and with a CSS border like the footer, you woudn't notice the difference.

Try and stay away from all image navigation menus. Search engines will use the anchor text in your links to get an idea of page topic relevancy.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!