I have a simple Masterpage with a Contentplaceholder: I'm trying to keep all design elements separate from the rest of the development. I therefore have a CSS file as well.
Master Page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!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 runat="server"> <title>Master Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div id="topBanner"> <h1 >SAHiGlo Promotions</h1> <h3> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" Value="0"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/Models.aspx" Text="Models" Value="1"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/Register.aspx" Text="Register" Value="2"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/Login.aspx" Text="Login" Value="3"></asp:MenuItem> </Items> </asp:Menu> </h3> </div> <span id="breadCrumb"> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath> <br /> </span> <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server"> </asp:ContentPlaceHolder> </form> </body> </html>
On my Home.aspx page I have inserted an image into the Content Holder and want the text to run on the left of the image: next to, and underneath. Visual Studio displays it correctly in design view but when run in a browser it is all wrong.
Home.aspx:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" Title="SAHiGlo Promotions" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server"> <div id="test"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/face.jpg" /> <p> SAHiGlo Promotions, is an agency that offers models, temporary staff and promotional girls or guys for any event or shoot on your Calendar. Our staff are all professional and presentable, coming from a wide variety of backgrounds. </p> <p> SAHiGlo Promotions is growing all the time. If you want to join us and become part of the team please follow this link to the <asp:HyperLink ID="registerHyp" runat="server" NavigateUrl="~/Register.aspx">register</asp:HyperLink> page. You will need to tell us a bit about yourself and send us a few photos. If you have already registered please <asp:HyperLink ID="loginHyp" runat="server" NavigateUrl="~/Login.aspx">login</asp:HyperLink> to view your profile. </p> <p> Feel free to browse through our selection of <asp:HyperLink ID="modelHyp" runat="server" NavigateUrl="~/Models.aspx">models</asp:HyperLink> and promotional staff. If you are a company please <asp:HyperLink ID="registerHyp2" runat="server" NavigateUrl="~/Register.aspx">register</asp:HyperLink> your company name and contact details to send us promotion requests. </p> </div> </asp:Content>
Design View:

Browser

My CSS:
body
{
font-family:Verdana;
font-size:100%;
}
#Image1
{
padding:2%;
float:right;
width:20%;
}
p
{
font-size:1em;
}
What can I do to get it to display correctly? ie: with the image on the right and the text wrapping around it?

New Topic/Question
Reply




MultiQuote






|