Hi all, very appreciate if someone can help me convert this into div tag <td width="160" valign="top" align="center"> <table align="center" cellpadding="1" cellspacing="1"> <tr> <td width="160" align="center" class="browsegamesbox" itemprop="name"> content go here....</td> </tr> </table></td> Code (markup):
Add below class in css or top header area. .main{ width:160px; margin: 0 auto; text-align:center;} Add below div on HTML page. <div class="main">content go here....</div>
Here you go! <div style="width: 160px; margin: 0 auto; text-align: center;">Content goes here!</div> HTML:
Hope this code can help! <div style="width: 160px; text-align:center; margin:1px auto" > <div style="width: 100%; text-align:center" class="browsegamesbox" itemprop="name"> content goes here... </div> </div> HTML:
i tried all the method above and is not working...i have 4 games display across and when i using div is only display 1 games vertically all the way. any ideal why?
1) STOP declaring your values in the markup that way using the 'style' attribute -- sloppy BS. (I say STYLE should be made obsolete as a tag and deprecated as an attribute) 2) margin:0 auto means the width on each side would place them dead center, allowing no space for anything alongside them. 3) without seeing your actual CONTENT it's very hard to say what the proper markup should be -- doesn't look like tabular data, might not even warrant a DIV... I VERY MUCH doubt it warrants the use of two DIV. (Sure as shine-ola doesn't look like even as tables there was any reason for the inner tables). I mean this could be a list -- it could be a set of heading based sections meaning more tags are needed to convey the meaning... You might just be slapping a single IMG in there in which case none of this DIV stuff has any business in there... 4) In either case it almost sounds like what you are looking for is either a inline-block behavior, or floats. But again, you aren't providing enough information to clearly say that one way or the other. In general it sounds like you are still in the "How do I make markup to make it look how I want" mindset instead of the "make markup to say what it is, force it to look how I want with CSS" way of thinking. Four to eight samples of your data, and a better idea of what you are trying to accomplish with it, and we can likely dial you in a proper answer... otherwise everyone here is guessing wildly... and not addressing major issues in coding practice seen in pretty much every answer so far in this thread.
@deathshadow he's still using tables so there is no point in assuming that actual CSS is involved or that he would know how to use it. While most web designers have made the transition from tables to CSS many moons ago he hasn't and providing inline style will give him the quickest solution to his problem sloppy or not. It's his problem after and everyone here doing just fine fixing it. And @webgames247 just post the link you're having issues with so we can check it out.
you can use the following code for to convert your Data in to div tag <divstyle="width:50%;float:left"> first </div><divstyle="width:50%;float:left"> second </div>
Here's the fix! You'll need to add the inline styles I created to your http://www.coolgames.org/templates/games/style.css and surround each the images with one wrapper class named imageblock. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vanessas Naughty Pics</title> <style type="text/css"> .gamelink:link { color: #0000FF; font-family: Arial,Tahoma; font-size: 12px; text-decoration: none; text-align: center; } .gamelink:visited { color: #0000FF; text-decoration: none; } .gamelink:active { color: #0000FF; text-decoration: none; } .gamelink:hover { color: #FF0000; text-decoration: underline; } .gamelink { background: #EFEFEF; display: block !important; height: 138px; width: 160px; float: left; position: relative; } .imageblock { display: block; width: 166px; float: left; height: 159px; } </style> </head> <body> <div class="containter"> <div class="images"> <div class="imageblock"> <a class="gamelink" rel="popover-hover" data-content="Follow superstar Vanessa around the world and try to get the best selling pictures.<div class='clearfix'></div>" data-title="<b>Vanessas Naughty Pics</b>" href="http://www.coolgames.org/play1015/vanessas-naughty-pics.html" target="_self" data-original-title="Vanessas Naughty Pics"> <img src="http://www.coolgames.org/files/image/vanessas-naughty-pics.jpg" width="160" height="120" title="Vanessas Naughty Pics" border="0" /> <br /> Vanessas Naughty Pics</a></div> <div class="imageblock"> <a class="gamelink" rel="popover-hover" data-content="Try and keep it together in this vicious, gore based racer! Choose from a wheelchair, a ten speed, or a scooter then race you...<div class='clearfix'></div>" data-title="<b>Happy Wheels</b>" href="http://www.coolgames.org/play1506/bad-piggies-hd.html" target="_self" data-original-title="Bad Piggies HD"> <img src="/files/image/bad-piggies.jpg" width="160" height="120" title="Bad Piggies HD" border="0" /> <br /> Bad Piggies HD</a> </div> </div> </div> </body> </html> HTML:
@ ArchAxis Thank you very much for all your help... my site is almost completely tabless now if you couple please remove my domain many thanks again...
@webgames247 ah sorry, I can't edit the post any longer, I'm glad you got it working and you're almost all tableless!