Background with

[Wilhelm Kutting]

Hi i got the problem to get a horizontal css-menu working with
background image.

if i use
display:block;
under #list a, the image is shown but the list is vertical.

When i use display:inline; no image is shown and i can't use a fixed width.

Ist there a way to get a horizontal list weoking with background image
and fixed width?

---------------------------------
my code:
---------------------------------
<ul id="list">
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
</ul>
---------------------------------
my Stylesheet
---------------------------------
#list ul{
margin:0;
padding:0px;
list-style:none;
display:inline;
white-space: nowrap;}

#list li{
width:109px;
list-style-image: none;
display:inline;
}

#list a{
text-align:right;
background-image: url(img/navi-inaktiv.gif);
background-repeat: no-repeat;
display:inline;
height: 23px;
background-position: right;
}
-----------------------------------

[Arctic Fidelity]

Wilhelm Kutting <wk******@arcor.de> wrote in
news:d2**********@newsreader3.netcologne.de:

Ist there a way to get a horizontal list weoking with background image
and fixed width?

The way that always works best for me is to utilize floats. Each li tag
is floated left and the ul is centered or whatever you like. Then, you
can specify each width for the li tags, and they'll be horizontal
rather than vertical.

--
Arctic Fidelity <sp**@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

[Martin!]

Wilhelm Kutting wrote:

Hi i got the problem to get a horizontal css-menu working with
background image.

if i use
display:block;
under #list a, the image is shown but the list is vertical.

When i use display:inline; no image is shown and i can't use a fixed width.

Ist there a way to get a horizontal list weoking with background image
and fixed width?

---------------------------------
my code:
---------------------------------
<ul id="list">
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
</ul>
---------------------------------
my Stylesheet
---------------------------------
#list ul{
margin:0;
padding:0px;
list-style:none;
display:inline;
white-space: nowrap;}

#list li{
width:109px;
list-style-image: none;
display:inline;
}

#list a{
text-align:right;
background-image: url(img/navi-inaktiv.gif);
background-repeat: no-repeat;
display:inline;
height: 23px;
background-position: right;
}
-----------------------------------

use
<li><a ...> blabla </a></li>

and make li display:inline and a:display:block

[Arctic Fidelity]

"Martin!" <m.*******@gmail.komkommer> wrote in
news:d2**********@news3.zwoll1.ov.home.nl:

Ist there a way to get a horizontal list weoking with background
image and fixed width?

use
<li><a ...> blabla </a></li>

and make li display:inline and a:display:block

This seems like rather poor coding style. I'm not sure, but wouldn't it
be better and more reliable to use floats rather than to swap the
displays like that? In addition, isn't there some major issues with
putting blocks within an inline tag?

--
Arctic Fidelity <sp**@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

[Martin!]

Arctic Fidelity wrote:

"Martin!" <m.*******@gmail.komkommer> wrote in
news:d2**********@news3.zwoll1.ov.home.nl:

Ist there a way to get a horizontal list weoking with background
image and fixed width?

use
<li><a ...> blabla </a></li>

and make li display:inline and a:display:block

This seems like rather poor coding style. I'm not sure, but wouldn't it
be better and more reliable to use floats rather than to swap the
displays like that? In addition, isn't there some major issues with
putting blocks within an inline tag?

http://css.maxdesign.com.au/listamatic/

convince yourself

[Gus Richter]

Arctic Fidelity wrote:

"Martin!" <m.*******@gmail.komkommer> wrote in
news:d2**********@news3.zwoll1.ov.home.nl:

Ist there a way to get a horizontal list weoking with background
image and fixed width?

use
<li><a ...> blabla </a></li>

and make li display:inline and a:display:block

This seems like rather poor coding style. I'm not sure, but wouldn't it
be better and more reliable to use floats rather than to swap the
displays like that? In addition, isn't there some major issues with
putting blocks within an inline tag?

Essentially you are right in saying that an inline element may not
contain a block element. An inline element with the display property set
to block, will cause it to be displayed as a block, but will still be an
inline element. The display property, in CSS, does not change the HTML
type from inline to block or vice-versa, but only "how it will be
displayed".

For example:
BODY may contain only a block element.
IMG is an inline element.
Therefore, IMG may not be directly in BODY.

img {display:block;} will cause IMG to be displayed as a block.
IMG will still be an inline HTML element irregardless of the CSS display
property.
IMG may still not be directly in BODY.

Similarly, A (anchor) is an inline HTML element and will always be an
inline element no matter if CSS changes the display property to block.

--
Gus

[Arctic Fidelity]

Gus Richter <gu********@netscape.net> wrote in
news:6L********************@golden.net:

Arctic Fidelity wrote:

"Martin!" <m.*******@gmail.komkommer> wrote in
news:d2**********@news3.zwoll1.ov.home.nl:

and make li display:inline and a:display:block

This seems like rather poor coding style. I'm not sure, but wouldn't
it be better and more reliable to use floats rather than to swap the
displays like that? In addition, isn't there some major issues with
putting blocks within an inline tag?

Essentially you are right in saying that an inline element may not
contain a block element. An inline element with the display property
set to block, will cause it to be displayed as a block, but will still
be an inline element. The display property, in CSS, does not change
the HTML type from inline to block or vice-versa, but only "how it
will be displayed".

Thanks, that clarifies something. Hehe, I was thinking that CSS would
change the natural "semantic" nature of an element, which I guess it
doesn't. :-)

--
Arctic Fidelity <sp**@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

[Gus Richter]

Arctic Fidelity wrote:

Gus Richter <gu********@netscape.net> wrote in
news:6L********************@golden.net:

Arctic Fidelity wrote:

"Martin!" <m.*******@gmail.komkommer> wrote in
news:d2**********@news3.zwoll1.ov.home.nl:

and make li display:inline and a:display:block
This seems like rather poor coding style. I'm not sure, but wouldn't
it be better and more reliable to use floats rather than to swap the
displays like that? In addition, isn't there some major issues with
putting blocks within an inline tag?

Essentially you are right in saying that an inline element may not
contain a block element. An inline element with the display property
set to block, will cause it to be displayed as a block, but will still
be an inline element. The display property, in CSS, does not change
the HTML type from inline to block or vice-versa, but only "how it
will be displayed".

Thanks, that clarifies something. Hehe, I was thinking that CSS would
change the natural "semantic" nature of an element, which I guess it
doesn't. :-)

This was clarified for me as well in this newsgroup not too long ago.

--
Gus

[Arctic Fidelity]

Gus Richter <gu********@netscape.net> wrote in news:N66dnQXJFaeSdc7fRVn-
[e-mail]:

This was clarified for me as well in this newsgroup not too long ago.

Yeah, I'm learning all sorts of cool stuff on this group that I didn't
even know existed. :-)

--
Arctic Fidelity <sp**@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth