A few issues with ASP.NET, HTML, and CSS.
What I am trying to do
– Get the div #menu to display menu in the center (horizontally and vertically) between and not past (horizontally and vertically) the logo images. Basically, center horizontally and vertically between the two logo images without going further then them…
– Figure out why there is such space between the content div and the footer. No clue but there is some white space and I am not sure where it is coming from.
Here is some of the code…
<%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”Site1.master.cs” Inherits=”Corp_Template_2.Site1″ %>
<!DOCTYPE html>
<html>
<head runat=”server”>
<title>Corp Template 2</title>
<link rel=”stylesheet” type=”text/css” href=”~/StyleSheet1.css” />
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body>
<form id=”form1″ runat=”server”>
<div id=”HeaderContainer”>
<div id=”HeaderLogo”>
<asp:ImageButton ID=”ImageButton1″ runat=”server” ImageUrl=”~/Media/Corp Logo Sample Test.jpg” Width=”200px”/>
</div>
<div id=”MainTile” >
<asp:ImageButton ID=”ImageButton2″ runat=”server” ImageUrl=”~/Media/Corp Logo Sample Test.jpg” Width=”200px”/>
</div>
<div id=”Menu”>
<asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″ Orientation=”Horizontal” StaticDisplayLevels=”2″></asp:Menu>
<asp:SiteMapDataSource runat=”server” ID=”SiteMapDataSource1″></asp:SiteMapDataSource>
</div>
</div>
<div id=”MainContentPlaceHolder1″>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
<div id=”Footer”>
<h4 style=”color: white;”>This is the footer.</h4>
</div>
</form>
</body>
</html>
As for CSS.. Here it is.
body {
}
#Footer
{
width: auto;
height: 75px;
background-color: black;
}
#HeaderContainer
{
overflow:hidden;
}
#HeaderLogo {
width: 200px;
float: left;
}
#MainTile
{
width:200px;
float: right;
}
#Menu
{
margin-left: 200px;
margin-right: 200px;
display: flex;
justify-content: center;
text-align: center;
}
#TestBar
{
width: 100%;
height: 100px;
background-color: silver;
}
#MainContentPlaceHolder1
{
min-height: 550px;
border: 5px solid black;
}
Any ideas or suggestions?
Thank you very much.
-Cr8tive
What I am trying to do- Get the div #menu to display menu in the center (horizontally and vertically) between and not past (horizontally and vertically) the logo images. Basically, center horizontally and vertically between the two logo images without going further then them… – Figure out why there is such space between the content div and the footer. No clue but there is some white space and I am not sure where it is coming from. Here is some of the code… <%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”Site1.master.cs” Inherits=”Corp_Template_2.Site1″ %><!DOCTYPE html><html><head runat=”server”><title>Corp Template 2</title><link rel=”stylesheet” type=”text/css” href=”~/StyleSheet1.css” /><asp:ContentPlaceHolder ID=”head” runat=”server”></asp:ContentPlaceHolder></head><body><form id=”form1″ runat=”server”><div id=”HeaderContainer”><div id=”HeaderLogo”><asp:ImageButton ID=”ImageButton1″ runat=”server” ImageUrl=”~/Media/Corp Logo Sample Test.jpg” Width=”200px”/></div><div id=”MainTile” ><asp:ImageButton ID=”ImageButton2″ runat=”server” ImageUrl=”~/Media/Corp Logo Sample Test.jpg” Width=”200px”/></div><div id=”Menu”><asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″ Orientation=”Horizontal” StaticDisplayLevels=”2″></asp:Menu><asp:SiteMapDataSource runat=”server” ID=”SiteMapDataSource1″></asp:SiteMapDataSource></div></div><div id=”MainContentPlaceHolder1″><asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”></asp:ContentPlaceHolder></div><div id=”Footer”><h4 style=”color: white;”>This is the footer.</h4></div></form></body></html> As for CSS.. Here it is. body {}#Footer{width: auto;height: 75px;background-color: black;}#HeaderContainer{overflow:hidden;}#HeaderLogo {width: 200px;float: left;}#MainTile{width:200px;float: right;}#Menu{margin-left: 200px;margin-right: 200px;display: flex;justify-content: center;text-align: center; }#TestBar{width: 100%;height: 100px;background-color: silver;}#MainContentPlaceHolder1{min-height: 550px;border: 5px solid black;} Any ideas or suggestions? Thank you very much. -Cr8tive Read More
