i have been working on a simple website, its my first one:D. the page header is constructed of 5 images in a table. etch image has two versions, button in or out. the images will link to outher pages, and will be switched to show what page you are on.
everything is going well, except the images are loaded with a gap between them.
the images are seamless, and should look like this
this is the relevant peace of code, i’m hand coding it
After height and width, add “border=0”, and maybe “cellspacing=0 cellpadding=0”, I don’t remember. Tables
are always made with a slight border, because otherwise text would collide. When you use images, the border jusr becomes a pain. But with this, it can be removed.
You should read up on separating style from content & semantic markup. For example this is not tabular data (so a table should not be used) and the images are presentational so they should be added via css. Also the center element was deprecated in html 4.01.
Probably the most impotent mistake is that the alt attributes should have alternate text not the image names, this text is going to be read by any thing that dose not support images (search engines, screen readers, text only browsers, etc).
You should read up on separating style from content & semantic markup. For example this is not tabular data (so a table should not be used) and the images are presentational so they should be added via css. Also the center element was deprecated in html 4.01.
cannot expect it to be perfect, just this morning i knew next to nothing about HTML. il have a look at css;). how can i center it without using <center>?
Probably the most impotent mistake is that the alt attributes should have alternate text not the image names, this text is going to be read by any thing that dose not support images (search engines, screen readers, text only browsers, etc)
thank you, i dident rilly know what thay did:o
This will get what you want the standards compliant way, and is perfectly valid XHTML code.
Just don’t forget to change image1 and page1 etc. to the images and pages you want them to be.
Edit 1: By the way, the above will cause only that section of the page (the “header”) to be centered. If you want everything else centered, change the “#header {text-align: center;}” to “body {text-align: center;}” in the CSS.
Edit 2: Oh, and if you want to learn HTML the right and compliant way, go to www.htmldog.com. That will teach you the basics and the advanced stuff. Heck, I’ve read almost all of that site, and I STILL find stuff new in there.
Edit 3: Added the alt attribute to my code as N30N pointed out.
I know your only trying to help but that markup is even worse than what hessiess came up with (you dont even have alt attributes). Just because it’s not using tables doesn’t make it any more correct, It’s a list of links so a ul element should be used.
Have a look at this blog post if you don’t understand what I mean.
Actually, using a list will cause more confusion, and then you couldn’t make the bottom two appear correctly without having two lists. Also, if you use a list, it will be more confusing for him, because he has to add MORE CSS (#header * {display: inline;}) to it, and he might not know why he added it, so he might accidentally delete it, and not know why all his images are on a new line.
So, because he’s new, I still recommend the way I said above, though I admit he needs the alt attribute in the images.
Edit: Oh, and it isn’t really a list of links he’s using, its a line of images that happen to be links. So, making it a list would just make it more complicated and use more code than is necessary.
tynach:
i have tryed that code, it works exept im back were i started with the gaps.
when you click on a image in the wip page, it will link to a larger vertion. i am intending to use hd pings, and put a large image warning on the link. how can i make the image scail to the browser window width? so it will look the same on any monitor.
Its harder to maintain code in a table layout. Also, it just isn’t the correct usage of tables.
Anyways, I expirimented with the solution I gave you, and found it was all a matter of idiotic thing which shouldn’t matter. You see, all the <img> and <a> tags need to be on the same line, all running into each other for it to work correctly. So, I’m looking into some better methods, as this would cause editing code to be a PAIN. Worse than tables.
Also, it seems the problem exists for lists as well. So, using N30N’s idea won’t solve the problem.
Edit 1: The cleanest code I can see for this is like what N30N suggested, with lists. But, the gaps still exist. But, here it is for you:
I would suggest not using links as images, but an image as the background, and put ordinary text for the link. A good thing to do is use tabs, like the ones found here.
Edit 2: Also, for what you wanted, with it looking the same on all screens, that would be elastic design. A good article is written here about it. And that’s the other thing good about not using tables. I used elastic design on my site, so no matter what device you view it on, it looks correct. It even works properly on my Nintendo DS.
It could be done by floating the li elements and use clear where he wants the line brake.
It’s good for him to start out doing things correctly rather than having to unlearn bad habits later on.
This is where your getting mixed up. The images are purely presentational (as is the fact that they are in a line), it’s not like a photo or something, they are not content.
Have a look at the blog post I liked to before.
To start with I dont recommend hessiess starts with xhtml (high probability it wound be invalid and served incorrectly). Now there is no division in the page and it doesn’t even help with styling so scrap the div and the markup for the lists is so bad it may as well be a table. It should be marked up like this.
Note I added the second list only because wip and complete are sub category’s and not just becaue is helps to style the page (thats just a added bonus of doing it correctly, which is often the case). Now there are many ways this could be styled to get hessiess’s desired result but I don’t have time to make the whole page for him.
PS. Tynach I hope you don’t feel like I’m picking on you and that you can see the importance of semantic markup.
I understand, but I’m just worried because I did try the various methods, and with the method you described, the only way to get them to appear one right after the other was to float them, and even that would work incorrectly, and also destroy the centering that he wants. And, it still has the spaces between the images.
Also, the division in his page is between the navigation and the content. I would personally use a layout like this:
<div id="main">
<div id="header">
heading and navigation
</div>
<div id="content">
Page Content
</div>
<div id="footer">
Copyright and footer info
</div>
</div>
It is kinda a personal preference I guess, it’s just that there’s wasn’t much point having the header div that only contains one element.
No, it could be done better with a object element using a child list for the maps but varies browsers have bad support for that (and I’m unsure how will it would work for screen readers). Also this is the old way of thinking where you style your page with html rather than with css.
No and just as importantly it’s not assessable. If you are going to listen to one thing I’ve said please use html unless you are going to research/learn how to implement xhtml correctly. For validating try the w3c validator.
If you don’t mind me asking where are you learning your (x)html from?
i have read the blog post, the first “bad” example makes a hell of a lot more sense to me than the second one dus. splitting up one page into multiple files just makes everything way more confusing for me.
No and just as importantly it’s not assessable. If you are going to listen to one thing I’ve said please use html unless you are going to research/learn how to implement xhtml correctly. For validating try the w3c validator.
i have been listening to everything you have sead, and i am resertching making valid code. it not beeing assessable was caused by a typo, which beeing dyslexic is a very conman problem. this reviled a number of other problems, mostly typo’s witch i have now corrected. the page now validates, except for one ‘potential issue’ with the character encoding. the page states
Specifying a character encoding is typically done by the web server configuration
it is currently hosted on unloader.polorix.net, which is a file host, not a web host. so thats probably the problem. although im probably completely wrong. here is the link to prove that it validated
i am not using any particular scorce for learning (x)html. htmldog, w3schools and a large number of other websites found by searching. i am learning this in exactly the same way as i learnt blender, ubuntu and almost everything else i know how to do/use. I experiment until i get something that works. reserch errors and ask questions if i cannot find an anser
im going to stick to image maps until i find a better way to do it that actually looks how i want it to look. ie no gaps:)
how can i achieve the layout on the about me page, image on one side text on the other, aligned to the edges of the header. without using a table?
it curently dus not alighn with the header after replacing the <center> tag with the css. it centers the elements in the table, not the table on the page
ps, the home page renders perfectly on dads pda/ phone thingie:evilgrin:
Don’t use image maps. You don’t get to take advantage of browser caching that way. (You have a new map for every page instead of smaller buttons that can already be cached).
Believe it or not, the problem with the gaps is due to whitespace rendering issues. The newlines between your image tags is messing you up.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My image menu with no gaps</title>
<style type="text/css">
body {
background-color: #fff;
}
#menuBar {
text-align: center;
}
</style>
</head>
<body>
<div id="menuBar">
<div id="menuBarTop">
<a href="#link1"><img src="button.png" alt="my alt text" title="my title text" height="25" width="80" border="0"
/></a><a href="#link2"><img src="button.png" alt="my alt text" title="my title text" height="25" width="80" border="0"
/></a><a href="#link3"><img src="button.png" alt="my alt text" title="my title text" height="25" width="80" border="0" /></a>
</div>
<div id="menuBarBottom">
<a href="#link4"><img src="button.png" alt="my alt text" title="my title text" height="25" width="80" border="0"
/></a><a href="#link5"><img src="button.png" alt="my alt text" title="my title text" height="25" width="80" border="0" /></a>
</div>
</div>
<p>
The whitespace between image tags can inject gaps into the display:
</p>
</body>
</html>
Notice how I split the image tag so that there is no space between any of the tags within the block. (You could do the same thing by putting them all on the same physical line of code). This is very important - this is where your gaps were coming in.
You’ll have to plug in your own image into the code, but there should be no gaps at all. It’s a silly bug, but it is what it is.
