How to align an image in CSS

#1 / Sep 20, 2008 10:02pm

markwts

38 posts

Hi - have done a bit of css but I just can’t seem to get this right:

Trying to get the text to “wrap” around the image on this page: http://www.thecouragecorner.com.au/testimonials/ - the image is in the right spot (i.e. “floated to the right”) but I wnat the text underneath to justify to the top, left of the image (the same as this page: http://www.thecouragecorner.com.au/about/

The difference between teh latter example is that I’ve inserted the image via Ibrowser. The former is done thru custom fields and EE tags - (for this client I want to rely less on plugins and mroe so on templating code thru EE for better management) - here’s the EE template code I’m using:

{embed="embeds/html_header" my_page_title="Testimonials"}
<body>
    <div id="wrap">
        <div id="header">
            {embed="embeds/logo_title"}
            {embed="embeds/main_nav"}
        </div><!-- end header -->

    <div id="content">
        {embed="embeds/ad"}
            <div id="text"> 
                <h1>What Other's Say About The Courage Corner…</h1>
                   {exp:weblog:entries weblog="testimonials" disable="categories|member_data|pagination|trackbacks" sort="desc"}
                        {if t_image}
                            <div class="float-right-image">
                                {t_image}
                                <i>{t_desc}</i>
                            </div>
                        {/if}                    
                    <blockquote>
                        {t_body}
                        
                        <i><strong>{t_person}</strong></i>
                    </blockquote>
                    <div class="clear"></div>
                {/exp:weblog:entries}
            </div><!-- end text div -->

        <div id="sidebar">
            {embed="embeds/sidebar_content"}
        </div><!-- end sidebar -->
</div>
<!-- end content -->
</div>
<!-- end wrap -->
    <div id="footer">
        {embed="embeds/footer"}
    </div>
    {embed="embeds/google_analytics"}
</body>
</html>

Ok any help would be much appreciated - have tried a ot of things and my css knowlegde isn;ty very good :-(

#2 / Sep 21, 2008 1:01am

jejuna

105 posts

From what I can tell, it’s your #text h2 in the stylesheet that’s your main culprit, among other things.

You’ve got it set to “clear:right”, which means that the float-image-right has nowhere to go.

What I’d suggest is a couple of things.

1. Set a class for each entry like this:

.entry {
    margin: 1em;
    border-bottom: solid 1px #ccc;
    }

2. Set the div for the floated image to have a rule for the caption, like this:

.float-right-image {
    float: right;
    width: 185px;
    background: #E6E6E6;
    margin: 0 0 0 1.5em; 
}

(note, I've given the image a left margin of 1.5 em to push it away from the text)

.float-right-image p {
    font-size: 80%;
    font-style:italic;
    margin: 0.5em;
    text-align:center;
    }

Get rid of that clear: right in the h2

If you want to indent the name of the person at the end, don’t use blockquote. Just make a class for it, maybe like this:

.indentname {
    margin-left: 2em;
    font-weight: bold;
    font-style:italic;
    }

Then, your code can be a bit cleaner, like this:

<div class="entry">
               
<div class="float-right-image">http://www.thecouragecorner.com.au/images/uploads/testimonials/michelle-goodall-comp-photo.jpg
Michelle Goodall winning the Australian Natural Body Building Championships
</div>

<h2>From "Bad Back" to ANB Overall Australian Natural Womens' Body Building Champion!</h2>

<p>What can I say! Ben Minos is brilliant. I was 50kg with a bad back when Ben convinced me to go back into a Gym. He built up my inner core and strength to a point where all back pain was gone and I had started to put on muscle, and loved it.<br />
With Ben's encouragement and specific training, I decided to go into Body Building. 2.5yrs later, I am now ANB Overall Australian Natural Womens' Body Building Champion. This would not have been achieved without Ben's vast knowledge and support.<br />
Ben Minos is not only exceptional trainer with a vast knowledge of the human body and it's capabilities, he is also one hell of a nice person, which is very important. He not only makes you feel comfortable, but gives encouragement and support.<br />
                        <br />
—Michelle Goodall, Brisbane<br />
</div>

Should help!

#3 / Sep 21, 2008 3:38am

markwts
38 posts

Hi Debra - wow the devil sure is in the detail with css isn;t it? Thank you VERY MUCH for your help - I havn’t had time to code all that in yet but simply gettng rid of the clear:right out of the H2 made things look a lot better - I’ll implement the rest later as your suggestions are much tidier code-wise…

Once again thank you! 😉
#4 / Sep 21, 2008 6:12am

markwts
38 posts

Ok everything seems to be working as intended aside from the styling (i.e. font-size and italics) not being applied to the image caption - but it looks a lot tidier code-wise now 😊

EDIT: fixed italics - didn;t have the caption enclosed in a tag

Thread

markwts

jejuna

markwts

markwts

Username

Password

Thread