Link to home
Start Free TrialLog in
Avatar of maUru
maUru

asked on

convert list into table row using css

ive got the following code:

<table cellspacing="0" cellpadding="3" style="border: 1px solid #666666">
  <tr>
    <td align="center" class="border"><a target="_blank" href="a">joe schmoe wheels</a></td>
    <td align="center" class="border"><a target="_blank" href="b">free dogs</a></td>
    <td align="center" class="border"><a target="_blank" href="c">original windows cds</a></td>
    <td align="center" class="border"><a target="_blank" href="d">ad</a></td>
    <td align="center" class="border"><a target="_blank" href="e">fat abots bikes</a></td>
    <td align="center" class="border"><a target="_blank" href="f">door repairs</a></td>
    <td align="center" class="border"><a target="_blank" href="g">crooks anonymous</a></td>
  </tr>
  <tr>
    <td align="center" class="border"><a target="_blank" href="a"><img src="/images/adverts/a.jpg"></a></td>

    <td align="center" class="border"><a target="_blank" href="b"><img src="/images/adverts/b.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="c"><img src="/images/adverts/c.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="d"><img src="/images/adverts/d.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="e"><img src="/images/adverts/e.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="f"><img src="/images/adverts/f.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="g"><img src="/images/adverts/g.jpg"></a></td>
  </tr>
</table>

its a table with ads, a 7x2 table which displays them very nicely (for my purpose).

now im transitioning to css because i love the way everything is structured, and that lists can be used with so much flexibility

i want to change that table into a list. exactly that table, not a compromise, i want a simple:

<ul>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
..
..
..
</ul>

sort of list which displays like the table above.

i got somewhere with display:table-cell

but of course that dies in IE

so I need a solution that works in IE as well

thanks
Avatar of Roonaan
Roonaan
Flag of Netherlands image
You can use:
display:block; float:left.

Then make sure that you either give your ul a defined height, or add a clearing div below the </ul>:
<div style="clear:both;">

-r-
Avatar of maUru
maUru

ASKER

got some code?
Avatar of maUru
maUru

ASKER

also, i think a clearing div will break my site layout.
Avatar of Roonaan
Roonaan
Flag of Netherlands image
<ul>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
..
..
..
</ul>

<style type="text/css">
ul {display:block;margin:0;padding:0;height:150px;}
li {display:block;margin:0;padding:0;float:left;
</style>

-r-
Avatar of maUru
maUru

ASKER

works good except for the fact i cant align it to the middle using margin-left / right or even center
Avatar of Roonaan
Roonaan
Flag of Netherlands image
You can if you set a width to the ul.

-r-
Avatar of Roonaan
Roonaan
Flag of Netherlands image
I mean:

ul {display:block;height:150px;width:600px;margin:0 auto;padding:0;}

-r-
Avatar of maUru
maUru

ASKER

nope aint working.
Avatar of maUru
maUru

ASKER

<head>
<style type="text/css">
 ul {display:block;height:150px;width:600px;margin: auto;padding:0;}
 li {width:80px;text-align:center;border: solid 1px #000;display:block;margin:0;padding:0;float:left;
</style>
</head>
<ul>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
</ul>
Avatar of maUru
maUru

ASKER

misprint, thats a ;margin 0 auto; but still not working.
ASKER CERTIFIED SOLUTION
Avatar of GranMod
GranMod
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial