to discuss the problems with your code we would need to see your source for your static pages. Post that first.
-T
Printable View
to discuss the problems with your code we would need to see your source for your static pages. Post that first.
-T
lol GameDev i dont think hes going to show us the html site haha. Ill take a better look at what you got in an hour or so Ive got a site of my own thats starting to smoke cause of some scripting bugs :P .
You should learn to respect someone who is busy, here's the code:
style.css
index.htmlCode:body {text-align:center; font-family: Verdana}
td.main {width:318 px; height:340 px; background-image:url(images/main.gif)}
div.content {width:318 px; height:340 px; overflow:auto}
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>Ultimation</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="721" border="0" cellpadding="0" cellspacing="0" summary="Ultimation: Home Page">
<tr>
<td colspan="7">
<img id="index_01" src="images/index_01.gif" width="720" height="88" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="88" alt="" /></td>
</tr>
<tr>
<td rowspan="14">
<img id="index_02" src="images/index_02.gif" width="10" height="457" alt="" /></td>
<td rowspan="2">
<a href="resources/sourcecodes/home.shtml">
<img id="sourcecodes" src="images/sourcecodes.gif" width="160" height="27" border="0" alt="Selected Source Codes of C/C++, PHP, Flash, JavaScript from all around the Web." /></a></td>
<td colspan="3">
<img id="index_04" src="images/index_04.gif" width="377" height="16" alt="" /></td>
<td rowspan="2">
<a href="tipsntricks/flashhtml.shtml">
<img id="flashhtml" src="images/flashhtml.gif" width="167" height="27" border="0" alt="Tips n tricks on Flash/HTML." /></a></td>
<td rowspan="14">
<img id="index_06" src="images/index_06.gif" width="6" height="457" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt="" /></td>
</tr>
<tr>
<td rowspan="13">
<img id="index_07" src="images/index_07.gif" width="35" height="441" alt="" /></td>
<td class="main" rowspan="10">
<div class="content">Testing</div></td>
<td rowspan="13">
<img id="index_09" src="images/index_09.gif" width="24" height="441" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt="" /></td>
</tr>
<tr>
<td>
<a href="resources/references/home.shtml">
<img id="references" src="images/references.gif" width="160" height="30" border="0" alt="Appendices and Tutorials taken from programming books for giving you a helping hand." /></a></td>
<td>
<a href="tipsntricks/javascript.shtml">
<img id="javascript" src="images/javascript.gif" width="167" height="30" border="0" alt="Tips n tricks on JavaScript." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt="" /></td>
</tr>
<tr>
<td>
<a href="resources/downloads/index.shtml">
<img id="downloads" src="images/downloads.gif" width="160" height="29" border="0" alt="Compilers, Interpreters and other programming tools for a better programming experience." /></a></td>
<td>
<a href="tipsntricks/photoshop.shtml">
<img id="photoshop" src="images/photoshop.gif" width="167" height="29" border="0" alt="Tips n tricks on Photoshop." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt="" /></td>
</tr>
<tr>
<td>
<a href="resources/projects/index.shtml">
<img id="projects" src="images/projects.gif" width="160" height="33" border="0" alt="Open-Source Projects made by myself just for fun." /></a></td>
<td>
<a href="tipsntricks/php.shtml">
<img id="php" src="images/php.gif" width="167" height="33" border="0" alt="Tips n tricks on PHP." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt="" /></td>
</tr>
<tr>
<td>
<img id="index_16" src="images/index_16.gif" width="160" height="142" alt="" /></td>
<td>
<img id="index_17" src="images/index_17.gif" width="167" height="142" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="142" alt="" /></td>
</tr>
<tr>
<td>
<a href="experiences/websurfing/index.shtml">
<img id="websurfing" src="images/websurfing.gif" width="160" height="31" border="0" alt="Tips n tricks for getting most out of your time online." /></a></td>
<td>
<a href="portfolio/blog">
<img id="blog" src="images/blog.gif" width="167" height="31" border="0" alt="Boring blabbing about my everyday incidents." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt="" /></td>
</tr>
<tr>
<td>
<a href="experiences/webdesigning/index.shtml">
<img id="webdesigning" src="images/webdesigning.gif" width="160" height="29" border="0" alt="Thoughts on how to design better websites." /></a></td>
<td>
<a href="portfolio/aboutme.shtml">
<img id="aboutme" src="images/aboutme.gif" width="167" height="29" border="0" alt="Facts n Figures about ... who can it be? O'course Me." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<a href="experiences/webscripting/index.shtml">
<img id="webscripting" src="images/webscripting.gif" width="160" height="30" border="0" alt="How to create better dynamic pages using scripting." /></a></td>
<td>
<a href="portfolio/contactinfo.shtml">
<img id="contactinfo" src="images/contactinfo.gif" width="167" height="26" border="0" alt="Contact info about me." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<a href="portfolio/aboutultimation.shtml">
<img id="aboutultimation" src="images/aboutultimation.gif" width="167" height="26" border="0" alt="About my web-designing." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<a href="experiences/webmanagement/index.shtml">
<img id="webmanagement" src="images/webmanagement.gif" width="160" height="34" border="0" alt="Theoratical suggestions about managing websites." /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img id="index_26" src="images/index_26.gif" width="318" height="101" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="index_27" src="images/index_27.gif" width="167" height="84" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="" /></td>
</tr>
<tr>
<td>
<img id="index_28" src="images/index_28.gif" width="160" height="72" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="72" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
I think the problem here is just a poorly planned layout. The slicing is really bad, for such a small and simple layout there is no reason for it to be this complicated. When you make over complicated table structure these kind of things happen try simplifying things xhtml and css are suppost to make life easyer not add all the work you did here.
Thanks for your suggestion, can you please guide me on how to migrate to CSS design with this kind of layout?
Hey ZeroInspiration
Do you have anything to show? if not, then stop criticizing.
You did a great job kamran. :)
www.imranmalik.com
Actually I have a lot to show you snide little man. Please don’t try to start b/s with me I'm just telling the man the truth if you cant take criticism this is the wrong industry to be involved in. WebFeats said it the best "If your on the Internet you will be jugged.".Quote:
Originally posted by imranmalik
Hey ZeroInspiration
Do you have anything to show? if not, then stop criticizing.
You did a great job kamran. :)
www.imranmalik.com
http://www.dondefoes.com
http://www.j4kcleaning.com
http://www.phenomcreations.com/d
Guess you showed me...
Here is a link that might help you out its very helpfull in teaching you a lot about css in a short ammount of time.Quote:
Originally posted by kamran_pro
Thanks for your suggestion, can you please guide me on how to migrate to CSS design with this kind of layout?
Link to css video help here
ZI, I know CSS atleast till the extent told in those tutorials. I was wondering to get a help to convert such website with too many slices, to get technical. I can position seperate layers containing navigation etc. with top and left attributes, but how can I center that to screen.
Imran, thanks for your comments but I don't mind Z's criticizing :). Only constructive, I admit his first posts made me sick by laughing but I have enjoyed discussing things with him. Only thing is that Z and GameDev say I have defects in web design but when I request them to tell me what are navigational defects etc. so I can improve them, they don't reply :(.
Well since we are dealing with a layout that isn’t using roll over effects there is no reason to slice up the individual links, use html hotspots instead.
http://www.phenomcreations.com/demo.jpg
That’s five slices top, mid left, center, mid right, and bottom.
http://www.phenomcreations.com/demo2.jpg
Hotspots
The center should be an inline frame of course and all the controlling and position would be done in css. Since this layout plan does not really involve tables if you do it right you should have no problems, simply export from Photoshop delete the layer based layout and start creating the "DIV's" for positioning. Top and bottom should be set with a value to clear it on both sides so none of the other layers will bleed into their areas.
I'm working on it, here's the code, the only problem is that div tags of left, center add a line break after them, how can i suppress that :confused: :
style.css
index.htmlCode:body {text-align:center}
div.container {text-align:left; width:720px; height:545px}
div.top {width:720px; height:105px}
div.left {width:210px; height:340px}
div.center {width:318px; height:340px}
div.right {width:192px; height:340px}
div.bottom {width:720px; height:100px}
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Ultimation</title>
</head>
<body>
<div class="container">
<div class="top">
<img src="images/top.jpg" width="720" height="105" alt="" />
</div>
<div class="left">
<img src="images/left.jpg" width="210" height="340" alt="" />
</div>
<div class="center">
<img src="images/center.jpg" width="318" height="340" alt="" />
</div>
<div class="right">
<img src="images/right.jpg" width="192" height="340" alt="" />
</div>
<div class="bottom">
<img src="images/bottom.jpg" width="720" height="100" alt="" />
</div>
</div>
</body>
</html>
What editor are you using? If using dreamweaver are you viewing it in browser or just in the editor?
Dreamweaver has many weird rendering bugs but that’s only in the programs display.
Anyway with css and xhtml its possible to redefine the effect of a tag, I’m sure you already know this but I figured I would say it. Use the div tags id to create a new class and set the proper attributes to get the desired effect. Without viewing your source files I’m afraid I wont be of much help, you can show me that code and everyone else but without having it on hand for testing your out of luck. The code as is looks fine but I’m not viewing your css and without the images it’s about impossible to make it all line up.