|
CSS - Removing The First Bullet From A Ul List
Hi everyone,
Just two really quick questions. Is there a way to get the list-style-image property to work for in-line unordered lists? And is there a way to remove the first bullet in the list? Thanks for any help. Similar TutorialsIm trying to remove the bullet icon from the unordered list but I can't make it work in FF or IE... XHTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="css/menu.css" /> <title>Test</title> </head> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Community</a></li> <li><a href="#">General</a></li> </ul> </div> </body> </html> and the CSS: Code: ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
It's probably something really obvious! I've had a good look around for a solution and I've tried applying them to no avail. I can't get the bullet lists to show in ie7 in the block on the right (they show fine in the content (on CV page) : 92 dot 48 dot 108 dot 113 /~legal Any ideas? Also, any quick design hints to improve the site? Can a bulleted list be split in to two collumns? and if so how? I've tried wrapping the list in <div>'s and trying to force it with margins and widths but can't get the result. For example: Code: <ul><li>stuff1</li><li>stuff2</li><li>stuff</li><li>stuff3</li><li>stuff4</li><li>stuff5</li></ul> stuff1 stuff2 stuff3 stuff4 stuff5 Hi I've been trying make an <a> anchor nested within a <li> list tag appear on the same row as the bullet, with no avail. It's hard for me to explain exactly, so I've uploaded two images: This is how I'd like the list items to appear, substract the extra list item which I have no idea why it appears the Image 1 This is how the list items appear: Image 2 Here's the HTML: Code:
<div id="primary-sidebar">
<div class="shadow">
<div class="tlc"></div>
<div class="trc"></div>
<h2 class="box-title">
Games list
</h2>
<div class="box-content-lhz">
<ul id="games-list">
<li>
<a href="/intersection.html?anarchy_online">Anarachy Onlins</a>
</li>
<li>
<a href="/intersection.html?Aion">Aion</a>
</li>
<li>
<a href="/intersection.html">Aries Online</a>
</li>
<li>
<a href="/intersection.html">Cabal Online</a>
</li>
<li>
<a href="/intersection.html">Eve Online</a>
</li>
<li>
<a href="/intersection.html">Guild Wars</a>
</li>
<li>
<a href="/intersection.html">Harrier</a>
</li>
<li>
<a href="/intersection.html">Jaxsos' world</a>
</li>
<li>
<a href="/intersection.html">Kal Online</a>
</li>
<li>
<a href="/intersection.html">Lemmings</a>
</li>
<li>
<a href="/intersection.html">Leiviathan Online</a>
</li>
<li>
<a href="/intersection.html">Party Online</a>
</li>
<li>
<a href="/intersection.html">World of Warcraft (US)</a>
</li>
<li>
<a href="/intersection.html">World of Warcraft (EU)</a>
</li>
</ul>
</div>
<div class="blc"></div>
<div class="brc"></div>
</div>
</div>
Here's the CSS Code:
ul {
padding-left: 2em;
list-style: square;
}
#games-list {
list-style-image: url("/_images/bullet1.gif");
list-style-position: inside;
margin: 0px;
padding: 0px;
}
#games-list li {
}
#games-list a{
font-weight: bold;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
color: #424547;
text-decoration: none;
display: block;
background: url(/_images/sprite-list.png) top left no-repeat;
padding: 5px;
padding-left: 20px;
}
#games-list a:hover{
background-position: left -40px;
color: #00a2ff;
}
I'd appreciate anyway help at all, as this has been on my mind for a while. ok i have a list that has style:none. this list is a link.. now whenever a user wants to hover over it i want to add a pointer (arrow perhaps) on the left of the list... Code:
#menu li {
list-style:none;
}
#menu a, #menu a:visited {
text-decoration:none;
color:#0033FF;
}
#menu li a:hover {
list-style-image:url(images/pointer.jpg);
}
#menu a:hover {
background-color:#0033FF;
color:white;
font-weight:bold;
}
now html Code: <ul> <li><a href="home.php">Home</a></li> </ul> Hi all, Probably easy, but I'm stumped... At this test page, I have now included a little horizontal image spacer image IN the list on the right. You'll notice that it has a bullet just like the text links do. I want the image right where it, preferably with no space above or below it between the "Resume" & "I Can Help" links. If I close the UL tag after Resume, then re-open it before I Can Help, the gap is too big. So I threw the image directly into the list! But I gotta kill the bullet. How? CSS FILE. Thanks! Chris Hello, I've created a menu by using an unordered list. Some of the list's items have submenus which is done with another unordered list nested inside the first. So my menu/list would look something like this: ( XX = the bullet image ) Code: XX Item 1
XX Item 2
XX Item 3
XX Item 3-1
XX Item 3-2
XX Item 4
I was wondering if it is possible to use a different bullet image for the nested/indented unordered list? So the menu/list would now look like: ( XX and ZZ = the bullet images ) Code: XX Item 1
XX Item 2
XX Item 3
ZZ Item 3-1
ZZ Item 3-2
XX Item 4
My existing code is: Code: <ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li>Item 3
<ul>
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
And my existing ul CSS is: Code: ul {
list-style-position: outside;
list-style-type: square;
margin-left: 18px;
margin-bottom: 0px;
padding: 0px;
list-style-image: url(/graphics/layout_05/list_bullet.gif);
margin-top: 0px;
margin-right: 0px;
}
Thank you for any and all help! when using unordered lists, is there any way to get more than 3 different bullet designs as you go into deeper nests? after the 3rd nest, the same bullet design is used over and over again. Is there a way to decrease a default spacing between bullet and text in <ul>? Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines. My page http://www.doylecompanylaw.com/doyle.html uses images for the bullets along the left navigation bar. They display perfectly in Opera and Firefox but position themselves too far up in IE. Anyone got any ideas on how to fix this problem? Thanks in advance. I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list? Code:
.test1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 15px;
color: #003366;
text-align: left;
list-style-image: url(bullet1.gif);
border: 1px solid #000099;
list-style-position: outside;
width: 150px;
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
#test2{
width:215px;
background-image: url(1bg-menu-v-mid.gif);
background-repeat: repeat-y;
border: thin solid #000066;
float: left;
}
How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design. I'm building a navagation bar. I want to have several lists, each with a heading. Due to space and visual concerns, I would like to eliminate the blank line between the heading and each list. Here's what I have: Code: <div id="navigation"> <span class="nav_title">Archives</span> <ul> <li>[...]</li> </ul> <p> <span class="nav_title">Categories</span> <ul> <li>[...]</li> </ul> [...] </div> And this is the corresponding CSS (just the ul part, obviously): Code: #navigation ul {
list-style-position: inside;
list-style-type: disc;
padding: 0;
margin-top: 0px;
padding-top: 0px;
display: block;
}
What I have right here works, but it only works for the first list. All the other lists have a blank line between the heading and the following list -- but the first does not. I find it weird that this would work for the first time it is used, but not for the second time. I tested it by replacing the heading and list with other headings and lists and got the same result -- the *first* heading blends with the list, but the rest do not. You can view this problem here (it's in the navigation bar on the right-hand side. "Archives" blends with its list, but nothing else does.) In case you couldn't tell, I'm trying to hack out my own WordPress theme atm -- don't yell at my table layout yet, I'm converting it from another theme and haven't finished yet Hi, I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong. How can I remove the circle bullets from the expanding menus on this page ? Thanks Anyway to remove the automatic line break after list items? I'd like to use styles to create roll-over effects in a menu I've used an unordered list to create that menu. But, I'd like a horizontal menu bar rather than a vertical menu column. Thanks! David Goldfeder I'm having an issue with a bullet, on www.wirelessguy.net The last bullet isn't showing for some reason. Here is my HTML and CSS. When I take the class off of the HTML the bullets show up fine. Code:
<ul class="phoneOneSpecs">
<li>Color Display</li>
<li>External Caller ID</li>
<li>Voice Activation</li>
<li>Wireless Internet Access(WAP)</li>
</ul>
Code:
.phoneOneSpecs, .phoneTwoSpecs,
{
position: absolute;
top: 5%;
right: 8%;
font-size: 12px;
list-style-type: circle;
}
I'm using an external style sheet and a Drupal site. I am pretty much of a CSS novice. No matter what I do, the default bullet is displaying. Sometimes, in the CSS stylesheet, I can have a graphic show up, but the regular bullet is showing as well. I want to make a separate bullet that I can use just on certain pages. It's on the home page of invisibleillnessdocfinder dot com I don't see anywhere to upload the style sheet to show the code. There is a template, so even though I'm putting "List-style=none" the default tiny bullet shows up. I'll be glad to email the stylesheet to anyone who can help. Thanks, Susan Is it possible to make the bullet go on the right hand side of the list item rather than on the left? Hi again, fellas. I have another annoyance. I've added some bullets that I want text right next to. I can't get the text to line up directly next to the bullets. I've bordered the two problem div's to make it easier. Could ya'll have a look, please and tell me what is wrong? http://www.bartlett-family.net/test2 Thanks! Chris is it possible to change the bullet point color only of a list? |
|||||||