在html頁面上移動文本

我是HTML和CSS的初學者。每當有人拖動角落使頁面變大或變小時，我的頁面上的文字就會不停地四處跳動。我寧願讓它一點都不動，或者稍微移動一下。現在，菜單文本跳出菜單欄。我該如何解決？我試着用「位置」屬性打，你會看到下面的...但沒有骰子..在html頁面上移動文本

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; 
}

來源

2012-03-22 BigBug

這與asp.net或webforms完全無關。 – 2012-03-22 17:15:17

我把標籤，因爲我使用webforms和asp.net ...它只是爲了給更多的背景 – BigBug 2012-03-22 17:17:01

首先，我建議你建立一個無序列表菜單。 '

搜索
報告

' 他們很容易的風格。如果你想要一個水平菜單，把一個float：留在'li'上。除此之外，請使用W3C在線驗證器檢查您的頁面。你的代碼中有很多錯誤。我刪除了標籤，因爲它們與您的問題無關。 – 2012-03-22 17:22:29

嘗試在您的.navigationBar中添加最小寬度。當你指定float：left時，如果容器太小而不能容納它們，它將包裝元素。通過指定一個最小寬度，你應該能夠避免這個問題。看到這個jsfiddle：http://jsfiddle.net/ZkLFV/

來源

2012-03-22 17:30:01 aquinas

謝謝:)你的解決方案完全工作！ – BigBug 2012-03-23 03:40:00

一個好的方法是將所有的內容放到一個div中，然後將這個div的寬度設置爲spi，並讓它浮動在中間。這是一個很多網站如何處理這種事情，所以：

<div class="container"> 

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

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

這樣您alwasy處理一組大小，但它位於

來源

2012-03-22 17:33:12 Liam

你可以操縱滾動頁面的中間不錯那些不屬於身體的部分，在身體後面做一個div，使它成爲身體的100％，css {overflow：scroll;或overflow-y：scroll;}並在跟蹤器上使用rgba（alpha）。

來源

2012-03-22 17:54:13 Undefined

在html頁面上移動文本

回答

相關問題