Image alignment in Page Template

  • kalico

    (@kalico)


    17 years ago

    I am looking for some assistance with getting an image aligned within the text of my Page template. This is NOT a post — I know I can align an image in a post with the editor, but I’m trying to make this image appear in the same place on every Page (not post) by using the template. I don’t want to have to insert the HTML for the image in the content of the page every time I write a new Page.

    The CSS I’m using is

    float:left
    margin-top:200px

    This is doing a nice job of placing the image where I want it, but the whole point is to wrap text around it — and at present, the text won’t wrap above the image, only below it. There is a big blank space for the 200px above the image, where I want text to wrap around.

    You can see the page here:
    https://www.emmanuelbiblefellowship.com/men/

    Thanks in advance for any help! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • Cathy Mitchell

    (@multitalentedmommy)

    CSS Tutorial This is the link that I use to find solutions to css problems. I think this could help you fairly quickly.

    The margin set to 200px will automatically cause all subsequent layers to go around it. You will need to use proper css layers, instead of margins to get your image where you’d like it to be, and then your text will wrap around (providing that it also has a proper css division assigned to it).

    Maybe someone more skilled in css can help you more! ??

    Thread Starter kalico

    (@kalico)

    Thanks Multi. I appreciate your input. Unfortunately, I have done lots and lots of searching on CSS, and so far, nada.

    I can float the image and have the text wrap; however since I have to place the image before or after the Page content (due to the content being generated by PHP code), I also want to specify the vertical position of the image somehow — but float and position in CSS are mutually exclusive.

    Float causes text to wrap around the image nicely, but can only place my image at the top of the paragraph. Position layers the image on top of the text, rather than wrapping text around it. So far, I haven’t found a single tutorial on how to drop my image down into a paragraph and have it wrap — unless I can control the placement of the images within the text, and that does not work on generated pages like WP pages.

    Well….maybe someone with lots of CSS experience will have some input on this one. It seems like there must be a way — I can’t be the first person to want to do this! ??

    Thanks…….

    Cathy Mitchell

    (@multitalentedmommy)

    Very interesting question. I have done this to get an ad to appear within generated content in each post in the “single” template. A new division with a class “ad” did the trick for me. I needed it displayed in line, float right, and gave it a width, and a right-margin and all was fine.

    I think you have a couple of other options with the float tag: display inline, top, bottom or middle of next element, top bottom or middle of text. These of course are relative.

    To use static or absolute layering, might require a z-index to place the items on top of each other in the correct order. I’m not sure about this – here is the explanation: (and I swear, I get no kick-backs for this link! lol)
    https://www.yourhtmlsource.com/stylesheets/csslayout.html

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image alignment in Page Template’ is closed to new replies.