Forum Discussion
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
1 Reply
- Hi try this one I think it will help if not please let me know then we together find solution for it
/* Ensure body and html use full height */
body, html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
/* Ensure form takes up full height and distributes space */
form {
flex: 1;
display: flex;
flex-direction: column;
}
/* Header container using flexbox to center elements */
#HeaderContainer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative; /* Ensure this element positions its children properly */
}
/* Styling for the left logo */
#HeaderLogo {
width: 200px;
float: left;
}
/* Styling for the right logo */
#MainTile {
width: 200px;
float: right;
}
/* Center the menu between the logos */
#Menu {
display: flex;
justify-content: center;
position: absolute; /* Position the menu absolutely within the header container */
left: 50%; /* Move the menu to the horizontal center */
transform: translateX(-50%); /* Adjust the position to truly center it */
text-align: center;
}
/* Allow main content to take available space */
#MainContentPlaceHolder1 {
flex: 1;
min-height: 550px;
border: 5px solid black;
}
/* Clearfix for floating elements */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Footer should stay at the bottom */
#Footer {
width: 100%;
height: 75px;
background-color: black;
}
#TestBar {
width: 100%;
height: 100px;
background-color: silver;
}
