X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> тонкости position: relative
goshikvia
goshikvia
Topic Starter сообщение 27.1.2010, 18:18; Ответить: goshikvia
Сообщение #1


Доброе время суток!

Вот пришлось позиционировать сайт с помощью
position: relative;
top: -300px;

то есть так получилось что ПАПКА сдвигается вверх на 300 пикселей.

получился зазор между шапкой и текстом, следовательно я текстовую часть позиционирую как {position: relative; top: -300px;}

Получился зазор между текстовой частью и подвалом, Следовательно я поднимаю подвал на 300 пикселей вверх

И получился промежуток между подвалом и концом страницы в 300 пикселей.

Как его убрать?

Уже чего только не пробовал, помогите пожалуйста :)

P.S. Прочитал много статей на форме, но ответа не нашел.
Интересные статьи:
http://www.html.by/showthread.php?t=7977
http://www.html.by/showthread.php?t=6810
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 27.1.2010, 18:27; Ответить: alexdrob
Сообщение #2


Почему именно position :relative

может вам нужно position:absolute или margin pading
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
goshikvia
goshikvia
Topic Starter сообщение 27.1.2010, 18:29; Ответить: goshikvia
Сообщение #3


alexdrob, почему?!... наверное потому что margin отрицательный не сработал, точно не помню, помню что пробовал разными способами и вот осановился на таком :)
Проблема еще конечно что каждый браузер видет картину по своему, а position - все видят одинаково :)

просто сейчас не хочется все переделывать, да и старые версии браузеров не очень хорошо относятся к отрицательным margin'ам

может есть какой то способ сказать чтобы например body был в высоту на 300 пикселей меньше? :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 27.1.2010, 19:06; Ответить: locky-yotu
Сообщение #4


goshikvia, старые браузеры отлично понимают отрицательный маргин. Надо просто уметь его готовить) Вы бы лучше показали код, или лучше ссылку дали...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
goshikvia
goshikvia
Topic Starter сообщение 27.1.2010, 19:07; Ответить: goshikvia
Сообщение #5


Ну хотите код, дам код :)
[php]
<body>
<div id="carrier">
<img id="banner" src="img/sobor.gif" alt="Гостиницы Москвы" />
<table id="header">
<tr>
<td style="width: 49%;">
<h1>гостиницы Москвы</h1>
<p>Мы поможем вам решить эту задачу и подберем для вас самые удобные номера <a href="#">гостиниц Москвы</a>. Вам не придется, приехав в город, беспокоиться и искать, какие из гостиниц Москвы свободны.</p>
</td>
<td style="width: 51%;">
<a href="/"><img src="img/map.gif" alt="Структура" style="float:right;" /></a>
<a href="/"><img src="img/home.gif" alt="Домой" style="float:right; margin-left: 40px;" /></a>
<p style="text-align:right;">RUS ENG</p>
<p style="clear:right;">Бронирование гостиницы в Москве - это разумный и дальновидный шаг в планировании вашего визита в город. Самый удобный способ забронировать номер в гостинице Москвы - это поручить нам сделать это для вас. <a href="#">Узнать больше о нас</a></p>
</td>
</tr>
</table>
<table id="t_menu">
<tr>
<td>
<img src="img/menu_lv.gif" alt="" />
</td>
<td>
<div id="menu">
<a href="hotels.php">Гостиницы</a>
<a href="eks.php">Экскурсии</a>
<a href="bron.php">Бронирование</a>
<a href="contact.php">Контакты</a>
<a href="oplata.php">Оплата</a>
</div>
</td>
<td>
<img src="img/menu_pr.gif" alt="" />
</td>
</tr>
</table>
<div id="textcarrier">

<p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p><p>dsa</p>

</div>
<table id="t_footer">
<tr>
<td>
<img src="img/footer_lv.gif" alt="" />
</td>
<td>
<div id="footer">
<div class="a_footer">
<p class="p_footer">&copy;&nbsp;2010&nbsp;"Гостиницы Москвы"</p>
<div class="a_footer">
<a href="price.php">Цены</a>
<a href="eks.php">Бронирование</a>
<a href="bron.php">Правила</a>
<a href="contact.php">Оплата</a>
</div>
<div class="a_footer">
<a href="about.php">О сайте</a>
<a href="contact.php">Контакты</a>
<a href="hotels.php">Гостиницы</a>
<a href="eks.php">Экскурсии</a>
</div>
</div>
<img src="img/telefon.gif" alt="Гостиницы Москвы" class="a_footer" />
<div class="a_footer">
<h4>Менеджер Ирина:</h4>
<table>
<tr>
<td class="p_footer">ICQ:</td>
<td>419-549-244</td>
</tr>
<tr>
<td class="p_footer">E-mail:</td>
<td><a href="mailto:info@hotel-piter.ru" class="mail">info@hotel-piter.ru</a></td>
</tr>
<tr>
<td class="p_footer">Тел:</td>
<td>+7 (812) 458-80-47</td>
</tr>
</table>
</div>
<div class="a_footer">
<h4>Менеджер Анна:</h4>
<table>
<tr>
<td class="p_footer">ICQ:</td>
<td>497-713-995</td>
</tr>
<tr>
<td class="p_footer">E-mail:</td>
<td><a href="mailto:info@hotel-piter.ru" class="mail">info@hotel-piter.ru</a></td>
</tr>
<tr>
<td class="p_footer">Тел:</td>
<td>+7 (812) 458-80-48</td>
</tr>
</table>
</div>
</div>
</td>
<td>
<img src="img/footer_pr.gif" alt="" />
</td>
</tr>
</table>
</div>
</body>
[/php]
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
color: #000;
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background: #000;
}
a:link, a:visited {
color: #c24413;
}
a:hover {
text-decoration: none;
}
img {
border: 0px;
}
p {
margin: 8px 0px;
}
h2 {
text-align: center;
color:#8c5f1a;
}
h3 {
font-weight: 400;
font-family:"Times New Roman", Times, serif;
}
h4 {
font-size: 14px;
text-align: center;
margin-bottom: 4px;
}
/*--- Подложка всей страницы ---*/
#carrier {
text-align: left;
width: 900px;
margin: auto;
margin-top: 150px;
padding: 0px;
font-size: 13px;
background: #FFF;
}
/* Левый баннер */
img#banner {
width: 276px;
height: 241px;
position: relative;
top: -140px;
left: -10px;
}
/* шапка */
#header {
width: 665px;
height: 200px;
margin-left: 220px;
background: #fdf6e6;
border: solid 1px #ccc;
position: relative;
top: -370px;
border-collapse:collapse;
border: 0px;
}
#header h1 {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
color:#a50000;
}
#header img {
margin-left: 15px;
margin-bottom: 10px;
}
#header p {
color: #797171;
}
table#header tr {
vertical-align: top;
}
table#header td {
padding: 25px;
}
/* Меню верхнее */
#t_menu {
position:relative;
top: -380px;
left: -15px;
border-collapse:collapse;
width: 930px;
}
#t_menu td {
padding: 0px;
}
#t_menu img {
height: 62px;
width: 15px;
}
#menu {
margin-top: 14px;
width: 900px;
padding-top: 14px;
padding-bottom: 14px;
background: #0cbeea url(img/menu_p.gif) repeat-x;
}
#menu a:link, #menu a:visited {
color: #FFF;
padding-right: 30px;
padding-left: 30px;
font-size: 16px;
}
/* Основная часть - текстовая */
#textcarrier {
position:relative;
top: -380px;
}
/* Подвал */
#t_footer {
position:relative;
top: -380px;
left: -15px;
border-collapse:collapse;
width: 930px;
}
#t_footer td {
padding: 0px;
}
#footer {
margin-top: 14px;
width: 900px;
background: #ededed;
height: 160px;
}
#footer a:link, #footer a:visited {
color: #515050;
font-size: 14px;
}
#footer .a_footer {
float:left;
}
#footer .a_footer a {
display:block;
}
#footer .p_footer {
color: #696969;
}
#footer a.mail {
color: #03abd4;
}
#footer img.a_footer {
margin-top: 0px;
}


картинка того что должно быть: http://img686.yfrog.com/img686/6846/67774782.jpg

Загрузил на народ, только он что то правый бок сократил, в локалке все идеально во всех браузерах
http://goshikvia.narod.ru/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
forest69
forest69
сообщение 27.1.2010, 23:36; Ответить: forest69
Сообщение #6


а разве если задаешь

position: relative;


не нужно писать отступы в процентах??
ведь релатив это относительный, а пиксели абсалютный
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
goshikvia
goshikvia
Topic Starter сообщение 28.1.2010, 0:08; Ответить: goshikvia
Сообщение #7


forest69, в процентах или в пискелях это все равно, хоть в граммах ;)

relative - это относительно КОНТЕКСТА!!! т.е. относительно того места где он должен стоять.



Помогите пожалуйста, как убрать нижний отступ после повала?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 17.4.2024, 1:47

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet