|
CSS - Unordered Lists; Using Image For Bullets.
How do I go about making my unordered list use a image file or the bullet?
Code: <ul> <li><a href="#onesweetcoma">One Sweet Coma </a></li> <li><a href="#untitled">Untitled</a></li> <li><a href="#freedomfound">Freedom Found </a></li> <li><a href="#yourwords">Your Words</a></li> <li><a href="#reprise">Reprise</a></li> <li><a href="#cantpullaway">Can't Pull Away </a></li> <li><a href="#sleepingawake">Sleeping Awake</a></li> <li><a href="#wherewestand">Where We Stand</a></li> <li><a href="#echooffthewalls">Echo Off the Walls </a></li> </ul> my image name is bullet.png Similar TutorialsTake a look at my code... http://www.trinitysql.co.uk/jubilee2005/ Those links at the top are a <ul> with fixed height and width... What I want to do is push the text down to the bottom and make the whole area of the <li> link... Any help you couyld give me would be very much appreciated! Thanks! Hello, I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is: Code:
ul {list-style-image: url(../img/redarrow.gif)}
But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc. Please let me know if it is possible to code it so that I can have both in a page. Thanks! I am having a problem with a menu generated by a CMS. Basically it generates a series of nested unordered lists for the navigation. It only shows a parents children menu items if you are within that section. The problem is that it still outputs the unordered list and list item elements for the other child menus, but just leaves them blank. Leaving something like this: Code: <ul><li></li> <li></li> <li></li> <li></li> <li></li> </ul> This works fine in Firefox... but of course when you get to IE, it leaves big vertical spaces in the navigation. Unfortunately, I can't attach any IDs or classes to the child UL or LI elements. There is only one ID on the main UL, <ul id="subnav">. So my question is, can anyone think of a way that I can modify my CSS to take out those blank spaces created by empty <ul>s in IE? You can see the page he http://www.holidaytravelincentives.com/index.php/products/air-accommodations/ Hi, Trying to create a menu using <ul> tags and to have a nice spacing between <li> items. I have tried the line-height property but it seems like IE ignores them. Firefox formats the line-height properly. Can anyone help me? Should the line-height be applied to ul or li tags? /Hubba Bubba Quick question... I am trying to make an unordered list and have the first level have no indent/margin. But I want the second level to be indented 15 pixels. I'm having problems getting this done. Any suggestions? Thanks Here is a menu I am trying to build. I used different background colors to see what sections are doing what. Essentially what I am trying to achieve is that the menu items defined by the <li> (green) tag have text vertically centered in them and be the same height as the ul section (yellow). Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
body { background: black; }
#level0 {
background: red;
clear: both; } /* end #level0 */
#level1 {
background: orange;
width: 957px;
margin: auto; } /* end #level1 */
#level1 ul {
background: yellow;
clear: both;
text-align: right;
border-right: thin solid #cfcfcf;
margin: 0;
padding: 0;
height: 40px; } /* end #level1 ul */
#level1 ul li {
background: green;
line-height: 40px;
font-size: 12px;
padding-top: 13px;
padding-bottom: 13px;
vertical-align: middle;
border-left: thin solid #cfcfcf;
text-align: right;
margin: 0;
color: #9f9f9f;
padding-left: 1em;
padding-right: 1em;
display: inline; } /* end #level1 ul li */
#level1 ul li.active { background: blue; } /* end #level1 ul li.active */
#level1 ul li a {
background: purple;
color: #9f9f9f; } /* end #level1 ul li a */
#level1 ul li a:hover {
background: inherit;
text-decoration: none; } /* end #level1 ul li a:hover */
#level1 ul li.active a:hover {
text-decoration: none;
background: none; } /* end #level1 ul li.active a:hover */
</style>
</head>
<body>
<div id="level0">
<div id="level1">
<ul>
<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li class="active"><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li><li><a href="#">Careers</a></li><li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</body>
</html>
What happens is that this version renders as I want it in Safari, one pixel too high in Opera and Firefox, and several pixels too short in IE. What are some things I can try to fix this behavior so that it is consistent (-ly correct ) across browsers? Again for those that have helped me on other threads I greatly appreciate it. I have used CSS before but this is my first time using it for layout and am struggling with it a bit. I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem. I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual... see screenshot at http://clubsix1.com/images/cascade_effect.png Here's my CSS code: Code:
#masthead ul#mystuffnav {
padding:0;
margin:0;
width:334px;
}
#masthead ul#mystuffnav li {
float:left;
margin-bottom:1px;
clear: both;
}
/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
padding:3px 7px 5px;
text-decoration:none;
outline:none;
/*display:block; OQO */
font-size:10px;
float:left;
text-align:center;
margin:0 1px 0 0;
line-height:1em;
}
Help is GREATLY appreciated! =) Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems: *trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down. *getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes). Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project. Thanks in advance, -b www.l33tmonkey.com/sun/index.html completely ignoring the image issues, which are next on the list to sort out, I have a problem. I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire. the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS I've got an odd bug in IE7 that's got me completely stumped. I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it. My main page works just fine. Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container. The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on. I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated. eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something. Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out? Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!) Code snippet is posted below. Cheers. from stylesheet: .bulletList li { margin-bottom: 1.5em; padding-left: 0.75em; list-style-image:url(../images/hsdmini.jpg); color: #547A98; } from page: <table width="100%" > <tr> <td align="left"> <ul class="bulletList"><strong> <li>Credit cards accepted</li> <li>Cheques accepted</li> <li>Delivery to europe</li> <li>40,000 products in store!</li> </strong> </ul> </td> </tr> </table> Hello all, I'm a relative newbie with css, so any help is greatly appreciated. I am trying to come up with some xhtml/css that can appropriately display several images and text inside of an unordered list. For example, say I have this: Code: <ul> <li>TEXT<img />TEXT<img /><a>LINK</a></li> </ul> I am trying to come up with a way that the text inside the <li> tag always is displayed at the same level as the top of the text, if that makes sense. Also, I'd like the list element to be of uniform height and width. Finally, I'd like the second image and link to be all the way to the right of the list element. Here's what I've got so far: Code:
<ul style="vertical-align: top; list-style: none;">
<li id="li_1" style="list-style:none;">
<span style="width:150px; vertical-align:text-top;">1.)
<img src="/images/document.png" height="40px"/>TEXT
</span><span style="float:right">
<img src="/images/close.png" height="40px" />
<a href="#" onclick="return false;">[Edit]</a>
</span>
</li>
</ul>
Simply put, this currently looks like crap. Any suggestions? Thanks in advance. Hello all, I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show. Here is my css code for before I add the image: PHP Code: #navbar { height:37px; line-height:33px; padding: 2px 0 0 10px; vertical-align:top; background: url(images/linkbarbg1.png) repeat-x; font-family: Tahoma, Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #FFFFFF; } #navbar ul { vertical-align:top; margin:0; padding:0; border: 0px solid #000000; } #navbar ul li { display: inline; } #navbar ul li a { display: inline; text-decoration: none; padding-top: 5px; padding-bottom: 4px; padding-right: 10px; padding-left: 10px; color:#FFFFFF; } #navbar ul li a:hover { height: 31px; background:url(images/linkbarbg1hover.png) repeat-x top left; background-color: #FF3300; } And HTML: PHP Code: <div id="main"> <div class="leftshadow"> <div class="rightshadow"> <div id="header"><img src="images/logo1.png" /></div> <div id="navbar"> <ul> <li><a href="#">Milk</a></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> </div> </div> And here is what it looks like: My CSS Code is the same for after, here is my HTML code for after: PHP Code: <div id="main"> <div class="leftshadow"> <div class="rightshadow"> <div id="header"><img src="images/logo1.png" /></div> <div id="navbar"> <ul> <li><a href="#">Milk</a></li> <li><img src="images/linkbarseperator1.png" /></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> </div> </div> and here is what is looks like: Is there a way to fix this? UPDATE I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas? Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> This is the first time I've ever not been able to hack around something. I am about to pull my hair out trying to figure out what i wrong with my bulleted menu in CSS. If you look at this page you will se that the arrow bullet for the list is aligning in the middle of a nested UL: http://www.porphyriafoundation.com/about-the-apf/scientific-advisory-board How on earth do I get that stupid little arrow to move up next to the parent item?! If you know the solution I will kiss you through the internet! Here is the CSS: Code: http://dev.porphyriafoundation.com/modules/system/system-menus.css?A
li.expanded (line 11)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
}
ul.menu li (line 8)
{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0.5em;
}
http://dev.porphyriafoundation.com/themes/apf_one/apf_one.css?A
#block-menu-primary-links ul.menu, #block-menu-primary-links li.leaf, #block-menu-primary-links li.collapsed, #block-menu-primary-links li, #block-menu-primary-links .item-list ul, #block-menu-primary-links .item-list ul li (line 135)
{
list-style-position: outside;
list-style-image: none;
list-style-type: none;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
background-color: #ffffff;
width: 173px;
}
#block-menu-primary-links .block-inner li.abouttheapf ul li.expanded (line 394)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 16pt;
}
I need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must: - wrap around a floated element - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements) I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas? Hi there, I have a menu system which uses <UL> etc, but it displays the bullet point. Is there a way to remove these bulllets? Many thanks! Hi, Im just learning css and notice that alot of elements such as navigation can be done using bullet points. Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent? my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it? Code: .nav {
height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
line-height:30px;
}
.bul-sec {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-position: outside;
list-style-image:url(images/bullets/sec.gif);
line-height:30px
}
or is there a better way to do this? Thanks! Hello, What is the best way to adjust the vertical spacing between bullets? I tried inserting a br tag inbetween the li tags, but that isn't "valid" XHTML. So for now I'm using the margin-bottom property... Code:
li {
margin-bottom:20px;
}
Any suggestions? Here's a quicky before the weekend (FINALLY!!!)... Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon. I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that... I might be dreaming here... but the forums are usually very resourceful so why not!! Thanx a ton. Olografix |
|||||||