09.04.2013 21:07:05 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #1
aqva_spirt
Новичок
Дата регистрации:
09.04.2013 20:56:45
Сообщений: 6
Всем привет!
Столкнулся с такой проблемой.
Создаю шапку сайта, вставляю изображение и накидываю на него блоки с текстом и ссылками. Первый блок это название сайта.
При изменение масштаба в браузере или разрешения экрана этот блок с текстом выходит за картинку =(
Как решить проблему?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Box&Cube </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<link href="favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div id="header">
<img src="images/header.jpg" alt="Шапка сайта" />
<div id="logo">
<p class="leftmainlogo"> Box&Cube </p>
<p class="underlogogrey"> create & innovate solutions </p>
</div>
</div>
</body>
</html>
CSS
/* Head */
#header img {
width: 100%;
}
#logo {
left: 89px;
position: absolute;
top: 101px;
}
.leftmainlogo {
font-size: 270%;
color: white;
margin:0;
}
.underlogogrey {
color:#9c9c9c;
margin:0;
}
Это без скроллинга.
Как только изменил масштаб вот так выходит за картинку
Столкнулся с такой проблемой.
Создаю шапку сайта, вставляю изображение и накидываю на него блоки с текстом и ссылками. Первый блок это название сайта.
При изменение масштаба в браузере или разрешения экрана этот блок с текстом выходит за картинку =(
Как решить проблему?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Box&Cube </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<link href="favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div id="header">
<img src="images/header.jpg" alt="Шапка сайта" />
<div id="logo">
<p class="leftmainlogo"> Box&Cube </p>
<p class="underlogogrey"> create & innovate solutions </p>
</div>
</div>
</body>
</html>
CSS
/* Head */
#header img {
width: 100%;
}
#logo {
left: 89px;
position: absolute;
top: 101px;
}
.leftmainlogo {
font-size: 270%;
color: white;
margin:0;
}
.underlogogrey {
color:#9c9c9c;
margin:0;
}
Это без скроллинга.
Как только изменил масштаб вот так выходит за картинку
