HTML5 с элементами CSS перемещаются при масштабировании

Question

HTML5 с элементами CSS перемещаются при масштабировании

0

Привет, ребята, это может быть легким вопросом, но я немного борюсь с этой проблемой на моей странице HTML и CSS.

Проблема: когда я увеличиваю масштаб, часть "Секция" перемещается под навигацию, и когда я уменьшаю масштаб, нижний колонтитул перемещается рядом с частью раздела.....

Вот пример моей HTML-страницы:

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<header>
   Header
  </header>


<body>



  <nav>
      <ul>
          <li>
             Tab1 
          </li>
          <li>
            Tab2 
          </li>
          <li>
             Tab3 
          </li>
          <li>
             Tab4 
          </li>
          <li>
             Tab5
          </li>


      </ul>
  </nav>



  <section id="">
 Section
  </section>

  <footer>
  Footer
  </footer>



</body>


</html>'

вот страница CSS:

header
{
    width: 1325px;
    height: 150px;
    background-color: green;
    position: relative;
}

nav
{
    position: relative;
    width: 400px;
    height:  500px;
    background-color: teal;
    float: left;
    overflow: hidden;
}

section
{
    position: relative;
    float: left;
    width: 925px;
    height: 500px;
    background-color: blue;
}

footer
{
      float: left;
    width: 1325px;
    height: 50px;
    background-color: lime;
    position: relative;
    overflow: hidden;    
}

спасибо за вашу помощь и время заранее

MKSA 07 окт. 2013, в 18:09

Источник

2

Просто быстрое замечание, прежде чем я проверю вашу проблему. Вы используете синтаксис ul и li неправильно. li - ребенок ul не родитель.
Jacques ジャック 07 окт. 2013, в 15:19

Теги:

html

css

html5

css-position

3 ответа

0

Я не совсем уверен, почему он так двигается, но я знаю простое решение: все это в обертке. Скопируйте/вставьте это:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="wrapper">
    <header>
      Header
    </header>
     <nav>
      <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
        <li>Tab 5</li>
      </ul>
    </nav>
    <section id="">
      Section
    </section>
    <footer>
      Footer
    </footer>
  </div>
</body>
</html>

Имейте в виду, что все теги <head> должны находиться внутри тегов <body>, кроме ваших тегов doctype и <html>, включая теги <header>.

Во всяком случае, то, что мы сделали выше, обертывает все в "div", средство, с помощью которого мы можем разделить веб-страницу вверх. Их легко контролировать с помощью css, и вы должны скопировать/вставить следующее в конец вашего файла css:

.wrapper {
    width: 1325px;
}

Дайте мне знать, если вам нужна дополнительная помощь: D

Ancestral Nyx 07 окт. 2013, в 13:38

0

Джек прав, и вы можете попробовать добавить контейнер к своим элементам. Смотрите эту скрипку: JSFiddle. По сути, все они

position: relative

без необходимости иметь абсолютно позиционируемый контейнер. Добавление контейнера для упаковки с помощью CSS:

position: absolute;
height: 700px;
width: 1325px;

Держи все в строю. Дайте мне знать, если это не то, чего вы пытались достичь!

Ryan Miller 07 окт. 2013, в 12:42

Ещё вопросы

Просто быстрое замечание, прежде чем я проверю вашу проблему. Вы используете синтаксис ul и li неправильно. li - ребенок ul не родитель.

Jacques · Accepted Answer · 2013-10-07T14-07-00.000Z

Тег body должен находиться перед заголовком. Добавьте обертку с шириной в HTML/CSS.

Вот скрипка: http://jsfiddle.net/msJLW/

<div id="wrap">
<header>
   Header
  </header>
  <nav>
      <ul>
          <li>
             Tab1 
          </li>
          <li>
            Tab2 
          </li>
          <li>
             Tab3 
          </li>
          <li>
             Tab4 
          </li>
          <li>
             Tab5
          </li>
      </ul>
  </nav>
  <section id="">
 Section
  </section>

  <footer>
  Footer
  </footer>

</div>

#wrap{
    width:1325px;
}
header
{
    width: 1325px;
    height: 150px;
    background-color: green;

}

nav
{
    width: 400px;
    height:  500px;
    background-color: teal;
    float: left;
    overflow: hidden;
}

section
{
    float: left;
    width: 925px;
    height: 500px;
    background-color: blue;
}

footer
{
      float: left;
    width: 1325px;
    height: 50px;
    background-color: lime;
    overflow: hidden;    
}

спасибо Джек, забыл об этом, ценю помощь