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:relative;
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:relative;
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="#">Producs</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="#">Contact</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:relative;
background-color:#FFFFFF;
height:12pt;
}

#menu{
position:relative;
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:relative;
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*******@yahoo.fr> wrote:

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

ul.menu li{display:inline;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*******@yahoo.fr> wrote:

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

ul.menu li{display:inline;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">Home</a>
| <a href="sportsbooks.html">Sportsbooks</a>
| <a href="video.html">Video</a>
| <a href="news.html">News</a>
| <a href="glossary.html">Glossary</a>
| <a href="links.html">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*******@yahoo.fr> wrote:

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

ul.menu li{display:inline;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*******@yahoo.fr> wrote:

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

ul.menu li{display:inline;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 ?

[Spartanicus]

Gabriel <ka*******@yahoo.fr> wrote:

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

Fixed page widths are bad design.
, 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 ?

You don't have to use a bad design, you could drop the fixed width.

It can be done using "pure" CSS, but as I wrote before to get it to work
in IE you'd need to resort to a HTML table.

--
Spartanicus

[Beauregard T. Shagnasty]

Spartanicus wrote:

Gabriel <ka*******@yahoo.fr> wrote:

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

You don't have to use a bad design, you could drop the fixed width.

It can be done using "pure" CSS, but as I wrote before to get it to
work in IE you'd need to resort to a HTML table.

Why would tables be needed for IE? I have a similar horizontal menu
on a site of mine, and no tables; works as expected in IE.

http://www.freezeblock.com/

Simple design, no graphics (I'm a programmer, not a dee-ziner).

--
-bts
-This space intentionally left blank.

[Gabriel]

You don't have to use a bad design, you could drop the fixed width.
And the say that my block is 60% wide, that's it ?

It can be done using "pure" CSS, but as I wrote before to get it to work
in IE you'd need to resort to a HTML table.

It could be done under Firefox without resorting to tables ?

[Gabriel]

Beauregard T. Shagnasty wrote:

Spartanicus wrote:

Gabriel <ka*******@yahoo.fr> wrote:

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

You don't have to use a bad design, you could drop the fixed width.

It can be done using "pure" CSS, but as I wrote before to get it to
work in IE you'd need to resort to a HTML table.

Why would tables be needed for IE? I have a similar horizontal menu on
a site of mine, and no tables; works as expected in IE.

http://www.freezeblock.com/

Simple design, no graphics (I'm a programmer, not a dee-ziner).

It's not the same design that I need to do : I posted a picture of what
I intend, you will notice that it is not.

Tahnk you for your contribution though :)

[Beauregard T. Shagnasty]

Gabriel wrote:

It's not the same design that I need to do : I posted a picture of
what I intend, you will notice that it is not.
Of course it isn't exactly what you want. I wasn't going to change my
site to your style. But you should be able to alter the CSS to get the
appearance quite like your image.

The object was to show you that a horizontal menu, using only <ul><li>
and CSS is certainly doable. No tables are necessary for any browser,
including IE and Firefox.
Tahnk you for your contribution though :)

Offered as a sample of something you can work from.

--
-bts
-This space intentionally left blank.

[Spartanicus]

Gabriel <ka*******@yahoo.fr> wrote:

You don't have to use a bad design, you could drop the fixed width.

And the say that my block is 60% wide, that's it ?
A block measuring 60% of the user's viewport width is still a fixed
width design. A fluid width design presents the navigation links inline
and allows them to wrap if the viewport width isn't sufficient, this
provides a very flexible system.
It can be done using "pure" CSS, but as I wrote before to get it to work
in IE you'd need to resort to a HTML table.

It could be done under Firefox without resorting to tables ?

Without resorting to HTML tables, yes. But for the umpteenth time you
should change the fixed width design.

--
Spartanicus

[Spartanicus]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

It can be done using "pure" CSS, but as I wrote before to get it to
work in IE you'd need to resort to a HTML table.
Why would tables be needed for IE? I have a similar horizontal menu
on a site of mine, and no tables; works as expected in IE.

Your menu relies on white space, if I understand Gabriel's wish
correctly then what he wants is a 800px wide containing block in which
the links/buttons occupy the full width with little or no space in
between the links/buttons.
http://www.freezeblock.com/

Specifying a line height at least equal to the height of the buttons
would prevent the buttons from overlapping when the menu wraps.

--
Spartanicus

[Gabriel]

A block measuring 60% of the user's viewport width is still a fixed
width design. A fluid width design presents the navigation links inline
and allows them to wrap if the viewport width isn't sufficient, this
provides a very flexible system. Without resorting to HTML tables, yes. But for the umpteenth time you
should change the fixed width design.

Could you show me that what you mean by "no fixed width design" : a
sample website or a style which does not use it because I do not exactly
understand what you mean
(I'm before all an OOP developper, not a webdesigner :) )

Thank you for your patience :)

[Spartanicus]

Gabriel <ka*******@yahoo.fr> wrote:

Could you show me that what you mean by "no fixed width design" : a
sample website or a style which does not use it because I do not exactly
understand what you mean

Fluidity comes as standard, all you have to do to achieve it is not
specify fixed widths.

--
Spartanicus

[Christoph Päper]

Gabriel:

display:inline;
min-width:133px;

Inline boxes cannot have a width assigned. Well, 'inline-block' or
'inline-table' can. Note that 'min-width' is not supported by, for
example, IE/Win.

[kchayka]

Gabriel wrote:

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 ?

No need to reinvent the wheel.
<URL:http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp>

Type a few parameters and it will generate the code for you. It provides
a choice between several vertical and horizontal menu styles. Just be
warned that you will need to modify the CSS to fit your particular needs
(and things like swap px sizes for more appropriate units), but the base
code is there.

Alternately, there is listamatic
<URL:http://css.maxdesign.com.au/listamatic/>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Beauregard T. Shagnasty]

Spartanicus wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

It can be done using "pure" CSS, but as I wrote before to get
it to work in IE you'd need to resort to a HTML table.

Why would tables be needed for IE? I have a similar horizontal
menu on a site of mine, and no tables; works as expected in IE.

Your menu relies on white space, if I understand Gabriel's wish
correctly then what he wants is a 800px wide containing block in
which the links/buttons occupy the full width with little or no
space in between the links/buttons.

Should be doable with a surrounding div set to that width, yes? Though
I would be not in favor of a fixed width.

http://www.freezeblock.com/

Specifying a line height at least equal to the height of the
buttons would prevent the buttons from overlapping when the menu
wraps.

Good point. Done.

--
-bts
-This space intentionally left blank.

[Gabriel]

Spartanicus wrote:

Gabriel <ka*******@yahoo.fr> wrote:

Could you show me that what you mean by "no fixed width design" : a
sample website or a style which does not use it because I do not exactly
understand what you mean

Fluidity comes as standard, all you have to do to achieve it is not
specify fixed widths.

ok, I'm back to square one then :

#menu{
position:relative;
display: inline;
text-align:center;
padding-left:25px;
padding-right:25px;
border-right-color:#006749;
border-right-style:solid;
border-right-width:1px;

}

And my blocks do not all have the same width :(, I think I will switch
to tables and tds :(

[Spartanicus]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

Your menu relies on white space, if I understand Gabriel's wish
correctly then what he wants is a 800px wide containing block in
which the links/buttons occupy the full width with little or no
space in between the links/buttons.

Should be doable with a surrounding div set to that width, yes?

Yes I suppose it would, mistakenly I was thinking of a full width auto
scaling construct.

--
Spartanicus

[Tony]

Spartanicus wrote:

Gabriel <ka*******@yahoo.fr> wrote:

The point is, in fact that the menu is contained in a block which is
always 800px wide

Fixed page widths are bad design.

Just curious - What is that statement based on?

--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com

[Darin McGrew]

Spartanicus wrote:

Fixed page widths are bad design.

Tony <to*******@dslextreme.com.spam> wrote: Just curious - What is that statement based on?

Experience with fixed-width page designs, perhaps?

FWIW, using liquid layout was #2 on Jakob Nielsen's "The Ten Most Violated
Homepage Design Guidelines" a couple years ago. Not that it's the 2nd most
important guideline, but that it's 2nd most frequently violated guideline.

Also FWIW, better browsers are including "Fit to window width" and "Fit to
page width" options, to help coerce misguided fixed-width designs into the
available display area.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"How long is this Beta guy going to keep testing our stuff?"

[Tony]

Darin McGrew wrote:

Spartanicus wrote:

Fixed page widths are bad design.

Tony <to*******@dslextreme.com.spam> wrote:

Just curious - What is that statement based on?

Experience with fixed-width page designs, perhaps?

So, personal experience, then. Fair enough.
FWIW, using liquid layout was #2 on Jakob Nielsen's "The Ten Most
Violated Homepage Design Guidelines" a couple years ago. Not that
it's the 2nd most important guideline, but that it's 2nd most
frequently violated guideline.
I don't suppose you still have a link to that? I'd be curious to read it.
Also FWIW, better browsers are including "Fit to window width" and
"Fit to page width" options, to help coerce misguided fixed-width
designs into the available display area.

--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com

[Darin McGrew]

I wrote:

FWIW, using liquid layout was #2 on Jakob Nielsen's "The Ten Most
Violated Homepage Design Guidelines" a couple years ago. Not that
it's the 2nd most important guideline, but that it's 2nd most
frequently violated guideline.

Tony <to*******@dslextreme.com.spam> wrote: I don't suppose you still have a link to that? I'd be curious to read it.

Here it is: http://www.useit.com/alertbox/20031110.html
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Experience is what allows you to recognize a mistake when you make it again."

[Tony]

Darin McGrew wrote:

I wrote:

FWIW, using liquid layout was #2 on Jakob Nielsen's "The Ten Most
Violated Homepage Design Guidelines" a couple years ago. Not that
it's the 2nd most important guideline, but that it's 2nd most
frequently violated guideline.

Tony <to*******@dslextreme.com.spam> wrote:

I don't suppose you still have a link to that? I'd be curious to
read it.

Here it is: http://www.useit.com/alertbox/20031110.html

Much appreciated :)

--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com