Grow your CSS skills. Land your dream job.

How to alternate images and align text

  • # January 8, 2010 at 5:22 pm

    Hello,

    I seem to be having some CSS troubles (while not entirely ignorant of CSS, I’m still a newb ;) )

    I have implemented text and graphics onto the following site (plz note this is a joomla site):

    http://www.thereishope.ca/get-to-know-u … rship-team

    with the following html and css:

    html:

    HTML:

    Code:
    Pastor-Seeon-Smith
    Reverend Seeon Smith (Senior Pastor)
    Pastor Seeon graduated from Vanguard Bible College in 1999 with a Bachelor of Theology degree and a zeal to see the Kingdom of God grown in the city of Edmonton. As he considered what ministry he wanted to pursue, he quickly realized that Edmonton needed a church that was specifically reaching out to non-traditional families, marginalized people, the poor and those that just didn’t fit into the typical church environment. Pastor Seeon founded New Hope Christian Assembly on June 1st, 1999. Pastor Seeon is supported in ministry by his wife, Deborah Smith and 4 children, Nathan, Desmond, Seeon Jr. and Akeema.

     

    fredwilson
    Fred Wilton (Church Elder)Fred has served the New Hope Assembly for more than 6 years as a church elder and board member. His wisdom and passion for the advancement of God’s work through New Hope has shaped and guided our congregation

     

    glenorawhittaker
    Glenora Whittaker (Deaconess)
    Glenora would have never imagined herself as a deacon and leader within any church, but she answered the call when asked. Glenora’s wisdom, kindness and loving spirit has served as inspiration to our entire congregation, and she makes the best roast beef in the world!!
    scottpriebe
    Pastor Scott Priebe (Music Pastor)
    Pastor Scott graduated Vanguard College in 2000 with a Bachelor of Music degree. Pastor Scott leads our congregation in praise and worship, while building the musical talents of our musicians. Scott has also worked to build up new worship leaders within the congregation. Scott’s humble leadership has served bring unity to the NHCA worship, leading the people to engage in heartflelt, passionate worship to our Great and Mighty God.
    Kristena-Blumhagen
    Kristena Blumhagen (Worship Leader)
    Kristena’s beautiful voice and musical talents are only overshadowed by the beauty of her heart for worship. Kristena works with Pastor Scott in sharing the worship leading at New Hope.
    cheryl-williams
    Cheryl Williams (Children’s Ministry Leader)
    Cheryl has been providing leadership to the NHCA Kids Programs for many years, helping to shape the spiritual development of our children. Cheryl’s background as a teacher and her passion for kids makes her the ideal leader for this vital ministry of New Hope.
    elva-sneed
    Elva Sneed (Fellowship Team Leader)When you think of church food and entaining, you have to think of Elva. To say that she has faithfully served is a gross understatement. Elva’s fun loving attitude and great organizational skills have managed to add several inches to the waists of many a New Hope member!

    CSS:

    Code:
    .fltlft

    {

    float: left;

    margin-right: 10px;

    margin-bottom: 10px;

    }

    .profile

    {

    clear: right;

    overflow: auto;

    }

    .fltrt

    {

    float:right;

    margin-left: 10px;

    margin-bottom: 10px;

    }

    As you can see on the page it is a little out of whack.

    What I am wanting is for the leaders bios to be next to the images and the bio images alternating from left to right.

    If you anyone could advise me on how to do this I would greatly appreciate it.

    Thanks,

    Matt

    # January 8, 2010 at 5:29 pm

    You will need to do something like this:

    <img floated left><p>Bio</p>

    <clearing div>

    <img floated right><p>Bio</p>

    <clearing div>

    etc etc

    The floating images, without clears are what are causing the jumble to occur.

    # January 8, 2010 at 6:20 pm

    Doc,

    Thanks for replying so promptly.

    Could you elaborate a bit more on how I can get the end result of what i am looking to do.

    For instance, how should I code it.

    I’m not sure what you mean by:

    <clearing div>

    Should I simple use inline styling for this instead of external styling and float the image and add the clear property?

    If so what would this mark up look like.

    I really appreciate the help.

    Thanks,

    Matt

    # January 8, 2010 at 6:59 pm

    Sorry, I should’ve been more thorough! Here’s what I would do:
    HTML

    Code:

    Person’s Name

    Their bio….


    Person’s Name

    Their bio….


    Person’s Name

    Their bio….

    CSS

    Code:
    .bio {
    clear:both;
    }

    .bio img.left {
    float:left;
    margin:0 10px 10px 0;
    }

    .bio img.right {
    float:right;
    margin:0 0 10px 10px;
    }

    By putting the "clear" on each div, you shouldn’t have the overlapping trouble (though I did put this together in a few seconds, so I may have overlooked something). Obviously you need to add your own styling to everything, etc, but that should help ya get on your way.

    # January 8, 2010 at 9:16 pm

    <BR> IS OK,I THINK . HAHAA, IMG AND TEXT relatively OR EDIT YOUR CODE <IMG> ..

    # January 9, 2010 at 12:21 am

    A <br> in this case won’t necessarily do it.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".