CSS for a page: not working

  • afmarcom

    (@afmarcom)


    16 years, 7 months ago

    I am trying to style my contact page. I thought I could do this right in Word Press; if I can’t, I’ll have a whole different subject to ask about!

    I designed my blog using the WordPress Theme Generator. My blog is at http://afmarcom.com/blog and the page I’m specifically asking about is http://afmarcom.com/blog/?page_id=3

    I would like my photo and its caption to be floated left. The text should wrap around it. The caption should be centered and there are a few more style elements to the div.

    Here is my code and a line of text that should be to the right of the photo:

    <style type=”text/css”>

    .image img {
    border: 1px solid #a00000;
    }

    div.image {
    float: left;
    width: 218px;
    margin: 4px 12px 12px 4px;
    }

    .image p {
    font: arial;
    font-variant: small-caps;
    letter-spacing: 2px;
    text-align: center;
    }

    </style>

    <div class=”image”>
    <img src=”http://afmarcom.com/blog/wp-content/uploads/2009/09/2009-04-12-AFMarCom-headshot-200px1.jpg&#8221; alt=”Angelique” />
    <p>Angelique</p>
    </div>

    Trying this

    ———————

    So why isn’t this working?

Viewing 7 replies - 1 through 7 (of 7 total)
  • s_ha_dum

    (@apljdi)

    16 years, 7 months ago

    You’ve got paragraph tags in your css. View-Source:

    <style type="text/css">
<p>.image img {
border: 1px solid #a00000;
}</p>
<p>div.image {
float: left;
width: 218px;
margin: 4px 12px 12px 4px;
}</p>
<p>.image p {
font: arial;
font-variant: small-caps;
letter-spacing: 2px;
text-align: center;
}</p>
</style>
    Thread Starter afmarcom

    (@afmarcom)

    16 years, 7 months ago

    Where are those html tags coming from? I guess the Word Press editor is putting them in. I see them if I view source, but in the Word Press editor they are not visible. I certainly didn’t put them there.

    Okay, so how DO people customize their Pages?

    Peter Boosten

    (@pboosten)

    16 years, 7 months ago

    You could of course change to this (just for the text wrapping):

    .image img {
  border: 1px solid #a00000;
  float: left;
}

    Peter

    Thread Starter afmarcom

    (@afmarcom)

    16 years, 7 months ago

    Pboosten — That’s what I had first, along with a right margin. Then I decided to get all fancy and add a caption.

    Thread Starter afmarcom

    (@afmarcom)

    16 years, 7 months ago

    Okay, did a fix: I entered the CSS into the WordPress editor in a different way (no spaces.) It’s now behaving the way it should.

    I’m not sure why I see a link that says “Edit Entry.” Does anyone else see it, or just me because I’m logged into WordPress?

    s_ha_dum

    (@apljdi)

    16 years, 7 months ago

    Okay, so how DO people customize their Pages?

    Ideally, you’d put the CSS in your theme’s stylesheet.

    That ‘Edit Entry’ should only appear for people who are logged in and who have permissions enough to edit the post.

    Thread Starter afmarcom

    (@afmarcom)

    16 years, 7 months ago

    Apljdi — That definitely makes the most sense. I guess it didn’t occur to me because when you download a theme to hack or use a theme creator, it’s all about the blog and none of the instructions address additional pages. I’m just bumbling around trying to figure out how to do this!

    So let’s make sure I have this right: I would put all the CSS code for the .image class in my theme stylesheet, and then in the html input box of my individual pages I would put <div class=”image”> and all specific image info for that page (src, caption.)

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘CSS for a page: not working’ is closed to new replies.