CODEWITHSUNDEEP
htmlcss
BigBug
BigBug

Reputation: 6290

moving text on html page

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">
            &nbsp;&nbsp;&nbsp;
            Dare Foods
        </div>

         <div id = "sub" class = "subTitle">
            &nbsp;&nbsp;&nbsp;
            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;
}

Upvotes: 0

Views: 5113

Answers (3)

maximumcallstack
maximumcallstack

Reputation: 2917

You can manipulate scroll bars that are not part of the body, make a div just after the body, make it 100% of the body, css{overflow:scroll; or overflow-y:scroll;} and use rgba (alpha) on the tracker.

Upvotes: 0

Liam
Liam

Reputation: 29694

A good approach to this is to put all your content into a div and then spcify a width of this div and allow it to float in the middle. this is how a lot of sites deal with this kind of thing, so:

    <div class="container">

<!-- put everything above here-->
    </div>

    .container
    {
    width:400px;
    margin-left:auto;
    margin-right:auto;
    }

this way your alwasy dealing with a set size but it sits nice in the middle of the page

Upvotes: 0

aquinas
aquinas

Reputation: 23796

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/

Upvotes: 2

Related Questions