调整屏幕大小时，元素不会粘在其位置上

时间：2014-03-15 20:59:02

标签： html css

我有一个页面和一个表单元素，我已经放置在页面的右侧，当我调整页面大小时，表单移动到页面的左侧，这非常烦人，我想保持元素固定

以下代码中的元素为<div id = "form1">：

<center>
<div id = "text">

<p>Angus Animal Sanctuary is a small animal centre located in Birmingham, UK.  Our focus is on more traditional pets like cat, dogs, rabbits and birds. The objectives of this association are to take in and re-home animals and provide a special living environment. </p>
<p>An animal adoption makes a unique gift idea for yourself or someone special and provides a valuable contribution to the running costs of Angus. With the help of our staff and volunteers we provide a special and loving atmosphere to help all our animals adapt and find permanent, loving new homes.</p> 
<p>All potential adopters are interviewed and home vetted.</p> 
</div>

<div id = "form1">

<form method="login" action="form1.php">
<center><h3>Login</h3></center>
       <label>Email*:</label> <input type="text" name="name" size="15" maxlength="20" placeholder="abc@mail.co.uk" required value="<?php echo htmlspecialchars($email);?>"/>
       <br/><div class="error"><?php if (!empty($emailErr)){echo $emailErr;}?></div>
       <br/>
       <label>Password*:</label> <input type="text" name="name" size="15" maxlength="20" placeholder="**********" required value="<?php echo htmlspecialchars($password);?>"/>
       <br/><div class="error"><?php if (!empty($passwordErr)){echo $passwordErr;}?></div>
       <br/>
       <b><input style="float:right" type="Submit" name="Submit" value="Sign In"/></b>
</form>
</div>
<br/>
</center>

CSS：

#container{
width:979px;
margin:0;
padding: 0;
}


 body{
min-width:947px;
}


/* change padding to increase or decrease size */
#header{
background-color:#C8C800;
    margin: auto;
    padding:0px 0px;
    text-align: center;
    height:150px; 
    width:950px;
    border: 1px solid #999;
    border-radius: 5px;
    -moz-box-shadow: 0 0 100px #999;
    -webkit-box-shadow: 0 0 100px #999;
    box-shadow: 0 0 100px #999; 

}
#form1{

   margin-top:-250px;
   background-color:#FBFBE8;
   margin-right:190px;
   float:right;
   padding:0;
   width:240px;
   height:180px;
   border:1px solid #999;
   border-radius: 5px;
    -moz-box-shadow: 0 0 100px #999;
    -webkit-box-shadow: 0 0 100px #999;
    box-shadow: 0 0 100px #999;
    display:inline;
}

/* Main setting of the nav bar */
#nav{
background-color:#C8C800;
overflow:hidden;
text-align: center;
border: 1px solid #999;
border-radius: 5px;
    -moz-box-shadow: 0 0 100px #999;
    -webkit-box-shadow: 0 0 100px #999;
    box-shadow: 0 0 100px #999; 
    width:950px;
text-align: left;
border:0px;
padding: 0;
margin: 0 auto;
}

/* Styling to change anything which goes on the navbar itself */
#nav ul {list-style:none; 
            text-align: center;
            margin: 4px;        /* This changes height of navbar (orange bar)*/
            font-family: BOOK ANTIQUA; 
            font-size: 20px;
            font-weight: bold;
            font-style: italic; 

}

#nav li {
    display: inline; 
}

/* Styling to change the specific button / link of navbar  (li) because it is reffering to lists*/
#nav li a {
    text-decoration:none;
    color:#000;
    padding: 20px 20px;  /* This changes width and height of the buttons, edit 2nd one to increase/decrease spacing between links*/
    background-color:#C8C800; 
}


/* Styling to change the specific button / link of navbar */
#nav li a:hover { 
        color: #FFF; 
        background-color: black;
}


 #text{
  line-height:0.65cm;
  width:680px;
  margin-right:270px;
  margin-top:-40px;
  height:250px;
  background-color:#FBFBE8;
  border-radius: 5px;
  moz-box-shadow: 0 0 100px #999;
  webkit-box-shadow: 0 0 100px #999;
  box-shadow: 0 0 100px #999;

  }

  #footer{
  background-color:#C8C800;
  margin-top: -20px;
  border-radius: 5px;
  moz-box-shadow: 0 0 100px #999;
  webkit-box-shadow: 0 0 100px #999;
  box-shadow: 0 0 100px #999;
  width: 945px;
}

3 个答案:

答案 0 :(得分：0)

Normaly我不这样做。但是因为我喜欢动物，所以我给了你的标记一点点。它不完整，但我认为它会帮助你：http://jsfiddle.net/NicoO/Yqbg5/1/ 

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#wrap
{
    width: 950px;
    margin: auto;
}

#header
{
    background-color: #C8C800;
    border: 1px solid #999999;
    border-radius: 5px;
    box-shadow: 0 0 30px #999999;
    margin: auto;
    padding: 75px;
    text-align: center;
}

#navigation
{
    display: block;
    margin:20px 0px;
    padding:0;
    list-style: none;
    text-align: center;
    background-color: #C8C800;
    border-radius: 5px;
    border: 1px solid #999999;
    box-shadow: 0 0 20px #999999;
}

#navigation > li
{
    display: inline-block;
    vertical-align: middle;
}

#navigation > li A
{ 
    font-weight:bold;
    font-style: italic;
    display: block;
    padding: 10px;
    font-size: 20px;
    color: #000;
    text-decoration: none;

}


#navigation > li A:hover,
#navigation > li A:focus
{
    background-color: #000;
    color: #FFF;
}

#slideshow
{
    border:1px solid black;
    clear: left;
    margin-bottom: 15px;
    text-align: center;
    background-color: white;
    border-radius: 5px;
}

.box
{
    background-color: #FBFBE8;
    border: 1px solid #999999;
    border-radius: 5px;
    box-shadow: 0 0 30px #999999;
    padding: 15px;
}

.claimer
{
    font-size: 50px;
    font-style: italic;
}

#left
{
    width:71.5%;
    float: left;
    padding-right: 20px;
}

#right
{
    margin-left: 71.5%;
}

#content:after 
{
    content: "";
    display: table;
    clear: both; 
}



#footer 
{
    background-color: #C8C800;
    border-radius: 5px;
    box-shadow: 0 0 30px #999999;
    margin-top: 15px;
}

h3
{
    display: block;
    text-align: center;
}

您需要将HTML更改为：

<div id="wrap">
    <div id="header">
        <span class="claimer">Angus Animal Sanctuary</span>
    </div>

    <ul id="navigation"> 
        <li><a href="?">Home</a></li>
        <li><a href="?">About us</a></li>
        <li><a href="?">Register</a></li>
        <li><a href="?">Contact us</a></li>    
    </ul>

    <div id="slideshow">
        <img name="slide"  src="http://www.katellaclinic.com/clients/6909/images/bigstock_Group_Of_Pets_Together_In_Fron_8258872.jpg" />
    </div>

    <div id="content">
        <div id="left">
        <div class="box">
        <h3>Welcome to Angus Animal Sanctuary</h3>
        <p>Angus Animal Sanctuary is a small animal centre located in Birmingham, UK.  Our focus is on more traditional pets like cat, dogs, rabbits and birds. The objectives of this association are to take in and re-home animals and provide a special living environment. </p>
        <p>An animal adoption makes a unique gift idea for yourself or someone special and provides a valuable contribution to the running costs of Angus. With the help of our staff and volunteers we provide a special and loving atmosphere to help all our animals adapt and find permanent, loving new homes.</p> 
        <p>All potential adopters are interviewed and home vetted.</p> 
    </div>
    </div>

    <div id="right">

        <div class="box">
        <form action="form1.php" method="login">
            <h3>Login</h3> 
            <label for="name">Email*:</label> 
            <input type="text" value="" required="" placeholder="abc@mail.co.uk" maxlength="20" size="15" id="name" name="name" />

            <label for="password">Password*:</label> 
            <input type="password" value="" required="" placeholder="" maxlength="20" size="15" id="password" name="password" />
            <input type="Submit" value="Sign In" name="Submit" /> 
        </form>
    </div>
 </div>
    </div>

    <div id="footer">
        <marquee><b>All Content Copyright 2014</b></marquee>
    </div>

</div>

答案 1 :(得分：-1)

将此添加到您的CSS 

#form1{
    position:relative;
    left:195px;}

应该有所帮助。

答案 2 :(得分：-1)

用div包裹表单，然后将css posion: relative添加到此div。

相关问题
最新问题