Hallo,
i ' m busy with a horizontal bar for navigation. I'm using CSS and unordered list. My bar looks fine but the selected list images will not show. My style:
<style type="text/css">
<!--
#nav1{
position: absolute;
left: 25px;
top: 120px;
}
#nav1 ul {
text-align: center;
margin-left: 0;
padding-left: 0;
}
#nav1 li {
padding: 3px 10px;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
list-style-image: url(images/red_bullet.gif);
list-style-position: inside;
list-style-type: none;
}
-->
</style>
The link is ok, i checked this while disabling "display: inline".
Please help me, what wrong?setting li's to display:inline negate's ul list-style's. try setting them to float:left insteadThanks for your answer. But it works not in IE. Is there way to handle this in IE?
This works (only) in mozilla:
#nav1 ul li:before {
content: "\0020 \0020 \0020 \00BB \0020";
color: #CC0000;
}You could emulate the effect by using the image as background image (no-repeat, position left center) on the list items and move the content away with some left padding.
MaxDesign's Listurorial (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listutorial/index.htm">http://css.maxdesign.com.au/listutorial/index.htm</a><!-- m -->) shows in detail how to go about this.As suggested by ronaldb66:
#nav1 li {
padding: 3px 10px;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background:url(images/red_bullet.gif) left no-repeat;
}
:before is not supported by IEbedankt,
this works really goed.
Is there a way to use characters in case of images?
(a way that will show au in IE)Not with css, use entities in a span:
<span style="color:red;">& nbsp;& nbsp;& nbsp;& raquo;& nbsp;</span> (remove spaces)
The first three spaces can be achieved by altering the padding-left of the liOk,
but i have to place this entities before each item, or not?Just do this:
<li>
» <a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html">Blah</a>
</li>
Then colour the text in your li's whatever you want and the same for the text in your links.
Edit: Fang, just type in if you want to show Hmmmm...
I like Fang's solution (dankje wel).
i ' m busy with a horizontal bar for navigation. I'm using CSS and unordered list. My bar looks fine but the selected list images will not show. My style:
<style type="text/css">
<!--
#nav1{
position: absolute;
left: 25px;
top: 120px;
}
#nav1 ul {
text-align: center;
margin-left: 0;
padding-left: 0;
}
#nav1 li {
padding: 3px 10px;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
list-style-image: url(images/red_bullet.gif);
list-style-position: inside;
list-style-type: none;
}
-->
</style>
The link is ok, i checked this while disabling "display: inline".
Please help me, what wrong?setting li's to display:inline negate's ul list-style's. try setting them to float:left insteadThanks for your answer. But it works not in IE. Is there way to handle this in IE?
This works (only) in mozilla:
#nav1 ul li:before {
content: "\0020 \0020 \0020 \00BB \0020";
color: #CC0000;
}You could emulate the effect by using the image as background image (no-repeat, position left center) on the list items and move the content away with some left padding.
MaxDesign's Listurorial (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listutorial/index.htm">http://css.maxdesign.com.au/listutorial/index.htm</a><!-- m -->) shows in detail how to go about this.As suggested by ronaldb66:
#nav1 li {
padding: 3px 10px;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background:url(images/red_bullet.gif) left no-repeat;
}
:before is not supported by IEbedankt,
this works really goed.
Is there a way to use characters in case of images?
(a way that will show au in IE)Not with css, use entities in a span:
<span style="color:red;">& nbsp;& nbsp;& nbsp;& raquo;& nbsp;</span> (remove spaces)
The first three spaces can be achieved by altering the padding-left of the liOk,
but i have to place this entities before each item, or not?Just do this:
<li>
» <a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html">Blah</a>
</li>
Then colour the text in your li's whatever you want and the same for the text in your links.
Edit: Fang, just type in if you want to show Hmmmm...
I like Fang's solution (dankje wel).