HTML help

Generiched · Post by **Generiched** » Sun Dec 17, 2006 7:21 pm

I'm not sure if your allowed to ask for HTML help but I figured I might as well as I didn't see any rules against it. My comic (http://generiched.comicgenesis.com/) uses tables as well as divs. This was all fine when I was on Internet Explorer 6 but now I have switched to Internet Explorer 7 the table has moved to the top right corner covering the comics navigation.
In an attempt to fix it I changed all the tables into divs (except for on the cast page which is a table inside a div and seems to be working fine) but now it has gotten worse.
Some tables have remained to the top right corner while other ones on different pages have moved left but not down and scattered the images inside them.
This is the code I'm currently using for the main tables in which comics/info sits:

Code: Select all

<div style="position:absolute; top:130; left:190; width:600; align:center;"> Content Here </div>

Does anyone have any ideas how to fix this?

Dr Neo Lao · Post by **Dr Neo Lao** » Mon Dec 18, 2006 12:47 am

I'm not seeing the problem you are describing. But I am seeing cross-browser problems. In non-IE browsers the comic is hard on the left, over the top of your navigation. The image map should work, but it's hidden under the div. So it can't be used.

I think the problem may be that putting position elements in the style of a div won't work properly. What you need to do is declare a new element in your css like this:

Code: Select all

 #comic { position:absolute; top:130; left:190; width:600; align:center; }

And then when you want to use it to show the comic, you use it like this:

Code: Select all

<div id="comic"> Content Here </div>

That should work if you implement that across all your pages. Of course, it'll be easier to update multiple pages if you use an external css and link to it from all pages, rather than repeating everything on every page...

C.w. · Post by **C.w.** » Mon Dec 18, 2006 12:07 pm

May i suggest http://www.w3schools.com/css/default.asp

As for your code... well...

"align: center;" is not valid CSS (as far as i know - IE might muck it up.) and therefore doesn't really do anything - besides which, by absolutely positioning the element you're doing just that - telling exactly where you want the element to be. You might be getting problems from not delcaring a unit for your measurements - try 130px instead of just 130.

-edit- Hibbilty Jibbilty! After a second look i think i know what the problem is. You're having troubles because you've positioned the div within the keen_ad div. When you use position: absolute you measure from the inside of the containing element - in this case the keen ad. By not setting a unit the top and left lines are not being parsed, forcing everything to just sit on top of stuff.

Add px, and unnest your DIVs and everything should work. --

I looked a bit at your page - you seem to have a lot of extranious HTML tags in there like <CENTER> that you really don't need if you're using CSS.

As for putting the style within the element - it is frowned upon because then you're mixing content and presentation - the seperation of which was sort of the point of CSS.

Generiched · Post by **Generiched** » Mon Dec 18, 2006 6:00 pm

I've followed both instructions but the div is still on the far left. Have I done somehting wrong?

C.w. · Post by **C.w.** » Mon Dec 18, 2006 8:52 pm

Sorry - didn't notice you were using xhtml. Inline styles screw up in xhtml without a rather complex doodad to fix them. You can either switch to html transitional or strict, or even do the doodad - though i'm not sure why you'd want to use xhtml.

In either case, you'll need to tweak some of the positions. (Specifically the navigation)

Dr Neo Lao · Post by **Dr Neo Lao** » Mon Dec 18, 2006 9:34 pm

What c.w. said: change

#comic { position:absolute; top:130; left:190; width:600; }

to

#comic { position:absolute; top:130px; left:190px; width:600px; }

Gotta specify the units being used (position ought to either be something px (pixels) or something % (not exceeding 100).

See if that fixes it. (I can't believe I didn't notice that the first time... sorry.)

Generiched · Post by **Generiched** » Tue Dec 19, 2006 10:46 pm

Yay! It's working! Thank you both for all the help.

House · Post by **House** » Thu Dec 21, 2006 9:24 pm

Hey! I was wondering.. once you have all your HTML stuff done on note pad.. where you'd you put it in FTPclint. Also.. how do you do this and not effect your comic? I mean.. I want to have an actual website that houses the comic. I'm rather new to HTML, but I understand some basics. But FTPclints can get confusing. IS there an easier way..or am I doing this right? Thanks.

Black Sparrow · Post by **Black Sparrow** » Thu Dec 21, 2006 10:39 pm

house:

I'm not exactly sure what you mean by "not affecting the comic"... ah, well. We'll go with what we have.

First of all... Read the tutorial. It's a lot clearer and more detailed than I could ever hope to be. Don't just skim through it, read it and make sure you understand it.

In answer to you question about getting you pages into your ftp... Just save it as an .html document from notepad, go into your ftp, and upload it into your workspace/webpages folder (or in the case of the indextemplate and dailytemplate, just your workspace folder. Read the link I gave you; it's all in there)

Hopefully that answers your questions. If you read the tutorial and still don't get it, ask again (hopefully with a little more clarity)