So I was thinking can it be used to format bullet points? Say I had these 3 points. (where the bullet point is an image)
This is bullet point 1.
This is bullet point 2.
This is bullet point 3.
At the moment I am using:
<img src="image.gif" width="8" height="8" /> This is bullet point 1.<br />
Is there a style I can use in CSS which would insert the image and format it?
Also, is there a way with CSS to apply a style, such as in this bullet point example, whereby each line is given the same formatting? Ideally I want code like this:
<div id="bulletpoints">
This is bullet point 1.
This is bullet point 2.
This is bullet point 3.
</div>
If that is a list of items then use a list structure and target each list for the bullet image. If its just random text then use a paragraph tag and target that instead.
A basic example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.bullet,.bullet2 {
list-style:none;
margin:0 0 1em;
padding:0;
}
.bullet li,
.bullet2 p {
padding:0 0 0 15px;/* make space for image*/
margin:0 0 5px;
background:url(bullet.gif) no-repeat 0 4px;/* adjust to suit*/
}
</style>
</head>
<body>
<ul class="bullet">
<li>This is bullet point 1.</li>
<li> This is bullet point 2.</li>
<li>This is bullet point 3.</li>
</ul>
<div class="bullet2">
<p>This is bullet point 1.</p>
<p> This is bullet point 2.</p>
<p>This is bullet point 3.</p>
</div>
</body>
</html>
Or if you need to be more specific then you would add a class to the p tag.
.bullet li,
.bullet2 p {
padding:0 0 0 15px;/* make space for image*/
margin:0 0 5px;
background:url(bullet.gif) no-repeat 0 4px;/* adjust to suit*/
}
Look at the code above and see if you can guess where the space between lines is coming form?
There’s not too much code in the above and so you should be able to spot it yourself quite easily.
If you still can’t guess where the space between the lines is coming from then shout and I’ll point it out but you’ll learn more if you can find it yourself;)
OK - I tried it and I worked it out. I also made the text smaller and that is helping with the spacing too. This is what I have:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
<style type=“text/css”>
.bullet,.bullet2 {
list-style:none;
margin:0 0 1em;
padding:0;
font-family: arial,sans-serif;
font-size: 12px;;
}
.bullet li,
.bullet2 p {
padding:0 0 0 12px;/* make space for image*/
margin:0 0 0px;
background:url(bullet.gif) no-repeat 0 3px;/* adjust to suit*/
font-family: arial,sans-serif;
font-size: 12px;;
}
</style>
</head>
<body>
<ul class=“bullet”>
<li>This is bullet point 1.</li>
<li> This is bullet point 2.</li>
<li>This is bullet point 3.</li>
</ul>
<div class=“bullet2”>
<p>This is bullet point 1.</p>
<p> This is bullet point 2.</p>
<p>This is bullet point 3.</p>
</div>
</body>
</html>
Now that you have removed the bottom margin the only space bewteen lines will be the default line-height. You can reduce the line-height but anything less that 1 will start to get clipped.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.bullet, .bullet2 {
list-style:none;
margin:0 0 1em;
padding:0;
font-family: arial, sans-serif;
[B] font-size: 77%;
line-height:1.0;/* adjust line-height for finer control*/[/B]
}
.bullet li, .bullet2 p {
padding:0 0 0 12px;/* make space for image*/
margin:0 0 0px;
background:url(bullet.gif) no-repeat 0 3px;/* adjust to suit*/
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<ul class="bullet">
<li>This is bullet point 1.</li>
<li> This is bullet point 2.</li>
<li>This is bullet point 3.</li>
</ul>
<div class="bullet2">
<p>This is bullet point 1.</p>
<p> This is bullet point 2.</p>
<p>This is bullet point 3.</p>
</div>
</body>
</html>
I just had a small problem. I copied your code into a new php web page and this works fine:
background:url(bullet.gif) no-repeat 0 3px;/* adjust to suit*/
But then I tried to work it into my template page and I need to use:
background:url(“…/bullet.gif”) no-repeat 0 3px;/* adjust to suit*/
What is stopping the more simple image locating working with my template? (Obviously the code above is within the CSS file, but maybe the <li> tags etc. in the template page are something to do with the problem? Or is it trivial and not worth looking into? I just thought yours looks more simple - and may load quicker!?
If you are talking about the …/ before the image name then that is telling the browsers to go up one directory before it can find the file. You obviously need to keep that in place or your image won’t be found.
Images referenced in the external css file are relative to the css file and not the html page.
There is no need for the quote marks around the image path though as they are optional and I always remove them.
A problem I have now is the bullets look fine in Safari on my Mac. But I have just looked on my iPhone 4 and the bullets appear at the top right of each line. So the bullet needs moving downwards but only on iPhone4!
The other problem with the iPhone 4 is the horizontal navigation bar. If you go to Apple on an iphone the horizontal navigation appears very small but IT ALL FITS ALONG THE SCREEN IN ONE LINE. When i load my site the horizontal navigation bar appears lager than Apple’s site and IT ALL FITS ALONG THE SCREEN IN TWO LINE. Repeat, TWO LINES! I would prefer it to look smaller and fit across the screen.
Is there something I need to consider when viewing on iPhone!?!
I’d need to see your live site to see if there’s anything simple that can be done but you should never expect that a page is going to render the same on a small screen device as it does in a web browser.
You would need to specifically design for small devices and that means a fundamental design concept change and using extremely advanced methods such as media queries to cater for different device widths.
You also have to remember that the base font size varies from computer to computer and browser to browser…
so you have two choices: make it smaller by adjusting the value used for font-size …
OR
here is a clever solution… you could adjust the width of your site to to it elastic…
for viewing on mobile devices, well you have to think logical, no matter how fluid or scalable your site is… 320px x 480px is a SMALL WINDOW… if you reduce your site to fit it will be too small to read , if you dont , it will break and/or need you to scroll about all over the place… this is not a matter of being a good designer or not… it’s just the laws of physics and mathematics. So the answer is to develop an alternate interface for smaller screens. Paul’s suggested reading gives you the TECHNICAL beginnings on how to do so.
But I notice that you are trying to emulate a particular site (APPLE) effect. You should not that Apples navigation is image based. The text is there, but the dimensions are fixed, and then the element are covered up with a graphical representation of what they say. It makes for a heavier site … but it is the reason why it doesn’t seem to break.
