当我重新调整浏览器大小时，所有元素都会改变它们的位置

时间：2016-03-19 12:48:45

标签： javascript html html5 css3

当我重新调整我的浏览器大小所有元素改变他们的位置可以任何人帮助我???但有些像logo和amp;我重新调整浏览器大小时的导航不受影响 我试图使位置固定绝对或静态，但没有改变

<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css?     family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;

background-image: url('dr5.jpg'); 

background-repeat:no-repeat;
margin:-70 0 0 0;
}
 #face:hover {
background: #333;

border-left: 5px solid #000;
}
#face{    MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{            
margin: 0 auto;
width: 100%;
background: #fff;
 }
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
    padding: 20px;
    background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
 }

 #header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
 }

.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
 }

.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
   }

.navigation li p{
font-size: 11px;
color: #999;

-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
   }

.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
 }

.navigation li:hover h2 {
font-weight: bold;
color: yellow;
 }

.navigation li:hover p {
color: orange;
padding-left: 5px;
 }
 #content-container
 {           float: left;
 width: 55%;
    margin-top: -25px;

margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
 }
.ti{
   border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
  clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
 }

#content h2 { margin: 0; }

#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}

 #aside h3 { margin: 0; }

 #footer{margin: 30px 20px -2px 0px;
overflow: hidden;

 border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;">      <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
    <h2>الصفحة الرئسية</h2>
    <p>main page</p>
</li></a>
<a href="f.html"><li>
    <h2>فلسفتنا</h2>
    <p>our</p>
</li></a>
<a href="how.html"><li>
    <h2>من نحن</h2>
    <p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
    <h2>الاستديو</h2>
    <p>gallary</p>
</li></a>
    <a href="https://www.facebook.com/ADAM.KIDS.JORDAN/?fref=ts"><image id="face" src="face.jpg" width="80px" height="80px"/></a>

</ul>
<div id="content-container">
    <div id="content">
        <h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;">     كلمة ترحيبية    </h2>
        <p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
        مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا أن رأيكم مهم لدينا وسيساعدنا على لتطور .
نأمل أن تجدوا المعلومات التي تبحثون عن
ها على موقعنا الالكتروني
 ، ولمزيد من المعلومات أو الاستفسارات الرجاء طلب ذلك، 
 وسوف يسعد نا توفيرها لكم نتطلع إلى الترحيب بكم في 
 روضتنا ونأمل أن يعودو أطفالكم بذكريات جميلة و تجربة
 فريدة.
            </p>

    </div>
    <div id="aside">
        <h3>
  <div class="ti" >
 <p id="time"style="margin-left:20%;margin-top:70px;"></p>

  <script>
  var x=setInterval(function(){myTimer()},1000);

   function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString();
}</script>
<p id="date"style="margin-left:15%"></p>
<p style="margin-left:30%"><a href="game.html" style="color:green;">اتسلى    معنى</a></p>
 <script>
  var d = new Date();
  document.getElementById("date").innerHTML = d.toDateString();
   </script><br><br>
   </script>
 </div>
</div>
  <div id="footer"><h2 style="margin-top:7px;float:right;margin-right:30px;color:green;font-size:30px;">:اتصل بنا</h2></div>
<h4 style="font-size:18px;float:right;margin-top:-60px;margin-right:50px;">065925575 - 0796877760<br> 065925575 فاكس </h4>
<h2 style="margin-top:-94px;float:left;margin-left:30px;color:green;font-size:30px;">:البريد الالكتروني</h2>
<h4><a style="margin-left:30px;margin-top:-40px;clear:left;color:black;float:left;font-size:18px;" href="mailto:info@adam-kids.com">info@adam-kids.com</a></h4 >
  <h2 style="float:right;margin-top:-100px;margin-right:150px;color:green;font-size:30px;">:العنوان</h2>
   <h4 style="margin-bottom: auto;margin-top:-67px;margin-right:80px;font-size:18px;width:190px;float:right;">
 بناية رقم 9 - شارع علي سيدو الكردي
  - خلف كنيسة اللاتين - عبدون الشمالي
 - عمان - الأردن


</h4>

</div>

</body>
 </html>

3 个答案:

答案 0 :(得分：2)

你需要让你的CSS响应。通过响应，我的意思是你的CSS应该能够对不同的浏览器宽度和高度做出反应。

这是一个很大的话题，但一个好的起点可能就在这里：

  

http://www.w3schools.com/css/css_responsive_intro.asp

您还应该研究CSS框架，例如Bootstrap或Foundation：

  

http://getbootstrap.com/

     

http://foundation.zurb.com/

这两个都有大量的在线教程，您可以从中学习。我提供的w3schools链接为您提供了Bootstrap的基本介绍。

答案 1 :(得分：0)

使用浏览器开发工具查看元素的属性并检查它们的行为方式。对于您的示例，使用＆＃39;导航＆＃39; class的margin-left设置为20％，这使得它在页面总宽度改变时改变位置。

但我必须同意其他人的意见，并请您详细了解该主题，以便了解您正在使用的样本。

答案 2 :(得分：0)

这种情况正在发生，因为您在CSS中混合了固定单位和相关单位。

像素这样的固定单位即使在调整浏览器大小时也能保持指定的大小，而像百分比这样的相对单位会做出反应并适应调整大小。

考虑固定单位会根据您的网站查看设备创建大量水平滚动，但相关单位会重新整理您的网页以便更好地展示，这就是我们所说的＆ ＃34;响应＆＃34;

相关问题
最新问题