• Site: https://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.

    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.

    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.

    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: https://www.w3schools.com/css/

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

    https://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!

    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.