Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wrapping text around image. Is it even possible?

    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.



    Code:
    .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;
    }

    Code:
                    <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>

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    .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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •