HTML Help

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Hi Everyone,
This looks like a very helpful site for so many things.

Since I make websites all the time, I'm trying to help my sister and her husband out making a site for his new job. They know nothing about Html.

The only thing I sometimes have trouble with is lining things up right in tables.
Here is the url to the site I'm making for them, and you can see the problem I'm having with the word After not wanting to line up properly with the pictures. I keep trying all kinds of things and nothing seems to want to work. I keep trying all kinds of things like changing the alignments in the cells, the cellpadding, all kinds of things, nothing seems to be doing anything with it. Especially the word After keeps staying all the way to the right as you will see.
http://www.astresurfacing.com/beforeandafter.html

Any help is very appreciated. Thanks!
Amy

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

Correct these errors while I work on it:

Result: 0 errors / 5 warnings

line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 4 column 1 - Warning: <title> isn't allowed in <html> elements
line 1 column 1 - Info: <html> previously mentioned
line 23 column 1 - Warning: discarding unexpected </a>
line 6 column 1 - Warning: missing </center>
line 7 column 1 - Warning: trimming empty <p>
Info: Document content looks like HTML 3.2

Can I talk you out of using tables?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

Never mind about correcting. This should work for you:

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Before And After</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<style type="text/CSS">
* { margin: 0; padding: 0; border: 0; }

a:link { color: #00f; }
a:visited { color: #ff0; }
a:hover { color: #0ff; }
a:active { color: #0f0; }

body {
color: #000;
}

div#contents {
width: 440px;
height: 224px;
margin: 0 auto;
}

table {
width: 100%;
background: #000;
margin: 5% 0;
}

td {
text-align: center;
color: #fff;
font-family: Verdana;
font-size: 1em;
}

p#back {
margin-top: 2%;
text-align: center;
color: #f0f;
font-size: 1.2em;
}

h1 {
width: 15%;
margin: 1% auto;
background: #fff;
color: #000;
}
</style>
</head>
<body>
<h1>Page Title Here</h1>
<div id="contents">

<table summary="">
<tr>
<td>Before</td>
<td>After</td>
</tr>

<tr>
<td colspan="2"><img style="width: 440px; height: 156px;" src="http://www.astresurfacing.com/tub.jpg" alt="Tub"></td>
</tr>

<tr>
<td>Before</td>
<td>After</td>
</tr>

<tr>
<td colspan="2"><img style="width: 440px; height: 168px;" src="http://www.astresurfacing.com/sinkba.jpg" alt="Sink"></td>
</tr>
</table>

<p id="back"><a href="http://www.astresurfacing.com/">Back</a></p>

</div>
</body></html>



Change styling, colors, etc., to your tastes.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

First I would like to thank you very much for all this great help.
I've printed all this out so I can go back and try and understand everything.
Are the codes that you put in, both CSS and Html?
It looks like the bottom part is the one I would use for
doing the table in Html.
CSS seems a little confusing to me, so I've been making sites in Html.

Another question I have, is how to determine how big you should make the width of the table? Do you do that based on the width of content you will be adding to the site?
I've noticed the sizes of my pictures the width of all of them are 440px, and the height are all different.
So, since the width of the picture is 440px then if I put the width of the table 100% that wouldn't work?

See, I found on this one site after looking around here more on this part it talks about the best layout for sites is to format the site by doing a table to have a column layout and said to do 100% for the width of the table and to do each the 2 cells/columns at 50% http://www.w3schools.com/html/html_layout.asp

I like that layout, so that I can have the links down the left hand of the page. Doing a table is the only way I can figure out how to do that. Or Frames, which someone told me that most people don't do frames anymore on the sites.

Here is the url to the main page of the http://www.astresurfacing.com/main.html
site, and see I'm trying to figure out how to get the picture in the right cell of the table to be moved more to the left.
I guess I'm trying to figure out since my picture has a width of 440px and the width of the table is 100% why is that even fitting on the site at all?
Is there somekind of formula for computing this stuff out?
Thank you so much for all the great help,
Amy

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

AmyR9 wrote: First I would like to thank you very much for all this great help.
I've printed all this out so I can go back and try and understand everything.
Are the codes that you put in, both CSS and Html?

Yes. The style tags between the head tags is the embedded CSS part.

It looks like the bottom part is the one I would use for doing the table in Html.

You will need the CSS part to make the bottom part work correctly.

CSS seems a little confusing to me, so I've been making sites in Html.

Another question I have, is how to determine how big you should make the width of the table? Do you do that based on the width of content you will be adding to the site?

Just like this forum's content is designed to a page of 800 x 600, you should stick with that. Eye scan should not exceed around 12% on content from left to right. The width of the table as set will be 100% of what the contents container DIV is set(400px in this case).

I've noticed the sizes of my pictures the width of all of them are 440px, and the height are all different.
So, since the width of the picture is 440px then if I put the width of the table 100% that wouldn't work?

That's why I setthe styling for the image tag to be what the image sizes are. Never leave this out. Helps browsers figure out the layout of your page.

See, I found on this one site after looking around here more on this part it talks about the best layout for sites is to format the site by doing a table to have a column layout and said to do 100% for the width of the table and to do each the 2 cells/columns at 50% http://www.w3schools.com/html/html_layout.asp

I like that layout, so that I can have the links down the left hand of the page. Doing a table is the only way I can figure out how to do that. Or Frames, which someone told me that most people don't do frames anymore on the sites.

They say that about frames because most people never get them right. They are more complex than a normal page.

Here is the url to the main page of the http://www.astresurfacing.com/main.html
site, and see I'm trying to figure out how to get the picture in the right cell of the table to be moved more to the left.

Let me know how it goes on this one.

I guess I'm trying to figure out since my picture has a width of 440px and the width of the table is 100% why is that even fitting on the site at all?
Is there somekind of formula for computing this stuff out?

Yes. You have to take a lot into account. Especially how IE calculates things versus the better browser - Firefox. Al;ways use FF to check your site. It is the only browser that is closest to being fully compliant with CSS2.1/HTML 4.01 Standards.

Thank you so much for all the great help,
Amy

You're more than welcome.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Ok, this is getting even more confusing to me.
Not sure what to think.
When I go to this site here http://www.allsurfacetech.com/
that I'm trying to get the one I'm working on to look like, when I view the source codes, it doesn't seem to have the CSS stuff above the html stuff for the tables.
That's what I'm not understanding.

Adding the CSS to the site I'm trying to do would be a bit difficult for me to do at the moment. I'd need to learn that better. I've been doing everything in html all this times. The only reason I've been mainly doing sites is because of being home all the time due to health issues.
So, since my sister and her husband don't have the time to even learn html, I'm trying to help them out with doing this site for them.
Since they are affiliated with the company, we basically copy and use anything too for the site.
The only difference is that my sister and husband website it is for Customers and not for people looking for business opportunities.

The other problem, I don't have Mozilla. I had to get rid of it and so many other things because of my CPU usage keeps going to 100% after switching from Dial up internet to DSL. So, added a modem, router, plus all these Bellsouth software that the installation cd my nephew put in my computer installed and all to my computer which has 256MB of RAM.
I've got Netscape, and IE but I can't really use IE at the moment to well. Keeps having problems ever since spyware got into my computer, and haven't been able to get it working right. This repairman bascially just said don't use IE and I won't have anymore problems.

How do you determine what the contents container DIV is?
Is it 440px since the picture is that width?

AmyR9 · Joined: 14 Sep 2008 Posts: 79

I'm beginning to wonder if I'm making this harder than it needs to be.
The way the site is set up now, on each page I have listed down the left hand column of the site, is mostly how I was thinking would be the main way to have the site spaced out, with the stuff in the right column moved a bit more to the left.
On each page, how would I get the top part in the CSS to match what I have on each page so far?
Would that be too difficult to do?
I'm trying to figure out by the codes you put for the top part, like margin , paddding all that stuff,
since I have 10 for the padding in the table instead of the 0 that you put, I would put 10?
and for the a link, visted all that stuff is that for the table or the site itself?
For the Div thing, how did you get 224 for the height?
The pixels for the width I think I figure out that 440 is from the width of the images? But 224, since the height is different for both.

oh and the line where you put body and then color at
since I have the background would I change it to body background and then put the lightblue.jpg which is what my background is?

Sorry for all the questions. I just really want to learn all this better one of these days.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

AmyR9 wrote: Ok, this is getting even more confusing to me. Not sure what to think. When I go to this site here http://www.allsurfacetech.com/ that I'm trying to get the one I'm working on to look like, when I view the source codes, it doesn't seem to have the CSS stuff above the html stuff for the tables. That's what I'm not understanding.

The CSS is linked to by this: Code: <link href="style.css" rel="stylesheet" type="text/css" /> . Full link to it is: Code: http://www.allsurfacetech.com/style.css

Adding the CSS to the site I'm trying to do would be a bit difficult for me to do at the moment. I'd need to learn that better. I've been doing everything in html all this times. The only reason I've been mainly doing sites is because of being home all the time due to health issues.

The other problem, I don't have Mozilla. I had to get rid of it and so many other things because of my CPU usage keeps going to 100% after switching from Dial up internet to DSL. So, added a modem, router, plus all these Bellsouth software that the installation cd my nephew put in my computer installed and all to my computer which has 256MB of RAM.

You must get more than 256MB of RAM! That is way too low and probably is making your O/S use a lot of Virtual Memory slowing you way, way down. Best to use Firefox, too, if you plan to design your pages.

I've got Netscape, and IE but I can't really use IE at the moment to well. Keeps having problems ever since spyware got into my computer, and haven't been able to get it working right. This repairman bascially just said don't use IE and I won't have anymore problems.

Repairman is an A**!!!! Go to http://GeekstoGo.com and look through the malware guides. Will help you eliminate 70% of your problems. If you think you still have problems, post in the malware section of the forum. I'm on the Tech Staff there, but do not handle malware problems on the forum.

How do you determine what the contents container DIV is?

That is the div that I set with the selector name "contents" in the CSS (div#contents {}). Your table is inside it and fills it 100% (width).

Is it 440px since the picture is that width?

It is. You can set it to 800px if you wish.

[/code]

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

AmyR9 wrote: I'm beginning to wonder if I'm making this harder than it needs to be.
The way the site is set up now, on each page I have listed down the left hand column of the site, is mostly how I was thinking would be the main way to have the site spaced out, with the stuff in the right column moved a bit more to the left.
On each page, how would I get the top part in the CSS to match what I have on each page so far?

Everything in the top part that is CSS for the one page can be transferred, except the style tags, to its own CSS file. Just like the one your referenced. Provided you will be using the same layout for each page. Otherwise, you will have to adjust changes accordingly for each page by using different selector/class names in the css file.

Would that be too difficult to do?

More than likely since you are not familiar with CSS.

I'm trying to figure out by the codes you put for the top part, like margin , paddding all that stuff,
since I have 10 for the padding in the table instead of the 0 that you put, I would put 10?
and for the a link, visted all that stuff is that for the table or the site itself?

DO NOT change the margin/padding/border from zero that comes after the asterisk (*)!. In CSS you must add a dimension, not just a value. Look through the tutorials on THIS site for good information on all this. The link CSS is for that page only right now since you are not linking to an external stylesheet. It is for all your links on that page and should be used for every page you make. Change styles as you see fit.

For the Div thing, how did you get 224 for the height?
The pixels for the width I think I figure out that 440 is from the width of the images? But 224, since the height is different for both.

Looked at the Properties of both images which gives me the width/height. Right-click on an image and select "Properties" from the Context Menu.

oh and the line where you put body and then color at
since I have the background would I change it to body background and then put the lightblue.jpg which is what my background is?

If using an image as a background, the coding will be different. What you use will depend on whether the image has to be tiled or not and whether you want the contents to scroll over the image or not.

Sorry for all the questions. I just really want to learn all this better one of these days.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Thank you very much for all of this great help.
I'm printing all this out to study up on all this CSS stuff. That is how I learned Html.
Just kept looking through all the tutorials, and asking questions on things I get stuck on and just kept practicing, until I finally got my very 1st website designed.

That helps to clear up why I wasn't seeing the CSS on that site.

I did also get IE to open up, and noticed just what you were talking about things showing up different.
When I look at my page in IE I noticed it puts the pictures and everything I have on there more to the right side of the screen.
In Netscape it keeps showing everything totally different.

I actually already do have an account on the Geekstogo site. Did get help with some things.
Only problem I keep running into with getting more RAM is the type of RAM my computer requires isn't available anymore. My mom has been trying to call around to find someone we can use for our computers since the last company we used didn't like him to much after the last time he came out. One said that they wouldn't be able to increase it much at all. Just said by like 1 GB and trying to explain, but then came back and said he couldn't find it anywhere in the office.
Basically said to go get a new computer. Which I can't afford that. Plus if I get a new computer, I'd also have to get a new printer and scanner too since they wouldn't work with Windows Vista. So, then it would cost alot of money for the new computer, scanner, printer, and then to pay someone to come help get everything set up.

I just noticed too that it says under your name that you are from Biloxi, MS? I'm not far from you, Florida- Pensacola area.
So, how are you doing with all these hurricanes?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

AmyR9 wrote: I just noticed too that it says under your name that you are from Biloxi, MS? I'm not far from you, Florida- Pensacola area.
So, how are you doing with all these hurricanes? Got through Gustav and Ike with only wind damage. FEMA taking care of me still after Katrina.

Go to this site and let it scan your computer for memory recommendation. Just select the right info for computer make/model and let it install the ActiveX component needed for a scan. It may come up with memory that available.

http://crucial.com/

Can't believe someone told you your memory is no longer available. You also can do memory searches at:

http://newegg.com/
htpp://tigerdirect.com/

BTW, you WILL BE MORE than happy with 1 GB of RAM installed. You'll see a big difference.

I'm originally from Tampa.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Looking around, and I think I found the answer to some of why my sites have been working all these years doing just the html parts.
I've been doing them on places like Angelfire, Tripod, Geocities.
Here is a link to one of my sites on Geocities, http://www.geocities.com/amymusicfan/americanidol7.html did notice they have the CSS thing as a link. If I'm now understanding that correctly, that's an external style sheet? Is that correct?

This is the first time I'm doing a site at this place that my sister and her husband got their domain from.
See, if I go to the html editor thing they have on that site, it comes up sort of like microsoft word would, and not like things do at Geocities, Angelfire, Tripod. Then whenever I type in any type of codes it shows up as text.

The type of memory my computer has is 256MB PC800 RDRAM. It's a Dell Desktop Dimension 8200.
Any suggestions on how to find someone who knows what they are doing?

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Ok, just did the scan at Crucial, and here is what it said-
Crucial currently does not have any compatible upgrades available for your particular system. If you have questions or would like further support, please contact our support department.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Thank you so much again for all this wonderful help.

I'm going through all the tutorials, and just got a Geocities account to practice learning the CSS.
One thing I'm trying to understand is that when you write out the CSS, it looks like you can put it all on one line instead of doing it separate like you did?
But then if you do it on one line you need to do the ;
to seperate each value?

Also, was wondering if in the HTML area for my body tag if I have
<body background="lightblue.jpg" text="#000000" link="#0000ff" vlink="#0000ff">
How would I do all of that in CSS?
Would it be?
body{background:lightblue.jpg;color:black;a:linkcolor:blue;a:visited color:blue;}

Is that right? or am I completely lost here?

Still not understanding what the formula for even is for calculating the table width.
is it 12% of the DIV?
Last night too, I was using my mom's computer and had found someplace that was explaining how to calculate all the things for differnet type of tables you can do- percentage, pixels.
But I can't remember where I was. It gave so many great examples I was looking at. Maybe you may know what site it could have been?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

AmyR9 wrote: Here is a link to one of my sites on Geocities, http://www.geocities.com/amymusicfan/americanidol7.html did notice they have the CSS thing as a link. If I'm now understanding that correctly, that's an external style sheet? Is that correct?

CSS comes in three "types": External stylesheet, embed and inline.

This is the first time I'm doing a site at this place that my sister and her husband got their domain from.
See, if I go to the html editor thing they have on that site, it comes up sort of like microsoft word would, and not like things do at Geocities, Angelfire, Tripod. Then whenever I type in any type of codes it shows up as text.

I hope it is writing proper code. :)

The type of memory my computer has is 256MB PC800 RDRAM. It's a Dell Desktop Dimension 8200.
Any suggestions on how to find someone who knows what they are doing?

Find someone who knows what? How to put your memory in or track it down? Did you go to that site I suggested and let it search your PC for memory info?