When you post code about an issue, please post the CSS and the HTML together, preferably as a working page. See the link at the bottom of this post and read our guidelines for reporting problems and posting code.
Lists, <ul> tags, have default left padding to position the list markers.
The most common “reset” applied to an <ul> or <ol> is {padding:0;}. Without it, the bullets and remarks are indented. It is usually applied in horizontal menu bars.
However, if applied to a standard vertical list, the bullets will be positioned outside of the list box. Please see the following example. The top box has no reset applied, the lower <ul> has {padding:0;}
Copy the following code into a new file, give the file an .html suffix, and open it in your browser.
I would also advise against cutting and pasting from Word, because you may end up with strange characters. Use notepad or another plain-text editor, or download an HTML editor. There are a number of free ones available.
here it is as requested, sorry about the heavy use of comments that are default in this 1 column page used as an example.
I think it’s the bit at the end you need.
appreciate further advice
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #ADB96E;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a>
<!-- end .header --></div>
<div class="content">
<h1>Instructions</h1>
<p><u>Bathrooms: </u></p>
<ul>
<li>Baths</li>
<li>Saniflow</li>
<li>Showers</li>
<li>Sinks</li>
<li>Tiling</li>
<li>Toilets</li>
<li>Wetrooms </li>
</ul>
<p> </p>
</div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
It’s as I said - list-style-position:inside gets the bullets inside the white container. Although you have no padding set as ronpat mentioned which can also be used as a fix. padding-left:1em; will also fix this.
Edit-@ron, you should know browsers use a left margin sometimes instead of padding. It’s not universally always left padding :). At least that’s how it used to be. Too lazy to check a variety of browsers right now.
The bullet markers are always laid outside the principal box by default so you need to add a left margin or left padding to bring the markers onto the page.
The bullet markers are always laid outside the principal box by default so you need to add a left margin or left padding to bring the markers onto the page.
e.g.
Code:
u l{margin:1em 0 1em 2em}
@Ryan Reece
Where do I find the list/style etc please (newbie as mentioned above)
It’s as I said - list-style-position:inside gets the bullets inside the white container. Although you have no padding set as ronpat mentioned which can also be used as a fix. padding-left:1em; will also fix this.
Add the rules to the end of the stylesheet which you seem to have in the head of the page (but it really should be linked to in an external file).
In your page you can add the rules here:
.....
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
[B]ul.bullet-list{
margin:1em 0 1em 2em;
}
[/B]
-->
</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a>
<!-- end .header --></div>
<div class="content">
<h1>Instructions</h1>
<p><u>Bathrooms: </u></p>
[B] <ul class="bullet-list">[/B]
<li>Baths</li>
<li>Saniflow</li>
<li>Showers</li>
<li>Sinks</li>
<li>Tiling</li>
<li>Toilets</li>
<li>Wetrooms </li>
</ul>
Note that I have added a classname to the css and to the html to identify that menu rather than set styles globally.
was really scratching my head with it, now I need to understand what you just did lol
ps
The reason I cut from word was they have a few different bullet types so was picking different ones, I guess you can have a dot as a bullet but not an asterisk etc
I was not pasting this: <ul class=“bullet-list”> above my bullet list
Still not understanding, sorry about this paul
Have got it working on sample page now I am trying on a “boilers” page and unsure which bit of the code to place where
Last time I cut and pasted your suggestion from .clearfloat all the way down to Wetrooms </li> </ul> and it worked fine
Now on the boilers page, I am unsure which bit goes where, example follows.
Boilers Services</p>
<p>We offer a full range of servicing & Install options to suit your criteria. We are competitively priced for boiler swaps & servicing & will come up with the best option for each individual customer.</p><ul><li><p>Breakdowns</p>
</li>
<li>
<p>Full Install</p>
</li>
<li>
<p>Power Flush</p>
</li>
<li>
<p>Repairs</p>
</li>
<li>
<p>Servicing</p>
</li>
</ul>
<p><strong><em>Having regular boiler checks will ensure your boiler is working at it’s highest efficiency.</em></strong>
sorry for not yet understanding which bit I need and where it needs placing as the “ul.bullet-list{margin:1em 0 1em 2em; }” above the header has thrown me.
I was not pasting this: <ul class=“bullet-list”> above my bullet list
Yes the class (bullet-list) is the way that you can attache the styles I gace you to the element in question. They tie them both together (or indeed any element with that class applied).
Well, yes you can, but it’s not a piece of cake for a CSS newbie who doesn’t yet have a comfortable grasp of the basics. :-/
<!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>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1229421-Help-with-bullet-list-alignment-needed-please
2014.08.19 06:17
bilbo baggins
-->
<style type="text/css">
.outer {
width:400px;
margin:0 auto;
/* border:1px solid #f00; /* TEST Border; Can be deleted. */
}
ul.asterisk {
list-style-type:none; /* removes the default list marker */
border:1px solid #f00; /* TEST Border; Can be deleted. */
padding:0; /* removes the default padding-left */
margin:0; /* removes the default vertical margins */
}
.asterisk li {
border:1px solid #0f0; /* TEST Border; Can be deleted. */
position:relative; /* sets a stacking context for the new list marker (asterisk) */
padding-left:1.1875em; /* sets a desirable width of padding in each list item */
}
.asterisk li:before {
content:"\\002a"; /* this is the asterisk */
position:absolute; /* positions the asterisk as desired. Note "em"s instead of "px" */
left:0;
top:0.0625em;
color:red;
font-weight:bold; /* because this is a character entity, some font characteristics can be changed including size and color */
font-size:1.125em;
}
pre { /* styles the code notes that I included on the page :) */
font-family:"courier new",monospace;
margin-bottom:.25em;
white-space:pre-wrap;
}
</style>
</head>
<body>
<div class="outer">
<pre>ul.asterisk {
list-style-type:none;
padding:0;
margin:0;
}
.asterisk li {
padding-left:1.125em;
position:relative;
}
.asterisk li:before {
content:"\\002a"; /* asterisk */
position:absolute;
left:0;
top:0.0625em;
color:red;
font-weight:bold;
font-size:1.125em;
}</pre>
<ul class="asterisk">
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
</div>
</body>
</html>
There are several ways of adding a custom list marker. This technique uses a UTF8 character entity. One can also insert a background image such as a .pdf icon for links to .pdf files.
As a variation, one can assign a classname to certain list items and assign different markers to certain <li>s based on the classname.
Between 3 and 4 years ago I ran several tests with lists using IE8 and FF. Later, I tried some of those tests with Opera and Chrome. I never found a browser that applied a default margin-left to a <ul>. (I didn’t respond to this sooner because I wanted to find my old notes.) The major browsers were consistent in that they used vertical margin and left padding… the precise values differed a tad. I get the feeling that Paul might remember some, but I don’t remember any. In practice, the standard reset of ul {padding:0; margin:0} would catch any stray, though. I checked the current versions of those 4 browsers (plus the latest IE) again yesterday and they remain as I found them before. :shrug:
[COLOR=#000000]Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.
Guess it’s standardized now. The second link also has this
[/COLOR]* Firefox, Chrome, Opera and IE8 - left padding
[COLOR=#150304][FONT=proxima-nova]* IE6, IE7 - left margin
