Centering Div tags and deprecation

I need a little help centering a div tag with a table

Page 1 of 1

10 Replies - 1296 Views - Last Post: 05 September 2010 - 10:52 AM

#1 Tyr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 13-January 09

Centering Div tags and deprecation

Posted 01 September 2010 - 11:43 PM

I'm in the process of creating a new website and I want to make sure it's up to the latest standards, and I know that the <center> tag is to be wiped out. Also yes I know many people will argue browsers will still support it, I don't care I want to keep up with the standards and not be dragged down.

Anywho Here's the code I'm working with now.

<div id="conveyor" style="margin: 0 auto; position: absolute; top: 110px">
<table style="width: 606px" background="conveyor%20belt.jpg" border="2" bordercolor="#000000" cellpadding="3" cellspacing="0" height="410">
<tbody>
<tr valign="top">
<td width="100%">
<div style="position: relative; left: -3px; top: 180px">
<marquee width="101%"><img src="intialyscreenie.png" style="z-index: 1; position: relative; left: 140px; top: -28px" title="Intialy Online MMORPG website" alt="Intialy Online MMORPG website" height="120px" width="120px" /><img src="conveyor%20plate.png" style="z-index: 2" title="" alt="" height="72" width="160" /><img src="elementsscreenie.PNG" style="z-index: 1; position: relative; left: 140px; top: -28px" title="Elements Website" alt="Elements Website - Oak Hills Church" height="120px" width="120px" /><img src="conveyor%20plate.png" style="z-index: 2" title="" alt="" height="72" width="160" /><img src="intialyscreenie.png" style="z-index: 1; position: relative; left: 140px; top: -28px" title="" alt="" height="120px" width="120px" /><img src="conveyor%20plate.png" style="z-index: 2" title="" alt="" height="72" width="160" /><img src="intialyscreenie.png" style="z-index: 1; position: relative; left: 140px; top: -28px" title="" alt="" height="120px" width="120px" /><img src="conveyor%20plate.png" style="z-index: 2" title="" alt="" height="72" width="160" /></marquee></div></td></tr></tbody></table>
</div>

Also on the same note of Deprecation yes I know the marquee tag is going to die as well but I wasn't able to get a javascript marquee that met my requirements.

ANYWHO onto my problem.

I've seen this in multiple places now that with css you can do 
style="margin: 0 auto;"

That's included in this code however it doesn't appear to center my layer holding the table and what-not.

I believe the issue has to do with the table, but I've never had this issue before so I'm not sure. What do you guys think I should do?

I'm getting to the point that I'm considering scrapping the table all together and just having a layer mimic what the table was doing.(the background and all that jazz) however for me since I'd have to look up a lot of the codes for the layer idea I'd prefer for that to be a last resort.

So what can I do to fix my problem of the layer not centering?

(sorry this was wordy)

just in case my code was too messy or hard to read the layer I'm talking about is the layer spanning line 1 all the way to 8

Oh and if it helps here is a link to the page being worked on so you can see how the images and marquee work click here

This post has been edited by Tyr: 01 September 2010 - 11:52 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Centering Div tags and deprecation

#2 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Centering Div tags and deprecation

Posted 02 September 2010 - 12:56 AM

Take out the position: absolute; and give your div a width. 780px is good if you want to target all screen sizes.
Was This Post Helpful? 1
  • +
  • -

#3 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Centering Div tags and deprecation

Posted 02 September 2010 - 12:58 AM

If your trying to work to standards why are you using a table for non tabular data?

Centering a block:

<body>
     <div id="container">
          <p>text></p>
     </div>
</body>




body { text-align:center; }

#container { margin:0 auto; width:500px; text-align:left: }


This will centre the div called container.
Was This Post Helpful? 0
  • +
  • -

#4 Tyr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 13-January 09

Re: Centering Div tags and deprecation

Posted 02 September 2010 - 09:41 PM

View PostShado3225, on 01 September 2010 - 11:56 PM, said:

Take out the position: absolute; and give your div a width. 780px is good if you want to target all screen sizes.

Wow! that helped out a lot, it worked perfectly, and I'm using your recommendation for 780px to make the other parts of the site.

I've learned a few things.

For anyone having trouble with centering a div layer this is what worked for me thanks to Shado3225:

Use either 
margin-right: auto; margin-left: auto;
or 
margin: 0 auto;
in your style, that centers the text. Those codes however will malfunction if you include 
position: absolute;


And for div widths displaying on most screens properly 780px width is good.

(just trying to do my part to help out anyone else who had my problem.

View PostPhunkRabbit, on 01 September 2010 - 11:58 PM, said:

If your trying to work to standards why are you using a table for non tabular data?

Centering a block:

<body>
     <div id="container">
          <p>text></p>
     </div>
</body>




body { text-align:center; }

#container { margin:0 auto; width:500px; text-align:left: }


This will centre the div called container.

Thanks for the help.

I'm using the table only for it's appearance and to contain the other code. I know I can mimic the same appearance using layers however I'm not that up to snuff on my css yet to create the right effect.
Was This Post Helpful? 0
  • +
  • -

#5 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Centering Div tags and deprecation

Posted 03 September 2010 - 12:27 AM

Glad it helped :^:

I would really suggest reading up on div usage and drop the tables as soon as possible.

Divs are just so much more flexible and although they might look daunting they are actually very easy once you get the hang of it.

When starting a new website I use a template like this as a guide

/* -----clearing browser style----- */
html {
margin:0;
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:normal;
line-height:20px;
text-decoration:none;
}
body {}

/* -----preset----- */
head {display:none;} 
img {border:none;}

/* -----fonts----- */
h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:;
font-style:;
font-weight:;
line-height:;
text-align:;
text-decoration:;
text-indent:;
text-transform:;
color:;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:;
font-style:;
font-weight:;
line-height:;
text-align:;
text-decoration:;
text-indent:;
text-transform:;
color:;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:;
font-style:;
font-weight:;
line-height:;
text-align:;
text-decoration:;
text-indent:;
text-transform:;
color:;
}

/* -----links----- */
a:link {/* unvisited link */
color:;
text-decoration:;
text-indent:;
text-transform:;
}      
a:visited {/* visited link */  
color:;
text-decoration:;
text-indent:;
text-transform:;
} 
a:hover {/* mouse over link */ 
color:;
text-decoration:;
text-indent:;
text-transform:;
} 
a:active {/* selected link */ 
color:;
text-decoration:;
text-indent:;
text-transform:;
} 

/* -----body----- */
#header {
width:100%; /* if I want the layout across the page */}
#logo {}
#wrapper{
width:780px;  /* if I want the layout to be usable for the smallest of screen sizes */
margin:0px auto; /* if I want the layout centre */}
#navbar {
float:left;}
#content {
float:right;}
#footer {}




<div id="header><div id="logo></div></div>
<div id="wrapper>
<div id="navbar></div>
<div id="content></div>
</div>
<div id="footer></div>


And that is my building blocks - from there I insert .class and content.
Was This Post Helpful? 1
  • +
  • -

#6 Tyr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 13-January 09

Re: Centering Div tags and deprecation

Posted 03 September 2010 - 09:40 AM

View PostShado3225, on 02 September 2010 - 11:27 PM, said:

Glad it helped :^:

I would really suggest reading up on div usage and drop the tables as soon as possible.

Divs are just so much more flexible and although they might look daunting they are actually very easy once you get the hang of it.

When starting a new website I use a template like this as a guide

/* -----clearing browser style----- */
html {
margin:0;
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:normal;
line-height:20px;
text-decoration:none;
}
body {}

/* -----preset----- */
head {display:none;} 
img {border:none;}

/* -----fonts----- */
h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:;
font-style:;
font-weight:;
line-height:;
text-align:;
text-decoration:;
text-indent:;
text-transform:;
color:;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:;
font-style:;
font-weight:;
line-height:;
text-align:;
text-decoration:;
text-indent:;
text-transform:;
color:;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:;
font-style:;
font-weight:;
line-height:;
text-align:;
text-decoration:;
text-indent:;
text-transform:;
color:;
}

/* -----links----- */
a:link {/* unvisited link */
color:;
text-decoration:;
text-indent:;
text-transform:;
}      
a:visited {/* visited link */  
color:;
text-decoration:;
text-indent:;
text-transform:;
} 
a:hover {/* mouse over link */ 
color:;
text-decoration:;
text-indent:;
text-transform:;
} 
a:active {/* selected link */ 
color:;
text-decoration:;
text-indent:;
text-transform:;
} 

/* -----body----- */
#header {
width:100%; /* if I want the layout across the page */}
#logo {}
#wrapper{
width:780px;  /* if I want the layout to be usable for the smallest of screen sizes */
margin:0px auto; /* if I want the layout centre */}
#navbar {
float:left;}
#content {
float:right;}
#footer {}




<div id="header><div id="logo></div></div>
<div id="wrapper>
<div id="navbar></div>
<div id="content></div>
</div>
<div id="footer></div>


And that is my building blocks - from there I insert .class and content.

yea I've been tossing the idea around in my head, I think I may do it.
one thing I plan on doing with my code is making an external style sheet, I have done that yet. All of my css is in the style properties so it's pretty messy looking, that's my next goal, (I won't need help with that luckily)
Thanks guys for the help!
Was This Post Helpful? 0
  • +
  • -

#7 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: Centering Div tags and deprecation

Posted 03 September 2010 - 10:54 AM

Just so you know <marquee> is "deprecated," I put that in quotes because in order to be deprecated it first has to be a web standard and it never was accepted, so be cautious in using it. You would be better off using javascript than the html marquee element.

If you don't know for sure, in the future check this list for standard and deprecated standard html elements:
http://www.w3schools...ags/default.asp

--

Greg
Was This Post Helpful? 0
  • +
  • -

#8 Tyr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 13-January 09

Re: Centering Div tags and deprecation

Posted 03 September 2010 - 11:15 AM

View Postgregwhitworth, on 03 September 2010 - 09:54 AM, said:

Just so you know <marquee> is "deprecated," I put that in quotes because in order to be deprecated it first has to be a web standard and it never was accepted, so be cautious in using it. You would be better off using javascript than the html marquee element.

If you don't know for sure, in the future check this list for standard and deprecated standard html elements:
http://www.w3schools...ags/default.asp

--

Greg

I mentioned that in my first post, I know it's not a standard, however sadly enough no one had a javascript marquee that was good enough for what I needed so I stuck to marquee. The biggest issue I had in finding a good one was most render different in all web browsers so it was a pain in the ass. I plan to change it over some day when I find a good marquee code but most have problems. and I'm not skilled enough with javascript yet to fully code that on my own.

This post has been edited by Tyr: 03 September 2010 - 11:16 AM

Was This Post Helpful? 0
  • +
  • -

#9 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: Centering Div tags and deprecation

Posted 03 September 2010 - 12:24 PM

Quote

I mentioned that in my first post, I know it's not a standard, however sadly enough no one had a javascript marquee that was good enough for what I needed so I stuck to marquee. The biggest issue I had in finding a good one was most render different in all web browsers so it was a pain in the ass. I plan to change it over some day when I find a good marquee code but most have problems. and I'm not skilled enough with javascript yet to fully code that on my own.


That's cool, I was merely pointing it out. Sorry I jumped to the last post to the last few posts to see if you had an issue to solve. Good luck.

--

Greg
Was This Post Helpful? 1
  • +
  • -

#10 Sandi  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 39
  • Joined: 18-November 07

Re: Centering Div tags and deprecation

Posted 04 September 2010 - 09:41 PM

Quote

Take out the position: absolute; and give your div a width. 780px is good if you want to target all screen sizes


Except with widescreen monitors are common now, and people that use them get irritated looking at a narrow strip of a website down the center of their screen. When possible I try to always give my pages fluid width. Ninety percent is ninety percent regardless of screen width, and will look similar on all monitors.

#container {
	margin:0 auto;
	width:90%;
	text-align:left;
}

This post has been edited by Sandi: 04 September 2010 - 09:42 PM

Was This Post Helpful? 0
  • +
  • -

#11 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Centering Div tags and deprecation

Posted 05 September 2010 - 10:52 AM

% works well too, I'm currently busy with such a project :^:
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1