Login | Register | FAQ
Anonymous

Centering a bulleted list with css

+ Post a reply

6 posts Page 1 of 1


Centering a bulleted list with css

by PVX » Mon May 21, 2012 12:30 am

Hi,

The use of tables for layout is discouraged and we are supposed to use css instead. Therefore, we shouldbe able to do anything we can do with tables instead with css.

Here is a simple file that uses a table to center a bulleted list and draw a simple border around the list. I have not been able to reproduce this effect with css. I do not want to specify a fixed width, as the size of the text may vary, depending on browser settings.

Do you have a simple way with css to center the list and draw a tight box around it (not spanning the width of the screen)?

Here is the code for the table solution:


<!doctype html>
<html>
<head>
<title>Shopping List With Table</title>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<table style="margin-left: auto; margin-right: auto; border: 1px solid;">
<tr>
<td>
<ul>
<li>Bread</li>
<li>Butter</li>
<li>Eggs</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
User avatar

PVX

  • Posts: 4
  • Joined: Mon May 21, 2012 12:21 am

Re: Centering a bulleted list with css

by XainPro » Mon May 21, 2012 5:36 am

you have to define a fixed width to make it in center
Code: Select all
<!doctype html>
<html>
<head>
<title>Shopping List With Table</title>
<style type="text/css">
.theStyle {
   margin:0 auto;
   width:100px;
   overflow:visible;
   border:solid 1px #000;
   }
</style>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<div class="theStyle">
<ul>
<li>Bread </li>
<li>Butter</li>
<li>Eggs</li>
</ul>

</div>
</body>
</html>
User avatar

XainPro

  • Posts: 3575
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Centering a bulleted list with css

by PVX » Mon May 21, 2012 3:31 pm

CubeSquare wrote:Hello PVX,

It's true, writing tables has changed. But you seem to have a natural handle on using CSS instead of deprecated code. This is complicated because 3 different browsers handle "lists" in 3 different ways. Lists are indented before applying their style. This indentation causes people much misunderstanding, especially when it comes to removing them.
One browser uses padding, another uses margin and still another uses list-style to render the indentation that we are familiar with. Thus to remove the indentation and the list-styles, all three items are necessary:
<ul style="list-style: none;padding: 0;margin: 0;"> which is added to the opening <ul> tag.
Without the style rules, the list will keep it's bullets, but won't look centered, but it is.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping List With Table</title>
<style type="text/css">
</style>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<table style="margin: 0 auto;border: 1px solid black;"><!-- centers table -->
<tr>
<td>
<ul style="list-style:none;padding: 0;margin: 0;"><!-- removes bullets -->
<li>Bread</li>
<li>Butter</li>
<li>Eggs</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

If your going to write style rules, put style tags in the head.

Also, take a look at this: http://www.i-carpenter.com/3col/test3col.html
It's all about writing a 3 column layout using CSS.

-CubeSquare


Hi CubeSquare,

Thanks for the reply. Your code works nicely, but the idea was to do away with the table for the bulleted list. So it looks like CSS still has a way to go before it can comfortably replace tables for layout. Your reply was very helpful, though. Learned some more. And, yes, the preferred place to put the CSS code is in the head. I just like to use the inline CSS for testing.
User avatar

PVX

  • Posts: 4
  • Joined: Mon May 21, 2012 12:21 am

Re: Centering a bulleted list with css

by PVX » Mon May 21, 2012 3:44 pm

XainPro wrote:you have to define a fixed width to make it in center
Code: Select all
<!doctype html>
<html>
<head>
<title>Shopping List With Table</title>
<style type="text/css">
.theStyle {
   margin:0 auto;
   width:100px;
   overflow:visible;
   border:solid 1px #000;
   }
</style>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<div class="theStyle">
<ul>
<li>Bread </li>
<li>Butter</li>
<li>Eggs</li>
</ul>

</div>
</body>
</html>


Hi XainPro,

Thanks for the reply. Your code sample does indeed give the desired result. Too bad it needs a fixed width. It would be nice to have an option where the box automatically adjusts to the required width, as it does with tables.
User avatar

PVX

  • Posts: 4
  • Joined: Mon May 21, 2012 12:21 am

Re: Centering a bulleted list with css

by XainPro » Mon May 21, 2012 3:57 pm

well it have the width:auto option and it do work like tables do but
we are using block level elements like div and ul
we want to center it that's why its becoming more difficult.
but CSS we can add javascript to achieve auto width.
User avatar

XainPro

  • Posts: 3575
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Centering a bulleted list with css

by PVX » Fri May 25, 2012 2:06 am

XainPro wrote:well it have the width:auto option and it do work like tables do but
we are using block level elements like div and ul
we want to center it that's why its becoming more difficult.
but CSS we can add javascript to achieve auto width.


Thanks XainPro,

Good to know it can be done with JavaScript. Thanks.
User avatar

PVX

  • Posts: 4
  • Joined: Mon May 21, 2012 12:21 am


+ Post a reply

Page 1 of 1

?>