...

View Full Version : Wrapping text around image. Is it even possible?



janosf
12-28-2007, 10:08 PM
I have posted an earlier question about floats and text wrapping around. I might be on the wrong track alltogether. I would like to have text wrap around both the left and right side images. The left side is OK but I cannot get the text to move above the right image. Can it be achieved with some kind of positioning instead of floats? All elements are wrapped in div tags.

http://www.tangentx.com/archive/admanager.jpg



.AdManagerAd
{
position:relative;
width:600px;
height:300px;
background-color:#ffffff;
}
.AdManagerLogo
{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.AdManagerLeftImage
{
float:left;
margin-right:5px;
margin-left:4px;
margin-top:10px;
margin-bottom:5px;
}
.AdManagerRightImage
{

float:right;
margin-top:0px;
top:30px;
}
.AdManagerHeaderText
{
text-align:center;
}
.AdManagerBodyText
{
padding-top:5px;
text-align:left;
margin-left:5px;
margin-right:5px;
}
.AdManagerFooterText
{
width:100%;
position:absolute;
left:0px;
bottom:0px;
text-align:center;
}



<div style="padding-top: 5px;">
<asp:Panel ID="pnlAdManagerAd" runat="server" CssClass="AdManagerAd">
<asp:Panel ID="pnlLogo" runat="server" CssClass="AdManagerLogo">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/YourLogo.gif" />
</asp:Panel>
<asp:Panel ID="pnlHeaderText" runat="server" CssClass="AdManagerHeaderText">
<asp:Label ID="lblHeaderText" runat="server">Your header text goes here</asp:Label>
</asp:Panel>
<asp:Panel ID="pnlLeftImage" runat="server" CssClass="AdManagerLeftImage">
<asp:Image ID="imgLeftImage" runat="server" ImageUrl="Images/LeftImage.gif" />
</asp:Panel>
<asp:Panel ID="pnlRightImage" runat="server" CssClass="AdManagerRightImage">
<asp:Image ID="imgRightImage" runat="server" ImageUrl="Images/RightImage.gif" />
</asp:Panel>
<asp:Panel ID="pnlBodyText" runat="server" CssClass="AdManagerBodyText">
<asp:Label ID="lblBodyText" runat="server" Text="Body text goes here. The text will wrap around the right and left images.The Six Phases of a Project: Enthusiasm. Disillusionment. Panic. Search for the Guilty. Punishment of the Innocent. Praise for non-participants The Six Phases of a Project: Enthusiasm. Disillusionment. Panic. Search for the Guilty. Punishment of the Innocent. Praise for non-participants The Six Phases of a Project: Enthusiasm. Disillusionment. Panic. Search for the Guilty. Punishment of the Innocent. Praise for non-participants The Six Phases of a Project: Enthusiasm. Disillusionment. Panic. Search for the Guilty. Punishment of the Innocent. Praise for non-participants The Six Phases of a Project: Enthusiasm. Disillusionment. Panic. Search for the Guilty. Punishment of the Innocent. Praise for non-participants The Six Phases of a Project: Enthusiasm. Disillusionment. Panic. Search for the Guilty. Punishment of the Innocent. Praise for non-participants "
Font-Size="Small"></asp:Label>
</asp:Panel>
<asp:Panel ID="pnlFooterText" runat="server" CssClass="AdManagerFooterText">
<asp:Label ID="lblFooterText" runat="server" Font-Bold="True" Font-Size="X-Small">Your footer text goes here</asp:Label>
</asp:Panel>
</asp:Panel>
</div>

Apostropartheid
12-28-2007, 10:48 PM
.AdManagerRightImage
{

float:right;
margin-top:0px;
top:30px;
}

Your margin is blocking the text. Just place it further down in your code.

I'd advise you to use plain HTML and proper IDs/classes before making it into ASP. It makes troubleshooting a lot easier.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum