CODEWITHSUNDEEP
htmlcss
Sachindra
Sachindra

Reputation: 6969

some simple style changes needed

I need my menu items to be aligned to the center without the use of padding ... It currently lies like this .. I need the text to be center aligned like this .

The code that I have used is :

<div style="float:left; width:931px; background:url(images/cbw_consulting_07_1.jpg) repeat-x; height:39px;">
    <ul style="float:left; width:931px; font-family:Monotype Corsiva; font-size:21px; color:#FFFFFF; padding:5px 0px 0px 0px">
        <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>

Upvotes: 1

Views: 93

Answers (3)

Vinay B R
Vinay B R

Reputation: 8421

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>

Upvotes: 0

tom
tom

Reputation: 8359

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>

Upvotes: 1

meo
meo

Reputation: 31249

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...

Upvotes: 0

Related Questions