WordPress.org

Ready to get started?Download WordPress

Forums

CSS help needed please (8 posts)

  1. jbickers
    Member
    Posted 9 years ago #

    Hi all, I'm hoping some kind soul here will want to give some advice to a total CSS newbie ...

    I've just installed WordPress for a friend of mine, and used one of the stylesheets from Alex King's site. Here's where it's located:

    http://www.lesliestewart.com/blog

    There are two things I want to accomplish, but have no idea how: (1) correct the padding on images so that text doesn't touch their left side, and also have all images default to right-alignment; and (2) add a second line of text under the title.

    Any help is gratefully appreciated, and will be repaid with many good thoughts :>

    James

  2. kinuk
    Member
    Posted 9 years ago #

    To solve number one, put the following into your stylesheet:

    img {padding: 5px;}

    change the number to change the amount of padding around the photo.

    You can also add another line under the title by adding padding. (padding-bottom: 5px;), for example.

  3. ifunky2
    Member
    Posted 9 years ago #

    James that post above mine will do nothing for you.
    Images used/ positioned with css will not be effected by padding.
    you can alter the position within the css in many ways
    check this link W3c back ground properties
    you can state the div, then a bg in that div >>
    #myimagediv{ background: #color url(mypicture.jpg) 12px 24px fixed;
    this would position the image 12pixels right from left border (x)
    and 24 pixels down from the top (y) as well the "fixed" property would make it non scrolling.
    the long handed way would be>>
    #div{background: #ffffff url(myimage.jpg);
    background-position: left/**center/top/bottom etc or......
    background-position: x-12px /**or em, pt, %, inches, mm etc**/
    background-repeat:no-repeat; /** if you don't want it to tile **/
    James on your page it looks like the easiest solution would be to add (left) margin to the division containing your image, in order to move the text away from the image. Or as well you could use right margin on the paragraph tag for the text.

  4. dkuehne
    Member
    Posted 9 years ago #

    James,
    You'll need to get a book on this subject or learn online if you really want to get a handle on CSS. Try anything from Zeldman or Eric Meyer. First off though, the site you want to emulate doesn't utilize CSS properly, so I wouldn't of necessity follow what they've done--maybe just the look--or their stylesheet--but not their markup (I really haven't looked at thier styles). Notice I said "utilize." If they really were using CSS properly they wouldn't have marked their page up the way they did. A margin is what you need, my man.

    1.) You read right--margin not padding. Padding goes between the content and a border--if you had one. The margin is on the outside of the border (again, if you have a border). Learn the "box model" and you'll be on your way. The site you gave is using the align="right" to put the photo to the right. Don't do it that way.

    For a photo that floats right with the text wrapping around it, do this in your markup (before a paragraph or heading, etc.):

    <div class="photoright"><img src="image.jpg" alt="whatever" title="whatever" /></div>

    In your stylesheet you will make this declaration:

    .photoright {
    float: right;
    margin: 0 0 10px 10px;
    border: 1px solid #666; /* if a border is desired */
    }

    Adjust the margins as you see fit so that the text flows around the photo as you see fit. Make the border any color you'd like. #666 is the shorthand for #666666.

    Sure, you can float just the img and declare all images as block elements (a good idea anyway) but with the photo in a div you have more "hooks" as it were for styling and you can also put a caption with the photo and the whole thing floats as a unit. If you wanted to use padding and gave the background a color, padding would allow the background to show through. Best way to learn is to experiment. Try an editor that allows you to see your changes in real time too. You can use Firefox and use the "Developer Tools" plugin that's on their site for real-time CSS editing if you wish. You can even edit other sites in real-time.

    There is no need for absolute positioning, etc.

    Note: that the photoright declaration is a class. You mentioned that you'd want all your photos to be right-aligned. This will "float" all your photos to the right. Being a "class" you can use this same <div> class as many times as you'd like on the page. That's the power of CSS. You don't want to do what the above gentleman wrote, and set up images into the background of divs every cotten-picken time you post a photo. This would mean an edit to the stylesheet just to post a photo--absurd!

    About the second line of text thing... I assume you want a sub-heading? Then an <h2> would be in order. Style the headings (h1-h6) any way you'd like and you're good to go.

    Hope this helps.

    --Dave K.

  5. shiner25
    Member
    Posted 9 years ago #

    where is alex site is there templates there?

  6. jbickers
    Member
    Posted 9 years ago #

    dkuehne, I've taken your advice - but to no avail. I've created the .photoright class in my CSS file, and added the DIV tag to the image - looking at the source of the page generated, I see the DIV tag is there, but it's not formatting the image. Any thoughts?

    Best,
    James

  7. dkuehne
    Member
    Posted 9 years ago #

    James, I just copied what I posted earlier (the div and style declaration) into a document to test it (because I wrote it from memory--I've used it many times). Well, guess what? It worked. So... you must be leaving something out or putting something in that shouldn't be there.

    If I could look at your markup and stylesheet, that would help.

    </davekuehne>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.