Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

convert list into table row using css

Posted on 2006-04-25
13
Medium Priority
?
284 Views
Last Modified: 2008-03-06
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
0
Comment
Question by:maUru
  • 7
  • 4
12 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16540849
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-
0
 
LVL 7

Author Comment

by:maUru
ID: 16540884
got some code?
0
 
LVL 7

Author Comment

by:maUru
ID: 16540892
also, i think a clearing div will break my site layout.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 49

Expert Comment

by:Roonaan
ID: 16540927
<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-
0
 
LVL 7

Author Comment

by:maUru
ID: 16541003
works good except for the fact i cant align it to the middle using margin-left / right or even center
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16541024
You can if you set a width to the ul.

-r-
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16541026
I mean:

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

-r-
0
 
LVL 7

Author Comment

by:maUru
ID: 16541045
nope aint working.
0
 
LVL 7

Author Comment

by:maUru
ID: 16541051
<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>
0
 
LVL 7

Author Comment

by:maUru
ID: 16541069
misprint, thats a ;margin 0 auto; but still not working.
0
 
LVL 7

Author Comment

by:maUru
ID: 16541209
0
 

Accepted Solution

by:
GranMod earned 0 total points
ID: 16918470
PAQed with points refunded (250)

GranMod
Community Support Moderator
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month15 days, 17 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question