ansaurus

Question

Answer 1

A:

give your UL a fixed width that approximately corresponds to the with of your 3 li's. And then give use margin: auto; you don't need your UL to be float: left; also list style and list style type are proprieties for UL elements not for LI's... You can simplify your padding padding: 0 10px; === padding: 0 10px 0 10px; and there is no need to specify the unit if the value is 0, because 0px == 0pt == 0em etc...

meo 2010-09-04 13:04:18

Answer 2

+1 A:

margin: 0 auto; on your ul and a fixed width will help you. Also it's best to use no in line styling

<html>
<head>
    <style>
        ul {
           font-family:Monotype Corsiva;
           font-size: 21px;
           color: #FFFFFF;
           padding:5px 0px 0px 0px;
           display: block;
           width: 300px;
           margin: 0 auto;
        }
    </style>
</head>
<body>
<div style="width:931px; background-color: #ff00ff; height:39px;">
    <ul>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Home</a></li>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">About Us</a></li>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Fabulous Finds</a></li>
    </ul>
</div>
</body>
</html>

Skelton 2010-09-04 13:06:38

i added inline style juz to show you guys at this forum...

Sachindra 2010-09-04 13:10:14

good example, but why don't you shorten the values for your paddings to, until you do it with the margins? `padding:5px 0px 0px 0px;` == `padding: 5px 0 0` and `padding:0px 10px 0px 10px;` == `padding:0 10px`

meo 2010-09-04 13:13:17

@ meo ... its bcoz I find it easy to remember and work on when its like padding:9px 0px 0px 0px; rather than padding:9px 0 0 .....

Sachindra 2010-09-04 13:20:15

@Skeleton: i got that but then why don't you use margin: 0px auto 0px auto then, instead of margin: 0 auto; at least it would be consistent.

meo 2010-09-04 19:22:57

@meo margin: 0 auto is just a shortcut that's why I use it. And the padding I just copied ;)

Skelton 2010-09-05 03:26:02

Answer 3

A:

Try this

<div style="float: left; width: 931px;    background:url(&quot;images/cbw_consulting_07_1.jpg&quot;) repeat-x scroll 0% 0% transparent; height: 39px;">
<center>
<ul style="font-family: Monotype Corsiva; font-size: 21px; color: rgb(255, 255, 255); display: inline; background: none repeat scroll 0% 0% Red; padding: 5px 0pt 0pt;">
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">Home</a></li>
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">About Us</a></li>
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">Fabulous Finds</a></li>
</ul></center>
</div>

Vinay B R 2010-09-04 13:27:26

ansaurus

tags:

views:

answers:

some simple style changes needed

related questions