SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: CSS newsletter

  1. #1
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS newsletter

    Hi there. I'm new to CSS and have some questions about the best way to solve this issue.

    I'm working on a newsletter for a client and I'm fixing up some of the existing CSS template they have. The page's dimensions are set up to print exactly as an 8 1/2 x 11 page and currently it is set up as a series of tables.

    I believe that they can solve this using a better CSS.

    Also, several articles have either callouts, images or captions on the right side of the page. I'm pretty sure that style sheet can be applied to these items and have them positioned better. However, I'm unsure as how to avoid splitting elements once the page prints. Some of the newsletter content may eventually roll over onto 2 pages (or more). I'd like to have better control over it.

    Can anyone assist me with this?

    Thanks for the help!
    Dan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Have a look at these articles which should explain more or less what you want.


    http://www.alistapart.com/articles/goingtoprint/
    http://evolt.org/article/Kissing_Pri...dbye/20/22225/

  3. #3
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've run into a new issue. I'm trying to get this page to just flow correctly at this stage.

    I've made two new styles, called .photobox and .photoquote. Photo box is the image on the page (this is to go to the right). Photoquote is either the caption or the quote beneath the picture.

    I want the body text to flow flush left around the .photobox and .photo_quote styles.

    What am I doing wrong here? I know I have extra stuff in here (I've been experimenting with settings just to get it right).

    .photo_quote {
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 16px;
    color: #999999;
    font-weight: bold;
    float;
    float: left;
    height: 20px;
    width: 200px;
    margin-left: 400px;
    clear: both;
    position: static;
    }
    .photobox {
    float: left;
    height: auto;
    width: auto;
    margin-right: auto;
    margin-left: 200px;
    clear: both;
    position: static;
    }


    Also, the bullets always have an indent. I can't seem to remove it.

    .bullet_one {
    FONT-SIZE: 12px;
    COLOR: #000000;
    FONT-FAMILY: Arial;
    list-style-position: inside;
    list-style-type: circle;
    margin-left:0px;
    text-align: left;
    margin: 0em;
    line-height;
    padding;
    }

    What's worse is the bullets have a double spacing above and below the bullet line. In IE it's horrible. In Firefox it looks better (spacing is fine, but indent is still there).

    Any help about either of these styles would be greatly appreciated. I'm learning a lot by just tweaking these settings, but I'm still confused!

    Thank you!
    Dan
    Last edited by Danopoly; May 26, 2005 at 11:26.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Also, the bullets always have an indent. I can't seem to remove it.
    What indent do you mean? Are you talking about the space between the bullet and the text as that's down to the browser and theres not much you can do about it.

    For floating an image and caption you might want to look here as you seem to be going about it the wrong way. You have a lot of invalid stuff in your code.

    If that doesn't sort you out then post the css and html you are using (or a link) and we'll try to give more specific advice. However I think you may need to work through that tutorial a bit first so you can get an idea of what's going on

  5. #5
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That looks very helpful for the frames. I knew I had a lot of useful stuff in there. I appreciate the direction.

    The indent I'm speaking of is before the bullet.

    BodyText is here

    o Bullet text is here.

    I can't remove the space in front of the bullet.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean like this:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    .bullet_one {
    margin:0;
    padding:0 0 0 15px
    }
    </style>
    </head>
    <body>
    <ul class="bullet_one"><li>testing</li></ul>
    <p>Testing</p>
    </body>
    </html>
    The default space for the bullet is by a default margin or padding depending on browser. Here's a little test that shows what I mean.

    http://www.pmob.co.uk/temp/list-bullet-test.htm


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
  •