При изменении масштаб текст выходит за пределы блока

@1Ignis1 · Регистрация: 14.06.2015

Author24 — интернет-сервис помощи студентам

Вот есть три дива меню текст по центру и фотка!!
При увиличении зума браузере текст тот что по центру(div class=text) вылазит на меню и под фотку. Тоисть для него нет границ!!

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict/dtd">
<html>
<head>
<title> Наруто Фан </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<img src ="page/sasuke.jpg"
width="100%" height="150px"> 
 
<body> 
<h1><center><i>Добро пожаловать!</h1></center></i>
 
 
<!--MAIN-->
 
<div class="Lin1">
<div class="Lin2">
<div>
<p class="underlines"><a href = "index.html">Главная </a>
</p>
<p class="underlines"><a href ="way of the ninja.html">Путь ниндзя</a>
</p>
<p class="underlines"><a href ="series overview.html">Обзоры серий </a>
</p>
<p class="underlines"><a href = "gallery.html">Галерея</a>
</p>
<p class="underlines"><a href="top 10.html">Топ 10 техник</a>
</p>
<p class="underlines">Форум</p>
</div>
</div>
</div>
 
<div class="text">
 
<p><center><b><font color ="#C71585">Сайт посвящен манге о НАРУТО!</p></center></b></font> 
<p>"НАРУТО" - манга Масаси Кисимото в жанре сёнэн и её аниме-экранизация. Главным её героем является Наруто  </p>
<p>Удзумаки, шумный и непоседливый ниндзя-подросток, который мечтает достичь всеобщего признания и стать   </p>
<p>Хокагэ — главой своего селения и сильнейшим ниндзя.Чтобы добиться уважения окружающих, ему предстоит </p>
<p>пройти через тысячи препятствий: экзамены ниндзя, различные миссии и сражения.</p>
<p>Также, на сайте вы узнаете много интересного о героях,кланах и техниках, которые были показаны в анимэ.</p>
 
</div>
 
<div class ="photo">
<img src="page/naruto3.jpg"
width="22%" height="50%">
</div>
</body>
</html>

Вот СSS

CSS

.Lin1 {
width:330px;
height:151px;
border-top:4px solid #9370DB;
}
.Lin2 {
width:300px;
height:440px;
border-left:4px solid #9370DB;
margin-left:20px;
padding-left:5px;
padding-top:4px;
}
 
.text{text-align:center;
      margin-top:-140px;
      margin-left: -100px;
      letter-spacing:2px;
      font-size:17px;
      font-weight:bold; 
      color:#663399;
      
}
           
      
.photo {text-align:right;
       margin-top:-200px;
        }

@Jho · 14.06.2015, 22:27

Поставь значение font-size не в px,а в em.То есть:

CSS

1
2
3

.text{
 font-size:1.2em;
}

Ну подберешь соответственно

@1Ignis1 · 14.06.2015, 22:48 **[ТС]**

Всеравно при смене разрешения или запуске сайта на планшете или ноута текст вылазит на меню

@andrey1994 · 15.06.2015, 09:15

Вёрстка кривая. Используйте готовые шаблоны.

@1Ignis1 · 17.06.2015, 10:11 **[ТС]**

Хотелось бы узнать где ошибка самому? Укажите плз

@1Ignis1 6 / 6 / 3 Регистрация: 14.06.2015 Сообщений: 54
	14.06.2015, 22:48 [ТС]	3
	Всеравно при смене разрешения или запуске сайта на планшете или ноута текст вылазит на меню 0

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	15.06.2015, 09:15	4
	Вёрстка кривая. Используйте готовые шаблоны. 0

@1Ignis1 6 / 6 / 3 Регистрация: 14.06.2015 Сообщений: 54
	17.06.2015, 10:11 [ТС]	5
	Хотелось бы узнать где ошибка самому? Укажите плз 0