List-style not inline

HTML & CSS
1

Building a vertical menu and when I put list-style-position to inside, it forces text to the next line. But when it’s reinforced as outside, it places it correctly but it’s not where I want it.

Here’s a quick snippet of the markup, I’ve obviously done something wrong or missed something obvious out.

#navigation ul {
	list-style-type: square;
	list-style-position: inside;
	margin:0;
	padding:0;
	background:#;
}
#navigation li {
	padding: 5px;
	border-bottom: 1px #fff solid;
}
#navigation a {
	 color: #fff;
	 display: block;
	 cursor: pointer;
	 height: 40px;
	 line-height: 40px;
	 text-indent: 20px;
	 text-decoration:none;
	 width:100%;
}
2

Have you tried putting the list-style-type and list-style-type position into your <li>? I’ve put these two declarations inside the <li> rule and it seems to work.

3

That’s where margin/padding comes into play. If you try something like

ul {padding-left: 20px;}

you will probably get what you want. You need some left padding to provide room for your bullets.

4

Yeah, I had it in <li> to begin with then moved it, but it just has the same effect for me.

That doesn’t work either inside or outside.

I have a border border-left and border-bottom, so padding inwards left just forces the <li> borders out.

Then, if I put the following into <li> instead of <ul> it’ll just push the bullet point and text left in there separate lines.

#navigation li {
list-style-type: square;
list-style-position: inside;
padding-left: 25px;

5

Try margin-left then. You haven’t really said what’s wrong with it as is (unless I missed it). Perhaps post a screen shot of what it looks like and how you’d like it to look.

6

My oligopolies ralph, try this:

http://www.awblue.com/test/

7

OK, that’s good, but how do you actually want it to appear? It’s not quite clear yet. If we know what to aim for, we can suggest what code to use. :slight_smile:

Do you have a screen shot of a mockup?

8

Basically, for the square to be on the same line to the left of the <a> text within the <il>

9

From the problem you see in the current test page, it’s down #navigation having display: block;

Although I thought that display block is exactly what you should have for using a vertical menu ?

When I remove display block from .a the <li> list style goes on the same line as the <a> text, however then the actually clickable link is only the text and not the actual whole <li> area.

10

If you want to change the vertical position of the bullet, that’s impossible (cross browser)

However, you can use a bullet IMAGE and place that as the background of hte <li> and you can use the background position property to move it wherever you want. You’ll have to remove the list-style on the <ul> now if you go that approach :).

11

But I mean an exact description. I mean, what is that left border for? Do you have an image of what you want?

12

It’s cool. I know where I’ve went wrong and what exactly is causing it the <a> to go to a new line.

From putting display: block; AND width:100%; into the .a markup together, it’s forced it to take up the FULL 298px of the Nav. This isn’t entirely a fault, but it became the issue when I added a list-type; - for the reason that it takes a part of the width up, when there was no width left, with .a taking the full width:100%;, thus forcing the <a> to the next line.

The background .il method would do, or background images altogether in order to keep the full <IL> clickable.

Or is there another way to keep the full list item clickable?

13

Have you updated your page with the new code?
http://www.awblue.com/test/

The concept of full width links are easy, the anchor must be a non-inline leement and have (by either default or set) a width to tkae up the full area.

Right now the test page has the links spanning across the entire item.

14

Haven’t updated test page yet pal.

Do you have examples of the difference between what you described there?

15

http://www.awblue.com/test/

updated!