I am a beginner at HTML and CSS. the text on my page keeps jumping around so much every time someone drags the corner to make the page bigger or smaller. I’d much rather have it all not move around at all, or move a bit. Right now, the menu text jumps right out of the menu bar. How do i fix this? I’ve tried playing with the “position” attribute as you’ll see below… but no dice..
html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="Foods.MainPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="Link1" rel="stylesheet" type="text/css" href="Styles/addProjectStyle.css"/>
<style type="text/css">
.addProject
{
width: 78px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class = "navigationBar">
<asp:ImageButton ID="ImageButton1" runat="server" Height="18px"
ImageUrl="~/g.png" style="margin-left: 1012px; margin-top: 18px"
Width="23px" />
<div id = "search" class = "menuOption" >
<a href=""> Search </a>
</div>
<div id = "reports" class = "menuOption" >
<a href=""> Reports </a>
</div>
<div id = "more" class = "menuOption" >
<a href=""> More... </a>
</div>
<div id = "addProject" class = "menuOption" >
<a href=""> Add Project </a>
</div>
<div id = "editProject" class = "menuOption" >
<a href=""> Edit Project </a>
</div>
</div>
<div id = "title" class = "mainTitle">
Dare Foods
</div>
<div id = "sub" class = "subTitle">
Add Project
</div>
<div id = "addBtn" class= "addButton">
Add
</div>
<div class = "addProjectArea" >
<div class = "addProjectInner" >
</div>
</div>
</form>
</body>
</html>
css
body
{
position: static;
background: white;
}
input
{
font-style: italic;
font: Ariel;
font-size: 14pt;
margin-top: 7px;
}
a:hover
{
text-decoration:none;
color: #B9D3EE;
}
a:active
{
text-decoration:none;
color: #B9D3EE;
}
a
{
text-decoration:none;
color: white;
}
.navigationBar
{
background: gray;
height: 50px;
width: 100%;
}
.menuOption
{
width:143px;
text-align: center;
position: static;
float:left;
}
#search
{
position:relative;
font-weight: bold;
height: 27px;
margin-left: 23px;
left: 133px;
top: -17px;
margin-top: 1px;
}
#reports
{
position:relative;
font-weight: bold;
height: 27px;
margin-left: 23px;
left: 34px;
top: -16px;
margin-top: 1px;
}
#addProject
{
position:relative;
font-weight: bold;
height: 27px;
margin-left: 23px;
left: -542px;
top: -18px;
margin-top: 1px;
}
#editProject
{
position:relative;
font-weight: bold;
height: 27px;
margin-left: 23px;
left: -611px;
top: -18px;
margin-top: 1px;
}
#more
{
position:relative;
font-weight: bold;
height: 27px;
margin-left: 23px;
left: -66px;
top: -15px;
margin-top: 1px;
}
.addProjectArea
{
background:lightGray;
position:absolute;
top: 21%;
width:50%;
height:50%;
padding-bottom: 15%;
margin-left: 30%;
margin-right: 10%;
text-align: center;
border-width: 5%;
border-style:solid;
border-color:#8E388E;
}
.addProjectInner
{
background: white;
width:85%;
height:90%;
padding-bottom: 15%;
margin-left: 7.5%;
margin-right: 100px;
text-align: center;
background: white;
margin-top: 55px;
border-width: 5%;
border-style:solid;
border-color:#8E388E;
}
.mainTitle
{
position:static;
background: white;
width:15%;
height:4px;
padding-left: 5%;
padding-bottom: 15%;
text-align: left;
background: white;
}
#title
{
position:absolute;
color:Red;
width:49%;
font-size:35pt;
font-weight:lighter;
font-style:italic;
font-family:Georgia;
margin-left: 0px;
margin-top: 21px;
}
#sub
{
position:absolute;
color:Black;
font-size: 25pt;
font-style:italic;
font-family:Buxton Sketch;
width: 22%;
height: 0%;
top: 113px;
left: 249px;
text-align: left;
}
.addButton
{
margin-top: 5%;
background:gray;
position:absolute;
width:15%;
height:6%;
margin-left: 65%;
text-align: center;
}
#addBtn
{
font-size: 20pt;
font-family:Gabriola;
color:White;
font-weight: bold;
top: 48px;
left: 5px;
}
img.home
{
position:relative;
width:46px;
height:44px;
background:url(g.png) 0 0;
}
Try adding a min-width to your .navigationBar. When you specify float:left, it will wrap the elements if the container is too small to contain them. By specifying a min-width, you should be able to avoid that problem. See this jsfiddle: http://jsfiddle.net/ZkLFV/