Masterpage, Contentplaceholder - image display issue (CSS?)

using masterpage image and text not displaying correctly

Page 1 of 1

5 Replies - 17731 Views - Last Post: 18 August 2009 - 08:04 AM Rate Topic: -----

#1 Footsie  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 24
  • View blog
  • Posts: 370
  • Joined: 20-September 07

Masterpage, Contentplaceholder - image display issue (CSS?)

Posted 21 December 2008 - 11:39 AM

This problem is annoying me immensely.

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:
Attached Image
Browser
Attached Image

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?

Is This A Good Question/Topic? 0
  • +

Replies To: Masterpage, Contentplaceholder - image display issue (CSS?)

#2 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Masterpage, Contentplaceholder - image display issue (CSS?)

Posted 21 December 2008 - 01:22 PM

Try using a CSS class element.

<asp:Image ID="Image1" CssClass="image" runat="server" ImageUrl="~/Images/face.jpg" />





body 
{
	 font-family:Verdana;
	 font-size:100%;
}
.image
{
	 padding:2%;
	 float:right;
	 width:20%;
}
p
{
	 font-size:1em;
}

Was This Post Helpful? 1
  • +
  • -

#3 Footsie  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 24
  • View blog
  • Posts: 370
  • Joined: 20-September 07

Re: Masterpage, Contentplaceholder - image display issue (CSS?)

Posted 22 December 2008 - 11:45 AM

Excellent!
Thanks Jayman. That solved the problem.

Is there a reason why using the ID selector (#) has a problem and the CssClass works?
Was This Post Helpful? 0
  • +
  • -

#4 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Masterpage, Contentplaceholder - image display issue (CSS?)

Posted 22 December 2008 - 11:50 AM

To be honest, I am not sure, I don't ever use it. I only use class element, which I have never had a problem with.
Was This Post Helpful? 0
  • +
  • -

#5 mrkencable  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 2
  • Joined: 18-August 09

Re: Masterpage, Contentplaceholder - image display issue (CSS?)

Posted 18 August 2009 - 07:36 AM

View PostJayman, on 22 Dec, 2008 - 10:50 AM, said:

To be honest, I am not sure, I don't ever use it. I only use class element, which I have never had a problem with.



.Net often changes the Id of the variables, and this is probably the reason why using css id tags doesn't always work as expected.
Was This Post Helpful? 0
  • +
  • -

#6 mrkencable  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 2
  • Joined: 18-August 09

Re: Masterpage, Contentplaceholder - image display issue (CSS?)

Posted 18 August 2009 - 08:04 AM

View PostJayman, on 22 Dec, 2008 - 10:50 AM, said:

To be honest, I am not sure, I don't ever use it. I only use class element, which I have never had a problem with.



.Net will often changes the Id of the variables, and this is why using css id tags doesn't always work as expected.
Was This Post Helpful? 1

Page 1 of 1