SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying font settings to lists

    I have recently learned the basics of css and so have implimented css to determine fonts/font-colours in my html's < head > section. All this works fine except in a list of bullet points - ( < li > < /li > ) where the < p > < /p > tags do not seem to work. I tried having the < p > tags within each set of list tags, but then only the text not the actual bullet points conformed to the css settings. Sorry for the worst explanation ever by the way. Any ideas?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need to see the css you're using. Cause if you're talking about paragraphs inside list elements (ie: <li><p></p></li>) it should work fine.

  3. #3
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I know what you're talking about. If you apply the color style to an <li> element, the bullet, and the text in that element will be affected. eg:
    Code:
    <style type="text/css">
    li {
    color:#0000FF;
    text-decoration:overline
    }
    </style>
    will make the bullets on an list item blue, and the text blue with an overline.

  4. #4
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it does work if I put the < p > tags inside of the < li > tags but I want to be able to simple put the < p > tags at the start and end of the list rather than within each bullet point of text. Also putting the < p > tags inside each bullet point does effect the text but not the bullet point itself which remains too large. I want the actual bullet point to be the font/font-size set by the < p > tag. thanks.

  5. #5
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't need to use a <p> element at all. Just apply the rules you want to the list:
    Code:
    ul {
    // style rules here
    }
    Coding and design philosophy:
    Keep It Simple, Stoopid

  6. #6
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Umm could you please give an example of if I wanted size 12px verdana with #333333 font-color. sorry I am completely new to css and need to see it set out. then in the html how would you impliment this css into the code? Would you wrap each list item in < ul> < /ul > tags or simply do this before and after the code for the entire list? thanks a lot.

  7. #7
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS:
    Code:
    ul {
    	font: 12px "Verdana", sans-serif;
    	color: #333;
    }
    HTML:
    Code:
    <ul>
    	<li>Apples</li>
    	<li>Bananas</li>
    	<li>Pears</li>
    </ul>
    Coding and design philosophy:
    Keep It Simple, Stoopid


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •