Уменьшение размера веб-сайта искажает содержимое

Я новичок в дизайне пользовательского интерфейса, и я пытаюсь создать макет с вкладками.Уменьшение размера веб-сайта искажает содержимое

Все вкладки в центре верхней части, а затем есть две дивы друг на друга:

Синий Div
Красный Div

Проблема с масштабированием и из.

Уменьшить смещение всех вкладок (вкладка F перемещается в другую строку).
же рода проблемы с увеличением в: Содержание перемещается где-то в другом месте отдельно от их первоначального позиционирования

Я просто хочу сигналить, чтобы работать так же, как образ масштабирования. Содержимое не должно двигаться нигде.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<title>Insert title here</title> 
 
<style type="text/css"> 
 
body,html { 
 
\t height: 100%; 
 
} 
 

 
div.tabcontents { 
 
\t padding: 1%; 
 
\t background-color: black; 
 
\t color: white; 
 
\t height: 80%; 
 
\t background-color: blue; 
 
\t margin-left: 10%; 
 
\t margin-right: 10%; 
 
} 
 

 
ul.tabs { 
 
\t padding: 1% 0; 
 
\t font-size: 0; 
 
\t margin: 0; 
 
\t list-style-type: none; 
 
\t text-align: right; 
 
} 
 

 
ul.tabs li { 
 
\t display: inline; 
 
\t margin: 0; 
 
\t margin-right: 1%; /*distance between tabs*/ 
 
\t font: normal 14px Verdana; 
 
\t padding: 0.5% 4%; 
 
\t border: 1px solid white; 
 
\t border-bottom-color: black; 
 
\t color: white; 
 
} 
 

 
ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab { 
 
\t background: black; 
 
\t color: white; 
 
} 
 

 
ul.tabs li a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
} 
 
</style> 
 
</head> 
 
<body bgcolor="black"> 
 
\t 
 
\t \t <ul class="tabs" style="margin-right: 19%"> 
 
\t \t \t <li id="admin" class="activeTab"><a>tabA</a></li> 
 
\t \t \t <li id="admin" class="activeTab"><a>tabB</a></li> 
 
\t \t \t <li id="admin" class="activeTab"><a>tabC</a></li> 
 
\t \t \t <li id="admin" class="activeTab"><a>tabD</a></li> 
 
\t \t \t <li id="admin" class="activeTab"><a>tabE</a></li> 
 
\t \t \t <li id="admin" class="activeTab"><a>tabF</a></li> 
 

 
\t \t </ul> 
 
\t \t <div class="tabcontents"> 
 
\t \t \t <div style="height: 100%; background-color: red"></div> 
 
\t \t </div> 
 
\t 
 
</body> 
 
</html>

источник

2015-03-08 New Bee

Почему вы делаете * все * значения в процентах? Это обязательно закончится проблемами. –

Даже если я изменил прописку и поля в пикселях, проблема будет такой же. Я просто хочу, чтобы подобная масштабируемая масштабируемая поддержка поддерживалась как веб-сайт stackoverflow. Zoomin и zoomout никогда не перемещают контент в любом месте (только шрифт уменьшается или увеличивается). –

Попробуйте удалить Перетяжка из списка вкладок

ul.tabs li { 
    display: inline; 
    margin: 0; 
    margin-right: 1%; /*distance between tabs*/ 
    font: normal 14px Verdana; 
    padding: 0.5% 4%; /*Remove This*/ 
    border: 1px solid white; 
    border-bottom-color: black; 
    color: white;

ваш новый CSS будут как выглядит

ul.tabs li { 
     display: inline; 
     margin: 0; 
     margin-right: 1%; /*distance between tabs*/ 
     font: normal 14px Verdana; 
     border: 1px solid white; 
     border-bottom-color: black; 
     color: white;

Кроме того, я сделал следующие изменения:

ul.tabs { 
      padding: 1% 0; 
      font-size: 0; 
      margin: 0; 
      list-style-type: none; 
      text-align: center; /* Text made center*/ 
     }

Убрана Стиль от

<ul class="tabs" style="margin-right: 19%">

теперь выглядит <ul class="tabs">

Весь код:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Insert title here</title> 
    <style type="text/css"> 
     body,html { 
      height: 100%; 
     } 

     div.tabcontents { 
      padding: 4%; 
      color: white; 
      height: 80%; 
      background-color: blue; 
      margin-left: 10%; 
      margin-right: 10%; 
     } 

     ul.tabs { 
      padding: 1% 0; 
      font-size: 0; 
      margin: 0; 
      list-style-type: none; 
      text-align: center; 
     } 

     ul.tabs li { 
      position:static; 
      max-width: 80%; 
      display: inline; 
      margin: 3px; 
      margin-right: 1%; /*distance between tabs*/ 
      font: normal 14px Verdana; 
      border: 1px solid white; 
      border-bottom-color: black; 
      color: white; 
     } 

     ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab { 
      background: black; 
      color: white; 
     } 

     ul.tabs li a { 
      text-decoration: none; 
      color: white; 
     } 
    </style> 
</head> 
<body bgcolor="black"> 

<ul class="tabs" > 
    <li id="admin" class="activeTab"><a>tabA</a></li> 
    <li id="admin" class="activeTab"><a>tabB</a></li> 
    <li id="admin" class="activeTab"><a>tabC</a></li> 
    <li id="admin" class="activeTab"><a>tabD</a></li> 
    <li id="admin" class="activeTab"><a>tabE</a></li> 
    <li id="admin" class="activeTab"><a>tabF</a></li> 

</ul> 
<div class="tabcontents"> 
    <div style="height: 100%; background-color: red"></div> 
</div> 

</body> 
</html>

источник

2015-03-08 16:22:13

Уменьшение размера веб-сайта искажает содержимое

ответ

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