Reputation: 117
I'm trying to design a webpage using Asp.net and CSS in Visual Studio 2010. the problem is simple but i have no idea how to fix it. Im creating a header in my page, this header is a div, its linked to my stylesheet for coloring. I put an image in the div, and i added a label. Now after some time to put the image in the middle of the div and text under it, when i run the website, the Label leaves the div completely and sits outside. How do i fix this? and for future reference, what technique or method do i follow so that the webpage before running always looks the same after running? I've decided to create a stylesheet for every page and put all my styles in there.
Sorry, here it is.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="LoginStyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="MECIT_Logo.png" />
<asp:Label CssClass="Title" ID="WelcomeLabel" runat="server" Text="SSS">
</asp:label>
</div>
</form>
</body>
</html>
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
}
.Logo
{
position:absolute;
left:40%;
}
.Title
{
position:absolute;
left:38%;
bottom:83%;
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
Upvotes: 0
Views: 73
Reputation: 1662
I don't understand why you are absolutely positioning the elements inside the container, all this can be handled with margins and alignment. Here is my suggestion:
CSS:
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
text-align:center;
}
.Logo
{
margin:5 auto;
}
.Title
{
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
HTML:
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="http://www.mecit.edu.om/images/MECIT_Logo.png" /><br />
//Used a <span> for the Label, as I believe that is what it renders as
<span class="Title" id="WelcomeLabel">Some Title</span>
</div>
Upvotes: 1