mamadouthiam
asked on
Bulllet problems with CSS (Dreamweaver MX)
I am trying to get some bullets to work with CSS and I am struggling greatly (partly b/c I am just learning CSS).
The div class that I my body text in is
.splitright {
background: #ffffff;
float: right;
width:520px;
padding-left: 10px;
overflow: hidden;
text-align: justify;
}
I tried to create another class for bullets and nothing works properly. Even using the defaults (clicking on the li button) gives weird results. I don't know if the splitright is causing this or something else.
Any ideas
The div class that I my body text in is
.splitright {
background: #ffffff;
float: right;
width:520px;
padding-left: 10px;
overflow: hidden;
text-align: justify;
}
I tried to create another class for bullets and nothing works properly. Even using the defaults (clicking on the li button) gives weird results. I don't know if the splitright is causing this or something else.
Any ideas
HTML has a built in bullet-point list that requires no CSS to create
Put this into your code for an example:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Put this into your code for an example:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
ASKER
Argblat,
Doesn't work correctly with the CSS I have now. I would be happy with the standard you indicate but it does not render properly.
mama
Doesn't work correctly with the CSS I have now. I would be happy with the standard you indicate but it does not render properly.
mama
Can you post the code you use for the UL list as well?
ASKER
klykken,
Here is the entire CSS. I pulled out the bullets ".bullet" at the top.
.bullets {
text-align: left;
list-style-image: url(file:///M|/web-dev/com munication s/images/b ullet.png) ;
text-indent: 30px;
}
All CSS
*{border:0;margin:0;paddin g:0;backgr ound:trans parent;}
/* ~~~~~~~~~ breadcrumb ~~~~~~~~~ */
#breadcrumb
{
text-align: left;
height: 30px;
background-color: #E7F2FE;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
clear: both;
}
/* ~~~~~~~~~ breadcrumb ~~~~~~~~~ */
body
{
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 80%;
background-color: #ffffff;
margin-top: 0px;
background: #ffffff url('images/bg.gif') top center repeat-x;
}
#border
{
border: 0px ;
width: 770px;
background-color: #FFFFFF;
background:url('images/bac kround2.gi f') no-repeat;
margin: 0 auto;
}
#header
{
height: 193px;
width:743px;
margin-left:-2px;
background-image:url(image s/daisy.jp g);
}
* html #header { margin-left: 0; }
#content
{
padding: 0.5em 1em;
max-width: 740px;
background-color: #FFFFFF;
}
* html #content {height:1%}
* > html #content {height:auto}
#container
{
width: 740px;
margin: 0px auto;
background-color: #ffffff;
border: 0px solid #669900;
}
.Breadcrumb {
FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #000000; FONT-FAMILY: Verdana
}
.bullets {
text-align: left;
list-style-image: url(file:///M|/web-dev/com munication s/images/b ullet.png) ;
text-indent: 30px;
}
.splitleft {
background: #ffffff url('images/menu.gif') top center no-repeat;
float: left;
overflow: hidden;
text-align: center;
}
.splitright {
background: #ffffff;
float: right;
width:520px;
padding-left: 10px;
overflow: hidden;
text-align: justify;
}
#introduction{
float:left;
width:180px;
padding:0px 0px;
margin:5px 0px 20px 0px;
background: url(images/menu.gif) no-repeat;
text-align:left;
line-height:1.5em;
color:#999999;
font-size:1.0em;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
letter-spacing:0px;
}
#introduction ul, #introduction li {
text-align:center;
list-style: none;
margin: 0;
padding: 0;
}
#introduction a {
border-bottom: none;
color:#999999;
}
#introduction h3{
text-align: center;
position:static;
}
#introduction a:link, a:visited{
color:#999999;
}
#introduction a:hover, a:active{
color:#5B8FBE;
}
/* ~~~~~~~~~ footer ~~~~~~~~~ */
#footer
{
text-align: center;
height: 30px;
background-color: #E7F2FE;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
margin-top: 50px;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
clear: both;
}
#footer a:link, a:visited{
color:#5B8FBE;
}
#footer a:hover, a:active{
color:#cccccc;
}
a:active,
a:visited,
a:link { color: #5B8FBE; text-decoration: none; }
a:hover { color: #999999; text-decoration: none; }
/* ~~~~~~~~~ menu ~~~~~~~~~ */
#topmenu {
position: relative;
top: 13px;
left: 15px;
width: 540px;
font-size:93%;
margin: 0;
line-height:normal;
height: 41px;
}
#topmenu ul {
margin:0;
padding:0px 0px 0 2px;
list-style:none;
}
#topmenu li {
display:inline;
margin:0;
padding:0;
}
#topmenu a {
float:left;
background:url(images/menu left.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#topmenu a span {
float:left;
display:block;
background:url(images/menu right.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#5B8FBE;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#topmenu a span {float:none;}
/* End IE5-Mac hack */
#topmenu a:hover span {
color:#5B8FBE;
}
#topmenu a:hover {
background-position:0% -42px;
}
#topmenu a:hover span {
background-position:100% -42px;
}
/* ~~~~~~~~~ Headings ~~~~~~~~~ */
h1
{
FONT-SIZE: 20px;
COLOR: #5B8FBE;
padding-bottom: 10px;
}
h2
{
FONT-SIZE: 14px;
COLOR: #5B8FBE;
padding-bottom: 5px;
}
h3{
color:#5B8FBE;
font-family:geneva,arial,s ans-serif;
font-weight:normal;
text-transform:uppercase;
word-spacing:4px;
letter-spacing:3px;
font-size:0.8em;
font-weight:bold;
padding:0 2px;
margin:0;
}
/*~~~~~~~~~~~styles~~~~~~~ ~~~~~~~~*/
.bodytext {font-size: 16px}
.style5 {
font-size: 12px;
color: #CCCCCC;
Here is the entire CSS. I pulled out the bullets ".bullet" at the top.
.bullets {
text-align: left;
list-style-image: url(file:///M|/web-dev/com
text-indent: 30px;
}
All CSS
*{border:0;margin:0;paddin
/* ~~~~~~~~~ breadcrumb ~~~~~~~~~ */
#breadcrumb
{
text-align: left;
height: 30px;
background-color: #E7F2FE;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
clear: both;
}
/* ~~~~~~~~~ breadcrumb ~~~~~~~~~ */
body
{
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 80%;
background-color: #ffffff;
margin-top: 0px;
background: #ffffff url('images/bg.gif') top center repeat-x;
}
#border
{
border: 0px ;
width: 770px;
background-color: #FFFFFF;
background:url('images/bac
margin: 0 auto;
}
#header
{
height: 193px;
width:743px;
margin-left:-2px;
background-image:url(image
}
* html #header { margin-left: 0; }
#content
{
padding: 0.5em 1em;
max-width: 740px;
background-color: #FFFFFF;
}
* html #content {height:1%}
* > html #content {height:auto}
#container
{
width: 740px;
margin: 0px auto;
background-color: #ffffff;
border: 0px solid #669900;
}
.Breadcrumb {
FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #000000; FONT-FAMILY: Verdana
}
.bullets {
text-align: left;
list-style-image: url(file:///M|/web-dev/com
text-indent: 30px;
}
.splitleft {
background: #ffffff url('images/menu.gif') top center no-repeat;
float: left;
overflow: hidden;
text-align: center;
}
.splitright {
background: #ffffff;
float: right;
width:520px;
padding-left: 10px;
overflow: hidden;
text-align: justify;
}
#introduction{
float:left;
width:180px;
padding:0px 0px;
margin:5px 0px 20px 0px;
background: url(images/menu.gif) no-repeat;
text-align:left;
line-height:1.5em;
color:#999999;
font-size:1.0em;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
letter-spacing:0px;
}
#introduction ul, #introduction li {
text-align:center;
list-style: none;
margin: 0;
padding: 0;
}
#introduction a {
border-bottom: none;
color:#999999;
}
#introduction h3{
text-align: center;
position:static;
}
#introduction a:link, a:visited{
color:#999999;
}
#introduction a:hover, a:active{
color:#5B8FBE;
}
/* ~~~~~~~~~ footer ~~~~~~~~~ */
#footer
{
text-align: center;
height: 30px;
background-color: #E7F2FE;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
margin-top: 50px;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
clear: both;
}
#footer a:link, a:visited{
color:#5B8FBE;
}
#footer a:hover, a:active{
color:#cccccc;
}
a:active,
a:visited,
a:link { color: #5B8FBE; text-decoration: none; }
a:hover { color: #999999; text-decoration: none; }
/* ~~~~~~~~~ menu ~~~~~~~~~ */
#topmenu {
position: relative;
top: 13px;
left: 15px;
width: 540px;
font-size:93%;
margin: 0;
line-height:normal;
height: 41px;
}
#topmenu ul {
margin:0;
padding:0px 0px 0 2px;
list-style:none;
}
#topmenu li {
display:inline;
margin:0;
padding:0;
}
#topmenu a {
float:left;
background:url(images/menu
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#topmenu a span {
float:left;
display:block;
background:url(images/menu
padding:5px 15px 4px 6px;
color:#5B8FBE;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#topmenu a span {float:none;}
/* End IE5-Mac hack */
#topmenu a:hover span {
color:#5B8FBE;
}
#topmenu a:hover {
background-position:0% -42px;
}
#topmenu a:hover span {
background-position:100% -42px;
}
/* ~~~~~~~~~ Headings ~~~~~~~~~ */
h1
{
FONT-SIZE: 20px;
COLOR: #5B8FBE;
padding-bottom: 10px;
}
h2
{
FONT-SIZE: 14px;
COLOR: #5B8FBE;
padding-bottom: 5px;
}
h3{
color:#5B8FBE;
font-family:geneva,arial,s
font-weight:normal;
text-transform:uppercase;
word-spacing:4px;
letter-spacing:3px;
font-size:0.8em;
font-weight:bold;
padding:0 2px;
margin:0;
}
/*~~~~~~~~~~~styles~~~~~~~
.bodytext {font-size: 16px}
.style5 {
font-size: 12px;
color: #CCCCCC;
This CSS isn't very useful without the associated HTML
ASKER
Sorry,
Perhaps that is where my problem lies.
When I am coding this, I apply the "style" (in Dreamweaver MX) and my presumption (b/c it works in other pages with other CSS) is that is will apply that class to the text selected.
An example being:
<ul>
<li class="bullets">A. to mock up footer with RSS and </li>
<li class="bullets">mock up of new page for later discussion </li>
<li class="bullets"> Web Trends 8 update </li>
</ul>
Hope this helps and thanks for your patience.
mama
Perhaps that is where my problem lies.
When I am coding this, I apply the "style" (in Dreamweaver MX) and my presumption (b/c it works in other pages with other CSS) is that is will apply that class to the text selected.
An example being:
<ul>
<li class="bullets">A. to mock up footer with RSS and </li>
<li class="bullets">mock up of new page for later discussion </li>
<li class="bullets"> Web Trends 8 update </li>
</ul>
Hope this helps and thanks for your patience.
mama
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Argblat,
I tried the following:
.ul {
text-align: left;
list-style-image: url(../images/bullet.png);
text-indent: 30px;
to no avail.
The image bullets show up in IE but not FF (FF just has some little (default?) arrows). I can actually live with this but the indent is not working at all. They are all aligned left with the rest of the text (and the bullets actually even farther to the left). Moreover, when the text is long and need to wrap it looks like:
* Landing Pages - http://www.optimizeandprophesize.com/jonathan_mendezs_blog/2007/02/7_rules_for_lan.html
meaning the 2nd line is justified farther over than the 1st line.
Help???
I tried the following:
.ul {
text-align: left;
list-style-image: url(../images/bullet.png);
text-indent: 30px;
to no avail.
The image bullets show up in IE but not FF (FF just has some little (default?) arrows). I can actually live with this but the indent is not working at all. They are all aligned left with the rest of the text (and the bullets actually even farther to the left). Moreover, when the text is long and need to wrap it looks like:
* Landing Pages - http://www.optimizeandprophesize.com/jonathan_mendezs_blog/2007/02/7_rules_for_lan.html
meaning the 2nd line is justified farther over than the 1st line.
Help???
ASKER
mama