making DIV width always the same width UL inside it!

[jmahdi]

would anyone know how to make a div's width always the same as the UL inside it?!

e.g. I have this menu inside this div:

 

<div  id="Menu"  style="width: same as ul width">
<ul style="width: a width ">
   <li>
<a href="index.htm">HOME</a> 
   </li>
    <li>
<a href="update.htm">MY ACCOUNT</a> 
</li>
   <li>
<a href="regis.htm">REGISTER</a>
</li>
   <li>
<a href="content.htm">BROWSE MUSIC</a>
</li>
   <li>
<a href="uploaded.htm">UPLOAD MUSIC</a>
</li>
   <li>
<a href="contact.htm">CONTACT</a>
</li>
</ul>
</div>

i need to do this to always make the menu in the middle of header...I can do this for each menu by assigning the width of ul to div, but i need a generic to do this in css file....

 

thanks in advance

[fugix]

why dont you make the div a certain width and set the ul width to 100%

[jmahdi]

why dont you make the div a certain width and set the ul width to 100%

 

u see the li's number may vary from page to page , which have an effect on the ul's size depending on the page

[jmahdi]

why dont you make the div a certain width and set the ul width to 100%

 

u see the li's number may vary from page to page , which have an effect on the ul's size depending on the page

 

meaning more or less menu items on different pages... sorry

[jmahdi]

hellooo

[cssfreakie]

hellooo

hellooo!

 

Since you did not supply any relevant css, apart from html I think we need to guess what you need. Is it a horizontal menu? or vertical? do you have a fluid layout? or a fixed center page?

 

here is one method that works without an additional div, since an <ul> is already a container. If it doesn't work for you be more precise and provide some useful css and what you tried, or even better an on line example. In the end we are not Human googles that respond to 'helloo'

 

 

some html with a logical indention + an #ID of #menu

<ul id="menu">
    <li>
        <a href="index.htm">HOME</a>
    </li>
    <li>
        <a href="update.htm">MY ACCOUNT</a>
    </li>
    <li>
        <a href="regis.htm">REGISTER</a>
    </li>
    <li>
        <a href="content.htm">BROWSE MUSIC</a>
    </li>
    <li>
        <a href="uploaded.htm">UPLOAD MUSIC</a>
    </li>
    <li>
        <a href="contact.htm">CONTACT</a>
    </li>
</ul>

the css (assuming it's a horizontal menu)

ul#menu {background:#f4a; width:900px; text-align: center; margin:0 auto;}
#menu li{display:inline; }

[jmahdi]

hellooo

hellooo!

 

Since you did not supply any relevant css, apart from html I think we need to guess what you need. Is it a horizontal menu? or vertical? do you have a fluid layout? or a fixed center page?

 

here is one method that works without an additional div, since an <ul> is already a container. If it doesn't work for you be more precise and provide some useful css and what you tried, or even better an on line example. In the end we are not Human googles that respond to 'helloo'

 

 

some html with a logical indention + an #ID of #menu

<ul id="menu">
    <li>
        <a href="index.htm">HOME</a>
    </li>
    <li>
        <a href="update.htm">MY ACCOUNT</a>
    </li>
    <li>
        <a href="regis.htm">REGISTER</a>
    </li>
    <li>
        <a href="content.htm">BROWSE MUSIC</a>
    </li>
    <li>
        <a href="uploaded.htm">UPLOAD MUSIC</a>
    </li>
    <li>
        <a href="contact.htm">CONTACT</a>
    </li>
</ul>

the css (assuming it's a horizontal menu)

ul#menu {background:#f4a; width:900px; text-align: center; margin:0 auto;}
#menu li{display:inline; }

 

thanks,  i know "helloo" does not get caught "robotically" in these forums , i only wanted to raise my theread so people can see... I'm using a horizontal menu, if it helps here is my css part for menu and ul:

 

 #Menu{
	height: 1px;
	width: auto;
	margin: 0 auto;
 }

#Menu ul{
list-style: none;
margin: 0;
}

#Menu li{
float: left;
margin: 0 1px;
}

#Menu li a{
background: url(../final/menuLink.jpg);
height: 30px;
display: block;
padding-top: 6px;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
text-align: center;
}

[gospabode2]

Wouldn't the Div automatically expand to fit the contents within if it does not have a fixed width and height?

[jmahdi]

Wouldn't the Div automatically expand to fit the contents within if it does not have a fixed width and height?

 

it doesn't actually, i have to do this manually for every page...

[fugix]

it will wrap to the contents if you make the width: auto;

[cssfreakie]

 

thanks,  i know "helloo" does not get caught "robotically" in these forums , i only wanted to raise my theread so people can see... I'm using a horizontal menu, if it helps here is my css part for menu and ul:

 

did you run the code i provided, because that is how to center an unordered list in the middle of the screen no matter the contents?

[jmahdi]

 

thanks,  i know "helloo" does not get caught "robotically" in these forums , i only wanted to raise my theread so people can see... I'm using a horizontal menu, if it helps here is my css part for menu and ul:

 

did you run the code i provided, because that is how to center an unordered list in the middle of the screen no matter the contents?

 

i just tried it and i think it works, just need to make -padding:left: 0- as the the browser adds a padding-left of 40px for some reason, thanks  for the help.

[cssfreakie]

I recommend to just place a reset.css above your own style. See the sticky topic  if you have no idea what that is. In a nutshell to make it look the same in all browsers