Hi,
The pnlproduct and imagebutton are not being rendered with the CssStyle as shown in lesson 5. The images remain large and are not floating left. Any ideas why? I am using VS2015 and windows 10; browsing with Microsoft edge.
Index page (html)
***************************
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="TLCWebStore.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Panel ID="pnlProducts" runat="server">
</asp:Panel>
</div>
<div style ="clear:both"></div>
</asp:Content>
_____________________________________________________
code behind(.cs)
**************************
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TLCWebStore
{
public partial class Index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
FillPage();
}
private void FillPage()
{
//Get list of products in DB
ProductsModel productmodel = new ProductsModel();
List<Product> products = productmodel.GetAllProducts();
//check if products exist
if (products != null)
{
foreach (Product product in products)
{
Panel productPanel = new Panel();
ImageButton imagebutton = new ImageButton();
Label lblName = new Label();
Label lblPrice = new Label();
//set the values
imagebutton.ImageUrl = "~/Images/Products/" + product.ProductImage;
imagebutton.CssClass = "productImage";
imagebutton.PostBackUrl = "~/Pages/Product.aspx?id=" + product.Id;
lblName.Text = product.Name;
lblName.CssClass = "productName";
lblPrice.Text = "£££ for best prices, enquire";
lblPrice.CssClass = "productPrice";
//add controls to panel
productPanel.Controls.Add(imagebutton);
productPanel.Controls.Add(new Literal { Text = "<br />" });
productPanel.Controls.Add(lblName);
productPanel.Controls.Add(new Literal { Text = "<br />" });
productPanel.Controls.Add(lblPrice);
//add dynamic panel to static panel
pnlProducts.Controls.Add(productPanel);
}
}
else
{
//when no products found
pnlProducts.Controls.Add(new Literal { Text = "No products found!" });
}
}
}
}
________________________________________________________________
Master page (HTML)
****************************************************
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="TLCWebStore.MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>The Luxury Connection Car Parts Webstore</title>
<link rel="stylesheet" href="Styles/StyleSheet1.css" type="text/css"/>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="wrapper">
<div id="banner"><asp:image ID="Image1" runat="server" ImageUrl="~/Images/BannerCar.jpg" Width="100%"></asp:image></div>
<div id="navigation">
<ul id="nav">
<li><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Index.aspx">Webshop</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink2" runat="server">About us</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink3" runat="server">Reports</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Pages/Management/Management of Products.aspx">Management</asp:HyperLink></li>
</ul>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
</html>
________________________________________________________________
Css Stlysheet
****************************************************
body {
color:#574c3f;
font-family:Corbel, Arial, Arial, Helvetica, sans-serif, Verdana, sans-serif;
font-size:16px;
background-color: lavender;
}
#wrapper{
width: 1100px;
margin: auto;
padding-bottom: 20px;
background-color: white;
-moz-border-radius:25px;
-webkit-border-radius: 25px;
border-radius: 25px;
overflow:hidden;
}
#banner{
}
#navigation {
height:45px;
background: linear-gradient(to top, #c2bcb5,#ffffff);
}
#nav{
display: block;
list-style: none;
text-align: center;
}
#nav ul{
display: none;
list-style: none;
}
#nav li{
float: left;
display: block;
margin-top: 15px;
text-transform: uppercase;
padding: 0px 20px 0px 20px;
border-left: 1px solid #ffffff;
}
#nav a:link , #nav a :visited, #nav a:active{
display:block;
color: #574c3f;
text-decoration: none;
}
#nav a:hover{
background-color: white;
}
#content {
padding: 20px;
min-height:400px;
}
#ContentPlaceHolder1_pnlProducts div
{
float:left;
width: 250px;
height: 250px;
text-align: center;
}
.productImage
{
width: 150px;
height: 150px;
vertical-align: central;
padding: 10px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
.productName
{
font-size: 18px;
font-weight: bold;
}
.productPrice {
font-family: Arial, Helvetica, sans-serif;
color: #FFB600;
}
#footer{
}
