CSS vertical list <li>

HTML & CSS
1 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
  <div class="box2">
  
   <h3>Adscjsfjs</h3>
   <ul>
   
	<li>abcd</li>
	<li>ijkl</li>
	<li>sdhfhsdfjlsd/li>
	<li>sdhfkllsjhf</li>
	<li>reyitwetuweptue</li>
    
	</ul>
	</div>
 </BODY>
</HTML>

I want the header to stay just above the list and aligned perfectly. what changes I may need ?

Here is the desired display.

What changes I need to do so that it looks like above ?

2

Hi,
First thing you need to do is add some styling to the h3 & UL. You need to override the default margins/padding that the browser is giving and define them yourself.

We have no control over the actual positioning of the bullets themselves in a x-browser environment. However they are usually within 1-2px of each other so it is not a big problem. A 20px left padding on the UL is usually sufficient for all browsers.

It looks like that EditPlus text editor your using needs to be updated or something. That default page it’s giving you is using 4.0 transitional doctype and capitalizing everything. Try using something more up to date like the current version of PSPad

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
.box2 {
    float:left;
    margin:10px;
    background:#EEF;
}
.box2 h3 {
    margin:4px;
    font-size:1.1em;
}
.box2 ul {
    margin:0;
    padding:0 5px 0 20px;
}
</style>

</head>
<body>

<div class="box2">
    <h3>Adscjsfjs</h3>
    <ul>
        <li>abcd</li>
        <li>ijkl</li>
        <li>sdhfhsdfjlsd</li>
        <li>sdhfkllsjhf</li>
        <li>reyitwetuweptue</li>
    </ul>
</div>

</body>
</html>
3

your code works but I don’t understand the code. Here is what I don’t understand.

Please see comments in color.
thanks

4

Here is what I don’t understand.

.box2 ul {
margin:0; // is not this should be 4px as similar to h3 ? As they need the same margin from left ?
Hi,
If you look back to what I had said about the bullets -

We have no control over the actual positioning of the bullets themselves in a x-browser environment.

That means we have no way of positioning the bullet other than list-style-position: inside or outside. The left padding on the UL is just pushing the bullets into the div while using the default list-style-position.

I am just allowing the bullets to position where the browser places them, then I am placing a left margin on the h3 only to get the first letter centered over the bullet. That is the easiest way to do it while using a default bullet.

Your not going to get pixel perfection but you can get close. If you want to set a pixel font-size on the h3 then that will help a little bit. I was using 1.1em and that was close with my settings but it could appear differently for someone else on a different browser and settings.

You will just have to play around with it and test with different browsers until you find a compromise that suits you. Another option is to use a bullet background image, that will allow you to get consistent size and position of the bullet.

5

thanks for the comment.

you are using 20px left padding …its a quite big … how did you measure this that it has to be 20px left padding ? just visually or using tool ?

6

you are using 20px left padding …its a quite big …
Hi,
As I had mentioned in my first post, that is just a size that is safe with all browsers. I’m not using any tools, it is just a result of testing it in different browsers.

We have no control over the actual positioning of the bullets themselves in a x-browser environment.
I will explain what I meant by that. Instead of using 20px left padding let’s use 14px. Now remove the left margin from the h3 and set a px font-size.

That will place the bullets and h3 flush to the left side of the parent (.box2) in FF. Now look at the same code in IE7, about a 1/3 of the bullet is clipped off. We can’t position the actual bullet, only the left padding that makes it visible. You just have to find a compromise you can live with or use your own bullet image.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
.box2 {
    float:left;
    margin:10px;
    background:#CDF;
}
.box2 h3 {
    margin:4px [B]0;[/B]
    font-size:[B]18px;[/B]
}
.box2 ul {
    margin:0;
    padding:0 5px 0 [B]14px;[/B]
    background:#0F0;
}
</style>

</head>
<body>

<div class="box2">
    <h3>Heading</h3>
    <ul>
        <li>list item</li>
        <li>list item</li>
        <li>long list item</li>
        <li>longest list item</li>
    </ul>
</div>

</body>
</html>