| View previous topic :: View next topic |
| Author |
Message |
Mike
Joined: 29 Dec 2005 Posts: 120 Location: Ontario, Canada
|
Posted: Sun Jul 16, 2006 11:00 pm Post subject: bullet lists without the bullet |
|
|
| How do you make a bullet list without the bullet. All I'm trying to go after is the indents. |
|
| Back to top |
|
 |
its_me_shaners
Joined: 04 Feb 2006 Posts: 65 Location: Ottawa, Canada
|
Posted: Mon Jul 17, 2006 10:32 am Post subject: |
|
|
make the bullet the same colour as the background (invisible) or insert a cell. Your site looks good !!! |
|
| Back to top |
|
 |
boysbach
Joined: 27 Dec 2005 Posts: 195
|
Posted: Mon Jul 17, 2006 1:06 pm Post subject: |
|
|
Mike I haven't checked out to see if they have the info but a great place to get hints on HTML, CSS etc is http://www.ilovejackdaniels.com it is a free site and don't be concerned about the name of the site.
I have found it to be an excellent resource |
|
| Back to top |
|
 |
Will
Joined: 26 Feb 2006 Posts: 148 Location: UK
|
Posted: Mon Jul 17, 2006 7:50 pm Post subject: |
|
|
Lists without bullets (even invisible ones) is very easily done.
Visit here and view the source. |
|
| Back to top |
|
 |
larrylef
Joined: 01 Jul 2006 Posts: 7 Location: Florida
|
Posted: Tue Jul 18, 2006 3:05 am Post subject: |
|
|
Hi, Mike,
Styling a list with CSS allows you to do some very nice things, and does so with very little HTML. You can change the bullet style, or remove it altogether, likewise with the indent and space between lines. This technique is also great for creating very nice looking menus (see them menu on the left side of my website - it's an unordered list with the bullets removed -- http://www.webpagedesign.tv. The menu is nothing more than a list with a link on each line, styled with CSS. The rule that removes the bullets from the menu is bolded in the style shown below;
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
The rest of the style adds solid white border to the bottom of each cell, and explicitly removes any margins or padding from each item. (Note: Will's example showed the "list-style-type: none" rule being applied to the ul tag - as shown above, it can also be applied to the li tag.
You can read about this technique for creating menus using CSS and lists in Eric Meyer's "More on CSS" book - here's a link to the supporting website - http://more.ericmeyeroncss.com/projects/05/. This website also has a free download for this chapter so you can examine the HTML and CSS code. Also, the excellent menu product I used on my site comes from Project Seven. |
|
| Back to top |
|
 |
boysbach
Joined: 27 Dec 2005 Posts: 195
|
Posted: Tue Jul 18, 2006 7:36 am Post subject: |
|
|
Mike brain dead here. You said you wanted indent. You are now using xsitepro.
Simple.
Make you list
type in one sentence at a time
Then highlight all the list and on the toolbar you have the bullets either number or circle and next to it is an indent button click on that and it is done.
Anyone selling a new brain please  |
|
| Back to top |
|
 |
Mike
Joined: 29 Dec 2005 Posts: 120 Location: Ontario, Canada
|
Posted: Tue Jul 18, 2006 5:41 pm Post subject: |
|
|
| what I'm really trying to get at is how to indent it to look like adsense link unit. I figured that out. Now all I have to figure out is how to get the links the same size and font as the adsense links. |
|
| Back to top |
|
 |
jkeifer
Joined: 29 Mar 2006 Posts: 34 Location: Coudersport, PA
|
Posted: Tue Jul 18, 2006 7:46 pm Post subject: |
|
|
Mike,
If you want to simulate an "adsense" look you could do something like this:
***********
<p><font size="2" face="Arial, Helvetica, sans-serif"><a href="http://www.awesomeguitarlessons.com"><strong>How to Play Guitar</strong></a></font>
<font face="Arial, Helvetica, sans-serif" size="2"><br />
You wouldn't turn down FREE
<br />
guitar lessons, would you?
<br />
Sign up now and start learning today! </font>
<br />
<font face="Arial, Helvetica, sans-serif" size="1">www.AwesomeGuitarLessons.com</font></p>
**************
-Jack |
|
| Back to top |
|
 |
|