Alighn text with image

admint · 2016-10-13 08:22:09

I'm having a hard time getting how to properly align an image with text on my "About" page - http://www.exposedvisions.com/about/

I want to float the image to the left and have the text flow down like that shown here: http://sweetlightgallery.com/contact/

Problem is I'm not sure how to code it. I'm also trying to put the code on the about page.

Please help; Thanks.

And yes, I know I need to resize the image. It's that way because I can't get what I want (yet)

Thanks.

rod barbee · 2016-10-13 09:19:18

using images with text:
http://ttg-tips-and-tricks.barbeephoto. … lock-text/

Daniel Leu · 2016-10-13 09:22:18

For the image, you can use:

width: 70%;
float: left;
margin-right: 20px;

and then the next paragraph should have a margin-top: 0; to properly align the image with the start of the text.

But this might not look nice on mobile! I would assign an ID to the image and the style this image using custom.css. With proper breakpoints, you can have different styling for mobile and desktop.

Rod has a few pointers on CSS. Let's hope he sees this and chips in.

rod barbee · 2016-10-13 09:34:45

there are align classes you can use on the img elements: alignleft, alignright, aligncenter.
These have built in margin.

admint · 2016-10-13 13:33:08

rod barbee wrote:

using images with text:
http://ttg-tips-and-tricks.barbeephoto. … lock-text/

Sorry but this isn't helping at all. This is what I have now... http://www.exposedvisions.com/about/

I'm obviously missing something which is why I'm asking for more advanced help... call it hold you by the hand help!

Edit It's working now, had a few elements missing. Fixed that and now all is good. Now how do I get the text to align with the top of the image?

Edit 2: Solved - Once I figured out the basics, everything else fell in place. I also checked it on my Android phone (with Google Chrome) and the page looks good with everything lined up.

Thanks Rod.

Last edited by admint (2016-10-13 14:42:41)

admint · 2016-10-15 04:01:21

Hi, I've one other question?

Is there a way I could wrap text around a slideshow? On my home page here http://www.exposedvisions.com/ I'd like to have the slideshow moved left and text aligned like I do on my about page.

I'm currently using Daniel Leu's slideshow fix as I find it easier to use than Theatre.

Thanks.

rod barbee · 2016-10-15 05:28:33

Is there a way I could wrap text around a slideshow?

I don't think so. But you should ask Daniel.

admint · 2016-10-15 05:47:35

Yeah, I was doing some Googling and couldn't find much info. Hopefully Daniel weighs in. BTW could it be done with Theatre???

rod barbee · 2016-10-15 06:44:57

you know, looking at Daniel's code it might be pretty easy to, for example, place the slide show on the left and text on the right. Just use the Responsive Grid framework and put Daniel's code in one column and your text in the other.

Here's more on using the Responsive Grid:
http://ttg-tips-and-tricks.barbeephoto. … backlight/

This wouldn't wrap the text around the slideshow, though you could simulate it by having a two column grid with a one column grid beneath the two.

For floating text, you could try simply adding text (using proper html markup) after the last image in the slide show. Make sure that the text is inside the div:

<div id="slideshow" class="fadein clearfix alignleft">
....the slide show images...
<h2>Your heading</h2>
<p>your text</p>
</div>

I have no idea how this might work with the rest of the slide show styling, script, etc.

rod barbee · 2016-10-15 06:58:34

I don't know about using Theater's inline slide show. Since it's in a div by itself and there's no provision for adding text to that div, I don't see how it could be done without a major hack with phplugins. Even then.....I don't know...

admint · 2016-10-15 07:33:47

Yeah, so it seems it's just like Daniel's have in that it uses div. Oh well, just a thought.

Thanks.

rod barbee · 2016-10-15 08:30:25

But with Daniel's code you're entering it manually into the page. You therefore have a lot of control int how it's implemented.
I think putting it in a two-column grid might be the best way.

Daniel Leu · 2016-10-15 08:48:47

To my limited css knowledge, the issue is that float and position attributes don't work together. I don't know how you can achieve text wrapping around my slideshow code.

rod barbee · 2016-10-15 09:59:48

Daniel Leu wrote:

To my limited css knowledge, the issue is that float and position attributes don't work together. I don't know how you can achieve text wrapping around my slideshow code.

me either. That's why I think putting it all in a responsive grid makes more sense.

admint · 2016-10-15 10:55:24

Got it guys. It's not that important, just would have been to be able to do it. Anyway I'll leave it alone.

Thanks.

admint · 2016-10-15 10:58:09

Oh yeah thought about a two column design but I like the design I have now, but of course options are always nice

Thanks.

Community @ The Turning Gate

#1 2016-10-13 08:22:09

Alighn text with image

#2 2016-10-13 09:19:18

Re: Alighn text with image

#3 2016-10-13 09:22:18

Re: Alighn text with image

#4 2016-10-13 09:34:45

Re: Alighn text with image

#5 2016-10-13 13:33:08

Re: Alighn text with image

#6 2016-10-15 04:01:21

Re: Alighn text with image

#7 2016-10-15 05:28:33

Re: Alighn text with image

#8 2016-10-15 05:47:35

Re: Alighn text with image

#9 2016-10-15 06:44:57

Re: Alighn text with image

#10 2016-10-15 06:58:34

Re: Alighn text with image

#11 2016-10-15 07:33:47

Re: Alighn text with image

#12 2016-10-15 08:30:25

Re: Alighn text with image

#13 2016-10-15 08:48:47

Re: Alighn text with image

#14 2016-10-15 09:59:48

Re: Alighn text with image

#15 2016-10-15 10:55:24

Re: Alighn text with image

#16 2016-10-15 10:58:09

Re: Alighn text with image

Board footer