Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.12.2015, 02:32   #1
VitalikA
Пользователь
 
Регистрация: 06.04.2012
Сообщений: 23
По умолчанию Верстка. Сдвигается текст.

Здрасьте. Делаю страницу. Страница статична.
Есть проблема.
При масштабировании, а именно при уменьшении масштаба, сдвигается текст (меню).
Как сделать чтобы даже при минимальном масштабе пункты меню оставаться на своем месте?

и расположение верхнего в правом углу экрана тоже меняется ... почему?

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eco</title>
<meta http-equiv="Content-Type" content="text/html; charset="windows-1251">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper"><!-- wrapper-->

<div class="header"><!-- header-->

<div class="hline">
<h1 class="name">Меблi на замовлення</h1>
<ul>
<li>Головна</li>
<li>Про нас</li>
<li>Як купити?</li>
</ul>
</div><!-- hline-->

<div class="himg"></div><!-- himg-->

<div class="hline2"><!-- hline2-->
<ul>
<li>Аптека</li>
<li>Шафа</li>
<li>Ліжко</li>
<li>Ванна</li>
<li>Вітальня</li>
<li>Офіс</li>
<li>Бібліотека</li>
<li>Шафи кутові</li>
<li>Комоди</li>
<li>Столи</li>
<li>Прихожа</li>
<li>Шафи купе</li>
<li>Кухня</li>
</ul>
</div><!-- hline2-->

</div><!-- header-->

<div class="con"></div><!-- con--><!-- con-->

</div><!-- wrapper-->
</body>
</html>
Код:
* {margin: 0; padding: 0;}

body {background-color: #F5F5F5;}

.wrapper {width: 1200px; max-width: 1200px; margin: 0 auto;}

.hline {width: 1200px; height: 40px; background-color: #241313; position: relative;}
.himg {width: 1200px; height: 256px; background: url(images/himg.jpg) no-repeat;}
.hline2 {width: 1200px; height: 40px; background-color: #241313; position: relative; }

.hline ul {list-style: none; color: white; position: absolute; right: 20px; top: 9px; font-family: Respect Narrow;}
.hline ul li {display: inline; padding: 0 10px;}

.name {color: white; position: absolute; left: 10px; top: 4px; font-family: PALETTE; font-size: 40px;}

.hline2 ul{list-style: none; color: white; position: absolute; font-family: Respect Narrow; left: 60px; top: 10px;}
.hline2 ul li {display: inline; padding: 0 9px;}

.con {width: 1200px; height: 700px; background: url(images/bg.jpg) no-repeat;}
Изображения
Тип файла: jpg Безымянный.jpg (43.6 Кб, 128 просмотров)
VitalikA вне форума Ответить с цитированием
Старый 15.12.2015, 00:20   #2
Gxxx28
 
Регистрация: 18.10.2013
Сообщений: 8
По умолчанию

У меня все ок. С перва подумал может разные браузеры и тестил на Мозила , Хроме и Експлоре. Текст не переходит!
Может конфликт где нибуть в другом CSS если подключил.


Вот твой код :
Код HTML:
<style>
* {margin: 0; padding: 0;}

body {background-color: #F5F5F5;}

.wrapper {width: 1200px; max-width: 1200px; margin: 0 auto;}

.hline {width: 1200px; height: 40px; background-color: #241313; position: relative;}
.himg {width: 1200px; height: 256px; background: url(images/himg.jpg) no-repeat;}
.hline2 {width: 1200px; height: 40px; background-color: #241313; position: relative; }

.hline ul {list-style: none; color: white; position: absolute; right: 20px; top: 9px; font-family: Respect Narrow;}
.hline ul li {display: inline; padding: 0 10px;}

.name {color: white; position: absolute; left: 10px; top: 4px; font-family: PALETTE; font-size: 40px;}

.hline2 ul{list-style: none; color: white; position: absolute; font-family: Respect Narrow; left: 60px; top: 10px;}
.hline2 ul li {display: inline; padding: 0 9px;}

.con {width: 1200px; height: 700px; background: url(images/bg.jpg) no-repeat;}

</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eco</title>
<meta http-equiv="Content-Type" content="text/html; charset="windows-1251">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper"><!-- wrapper-->

<div class="header"><!-- header-->

<div class="hline">
<h1 class="name">Меблi на замовлення</h1>
<ul>
<li>Головна</li>
<li>Про нас</li>
<li>Як купити?</li>
</ul>
</div><!-- hline-->

<div class="himg"></div><!-- himg-->

<div class="hline2"><!-- hline2-->
<ul>
<li>Аптека</li>
<li>Шафа</li>
<li>Ліжко</li>
<li>Ванна</li>
<li>Вітальня</li>
<li>Офіс</li>
<li>Бібліотека</li>
<li>Шафи кутові</li>
<li>Комоди</li>
<li>Столи</li>
<li>Прихожа</li>
<li>Шафи купе</li>
<li>Кухня</li>
</ul>
</div><!-- hline2-->

</div><!-- header-->

<div class="con"></div><!-- con--><!-- con-->

</div><!-- wrapper-->
</body>
</html>
Изображения
Тип файла: jpg 12395386_856479354468926_513958182_n.jpg (62.1 Кб, 42 просмотров)
Gxxx28 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сдвигается шапка и меню Volwis HTML и CSS 1 30.07.2013 19:01
сдвигается блок Qaliti HTML и CSS 1 27.06.2011 16:29
Сдвигается ListView при загрузке формы pooli Microsoft Office Excel 0 13.10.2010 01:04
В IE сдвигается таблица внутри блока Bendebej HTML и CSS 1 17.02.2010 16:24
сдвигается sidebar в ie6 coolerS HTML и CSS 0 12.12.2009 15:22