• tbullet

    (@tbullet)


    Site: http://terratechenvironmental.com/

    In the center of the three columns, there are two photos that I have the aligning on top of each other as I want but I had to put them in the <h> tags which is creating other problems. When I take them out the hibiscus image moves to the right.

    Also, I have read don’t use inline styling however it is used already. I want to have different padding and border for images. For validation of site, when I look at the errors on the site, there are lots but most I don’t think I created nor know how to fix.

    Thank you!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter tbullet

    (@tbullet)

    Forgot to say using theme: “twentyeleven” and I am new to wordpress. I have tried many other things: I have tried inline styling <p> tags to get a large font, but lose much of my text and there are breaks put between each style. And using <h> tags when looking in firefox, there are additional <p> tags and breaks added that I do not see in my html.

    esmi

    (@esmi)

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Thread Starter tbullet

    (@tbullet)

    Sorry, i did not mention that either. Yes, I am using a child theme. Thank you.

    esmi

    (@esmi)

    I had to put them in the <h> tags

    Why?

    Thread Starter tbullet

    (@tbullet)

    It is the only way the pictures will align on top of each other while allowing me to style the font family, size, etc.

    WPyogi

    (@wpyogi)

    There are other ways of doing that with the CSS code. Putting images in h tags is not good coding. Putting them inside div tags is a much better way to go… You also have paragraphs inside the h tags — which is not good either. The only thing that should be inside h tags is the text that is a header. [SEO uses headings, so doing weird things with h tags may also affect your SEO].

    Try this for that section:
    `
    <div id and/or class, depending on the CSS you need>
    image == use CSS to float left
    paragraph with text — it will wrap around the photo
    </div>

    Then repeat the above for the second photo/image/text

    Then you can use CSS to target those images and do the border and padding you want.

    And no, you should not need to use inline CSS — if your html is coded well, it will have plenty of places to “attach” CSS using tags, classes and/or ids.

    This is one of many great CSS references: http://www.w3schools.com/css/

    And yes, you should fix the first 3 mark-up errors here — they are from content coding errors:

    http://validator.w3.org/check?uri=http%3A%2F%2Fterratechenvironmental.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Thread Starter tbullet

    (@tbullet)

    Hello,

    I again have tried what, I think you suggested, what you have here kind of works, but I was not able to style the font differently in different sections. I also tried putting both divs in a container and that didn’t work either. I thought it was due to my css being incorrect but I am not sure.

    I have read through some stuff on w3c, but I am still not understanding. I really appreciate your assistance. Thank you!

    WPyogi

    (@wpyogi)

    You have the divs (elementone and elementtwo) coded incorrectly:

    <div id"elementone"="">
    <div id"elementtwo"="">

    The correct is:
    <div id="elementone">

    Then the CSS code would be:
    `
    #elementone {
    put styles here
    }

    Thread Starter tbullet

    (@tbullet)

    WPyogi, Thank you for your help! I have the content where I want it!

    I have looked at the markup errors. They are not on my dashboard pages – – I don’t know how to access them to correct.

    Within elementone, I want to use 2 different fonts, though without messing up the look, I am not able to achieve this. The first sentence, I want large and bold, like a header. And the second sentence different from the regular <p> font.

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

The topic ‘images aligning’ is closed to new replies.