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



 

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

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

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Позиционирование элемента на странице
Semyon_hb
Semyon_hb
Topic Starter сообщение 8.12.2008, 18:17; Ответить: Semyon_hb
Сообщение #1


Здравствуйте! Я создал в html файле таблицу, а в css определял как будут располагаться ее ячейки на странице с помощю абсолютного позиционирования (position:absolute) все шло хорошо, но вот мне нужно сделать, чтобы элемент располагался в самом низу (сразу после содержания) но так как неизвестно сколько именно займет содержание, я немогу точно определить сколько пикселей должен быть отступ от верха страницы... вообще возможно как-то решить данную проблему?

Заранее большое спасибо за советы!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 8.12.2008, 18:28; Ответить: Webmaster_hb
Сообщение #2


можно через javascript получить значение высоты какого-либо элемента и потом присвоить отступ от верха...

а в вашем случае не вижу проблем, ставите элементы один за другим и всё
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Semyon_hb
Semyon_hb
Topic Starter сообщение 8.12.2008, 18:36; Ответить: Semyon_hb
Сообщение #3


Понимаете, когда я создаю к примеру новую ячейку в файле html и например не указываю позиционирование, то элемент появляется в левом верхнем углу, но чтобы задать отступ от верха страницы, я должен знать заранее, сколько займет содержание, чтобы задать такой отступ, ведь мне нужно чтобы после содержания сразу же шел элемент, а если я к примеру задам top:100px; то если содержание займет 150px эти элементы просто наложатся друг на друга.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 8.12.2008, 18:45; Ответить: Webmaster_hb
Сообщение #4


а для чего вообще используется абсолютное позиционирование ???

покажите скриншоты того что хотелось, ну и код в студию
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Semyon_hb
Semyon_hb
Topic Starter сообщение 8.12.2008, 18:57; Ответить: Semyon_hb
Сообщение #5


css файл
#top-1 {
    position:absolute;
    left:87px;
    top:30px;
    background-image:url(img/fin2_r1_c1.png);
    width:89px;
    height:253px;
}
#top-2 {
   position:absolute;
   left:176px;
   top:30px;
   background-image:url(img/fin2_r1_c2.png);
   width:90px;
   height:253px;
}
#top-3 {
   position:absolute;
   left:266px;
   top:30px;
   background-image:url(img/fin2_r1_c3.png);
   width:90px;
   height:253px;
}

#top-4 {
   position:absolute;
   left:356px;
   top:30px;
   background-image:url(img/fin2_r1_c4.png);
   width:90px;
   height:253px;
}

#top-5 {
   position:absolute;
   left:446px;
   top:30px;
   background-image:url(img/fin2_r1_c5.png);
   width:90px;
   height:253px;
}

#top-6 {
   position:absolute;
   left:536px;
   top:30px;
   background-image:url(img/fin2_r1_c6.png);
   width:90px;
   height:253px;
}

#top-7 {
   position:absolute;
   left:626px;
   top:30px;
   background-image:url(img/fin2_r1_c7.png);
   width:101px;
   height:253px;
}

#top-8 {
   position:absolute;
   left:726px;
   top:30px;
   background-image:url(img/fin2_r1_c8.png);
   width:100px;
   height:253px;
}

#top-9 {
   position:absolute;
   left:826px;
   top:30px;
   background-image:url(img/fin2_r1_c9.png);
   width:105px;
   height:253px;
}

a.swap {
display:block;
text-decoration: none;
width:94px;
height:40px;
background-image:url(img/butt.png);
}
a.swap:hover {
background-image:url(img/butt_on.png);
}
a:link {
color:#000000;
}
a:active {
color:#000000;
}
a:visited {
color:#000000;
}
#menu{
position:absolute;
   left:86px;
   top:284px;
   width:94px;
   height:40px;
   }

#menu-2{
position:absolute;
   left:180px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#menu-3{
position:absolute;
   left:274px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#menu-4{
position:absolute;
   left:368px;
   top:284px;
   width:94px;
   height:40px;
   }

#menu-5{
position:absolute;
   left:462px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#menu-6{
position:absolute;
   left:556px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#menu-7{
   position:absolute;
   left:650px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#menu-8{
   position:absolute;
   left:744px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#menu-9{
   position:absolute;
   left:838px;
   top:284px;
   width:94px;
   height:40px;
   }
  
#main{
    position:absolute;
    left:86px;
    top:320px;
    width:845px
    }
    
#down{
     position:absolute;
    left:86px;
    background-image:url(img/fin2_r1_c8.png)
    width:845px
    }(вот это должно идти сразу после основного содержания (#main)



html файл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Главная</title>
<meta http-equiv="Content-Type" content="text/html; charset=CP1251" /> <link rel="stylesheet" type="text/css" href="diz.css" />
</head>
<body bgcolor="#cccccc">
<table border="0" cellpadding="0" cellspacing="0" width="850">
<tr>
<td id="top-1"></td>
<td id="top-2"></td>
<td id="top-3"></td>
<td id="top-4"></td>
<td id="top-5"></td>
<td id="top-6"></td>
<td id="top-7"></td>
<td id="top-8"></td>
<td id="top-9"></td>
</tr>

<tr>
<td id="menu">

<a href="index.html" class="swap"><center>Главная</center></a>

</td>
<td id="menu-2">

<a href="index.html" class="swap"><center>Цены</center></a>

</td>
<td id="menu-3">

<a href="index.html" class="swap"><center>Комнаты</center></a>

</td>

<td id="menu-4">

<a href="index.html" class="swap"><center>Акции</center></a>

</td>

<td id="menu-5">

<a href="index.html" class="swap"><center>Забить репу</center></a>

</td>

<td id="menu-6">

<a href="index.html" class="swap"><center>Контакты</center></a>

</td>

<td id="menu-7">

<a href="index.html" class="swap"><center>Статьи</center></a>

</td>

<td id="menu-8">

<a href="index.html" class="swap"><center>Карта сайта</center></a>

</td>

<td id="menu-9">

<a href="index.html" class="swap"><center>О базе</center></a>

</td>

</tr>
<tr>

<td bgcolor="#ffffff" id="main">текст, текст, текст, текст, текст, текст
текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст


</td>
</tr>
<tr>

<td id="down">!!!нижний блок!!!</td>

</tr>

</table>
</body>
</html>


Вот скрин. Там где написано: "нижний блок" он вот и должен идти после содержания (#main)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 8.12.2008, 19:34; Ответить: Exterior
Сообщение #6


никогда не видел, чтобы для ячеек таблицы ставили абсолютное позиционирование :eek:
(Semyon_hb @ 8.12.2008, 20:57) *
css файл
#top-1 {
    [COLOR="Red"]position:absolute;[/COLOR]
    left:87px;
    top:30px;
    background-image:url(img/fin2_r1_c1.png);
    width:89px;
    height:253px;
}

<table border="0" cellpadding="0" cellspacing="0" width="850">
<tr>
<td id="top-1"></td>


поставьте для
(Semyon_hb @ 8.12.2008, 20:57) *
<td bgcolor="#ffffff" id="main">

и
(Semyon_hb @ 8.12.2008, 20:57) *
<td id="down">!!!нижний блок!!!</td>


<td colspan="9" id="?"></td>

и все будет внизу
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Semyon_hb
Semyon_hb
Topic Starter сообщение 8.12.2008, 19:45; Ответить: Semyon_hb
Сообщение #7


просто я хотел сделать таблицей, но мне нужны были отступы и я решил не особо заморачиваться и просто поставить абсолютное позиционирование. А что лучше вместо таблицы тогда сделать блоки?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 8.12.2008, 19:51; Ответить: Exterior
Сообщение #8


отступы выставляются margin:value; или padding:value; в зависимости от ситуации,
в вашем случае, расположение нижнего блока исходя из текущего расположения ячеек и так буде всегда ниже контента(текста)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Semyon_hb
Semyon_hb
Topic Starter сообщение 8.12.2008, 19:55; Ответить: Semyon_hb
Сообщение #9


а можно не менять то что у меня есть или лучше не задавать абсолютного позиционирования для таблицы? Или вообще блоками все сделать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 8.12.2008, 20:10; Ответить: Exterior
Сообщение #10


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

Сделайте еще раз скрин, но только всей страницы, заполненной каким-нибудь контентом (примерно так, как это было бы в оригинале) того что есть сейчас, и скрин того как вы хотите чтобы так было - так будет понятней что должно быть и где располагаться.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1430 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Сделать правки на html-странице
5 TABAK 2308 20.5.2023, 10:45
автор: EvilGomel
Открытая тема (нет новых ответов) При удалении одного элемента, перестает работать другой. Помогите исправить!
1 vantusxyz 5572 24.6.2016, 16:08
автор: -Degradator-
Открытая тема (нет новых ответов) При реализации переноса селектора по странице пропадает возможность выбора пунктов
1 demamon 2930 3.2.2016, 6:26
автор: -Zippovich-
Открытая тема (нет новых ответов) Как подстроить 3 разные элемента в один ряд
2 Генрих Арутюнян 5540 19.2.2015, 10:43
автор: -Генрих Арутюнян-


 



RSS Текстовая версия Сейчас: 24.4.2024, 13:04
Дизайн