What to do? [Archive] - CodingForums.com

Xiode

12-06-2004, 10:20 PM

I'm starting a business soon, but it's been a while since I've done any web coding, so I'm in need of a little help! I've already developed a layout, which you can see here:
http://www.kot.genxtreme.net/xiode/

That much was done in Photoshop and sliced using ImageReady. You can view the source, because right now it's just solid HTML. Basically what I want to do is code the text instead of doing it in PS, but I don't know how to go about doing that.

By the way, just in case you need it, index_18.jpg is the image that I will be writing over (everything below the nav bar).

Thanks!

rmedek

12-06-2004, 11:22 PM

Basically what I want to do is code the text instead of doing it in PS, but I don't know how to go about doing that.
Well, you have two choices:

1. Pay someone to do it for you.
2. Learn to do it yourself.

I'd pick "two." :) Try http://www.htmlgoodies.com or http://w3schools.com for some good intro to xhtml coding and CSS.

Xiode

12-06-2004, 11:26 PM

Well, you have two choices:

1. Pay someone to do it for you.
2. Learn to do it yourself.

I'd pick "two." :) Try http://www.htmlgoodies.com or http://w3schools.com for some good intro to xhtml coding and CSS.

I'd pick "two" also, but I was hoping you guys could just tell me really briefly how to write on that image. I mean, I COULD do it in Photoshop, but that would be very time consuming to update.

rmedek

12-06-2004, 11:42 PM

Oh. I see, you want to just code the text that goes over the image. Well, the easy way to do it with the code you have is make the image a background image in the table cell and write the text over that.

change:
<tr>
<td colspan="13"><img src="images/index_18.jpg" width="779" height="591" alt=""></td>
</tr>
to:
<tr>
<td colspan="13" style="width: 779px; height: 591px; background: url(images/index_18.jpg) top left no-repeat #fff;">text goes in here</td>
</tr>
This should do it for now... but I'd suggest learning some of the basics because coding in this manner will make things very difficult to update in the future. Hope this helps...

Xiode

12-07-2004, 12:25 AM

This should do it for now... but I'd suggest learning some of the basics because coding in this manner will make things very difficult to update in the future. Hope this helps...

By doing that, you're just using CSS right? In turn, I could make a .css and link it, so I can do this with all the text?

What do you mean coding in thie manner wil make things very difficult to update in the future? What alternative method should I use?

rmedek

12-07-2004, 12:45 AM

By doing that, you're just using CSS right? In turn, I could make a .css and link it, so I can do this with all the text?

What do you mean coding in thie manner wil make things very difficult to update in the future? What alternative method should I use?

What I mean about coding in this manner is this. Here's your code now:
<html>
<head>
<title>xTECH-PC | Your source for customized PC's and game servers!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#F3F3F3" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table align="center" id="Table_01" width="779" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="images/index_01.jpg" width="4" height="209" alt=""></td>
<td colspan="12">

<img src="images/index_02.jpg" width="775" height="15" alt=""></td>
</tr>
<tr>
<td colspan="12">
<a href="">
<img src="images/index_03.jpg" width="775" height="165" alt="" border="0"></td></a>
</tr>
<tr>
<td colspan="6">

<img src="images/index_04.jpg" width="428" height="3" alt=""></td>
<td rowspan="2">
<a href="http://www.newegg.com">
<img src="images/index_05.jpg" width="93" height="29" alt="" border="0"></td></a>
<td colspan="2">
<img src="images/index_06.jpg" width="21" height="3" alt=""></td>
<td rowspan="2">
<a href="">
<img src="images/index_07.jpg" width="110" height="29" alt="" border="0"></td></a>

<td rowspan="2">
<img src="images/index_08.jpg" width="76" height="29" alt=""></td>
<td rowspan="2">
<img src="images/index_09.jpg" width="47" height="29" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_10.jpg" width="94" height="26" alt=""></td>
<td>

<a href="">
<img src="images/index_11.jpg" width="72" height="26" alt="" border="0"></td></a>
<td>
<img src="images/index_12.jpg" width="10" height="26" alt=""></td>
<td>
<a href="http://www.alienware.com">
<img src="images/index_13.jpg" width="230" height="26" alt="" border="0"></td></a>
<td>
<img src="images/index_14.jpg" width="15" height="26" alt=""></td>

<td>
<img src="images/index_15.jpg" width="7" height="26" alt=""></td>
<td>
<img src="images/index_16.jpg" width="15" height="26" alt=""></td>
<td>
<img src="images/index_17.jpg" width="6" height="26" alt=""></td>
</tr>
<tr>
<td colspan="13">

<img src="images/index_18.jpg" width="779" height="591" alt=""></td>
</tr>
</table>

</body>
</html>
And here's how your code could look:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>xTECH-PC | Your source for customized PC's and game servers!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>

<h1>xTech-PC: Custom gaming machines</h1>

<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="gaming.htm">gaming computers</a></li>
<li><a href="servers.htm">servers</a></li>
<li><a href="contact.htm">contact</a></li>
</ul>

<div id="content">
<p>text goes in here. Lots and lots of good text.</p>
</div>

</body>
</html>

You get the picture. Code semantically, apply styles with CSS (yes, you can use it externally and call it in the HTML)... there's really not much I can add that hasn't been said a million times already in this forum and on the web. Check out the tutorials I mentioned and spend some time on the FAQs in this forum and you'll gain a pretty good understanding.

AaronW

12-07-2004, 01:20 AM

You could also read some of the relevant articles on www.alistapart.com .

But the table hack is fairly simple: Visualize your layout as a grid, and where the should be text, that block in the grid would have a background image. All non-textual blocks get images put in them. Images can be stretched, and backgrounds can be repeated. That's actually the whole concept right there. Just a matter of seeing which parts you should tile and which parts you shouldn't. The more you stretch and tile, the less people will have to download and the quicker your page'll load.

But CSS would be the ideal method, though I'm reluctant to suggest it to a "newbie"... Then again, my troubles with it are probably just due to my experience and comfort with the table hack ;) Give CSS a shot first though. It's definitely trendier.

Xiode

12-07-2004, 11:46 AM

You could also read some of the relevant articles on www.alistapart.com .

But the table hack is fairly simple: Visualize your layout as a grid, and where the should be text, that block in the grid would have a background image. All non-textual blocks get images put in them. Images can be stretched, and backgrounds can be repeated. That's actually the whole concept right there. Just a matter of seeing which parts you should tile and which parts you shouldn't. The more you stretch and tile, the less people will have to download and the quicker your page'll load.

But CSS would be the ideal method, though I'm reluctant to suggest it to a "newbie"... Then again, my troubles with it are probably just due to my experience and comfort with the table hack ;) Give CSS a shot first though. It's definitely trendier.

I used to know all of this back in the day, but like I said, it's been a while. I'll start learning CSS today and see if I can't make it better. How would I make a global variable in CSS that I could call for all of the text inside the content box?

Also, the way you coded it rmedek, it has no images. Would it look good that way?

ronaldb66

12-07-2004, 01:12 PM

Style sheets don't work that way: a style sheet consists of a set of rules; each rule sets the values of one or more properties or presentational aspects of certain portions of the page. Properties include font and text aspects, colors, borders, positioning, background images and their placement, etc.
Each rule contains a selector which determines which portions of the page are affected by it; these can be very generic, or very specific, and everything in between.

A decent introduction to CSS and properties is -as mentioned- the W3Schools CSS Tutorial (http://www.w3schools.com/css/default.asp); a very good tutorial on selectors is the Selectutorial (http://css.maxdesign.com.au/selectutorial/index.htm) by CSS Maxdesign.

Many, many more resources can be found in the "HTML & CSS Documention & References (http://www.codingforums.com/showthread.php?t=20862)" sticky in this forum.

jbot

12-07-2004, 04:53 PM

Xiode

12-07-2004, 09:43 PM

Ok, I edited the line with the one that rmedek said, yet it ends up like this:
http://www.kot.genxtreme.net/xiode/

How do I get it to align right under the nav bard and have the text stay in the boundaries of the box?

rmedek

12-07-2004, 10:02 PM

rmedek: the code example you gave is not XHTML, but just plain HTML. IE doesn't support XHTML anyway, so you need to be careful how you serve up the content-type.
I'm confused... From what I understood, the XHTML family should be served with application/xhtml+xml but XHTML 1.0 documents and HTML compatible ones should be served with text/html. The document is formed as XHTML but parsed as HTML, right? (until, of course, IE starts supporting application/xhtml+xml) So I'm not sure what the problem is...

http://www.w3.org/TR/xhtml-media-types/

Xiode

12-07-2004, 11:07 PM

Ok, I edited the line with the one that rmedek said, yet it ends up like this:
http://www.kot.genxtreme.net/xiode/

How do I get it to align right under the nav bard and have the text stay in the boundaries of the box?

Anyone?

rmedek

12-07-2004, 11:36 PM

Hey Xiode,

If you're not going to take the time to learn some (very) basic coding techniques or read the links supplied by many people already, then you're going to have to wait a little more than an hour and a half for us to code it for you. Ok?

Xiode

12-07-2004, 11:57 PM

Hey Xiode,

If you're not going to take the time to learn some (very) basic coding techniques or read the links supplied by many people already, then you're going to have to wait a little more than an hour and a half for us to code it for you. Ok?

I'm very sorry, I'm not trying to give you guys the impresison that I'm wanting for you guys to code it all for me or anything, I would just like an example of how I would do it so I can learn.

And as for learning, I will definately learn a lot more CSS and HTML. I would have done it today except for the fact that I was swamped with requests for PC's on IRC today and I've been doing other things setting up the business. I am most certaintly going to learn on my own, when time permits. I'm hoping I can do it tomorrow.

ronaldb66

12-08-2004, 12:52 PM

Rich,
I'm confused... From what I understood, the XHTML family should be served with application/xhtml+xml but XHTML 1.0 documents and HTML compatible ones should be served with text/html.

I decided to look it up:
Why is it allowed to send XHTML 1.0 documents as text/html? (http://www.w3.org/MarkUp/2004/xhtml-faq#texthtml)
So, you really should serve it as application/xhtml+xml, but you can serve it as text/html for compatibility with "legacy" browsers (like IE... :D )

That is one nifty trick they present there to make IE play along, by the way.

jbot

12-08-2004, 02:05 PM

So, you really should serve it as application/xhtml+xml, but you can serve it as text/html for compatibility with "legacy" browsers

wrong on the last part of that statement. serving anything as "text/html" is just serving HTML, whether or not the document validates as XHTML. it just means the browser reads it as HTML.

moreover, 99% of websites claiming to be XHTML are not.

rmedek

12-08-2004, 07:36 PM

Ah, good link... thanks Ronald. And jbot for bringing the issue up, although for now I can't see myself serving up anything other than "text/html"...

So now that IE is officially a legacy browser, can I finally stop sending my stylesheets to it? :D:D:D

jbot

12-08-2004, 09:04 PM

So now that IE is officially a legacy browser, can I finally stop sending my stylesheets to it? :D:D:D

chance would be a fine thing alas LOL