troubleshooting Question

How to center an image using Css in Code behind

Avatar of mpdillon
mpdillon asked on
ASP.NETASPCSS
3 Comments1 Solution125 ViewsLast Modified:
I am creating a two column flow (i.e. table) using Div's. I have everything worked out except I cannot figure out how to center the image inside the DIV. Below you will see my code. Hopefully there is enough there for you to provide some suggestions. The left div is set to 33% and the right div is set to 67%. There is a master page but I am working on the content page.

Here is what the web page looks like now.
View of current web site
Here is the code in my code behind file
Public Class SidePanel1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        LoadCategoryListBox()
        LoadImage()
    
    End Sub
    Private Sub LoadCategoryListBox()
        Me.CategoryListBox1.Items.Add("Milk")
        Me.CategoryListBox1.Items.Add("Tea")
        Me.CategoryListBox1.Items.Add("")
        Me.CategoryListBox1.Items.Add("Sugar")
    End Sub
    
    Private Sub LoadImage()
        Dim divContentLeftImage As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
        Dim divContentRightImage As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
        Dim divContentClearFloat As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
        '
        divContentLeftImage.ID = "first_image_div"
        divContentLeftImage.Attributes("class") = "left_image"
        Dim ImageLeft As New Image
        ImageLeft.Height = "150"
        ImageLeft.Width = "150"
        ImageLeft.ImageUrl = "images/boatbig.png"
        ImageLeft.AlternateText = "Alternate text for BigBoat"
        '
        divContentLeftImage.Controls.Add(ImageLeft)
        '
        divContentRightImage.ID = "first_image_div"
        divContentRightImage.Attributes("class") = "right_image"
        Dim ImageRight As New Image
        ImageRight.Height = "150"
        ImageRight.Width = "150"
        ImageRight.ImageUrl = "images/boatbig.png"
        ImageRight.AlternateText = "Alternate text for BigBoat"
        '
        divContentRightImage.Controls.Add(ImageRight)
        '
        divContentClearFloat.ID = "first_clear_float_div"
        divContentClearFloat.Attributes("class") = "clear_float"
        '
        '
        Me.image_table_outer_div.Controls.Add(divContentLeftImage)
        Me.image_table_outer_div.Controls.Add(divContentRightImage)
        Me.image_table_outer_div.Controls.Add(divContentClearFloat)
        '
        '
        divContentLeftImage.ID = "second_image_div"
        divContentLeftImage.Attributes("class") = "left_image"
        'Dim ImageLeft As New Image
        ImageLeft.Height = "150"
        ImageLeft.Width = "150"
        ImageLeft.ImageUrl = "images/boatbig.png"
        ImageLeft.AlternateText = "Alternate text for BigBoat"
        '
        divContentLeftImage.Controls.Add(ImageLeft)
        '
        divContentRightImage.ID = "second_image_div"
        divContentRightImage.Attributes("class") = "right_image"
        'Dim ImageRight As New Image
        ImageRight.Height = "150"
        ImageRight.Width = "150"
        ImageRight.ImageUrl = "images/boatbig.png"
        ImageRight.AlternateText = "Alternate text for BigBoat"
        '
        divContentRightImage.Controls.Add(ImageRight)
        '
        divContentClearFloat.ID = "first_clear_float_div"
        divContentClearFloat.Attributes("class") = "clear_float"

    End Sub
End Class


Here is the source code from the .aspx page. Note that at the moment the CSS code is in this file. I will move it later to an external file.
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SidePanel.Master" CodeBehind="SidePanel.aspx.vb" Inherits="GiftProgram.SidePanel1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .SidePanelList   
        { 
           font: 10pt Verdana; 
           font-weight:700;
           color: Green;
           background-color:bisque;
        }
        #image_table_outer_div 
        {
          background-color: chartreuse;
          width: 100%;
        }
        .left_image
        {
            background-color: purple;
            width: 33%;
            float: left;
        }
        .right_image {
        background-color: aliceblue;
            width: 67%;
            float: left;
        }
        .LeftText
        {
            background-color: red;
            width: 33%;
            float: left;
        }
        .RightText
        {
        background-color: lightsalmon;
            width: 67%;
            float: left;
        }
        .clear_float
        {
        clear: both;
        background-color:transparent;

        }
        .ImageDiv
        {
        border: none;
        display: block;
        margin: auto;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="server">
    <div id="image_table_outer_div" runat="server">
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphLeftNavigation" runat="server">
    <asp:ListBox ID="CategoryListBox1" runat="server"  CssClass="SidePanelList"></asp:ListBox>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="cphFooter" runat="server">
</asp:Content>

Just for good measure here is the .aspx code from the master page.
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SidePanel.master.vb" Inherits="GiftProgram.SidePanel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        #container
        {
              width: 780px;
              border: solid 1px black;
              margin: 0px auto;
        }
        #header
        {
              color: #FFFFFF;
              width: 100%;     height: 100px;
              background-color: #F7CB33; 
        }
        #sidePanel
        {
              width: 170px;     
              margin-top: 5px;
              padding-right: 6em;
              padding-left: 4em;
              background-color: #778CB3;
              color: #FFFFFF;   padding: 4px;
        }
        #content
        {
              width: 610px;     float: right;
              margin-top: 5px;
              background-color: #A0AFCB;
        }
        #footer
        {
              background-color: #F7CB33;
              padding: 12px;    width: 649px;
              color: #000000; font-size: 90%;
              text-align: center;     clear: both;
              border-top: 5px solid #FFFFFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
            <h4>Web Application Name</h4>
        </div>
        <div id="content">
          <asp:ScriptManager ID="script" runat="server">
          </asp:ScriptManager>
          <asp:ContentPlaceHolder ID="cphContent" runat="server">
          </asp:ContentPlaceHolder>
          <asp:ValidationSummary ID="valSummary" runat="server"              
            DisplayMode="BulletList" />
        </div>
        <div id="sidePanel">
            <asp:ContentPlaceHolder ID="cphLeftNavigation" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            <p>Common Footer Content</p>
            <asp:ContentPlaceHolder ID="cphFooter" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

I apologize if I have overdone it with inclusion of my code. But since I do not know how to solve the problem, I do not know what code I should show.

Thanks,
pat
ASKER CERTIFIED SOLUTION
sajayj2009

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros