<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру

PHP и MySQL с Нуля до Гуру

Данный курс - это более 20-ти часов видеоуроков по изучению PHP и MySQL. Ключевой момент курса - это создание движка для сайта с нуля. Каждая строчка комментируется. Практически для каждого урока имеются упражнения. Причём данные упражнения направлены не только на закрепление материала, но и на реализацию реальных задач, встающих перед Web-разработчиками при создании сайтов. После курса Вы сможете без проблем создавать движки для любых сайтов.

Также почти к каждому уроку идут упражнения для закрепления материала.

Просмотрев курс и выполнив упражнения, Вы сможете без проблем создавать функциональные движки для самых различных сайтов.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Плавает/выходит текст с шапки сайта. Как решить проблему?
09.04.2013 21:07:05 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #1
aqva_spirt

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;
}


Это без скроллинга.


Как только изменил масштаб вот так выходит за картинку
Профиль Ответить
09.04.2013 21:13:59 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Используйте относительные величины, то есть проценты для задания отступов.
Профиль Ответить
09.04.2013 21:23:25 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #3
aqva_spirt

aqva_spirt

Новичок

Новичок

Дата регистрации:
09.04.2013 20:56:45

Сообщений: 6

Задал

#logo {
left: 5%;
position: absolute;
top: 15%;
bottom:72%;
}

Все-равно при скроллинге надпись выходить за задний фон =(
Профиль Ответить
09.04.2013 21:30:43 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Уберите bottom.
Профиль Ответить
09.04.2013 21:44:56 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #5
aqva_spirt

aqva_spirt

Новичок

Новичок

Дата регистрации:
09.04.2013 20:56:45

Сообщений: 6

Убирал =( Не получается никак(
Профиль Ответить
10.04.2013 11:10:46 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Уберите из кода всё лишнее и выложите его сюда.
Профиль Ответить
10.04.2013 11:12:59 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #7
katushka

katushka

Освоившийся

Освоившийся

Дата регистрации:
04.11.2012 07:13:39

Сообщений: 24

Если я не ошибаюсь - это шаблон из д\з по вёрстке, лично я оставила слой с логотипом когда вырезала, а можно изображением вырезать и забить в таблицу. Кстати, чтобы не было проблем с расположением блоков при разной ширине экрана можно сделать вёрстку фиксированной.
Профиль Ответить
10.04.2013 11:56:31 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #8
aqva_spirt

aqva_spirt

Новичок

Новичок

Дата регистрации:
09.04.2013 20:56:45

Сообщений: 6

Да, вы правильно поняли, этот макет из урока. Я хочу его сверстать.
В том то и прикол, я хочу сделать именно резиновую верстку с логотипом в виде текста а не картинки. Если бы была картинка, вопрос бы отпал).

Код:

<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>


#header img {
width: 100%;
}

#logo {
left: 10%;
position: absolute;
top: 15%;
}

.leftmainlogo {
font-size: 270%;
color: white;
margin:0;

}

.underlogogrey {
color:#9c9c9c;
margin:0;
}


Зы: Еще раз повторю проблемму.
Надпись на картинке BoxandCube и т д выходит за границу. Тобеж при масштабировании в браузерах или при изменении разрешения экрана текст на картинке выходит за картинку вниз. Как видно на фото сверху.
Или проблемма с картинкой?
Тоже самое присходит когда я попробовал сделать меню на этой картинке. При изменении разрешения текст меню на этой картинке смещается и не занимает нужную зону.

Может мне снять видео для понятия о чем я говорю?
Просто это мне нужно, так как без этого не видать мне нормальной блочной версти((
Профиль Ответить
10.04.2013 12:06:32 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #9
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Я вижу тут только единственный вариант указать абсолютные значения такие, чтобы при ширине 1024 никуда не вылазило, но и чтобы при больших разрешениях смотрелось всё нормально. Сайт, который Вы прислали в личных сообщениях мне в контакте проще, там просто чёрный фон, а не картинка. Проблема здесь в том, что высота изменяется, если бы она сохранялась, то тогда относительные размеры были бы решением проблемы. Но здесь нельзя оставлять высоту неизменной, так как тогда сама шапка будет искажаться.
Профиль Ответить
10.04.2013 13:06:55 Плавает/выходит текст с шапки сайта. Как решить проблему? Сообщение #10
aqva_spirt

aqva_spirt

Новичок

Новичок

Дата регистрации:
09.04.2013 20:56:45

Сообщений: 6

Спасибо!
Попробую сегодня вечером сообразить.
Не думал что с этим проблеммы возникнут(
Профиль Ответить