Support » Themes and Templates » Image Line with Adjacent Text

Viewing 15 replies - 1 through 15 (of 15 total)
  • WPyogi

    (@wpyogi)


    Forum Moderator


    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

    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?

    WPyogi

    (@wpyogi)


    Forum Moderator


    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.

    paulwpxp

    (@paulwp)


    Font hero


    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”.

    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?

    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?

    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=""/>

    Moderator Andrew Nevins

    (@anevins)


    Forum moderator


    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.

    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?

    Moderator Andrew Nevins

    (@anevins)


    Forum moderator


    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.

    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?

    Moderator Andrew Nevins

    (@anevins)


    Forum moderator


    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.

    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?

    Moderator Andrew Nevins

    (@anevins)


    Forum moderator


    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

    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?

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Image Line with Adjacent Text’ is closed to new replies.