WordPress.org

Ready to get started?Download WordPress

Forums

Image Line with Adjacent Text (16 posts)

  1. benl11235
    Member
    Posted 1 year ago #

    I'm trying to get a number of images to line up adjacent to testimonials. Essentially I', looking for the easiest way to do what they did here:
    http://themacadvantage.com/ca/Accolades.html

    Thank you!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Generally, layout and alignment is controlled by CSS -- and to some extent by the HTML structure of the page. CSS "float" puts elements side-by-side - so that would likely be the way to do what you are asking about.

    http://www.w3schools.com/cssref/pr_class_float.asp

  3. benl11235
    Member
    Posted 1 year ago #

    In wordpress it seems that float left and float right are assigned to wordpress assigned left. Is there an easy method to force all text to a certain indentation away from the image? It might be beneficial for me to assign those images an absolute position. Is that possible?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm not really sure what you mean, but pretty much anything like this can be done with CSS - however, absolute positioning isn't usually the best way to do things - as it does not work well on responsive sites, and often has other complications. If you need more specific help, we'd need to see an actual page you are working on.

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    absolute positioning isn't usually the best way to do things - as it does not work well on responsive sites, and often has other complications

    Strongly agree. Absolute positioning is good for fixed width design. For responsive it should be used with care.

    The page linked to in the OP is amazing in that all images are absolute positioned.

    You need 3 divs for each section.

    [ div or section for each ]
    
    [img] [ block of text ]
    
    [ closing div or section ]

    assign width to [img] and [ block of text ]

    Float one left, float one right.

    The best solution is to use an archive page for this, set one archive like tag or category of testimonial, and just remove the "Read More".

  6. benl11235
    Member
    Posted 1 year ago #

    That sounds like a good idea. Do you know of a page that wold serve as a good example? What would you recommend for learning more about HTML and CSS?

  7. benl11235
    Member
    Posted 1 year ago #

    So I've done some reading. Float left, right, and center work very well. If I float all of the images left, it'll keep them aligned. I'm still wondering about the tiny subtle image adjustments. Do I use margins for that?

  8. benl11235
    Member
    Posted 1 year ago #

    I think I'm doing it wrong, because this doesn't seem to do anything:
    <img class="alignleft; margin-left: 300px;" src="http://10.0.3.18/wordpress/wp-content/uploads/2013/06/go_local.png" alt=""/>

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Install this Custom CSS Manager plugin and use its section of the dashboard to hold your CSS modifications.

    Don't use inline styling, although that wasn't entirely correct.

  10. benl11235
    Member
    Posted 1 year ago #

    What was wrong with the styling? Is it better to use that then edit style.css? I only need this formatting on three images on the front page, is it still recommended to do the css elsewhere?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    What was wrong with the styling?

    You put it inside the "class" attribute instead of the "style" attribute.

    Is it better to use that then edit style.css?

    Yep.

    is it still recommended to do the css elsewhere?

    Yep.

  12. benl11235
    Member
    Posted 1 year ago #

    I've come up with this, and it seems to be working. If it's not too much trouble, can you look it over?

    <div>
    <img class= "size-full alignleft" src="http://10.0.3.18/wordpress/wp-content/uploads/2013/06/Pixar.jpg" alt="Pixar logo">
    
    <p style="text-align: right;float: right;"><p class= width=300px height= 300px >Bravo! We are so incredibly pleased with the recovery of our (impossible to replace) data! Recovered (from a non-booting, clicking drive) were both personal files, art and photographs as well as decades worth of professional artwork done for the movie studios I've worked for (Pixar, DreamWorks, Disney, IMD). Service   is always top notch at a good rate. I highly recommend!  <strong>~ Armand Baltazar, Senior Designer Pixar Animation Studios</strong></p>
    </div>

    Also, will the style and class for p carry over into other p sections?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    will the style and class for p carry over into other p sections?

    Nope, inline styles only work for the elements they are in. That's the nature of inline styles.

    Also note that some people visiting your site use their own stylesheets for changing the appearance of certain elements in their own preferred styling. For example, people who have poor eyesight may have a stylesheet that resets all colours to black and white and then resizes fonts larger.
    So, a disadvantage is that inline styles can override these people's stylesheets and therefore override their preferred styling.

  14. benl11235
    Member
    Posted 1 year ago #

    Okay, so if I do it without inline styling, I think it looks something like this:

    In custom CSS manager:
    `
    .testimonialtext
    {
    width: 300px;
    textalign: right;
    float: right;
    }

    On the page:

    <div>

    <img class="size-full alignleft" alt="Pixar logo" src="http://10.0.3.18/wordpress/wp-content/uploads/2013/06/Pixar.jpg" />

    <p class= "testimonialtext" >Bravo! We are so incredibly pleased with the recovery of our (impossible to replace) data! Recovered (from a non-booting, clicking drive) were both personal files, art and photographs as well as decades worth of professional artwork done for the movie studios I've worked for (Pixar, DreamWorks, Disney, IMD). Service is always top notch at a good rate. I highly recommend! ~ Armand Baltazar, Senior Designer Pixar Animation Studios</p>

    </div>'

    When I do the next one, sometimes the image ends up not directly underneath the previous one, and somewhat beneath the text. Do I fix that by enforcing a particular height for the text in the custom css manager or through some other method?

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    When I do the next one, sometimes the image ends up not directly underneath the previous one

    That sounds like it can be resolved by adding a "clear: right;" style to the element that's not directly underneath.

    See http://www.w3schools.com/cssref/pr_class_clear.asp

  16. benl11235
    Member
    Posted 1 year ago #

    So now I have this code. testimoniaimage has a clear:right property

    <div>
    
    <img class="size-full alignleft testimonialimage" alt="Pixar logo" src="http://10.0.3.18/wordpress/wp-content/uploads/2013/06/Pixar.jpg" />
    
    <p class= "testimonialtext" >Bravo! We are so incredibly pleased with the recovery of our (impossible to replace) data! Recovered (from a non-booting, clicking drive) were both personal files, art and photographs as well as decades worth of professional artwork done for the movie studios I've worked for (Pixar, DreamWorks, Disney, IMD). Service   is always top notch at a good rate. I highly recommend!  <strong>~ Armand Baltazar, Senior Designer Pixar Animation Studios</strong></p>
    
    </div>
    
    <div>
    
    <img class="size-full alignleft testimonialimage" alt="Industrial Magic" src="http://10.0.3.18/wordpress/wp-content/uploads/2013/06/indlightmagic.jpg" />
    
    <p class= "testimonialtext"> MacAdvantage is an anomaly in this age of corporate greed and outsourcing. A local company whose prime directive seems to be great service in a friendly and timely
    fashion at extremely reasonable rates, I would not hesitate to recommend them. <strong>~ Jack Haye, Industrial Light & Magic; Burning Man</strong>
    
    </div>

    The image and the text attempts to insert itself next to the image, as shown here:
    I'm unsure how to get it below the first image, but I have a feeling it has something to do with padding? I also increased the width of the text box, and I seem to have alleviated the problem. I'm not sure it's the best method though.

    Some of the testimonials don't have an image. Will it stay out of there even if there is no image?

Topic Closed

This topic has been closed to new replies.

About this Topic