Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image wrap around text

Posted on 2011-09-06
16
Medium Priority
?
332 Views
Last Modified: 2012-06-27
Hello EE,

I have the following structure for my HTML markup below. I need to have an image for certain <li> elements. I would like to add a padding-right to those images and push the content to the right if possible. This does not seem to work for me though. Thanks in advance!!

HTML:

            <div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>
                    <ul>
                        <li><b>Managing student information efficiently.</b></li>
                        <img src="Images/image-test.png" /><li>Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li><b>Powerful reporting functionality.</b></li>
                        <img src="Images/image-test.png" /><li>Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.</li>
                        <li><b>Affordable solution.</b></li>
                        <img src="Images/image-test.png" /><li>While Backpack can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>
                        <li><b>Our social network brings familes together.</b></li>
                        <li><img src="Images/image-test.png" class="image" />Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><b>Built with security and safety in mind.</b></li>
                        <li><img src="Images/image-test.png" class="image" />Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><b>Better transparency and accountability.</b></li>
                        <li><img src="Images/image-test.png" class="image" />Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>
                    </ul>
                </div>
            </div>


#content #services
{
    width: 960px;
    padding-top: 20px;
    padding-bottom: 20px;
}


#content #services #sis
{
    float: left;
    width: 440px;
    padding-left: 20px;
    padding-right: 20px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
    width: 400px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    padding-right: 15px;
}

#content #services #community
{
    float: right;
    width: 440px;
    padding-left: 20px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
    width: 400px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    padding-bottom: 10px;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #53a4bb;

Open in new window

0
Comment
Question by:asp_net2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
  • 2
16 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36488857
Try using margin-right instead.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36488886
Give each of the <img> tags an align="left".  You may also have to text-align:left your #content #services #community ul li for older browsers.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36488895
Hi xmediaman,

Ok, I noticed when I tried to add an image inside an <li> element that I get a notice that it's not allowed to add this element inside of an <li>. I attached a screenshot of what I'm trying to accomplish.

 image
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Author Comment

by:asp_net2
ID: 36488900
Hi LZ1,

Sorry, posted this before your reply. Please see what I'm trying to accomplish with the image above.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36489014
Something like this then?

You should structure your HTML a little differently so you have better control over each element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

#content #services
{
    width: 960px;
    padding-top: 20px;
    padding-bottom: 20px;
}


#content #services #sis
{
    float: left;
    width: 440px;
    padding-left: 20px;
    padding-right: 20px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
    width: 400px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    padding-right: 15px;
}

#content #services #community
{
    float: right;
    width: 440px;
    padding-left: 20px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
    width: 400px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    padding-bottom: 10px;
    clear:both;
    float:left;
}


#content #services #sis ul li b{clear:right;float:left;}
#content #services #sis ul li img{ float:left;display:inline; text-align:left;margin-right:10px;height:88px;line-height:15px;}
#content #services #sis ul li {float:left;}
#content #services #sis ul li .description{float:left;clear:right;width:260px;}


#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #53a4bb;
}
</style>


</head>

<body>
<div id="content">
<div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>
                    <ul>
                        <li><b>Managing student information efficiently.</b></li>
                        <li>Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li>
				    		<img src="images/ee.png" class="image" align="left" />
						<b>Powerful reporting functionality.</b>
						<div class="description"> 
							Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.
						</div>
					</li>
                        <li></li>
                        <li><b>Affordable solution.</b></li>
                        <li>While Backpack can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>
                        <li><b>Our social network brings familes together.</b></li>
                        <li>Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><b>Built with security and safety in mind.</b></li>
                        <li>Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><b>Better transparency and accountability.</b></li>
                        <li>Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>
                    </ul>
                </div>
            </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36489190
I would leave your html as is and change your css just a little. Change your css selector for the image to the #community div as such:

#content #services #community ul li .image
{
	margin-right: 15px;
	float: left;
}

Open in new window


and add a "clear: both;" to your li selector

#content #services #community ul li
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	padding-bottom: 10px;
	clear: both;
}

Open in new window

0
 
LVL 4

Author Comment

by:asp_net2
ID: 36489715
LZ1,

How can I center the image so that the image is centered by the <b> and <div id=description>?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36490650
@ xmediaman,

Your method works the best when using IE6 and IE7.However a few strange things are happening when I test using IE8 and FF3.4.

I'm attaching a screenshot so you can see what happens when a user uses IE8 and FF3.4. IE6 and IE7 are both fine.
ee.png
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36491139
When you say centered do you mean vertically?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36493358
@LZ1,

Yes, vertical align. Please see my updated HTML structure. I was not able to use your solution because IE6, IE7, and FF3.4 did not look nice with those browsers. Perhaps though you can help me with this though. For example I need to vertically align center the image below with the content in each <li> tag.

<li><img src="Images/sis-1.png" class="image" alt="Managing student information efficiently." /><b>Managing student information efficiently.</b></li>
<li class="desc">Backpack manages all student and school information in one central place, so administration is easy.</li>

Also, having trouble centering images after each <ul> for <div id-sis> and <div id-community>. I tried text-align = center but that did not work :(


<div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>
                    <ul>
                        <li><img src="Images/sis-1.png" class="image" alt="Managing student information efficiently." /><b>Managing student information efficiently.</b></li>
                        <li class="desc">Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li><img src="Images/sis-2.png" class="image" alt="Powerful reporting functionality." /><b>Powerful reporting functionality.</b></li>
                        <li class="desc">Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.</li>
                        <li><img src="Images/sis-3.png" class="image" alt="Affordable solution." /><b>Affordable solution.</b></li>
                        <li class="desc">While Backpack can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                    <img src="Images/btn_more-info.png" alt="Backpack SIS" class="btnSISMoreInfo" />
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>
                        <li><img src="Images/community-1.png" class="image" alt="Our social network brings familes together." /><b>Our social network brings familes together.</b></li>
                        <li class="desc">Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><img src="Images/community-2.png" class="image" alt="Built with security and safety in mind." /><b>Built with security and safety in mind.</b></li>
                        <li class="desc">Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><img src="Images/community-3.png" class="image" alt="Better transparency and accountability." /><b>Better transparency and accountability.</b></li>
                        <li class="desc">Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>
                    </ul>
                    <img src="Images/btn_more-info.png" alt="Backpack Community" class="btnCommunityMoreInfo" />
                </div>
            </div>

Open in new window

#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 410px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #sis .btnSISMoreInfo
{
    text-align: center;
}

#content #services #community
{
    float: right;
    width: 410px;
    padding-right: 30px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #community ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #community .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #community .btnCommunityMoreInfo
{
    text-align: center;
}

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 36496010
Are you trying to get it to look like the image you posted above in your <a href="http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27292996.html?cid=1572#a36488895" target="_self"> a36488895</a>???
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36496454
Correct, I need the image itself to be vertically aligned with the content that it's related to.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36497886
And you are expecting to have varying lengths of text right?
What I would personally do is again go back and restructure the HTML to be more semantic, because if you don't, you may have more problems than you bargained for.  For example, each section, like you posted above in the image should be one <li> IMHO.

This is what I mean:

Looks good cross-browser too. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 430px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
    clear:both;
    margin:5px;
    padding:5px;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #sis .btnSISMoreInfo
{
    text-align: center;
}

</style>
</head>

<body>
	<div id="content">
		<div id="services">
			<div id="sis">
				<h1>Backpack | <b>SIS</b></h1>
				<ul>
					<li>
						<img src="images/ee.png" class="image" alt="Managing student information efficiently." />
						<b>Managing student information efficiently.</b>
						<div class="desc">
							Backpack manages all student and school information in one central place, so administration is easy.
						</div>
					</li>
					<li>
						<img src="images/ee.png" class="image" alt="Powerful reporting functionality." />
						<b>Powerful reporting functionality.</b>
						<div class="desc">
							Performance charts for grades, attendance, class, and school performance can easily be generated, 
							and compared to other classes and schools. 
						</div>
					</li>
					<li>
						<img src="images/ee.png" class="image" alt="Affordable solution." />
						<b>Affordable solution.</b>
						<div class="desc">
							While Backpack can be installed on site, it is also vailable as a hosted service, reducing 
							the cost of up front investments. In either case, there are no upfront investments.
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
 
LVL 4

Author Comment

by:asp_net2
ID: 36531432
Hi LZ1,

If I do that will the image then be vertically aligned with the content in the <li>?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36531469
With the sample above, unfortunately no. If you have just a limited amount of content in the description, then yes it would be fine. However if you start adding paragraphs of content, you'll run into alignment issues.  

Let me see if I can get you another example
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 36531810
Ok, in order to do this in a proper no-hack way I made the image a background for the <li>. I know what your thinking though: "LZ1 I have different background images for different sections. This isn't a good solution."

Allow me to shed some light on that: Getting these images vertically aligned with no defined height on anything is going to be next to impossible(that I'm aware of) using pure CSS.  However, what we can do instead is assign different classes to the different <li>'s and give them each their own background image.

Here's the final code, tested cross-browser and validated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 430px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
    clear:both;
    margin:5px;
    padding:5px 5px 5px 88px;
    float:left;
    position:relative;
	background: url(images/ee.png) no-repeat left center;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
    float:left;
}

#content #services #sis ul li .image
{
    margin-right: 10px;
	height:88px;
	width:88px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
    float:left;
    width:250px;
}

#content #services #sis .btnSISMoreInfo
{
    text-align: center;
}

</style>
</head>

<body>
        <div id="content">
                <div id="services">
                        <div id="sis">
                                <h1>Backpack | <b>SIS</b></h1>
                                <ul>
                                        <li>
                                                <div class="desc">
                                                        <b>Managing student information efficiently.</b>
											 Backpack manages all student and school information in one central place, so administration is easy.
                                                </div>
                                        </li>
                                        <li>
                                                <div class="desc">
										   <b>Powerful reporting functionality.</b>
                                                        Performance charts for grades, attendance, class, and school performance can easily be generated, 
                                                        and compared to other classes and schools. 
											 Performance charts for grades, attendance, class, and school performance can easily be generated, 
                                                        and compared to other classes and schools. 
                                                </div>
                                        </li>
                                        <li>
                                                <div class="desc">
										   <b>Affordable solution.</b>
                                                        While Backpack can be installed on site, it is also vailable as a hosted service, reducing 
                                                        the cost of up front investments. In either case, there are no upfront investments.
                                                </div>
                                        </li>
                                </ul>
                        </div>
                </div>
        </div>
</body>

</html>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question