cdlciddit
asked on
How to float text around an image in a bulleted list
Hello. I have a page where I have images floated to the right. But the image that comes before the bullet list pushes the text up or down on the page and leaves a bunch of white space. Can someone tell me how to fix it? My code is below. The problem is with the image named campusPic.jpg:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="heels2.aspx.vb" Inherits="heels2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/igc.ms.styles.css?ver=1" rel="stylesheet" type="text/css" />
<link href="/core.css?ver=1" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link rel="stylesheet" href="css/styles.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet" />
<script type="text/javascript" src="/js.js?ver=1"></script>
</head>
<body>
<form id="form2" runat="server">
<%--<div style="width: 100%; height: 169px; background-image: url('http://localhost:51150/images/headerBg.gif');">--%>
<div style="width: 100%; height: 169px; background-image: url('/images/headerBg.gif');">
<table cellpadding="0" cellspacing="0" border="0" width="960" align="center" runat="server" id="Table2" style="">
<tr>
<td style="height: 131px;" valign="top">
<a href="/" class="noBorder"><img src="/images/logo.gif" height="112" width="340" alt="The Carolina Institute for Developmental Disabilities at UNC" border="0" /></a>
</td>
<td style="height: 131px;" align="right" valign="middle" class="">
</td>
</tr>
<tr>
<td style="height: 38px;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="960" style="height: 38px;">
<tr>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdHome" class="menu" valign="middle"><a href="/" class="noBorder" style="padding: 9px 8px 0px 8px;"><img src="/images/home.gif" width="23" height="16" alt="Home" border="0" /></a></td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdServices" class="menu">
<a href="/Services" class="noBorder">Services</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdEducation" class="menu">
<a href="/Education" class="noBorder">Education</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdResearch" class="menu">
<a href="/Research" class="noBorder">Research</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdFamilies" class="menu">
<a href="/Families" class="noBorder">For Families</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdAbout" class="menu">
<a href="/About" class="noBorder">About Us</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdSupport" class="menu">
<a href="/Support" class="noBorder">Support the Institute</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdDirectory" class="menu">
<a href="/Directory" class="noBorder">Directory</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
<td runat="server" id="tdContact" class="menu">
<a href="/Contact" class="noBorder">Contact Us</a>
</td>
<td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="width: 100%; background-color: #fff;">
<table cellpadding="0" cellspacing="0" border="0" width="970" border="0" align="center">
<tr>
<td class="content">
<div class="container">
<div class="page-header text-center">
<br />
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/mainHeading2.gif" />
<%--<h1 style="font-family: 'Shrikhand', cursive;">HEELSUP</h1>--%>
</div>
</div>
<ul class="nav nav-pills justify-content-center">
<li class="nav-item"><a class="nav-link active" href="default.aspx" style="background-color: #6699cc">Home</a></li>
<li class="nav-item"><a class="nav-link" href="apply.aspx">Apply</a></li>
<li class="nav-item"><a class="nav-link" href="overview.aspx">About</a></li>
<li class="nav-item"><a class="nav-link" href="support.aspx">Support & Volunteers</a></li>
<li class="nav-item"><a class="nav-link" href="match.aspx">Is HEELSUP a Good Match for Me?</a></li>
<li class="nav-item"><a class="nav-link" href="contact.aspx">Contact</a></li>
</ul>
<br />
<div class="container">
<div class="content">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/heelsUp.jpg" ImageAlign="Right" />
<p style="text-align:justify">HEELS UP (Higher Education, Employment, and Living Success University Participant Program)</p>
<h3>Program Overview: </h3>
<p style="text-align:justify">HEELS UP Program provides an inclusive, two-year, on-campus living and learning experience for college-aged persons with intellectual disabilities. The goal of the program is to facilitate HEELS UP students' transition from secondary school to adult life with education, employment and independent living. </p>
<p style="text-align:justify">HEELS UP students live in on-campus dormitories distributed throughout university residence halls under the same university policies that apply to all University of North Carolina at Chapel Hill students. On-campus life is fully integrated and inclusive. </p>
<p style="text-align:justify">The University of North Carolina at Chapel Hill undergraduate students are recruited to provide paid and unpaid support to facilitate HEELS UP Students living on campus, attending classes, engaging in social and recreational activities, becoming involved in student organizations and developing friendships.</p>
<h3>Program Purpose:</h3>
<p style="text-align:justify">HEELS UP is designed to provide a two-year, on-campus living and learning experience for college-age persons with intellectual disabilities. During the two-year period, students are expected to complete requirements for receiving a HEELS UP Certificate of Accomplishment based on the successful completion of an Individual Plan for College Participation.</p>
<p style="text-align:justify">HEELS UP students are not eligible for an undergraduate or graduate degree from the university. They are permitted to audit individual courses as part of their HEELS UP Program and required to pay appropriate fees for these courses as well as other university costs (i.e., housing, meal plan, student activities, etc). </p>
<h3>Program Outcomes:</h3>
<p style="text-align:justify">The HEELS UP Certificate of Accomplishment is awarded after a two-year period based on satisfactory completion of five program components. These components include the following:</p>
<ul style="list-style-type: disc">
<li>• Personal development skills (e.g., communication skills, personal care skills, self-determination, etc.)</li>
<li>• Community participation skills (e.g., using public transportation, budgeting, grocery shopping, etc.)</li>
<li>• Vocational preparation skills (e.g., learning specific job skills on or off campus)</li>
<li>• Social participation and learning (e.g., participating in university functions such as athletic events, belonging to university clubs or organizations)</li>
<li>• Course auditing (e.g., auditing three to four courses per semester)</li>
</ul>
<asp:Image ID="Image2b" runat="server" ImageUrl="~/images/campusPic.jpg" style="padding:0.15px; float:right" />
<p style="text-align:justify">Note: Participants must pay current university fees for auditing courses.</p>
<p style="text-align:justify">At the completion of the two-year period, students will be eligible for a UP Certificate of Accomplishment based on the following criteria:</p>
<ul>
<li>• Completion of 1,800 hours of learning activities over a four-semester period (450 hours per semester)</li>
<li>• Achievement of at least 80 percent of the objectives per semester within each component of the IPCP</li>
<li>• Recommendation for a UP Certificate of Accomplishment by the UP Co-Directors and Program Steering Committee</li>
</ul>
</div> <%--Close content div--%>
</div> <%--Close Ccontainer div--%>
<%--<div class="container text-center">
<img src="images/main.jpg" alt="" />
</div>--%>
</td>
</tr>
</table>
</div>
<div style="background-image: url(/images/footerBg.gif); height: 150px;">
<table cellpadding="0" cellspacing="0" border="0" width="970" align="center">
<tr>
<td valign="top">
<div style="margin-top: 15px;" class="gry large bold">
<%--<div class="fr" style="margin-right: 14px;"><a href="http://www.facebook.com/unccidd" target="_blank" title="Follow us on Facebook"><img src="/images/icon_facebook.png" height="23" width="23" alt="Follow us on Facebook" /></a></div>
<div class="fr" style="margin-right: 8px;"><a href="http://twitter.com/UNCCIDD" target="_blank" title="Follow us on Twitter"><img src="/images/icon_twitter.png" height="23" width="23" alt="Follow us on Twitter" /></a></div>--%>
Copyright <%=Now.Year%> The Carolina Institute for Developmental Disabilities
</div>
<div style="margin-top: 28px" class="small ltgry">
<a href="/" class="bold" style="color: #6699cc;">Home</a> |
<a href="/Services" class="bold" style="color: #6699cc;">Services</a> |
<a href="/Education" class="bold" style="color: #6699cc;">Education</a> |
<a href="/Research" class="bold" style="color: #6699cc;">Research</a> |
<a href="/Families" class="bold" style="color: #6699cc;">For Families</a> |
<a href="/About" class="bold" style="color: #6699cc;">About Us</a> |
<a href="/Support" class="bold" style="color: #6699cc;">Support The Institute</a> |
<a href="/Contact" class="bold" style="color: #6699cc;">Contact Us</a> |
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
When posting your code here, please fully render the html and not just the .net code. In other words, run the html in the browser, view the source, copy and paste. You have .net code mixed in here.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello @Scott Fell, EE MVE. Sorry for the messy submission. I didn't know what was meant by render the code here. Now I know to copy and paste the source from the browser. Thank you for the help.
I would need to know the css being applied. Do you have a sample page say on jsbin/jsfiddle or can you attach all the css you're using please.