Member Avatar for dougancil

I have a web page that I'm trying to place 3 div tags in and to make them center correctly. The page is a auto generated html from a psd file created with Photoshop. The html for the page is one table. I have the following code for my div tag:

<DIV STYLE="position:absolute; top:368px; left:162px; width:878px; height:98px; font: Franklin 'Franklin Gothic Demi Cond';"">
<FONT SIZE="4" color="#333333">This is an editable area</FONT>
</DIV>

I will also say that I am using css on this page and had to center the page like this with code:

<table id="Table_01" width="1260" height="811" border="0" cellpadding="0" cellspacing="0" style="margin: 0px auto;">

Because on some browsers the page wasnt aligning properly.

How do I get the additional div tags to align like the rest of the page? I've tried changing the position within the div tag to left and auto and those don't seem to work. Do I have to hand code where the div tag will go?

  • 3 Contributors
  • 5 Replies
  • 127 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by dougancil
Member Avatar for Armadillo

There are two things you can try; change the CSS from margin: 0px auto; to margin-top:0px; margin-left: auto; margin-right: auto;

Then make sure your <DOCTYPE> is correct. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

"http://www.w3.org/TR/html4/loose.dtd" IE-6 and later needs this address to know where it is reading the web standards from.

Member Avatar for teedoff

You should really do some reading a learning on proper html ans css standards and coding practices. You seem to be starting out with some bad coding techniques, and the sooner you change them the better.

Tables again are BAD for page layouts. If you are using a software that generates table layouts, stop using it.

Divs with absolute positionings are generally bad practice and will break the page flow in most instances. There are some uses for absolute divs, but in rare cases.

w3schools is a good place to start learning html and css.

I hope this helps and gets you on the right track to good semantic code.

Member Avatar for dougancil

Armadillo,

I have tried that and that doesnt seem to work.

Teed,

I normally wouldnt use this but it's a conversion of an psd file to html and since the company I got the psd file from is not a web design company but a marketing company, I am left to the task of converting the file myself.

Member Avatar for teedoff

Well some of this you can control. Setting absolute positions to divs are done by you. Using the font tag which is completely out of date(deprecated) is controlled by you.

Again, some basic html and css knowledge would be the best thing you could do.

Member Avatar for dougancil

This was fixed by changing the image that the div tag goes onto into a background image:

<td colspan="15" style="width:571px; height:221px; background-image: url('images/MSB-secondary-page-template_26.jpg')" >
        <div style="position:relative; top:5px;left:5px;width:533px;height:98px;font:Franklin 'Franklin Gothic Demi Cond'">
<font size="4" color="#FFFFFF">This is an editable area</font>
</div>

This may not be the correct way to do this, but for now it works.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.