fixed width without td ?

[Gabriel]

greetings,

I want to achieve the following effect :
Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |

I played with padding, border-width and the like and it's ok for the | .

My problem is that menu1 could be longer than menu2 : Products and FAQ
for example. But all lengths will be smaller than say : 800/6 (menus)
pixels.

I tried to give a width attribute to no avail :
#menu{
position:relati ve;
display:inline;
text-align:center;
padding-left:25px;
padding-right:25px;
border-right-color:#006749;
border-right-style:solid;
border-right-width:1px;
min-width:133px;
}

My question is : is it possible to give a fixed width to a div ?

I want to avoid the use of :
table - tr -td width="auto" if possible.

Many thx for your help !

[Jacques]

Gabriel wrote:

greetings,

I want to achieve the following effect :
Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |

I played with padding, border-width and the like and it's ok for the | .

My problem is that menu1 could be longer than menu2 : Products and FAQ
for example. But all lengths will be smaller than say : 800/6 (menus)
pixels.

I tried to give a width attribute to no avail :
#menu{
position:relati ve;
display:inline;
text-align:center;
padding-left:25px;
padding-right:25px;
border-right-color:#006749;
border-right-style:solid;
border-right-width:1px;
min-width:133px;
}

My question is : is it possible to give a fixed width to a div ?

I want to avoid the use of :
table - tr -td width="auto" if possible.

Many thx for your help !

Yes, you can set a fixed width for <div> (or any other block element),
but 'min-width' is not the right property for it. A <div> with fixed
'min-width' will still be fluid and still attempt to fill as much
horizontal space as there is available to it.
Instead, use the 'width' property, as in:
'width: some-valid-length-value;'
- Jacques

[Gabriel]

Yes, you can set a fixed width for <div> (or any other block element),
but 'min-width' is not the right property for it. A <div> with fixed
'min-width' will still be fluid and still attempt to fill as much
horizontal space as there is available to it.
Instead, use the 'width' property, as in:
'width: some-valid-length-value;'
- Jacques

thank you for your answer but if I tried min-width, it's because width
did not work, I should have said so.
<div id="global">
<div id="navBar">
<div id="menu">
<a href="#">News</a>
</div>
<div id="menu">
<a href="#">Produc s</a>
</div>
<div id="menu">
<a href="#">Store</a>
</div>
<div id="menu">
<a href="#">Prices </a>
</div>
<div id="menu">
<a href="#">FAQ</a>
</div>
<div id="menu">
<a href="#">Contac t</a>
</div>
</div>
<div id="mainSection ">
HEre lengthy text
</div>
</div>
</div> --> end of global

css:
#navBar{
width:auto;
background-color:#FFFFFF;
text-align:center;
border-bottom-style:solid;
border-bottom-color:#006749;
border-bottom-width:1px;
position:relati ve;
background-color:#FFFFFF;
height:12pt;
}

#menu{
position:relati ve;
display:inline;
text-align:center;
padding-left:25px;
padding-right:25px;
border-right-color:#006749;
border-right-style:solid;
border-right-width:1px;
min-width:133px;
}
#global{
position:relati ve;
width:800px;
left:20%;
right:20%;
height:700px;
}
#mainSection{
background-color:#ffffff;
font-family : Tahoma,Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
font-weight : normal;
text-align:justify;
width:auto;
position : relative;
padding-left:40px;
padding-right:40px;
padding-top:50px;
height:inherit;
overflow:auto;

}
thanks again

[Gus Richter]

Gabriel wrote:

Yes, you can set a fixed width for <div> (or any other block element),
but 'min-width' is not the right property for it. A <div> with fixed
'min-width' will still be fluid and still attempt to fill as much
horizontal space as there is available to it.
Instead, use the 'width' property, as in:
'width: some-valid-length-value;'
- Jacques

thank you for your answer but if I tried min-width, it's because width
did not work, I should have said so.

"Inline" Static and "Inline" Relative positioned Elements do not accept
dimension properties. In order to accept dimension properties, they must
be "Block".

--
Gus

[Spartanicus]

Gabriel <ka*******@yaho o.fr> wrote:

I want to achieve the following effect :
Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |

ul.menu li{display:inli ne;border-right:1px solid #000}

<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>

--
Spartanicus

[Gabriel]

Gus Richter wrote:

Gabriel wrote:

Yes, you can set a fixed width for <div> (or any other block
element), but 'min-width' is not the right property for it. A <div>
with fixed 'min-width' will still be fluid and still attempt to fill
as much horizontal space as there is available to it.
Instead, use the 'width' property, as in:
'width: some-valid-length-value;'
- Jacques

thank you for your answer but if I tried min-width, it's because width
did not work, I should have said so.

"Inline" Static and "Inline" Relative positioned Elements do not accept
dimension properties. In order to accept dimension properties, they must
be "Block".

ok, the problem is that I need to put them side by side and block
retruns to a new line.
so I have to create one div per menu and specify its x,y position values ?

[Gabriel]

Spartanicus wrote:

Gabriel <ka*******@yaho o.fr> wrote:

I want to achieve the following effect :
Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |

ul.menu li{display:inli ne;border-right:1px solid #000}

<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>

Sorry I was not explicit enough.
I've put an image here : http://charlyspace.dyndns.org/expo

[fredo]

This works great for me, could it for you? Maybe it's too
simple-minded. And I miss the meaning of "block
retruns to a new line."

..menu-item-container {
height: 1.8em;
text-align: center;
font-size: 75%;
font-weight: bold;
}
<p class="menu-item-container">
<a href="/index.html">Hom e</a>
| <a href="sportsboo ks.html">Sports books</a>
| <a href="video.htm l">Video</a>
| <a href="news.html ">News</a>
| <a href="glossary. html">Glossary</a>
| <a href="links.htm l">Links</a>
</p>

Only thing is, I like Sp's "border-right*:1px solid #000" a /lot/
better than ASCII vert bar. --fredo

[Spartanicus]

Gabriel <ka*******@yaho o.fr> wrote:

I want to achieve the following effect :
Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |

ul.menu li{display:inli ne;border-right:1px solid #000}

<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>

Sorry I was not explicit enough.
I've put an image here : http://charlyspace.dyndns.org/expo

Not a good design, it doesn't adapt well to varying viewport widths. To
create it and get it to work in IE you'd need to use a HTML table.

--
Spartanicus

[Gabriel]

Spartanicus wrote:

Gabriel <ka*******@yaho o.fr> wrote:

I want to achieve the following effect :
Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |

ul.menu li{display:inli ne;border-right:1px solid #000}

<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>

Sorry I was not explicit enough.
I've put an image here : http://charlyspace.dyndns.org/expo

Not a good design, it doesn't adapt well to varying viewport widths. To
create it and get it to work in IE you'd need to use a HTML table.

The point is, in fact that the menu is contained in a block which is
always 800px wide, there is an image on top of it : the usual thing :
picture, navbar, content.

So you think that this cannot be done with pure css and that I have to
use html tables instead ?