центральных DIV двигается вокруг сайта при изменении размера окна браузера

Моего центральный блок продолжает двигаться влево при изменении размера окна браузерацентральных DIV двигается вокруг сайта при изменении размера окна браузера

нормального:

http://imgur.com/b2AVkUx

после изменения размера окна браузера:

http://imgur.com/mJq6AuO

так мне удалось выяснить, как сохранить нави и нижний колонтитулы относительно ненадежный во время изменения размера, но я просто не могу понять, как бороться с телом, пожалуйста, помогите?

HTML:

<html> 
<head> 
    <title>Line After Line</title> 
    <link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 

</head> 

<body> 
    <div id = "top"> 
     <div id = "opening"> 
      <a href = "index.html"> 
       <h1 id = "logo"> Line After Line </h1> 
      </a> 
     </div> 

     <div id = "navi"> 
      <ul> 
       <li> Read </li> 
       <li> Write</li> 
       <li> Review </li> 
       <li> Donate </li> 

      </ul> 
     </div> 
    </div> 


    <div id = "updates"> 
     <h4>Updates</h4> 
     <ul> 
      <li> number one blah blah blah blah blah hahahahaahah </li> 
       </br> 
      <li>number two blah blah blah </li> 
     </ul>  
    </div> 

    <div id = "story"> 
     <a href = "blockOne.html"> 
      <div class = "storyblocks" id = "blockOne" > 
       <p> Hello I this is a test block </p> 
      </div> 
     </a> 

     <div class = "storyblocks" id = "blockTwo"></div> 
     <div class = "storyblocks" id = "blockThree"></div> 
     <div class = "storyblocks" id = "blockFour"></div> 
     <div class = "storyblocks" id = "blockFive"></div> 
     <div class = "storyblocks" id = "blockSix"></div> 
    </div> 

    <div id = "footer"> 
     <ul> 
      <li> Home </li> 
      <li> A Message From Chung</li> 
      <li> Contributors </li> 
      <li> About </li> 
      <li> Contact </li> 

     </ul> 
    </div> 


</body>

CSS:

*{ 
    margin: 0px; 
    padding: 0px; 
    } 
    ul{ 
    list-style-type: none; 
    } 

    body{ 
    background-color: white;  
    } 

body a { 
    text-decoration: none; 
} 

#top{ 
    background-color: black; /*use to see div area*/ 
    height:75px; 
    margin-bottom: 1.5%; 
    padding: 5px; 
} 

/*div surrounding the Logo */ 
#opening{ 
    margin-left: 100px; 
    width: 300px; 
} 

#logo{ 
    color: white; 
    font-family: verdana; 
    float:left; 
    margin-top: 15px; 
} 

#navi{ 
    /*background-color: red;*/ 
    width: 1100px; 
    left: 200px; 
    margin-top: 20px; 
    margin-right: 100px; 
    position: relative; 

} 

#navi ul li { 
    font-weight: bold; 
    color: white; 
    display: inline; 
    text-decoration: none; 
    font-family: Calibri; 
    font-size: 26px; 
    margin: 0px 60px 0px 60px; 

} 



#updates{ 
    /*background-color: blue; /* use to see div area */ 
    color: #6D8582 ; 
    font-family: verdana; 
    margin-left: 5%; /*100px*/ 
    margin-bottom: 10px; 
    height: 600px; 
    width: 300px; 
    border-right: thick solid #6D8582; 
    float: left; 
    position: relative; 


} 

#updates h4 { 
    text-align: center; 
    padding: 10px; 
} 

#updates ul { 
    margin-left: 20px; 
    list-style-type: none; 
} 


#story , #mainStory{ 
    /*border: thin solid black;*/ 
    /*background-color: red;*/ 
    float: right; 
    margin-left: 27%; 
    margin-bottom: 10px; 
    position: absolute;/* relative*/ 
    width: 1145px; 
    height: 600px; 
    overflow: auto; 
    border-radius: 5px; 

} 

#mainStory { 
    background-color: #F7F9FA; 
    width: 1050px; 
    margin-right: 4.5%; 

} 

#mainStory p { 
    color: black; 
    font-family: Calibri; 
    font-size: 18px; 
    padding-left: 50px; 
    padding-right: 50px; 
    text-indent:50px; 
} 

#mainStory h2{ 
    margin-top: 10px; 
    margin-bottom: 10px; 
    text-align: center; 
} 

.storyblocks{ 
    color:black; 
    display:inline-block; 
    line-height: 50px; 
    margin: 5px; 
    width: 200px; 
    height: 200px; 
    border-radius: 5px; 
    text-align: center; 
    vertical-align: top; 
    opacity: 0.6; 
} 



#blockOne{ 
    /*border: thick solid blue; /*delete later*/ 
    background-color: #2A9BB5; 

} 

#blockTwo{ 
    /*border: thick solid green; /*delete later*/ 
    background-color: #17EB0C; 

} 

#blockThree{  
    /*border: thick solid yellow; /*delete later*/ 
    background-color: #F0F035; 

} 

#blockFour{ 
    /*border: thick solid red; /*delete later*/ 
    background-color: #F02E4E; 

} 

#blockFive{ 
    /*border: thick solid purple; /*delete later*/ 
    background-color: #DA41E8; 

} 

#blockSix{ 
    /*border: thick solid green; /*delete later*/ 
    background-color: #FC62B2; 

} 



#footer { 
    background-color: black; 
    text-align:center; 
    position: absolute; 
    clear: left; 
    height:34px; 
    bottom: 0; 
    width:100% 

} 


#footer ul li { 
    color: white; 
    text-decoration: none; 
    display: inline; 
    font-family: Calibri; 
    font-size: 16px; 
    margin-left:50px; 
    margin-right:50px; 
}

источник

2013-11-17 Chung

, если вы думаете о логически становится настолько абсурдной. Вы используете право в качестве ссылки, но также используете визуальную ссылку с элементами слева, но не сообщаете об этом компьютеру и ожидаете, что компьютер это поймет. – Techsin

Это происходит потому, что у вас есть фиксированная ширина и плывут вправо. Ваш div с боксами пытается оставаться выровненным с правой стороны окна браузера, и поскольку вы не позволяете изменять его размер, он перемещается. Либо сделайте ширину в процентах, либо не плавайте вправо и оставите маржу 300px

источник

2013-11-17 22:57:53 cameronjonesweb

спасибо за подсказку! Просто начал фактически внедрять CSS и понял, что многие атрибуты не могут объединиться. – Chung

На самом деле у вас возникла проблема с отзывчивым дизайном. Если у вас нет каких-либо из элементов (боковая панель или контент), зафиксированных вы можете использовать PRECENTAGE на обеих из них, как:

#nav { 
    width:27%; 
    display:inline-block; 
    vertical-align:top; 
    padding-right:1%; 
    margin-right:1%; 
    border-right:1px solid #ccc; 
    } 
    #content { 
    width:70%; 
    display:inline-block; 
    vertical-align:top; 
    }

Если вы что-то фиксированное (скажем врезка), вы должны использовать CSS медиазапросов и создать несколько «шаблонов» для определенных интервалов разрешения (ширины).

У вас есть пример, который использует размеры PRECENTAGE обеих сторон: http://jsfiddle.net/7Qpw6/

источник

2013-11-17 23:04:51 stefanz

центральных DIV двигается вокруг сайта при изменении размера окна браузера

ответ

Смежные вопросы