fixed width without td ?

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 !

re: fixed width without td ?

Gabriel wrote:[color=blue]
> 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 ![/color]

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

re: fixed width without td ?

[color=blue]
> 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[/color]

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

re: fixed width without td ?

Gabriel wrote:[color=blue]
>[color=green]
>> 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[/color]
>
>
> thank you for your answer but if I tried min-width, it's because width
> did not work, I should have said so.[/color]

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

--
Gus

re: fixed width without td ?

Gabriel <kanari666@yahoo.fr> wrote:
[color=blue]
>I want to achieve the following effect :
> Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |[/color]

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

re: fixed width without td ?

Gus Richter wrote:[color=blue]
> Gabriel wrote:
>[color=green]
>>[color=darkred]
>>> 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[/color]
>>
>>
>>
>> thank you for your answer but if I tried min-width, it's because width
>> did not work, I should have said so.[/color]
>
>
> "Inline" Static and "Inline" Relative positioned Elements do not accept
> dimension properties. In order to accept dimension properties, they must
> be "Block".
>[/color]
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 ?

re: fixed width without td ?

Spartanicus wrote:[color=blue]
> Gabriel <kanari666@yahoo.fr> wrote:
>
>[color=green]
>>I want to achieve the following effect :
>> Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |[/color]
>
>
> 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>
>[/color]

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

re: fixed width without td ?

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

re: fixed width without td ?

Gabriel <kanari666@yahoo.fr> wrote:
[color=blue][color=green][color=darkred]
>>>I want to achieve the following effect :
>>> Menu1 | Menu2 | Menu3 | Menu4 | Menu5 |[/color]
>>
>> 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>[/color]
>
>Sorry I was not explicit enough.
>I've put an image here : http://charlyspace.dyndns.org/expo[/color]

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

re: fixed width without td ?

Spartanicus wrote:[color=blue]
> Gabriel <kanari666@yahoo.fr> wrote:
>
>[color=green][color=darkred]
>>>>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>[/color]
>>
>>Sorry I was not explicit enough.
>>I've put an image here : http://charlyspace.dyndns.org/expo[/color]
>
>
> 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.
>[/color]
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 ?

re: fixed width without td ?

Gabriel <kanari666@yahoo.fr> wrote:
[color=blue][color=green][color=darkred]
>>>Sorry I was not explicit enough.
>>>I've put an image here : http://charlyspace.dyndns.org/expo[/color]
>>
>> 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.
>>[/color]
>The point is, in fact that the menu is contained in a block which is
>always 800px wide[/color]

Fixed page widths are bad design.
[color=blue]
>, 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 ?[/color]

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

re: fixed width without td ?

Spartanicus wrote:[color=blue]
> Gabriel <kanari666@yahoo.fr> wrote:[color=green]
>> So you think that this cannot be done with pure css and that I
>> have to use html tables instead ?[/color]
>
> 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.[/color]

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.

re: fixed width without td ?

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 ?
[color=blue]
> 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.[/color]
It could be done under Firefox without resorting to tables ?

re: fixed width without td ?

Beauregard T. Shagnasty wrote:[color=blue]
> Spartanicus wrote:
>[color=green]
>> Gabriel <kanari666@yahoo.fr> wrote:
>>[color=darkred]
>>> So you think that this cannot be done with pure css and that I
>>> have to use html tables instead ?[/color]
>>
>>
>> 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.[/color]
>
>
> 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).
>[/color]
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 :)

re: fixed width without td ?

Gabriel wrote:[color=blue]
> 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.[/color]

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.
[color=blue]
> Tahnk you for your contribution though :)[/color]

Offered as a sample of something you can work from.

--
-bts
-This space intentionally left blank.

re: fixed width without td ?

Gabriel <kanari666@yahoo.fr> wrote:
[color=blue][color=green]
>> You don't have to use a bad design, you could drop the fixed width.[/color][/color]
[color=blue]
>And the say that my block is 60% wide, that's it ?[/color]

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.
[color=blue][color=green]
>> 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.[/color][/color]
[color=blue]
>It could be done under Firefox without resorting to tables ?[/color]

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

--
Spartanicus

re: fixed width without td ?

"Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote:
[color=blue][color=green]
>> 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.[/color]
>
>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.[/color]

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.
[color=blue]
>http://www.freezeblock.com/[/color]

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

--
Spartanicus

re: fixed width without td ?

[color=blue]
> 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.[/color]
[color=blue]
> Without resorting to HTML tables, yes. But for the umpteenth time you
> should change the fixed width design.
>[/color]


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 :)

re: fixed width without td ?

Gabriel <kanari666@yahoo.fr> wrote:
[color=blue]
>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[/color]

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

--
Spartanicus

re: fixed width without td ?

Gabriel:[color=blue]
> display:inline;
> min-width:133px;[/color]

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.

re: fixed width without td ?

Gabriel wrote:[color=blue]
>
> 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 ?[/color]

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.

re: fixed width without td ?

Spartanicus wrote:[color=blue]
> "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote:
>[color=green][color=darkred]
>>> 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.[/color]
>>
>> 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.[/color]
>
> 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.[/color]

Should be doable with a surrounding div set to that width, yes? Though
I would be not in favor of a fixed width.
[color=blue][color=green]
>> http://www.freezeblock.com/[/color]
>
> Specifying a line height at least equal to the height of the
> buttons would prevent the buttons from overlapping when the menu
> wraps.[/color]

Good point. Done.

--
-bts
-This space intentionally left blank.

re: fixed width without td ?

Spartanicus wrote:[color=blue]
> Gabriel <kanari666@yahoo.fr> wrote:
>
>[color=green]
>>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[/color]
>
>
> Fluidity comes as standard, all you have to do to achieve it is not
> specify fixed widths.
>[/color]
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 :(

re: fixed width without td ?

"Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote:
[color=blue][color=green]
>> 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.[/color]
>
>Should be doable with a surrounding div set to that width, yes?[/color]

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

--
Spartanicus

re: fixed width without td ?

Spartanicus wrote:[color=blue]
> Gabriel <kanari666@yahoo.fr> wrote:
>[color=green]
>> The point is, in fact that the menu is contained in a block which is
>> always 800px wide[/color]
>
> Fixed page widths are bad design.[/color]

Just curious - What is that statement based on?

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

re: fixed width without td ?

Spartanicus wrote:[color=blue][color=green]
>> Fixed page widths are bad design.[/color][/color]

Tony <tony23.no@dslextreme.com.spam> wrote:[color=blue]
> Just curious - What is that statement based on?[/color]

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, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/

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

re: fixed width without td ?

Darin McGrew wrote:[color=blue]
> Spartanicus wrote:[color=green][color=darkred]
>>> Fixed page widths are bad design.[/color][/color]
>
> Tony <tony23.no@dslextreme.com.spam> wrote:[color=green]
>> Just curious - What is that statement based on?[/color]
>
> Experience with fixed-width page designs, perhaps?[/color]

So, personal experience, then. Fair enough.
[color=blue]
> 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.[/color]

I don't suppose you still have a link to that? I'd be curious to read it.
[color=blue]
> 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.[/color]

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

re: fixed width without td ?

I wrote:[color=blue][color=green]
>> 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.[/color][/color]

Tony <tony23.no@dslextreme.com.spam> wrote:[color=blue]
> I don't suppose you still have a link to that? I'd be curious to read it.[/color]

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

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

re: fixed width without td ?

Darin McGrew wrote:[color=blue]
> I wrote:[color=green][color=darkred]
>>> 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.[/color][/color]
>
> Tony <tony23.no@dslextreme.com.spam> wrote:[color=green]
>> I don't suppose you still have a link to that? I'd be curious to
>> read it.[/color]
>
> Here it is: http://www.useit.com/alertbox/20031110.html[/color]

Much appreciated :)

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