Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Where did the bullets go?

Status
Not open for further replies.
thowe

thowe

Technical User
Jun 8, 2001
45
US
Hi there, any help would be great. Here is my problem. I'm using Dreamweaver to generate my CSS and bullets are not working. I'm learning how to hand code CSS but not so good at it yet. Could you help see what is wrong with this as there are NO bullets showing up. I really want square bullets to align on the right of my table

.bullet {
font-family: Arial, Helvetica, sans-serif;
margin: 25px;
padding: 25px;
list-style-type: square;
position: absolute;
}

thanks in advance
 
Sort by date Sort by votes
Your first problem is position: absolute;. You should avoid that as much as you can, especially with bullets. In your case, all your bullets will appear in the top left corner of the first positioned parent element. Next, we need to se some html code you're using for your bullets as well, to be able to give you good advice.
 
Upvote 0 Downvote
THANKS vragbond. here's my code: however I did take out the "absolute" but now my bullets are floating all over...one of the bullets is round which i don't want...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../bcs.css" rel="stylesheet" type="text/css">
</head>

<body background="../images/lav.jpg">
<table width="95%" border="0" cellspacing="0">
<tr>
<td height="167"><img src="../images/butterflylogo.gif" width="114" height="101"></td>
<td valign="top"><div align="right">
<table width="95%" border="0" cellspacing="0">
<tr>
<td><div align="right"><img src="../images/name.gif" width="280" height="51"></div></td>
</tr>
</table>
<table width="95%" height="24" border="0" cellspacing="0" class="hskp">
<tr>
<td width="71%" height="24" class="bullet">
<ul>
<li>
<div align="right"><a href="../bcs_bcs/production.html">website
production</a></div>
<div align="right"></div>
</li>
</ul></td>
<td width="23%">&nbsp;</td>
<td width="1%">&nbsp;</td>
<td width="5%">&nbsp;</td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0">
<tr>
<td width="1%">&nbsp;</td>
<td width="91%"><ul class="bullet">
<li>
<div align="right" class="main2"><a href="../bcs_bcs/training.html">software
training and consulting</a></div>
</li>
</ul></td>
<td width="8%">&nbsp;</td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0">
<tr>
<td width="2%" height="20">&nbsp;</td>
<td width="2%">&nbsp;</td>
<td width="80%"><ul class="bullet">
<li>
<div align="right" class="main2"><a href="../bcs_bcs/image.html">image
branding</a></div>
</li>
</ul>
<div align="right"></a></div></td>
<td width="16%"><p>&nbsp;</p></td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0">
<tr>
<td height="20">&nbsp;</td>
<td>&nbsp;</td>
<td> <ul>
<li><a href="../bcs_bcs/logo.html" class="bullet" align="right">logo
design</a></li>
</ul></td>

<div align="right">

</div>

</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="2" class="main"><a href="../index.html">Home</a> |<a href="../bcs_bcs/contact.html">
Contact</a> | <a href="../bcs_bcs/projects.html">Projects</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td> <!-- TemplateBeginEditable name="body" --><span class="main">body</span><!-- TemplateEndEditable --></td>
</tr>
</table>
<p class="body">&nbsp;</p>
</body>
</html>

and the CSS:
.bullet {
font-family: Arial, Helvetica, sans-serif;
list-style-type: square;
}


Intermediate Dreamweaver user, learning more everyday.
 
Upvote 0 Downvote
Why are you using so many tables?? If you show borders for all your tables it becomes apparent why things don't line up. I would cmpletely redesign this page staying away from all the uneeded tables. It has nothing to do with your CSS. To change the bullet problem you have to give the class to the proper elements. take a look at your code with borders equaling 1 and the classes changed .
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>.bullet {
    font-family: Arial, Helvetica, sans-serif;
    list-style-type: square;
}
</style>
</head>

<body background="../images/lav.jpg">
<table width="95%" border="1" cellspacing="0">
  <tr> 
    <td height="167"><img src="../images/butterflylogo.gif" width="114" height="101"></td>
    <td valign="top"><div align="right">
        <table width="95%" border="1" cellspacing="0">
          <tr>
            <td><div align="right"><img src="../images/name.gif" width="280" height="51"></div></td>
          </tr>
        </table>
        <table width="95%" height="24" border="1" cellspacing="0" class="hskp">
          <tr> 
            <td width="71%" height="24" class="bullet"> 
              <ul>
                <li class="bullet">
                  <div align="right"><a href="../bcs_bcs/production.html">website 
                    production</a></div>
                  <div align="right"></div>
                </li>
              </ul></td>
            <td width="23%">&nbsp;</td>
            <td width="1%">&nbsp;</td>
            <td width="5%">&nbsp;</td>
          </tr>
        </table>
        <table width="95%" border="1" cellspacing="0">
          <tr> 
            <td width="1%">&nbsp;</td>
            <td width="91%"><ul class="bullet">
                <li>
                  <div align="right" class="main2"><a href="../bcs_bcs/training.html">software 
                    training and consulting</a></div>
                </li>
              </ul></td>
            <td width="8%">&nbsp;</td>
          </tr>
        </table>
        <table width="95%" border="1" cellspacing="0">
          <tr> 
            <td width="2%" height="20">&nbsp;</td>
            <td width="2%">&nbsp;</td>
            <td width="80%"><ul class="bullet">
                <li>
                  <div align="right" class="main2"><a href="../bcs_bcs/image.html">image 
                    branding</a></div>
                </li>
              </ul>
              <div align="right"></a></div></td>
            <td width="16%"><p>&nbsp;</p></td>
          </tr>
        </table>
        <table width="95%" border="1" cellspacing="0">
          <tr> 
            <td height="20">&nbsp;</td>
            <td>&nbsp;</td>
            <td> <ul>
                <li  class="bullet" ><a href="../bcs_bcs/logo.html" class="bullet" align="right">logo 
                  design</a></li>
              </ul></td>
          
<div align="right">
               
              </div>
              
          </tr>
        </table>
      </div></td>
  </tr>
  <tr> 
    <td colspan="2" class="main"><a href="../index.html">Home</a> |<a href="../bcs_bcs/contact.html"> 
      Contact</a> | <a href="../bcs_bcs/projects.html">Projects</a></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td> <!-- TemplateBeginEditable name="body" --><span class="main">body</span><!-- TemplateEndEditable --></td>
  </tr>
</table>
<p class="body">&nbsp;</p>
</body>
</html>
This is oviously a template, I would try learn more about html before using a ready made template.

Glen
 
Upvote 0 Downvote
Dreamweaver automatically puts all that stuff in, and you have to rewrite it by hand to be more concise without a LOT of experience with the program to know how to avoid that.
 
Upvote 0 Downvote
I actually got rejected for a web design job recently because I use Textpad and Arachnophilia and didn't use Dreamweaver. I've been handcoding for 5 years with a text editor, and the interviewer decided I didn't have enough experience because I didn't have Dreamweaver listed on my resume. I told her it'd be like asking Emeril (the famous cook) if he could bake a cake from a mix, and then telling him he needed to add that to his resume when he had Master Chef as the first item in his skills list. That went totally over her head. Don't you just LOVE Human Resource interviewers who know nothing about the job they're interviewing you for?
 
Upvote 0 Downvote
It's happened to me as well. I was told the rest of the company uses DW and to be compatable I needed to use it as well. How do you soar with eagles when you have to work with turkeys? ;-)

Glen
 
Upvote 0 Downvote
Many people cannot think outside WYSIWYG get-it-done box, but that's only the part of problem.

Back on topic. Personally I wouldn't use UL/LI tags in a first place (small gifs are more appropriate here) but anyway:

- first UL (website production) contains empty DIV. Is it necessary?
- last UL tag doesn't have assigned CSS class, but A tag does
- add margin-bottom: 0px to .bullet selector
 
Upvote 0 Downvote
Guys,

Say you know Dreamweaver if it will get you a job :) It's an easy program to learn. Actually it can save you time if you know how to use it, but knowing the HTML 4 and XHTML Trans spec is obviously a requirement as well, so you know when DW is screwing up and how to fix it :)

josh

Josh Bachynski
Senior Project Manager
SIMIAN Systems Inc.
Office: 1.204.942.8630
Email: josh@simian.ca
Sitellite 4.2 Enterprise Edition - PHP based CMS and Framework
 
Upvote 0 Downvote
I added to my resume after that incident, along with Front Page. I've seen those 2 programs and worked maybe 5 - 10 minutes with each, anyway, long enough to know I'd rather not use them if I didn't have to. With macros and a good text editor, I can be about as productive and create pages with less code than the WYSIWYG editors, and I can more easily add SERIOUS custom scripts to do things that the fancy editors won't display.

I've cleaned up more pages created with DW than I care to count (which is more than 1), with the multiple columns and rows, and the colspans and rowspans to make things fit, and the graphics named according to the table row and column they occupy.
 
Upvote 0 Downvote
thanks for all the excellent feedback everyone. I do agree that you must know some html in order to fix some of the things that DW does. I started my web designing with HTML and I'm really glad I know it. But DW really makes things easy. Although the more I search this site I am learning so much about coding and other interesting tid bits. I'm self taught on just about all my computer skills, so I sort of learn as I go. Thank you again everyone for all the feed back.

Intermediate Dreamweaver user, learning more everyday.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
642
Mike Lewis
Mike Lewis
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
71
CoolBreeze007
CoolBreeze007
stephane.bouchard2
  • Locked
  • Question
How can you find the html version from source code. 2
Replies
6
Views
184
stephane.bouchard2
stephane.bouchard2
pendle666
  • Locked
  • Question
Using CSS for the pre tag. white-space: pre-line not working in Chrome
Replies
4
Views
346
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top