Помощник
|
Позиционирование элемента на странице |
Semyon_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
Webmaster_hb |
8.12.2008, 18:28;
Ответить: Webmaster_hb
Сообщение
#2
|
|
можно через javascript получить значение высоты какого-либо элемента и потом присвоить отступ от верха...
а в вашем случае не вижу проблем, ставите элементы один за другим и всё |
|
|
Semyon_hb
|
Сообщение
#3
|
|
Понимаете, когда я создаю к примеру новую ячейку в файле html и например не указываю позиционирование, то элемент появляется в левом верхнем углу, но чтобы задать отступ от верха страницы, я должен знать заранее, сколько займет содержание, чтобы задать такой отступ, ведь мне нужно чтобы после содержания сразу же шел элемент, а если я к примеру задам top:100px; то если содержание займет 150px эти элементы просто наложатся друг на друга.
|
|
|
Webmaster_hb |
8.12.2008, 18:45;
Ответить: Webmaster_hb
Сообщение
#4
|
|
а для чего вообще используется абсолютное позиционирование ???
покажите скриншоты того что хотелось, ну и код в студию |
|
|
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 |
8.12.2008, 19:34;
Ответить: Exterior
Сообщение
#6
|
|
никогда не видел, чтобы для ячеек таблицы ставили абсолютное позиционирование :eek:
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> поставьте для <td bgcolor="#ffffff" id="main"> и <td id="down">!!!нижний блок!!!</td> <td colspan="9" id="?"></td> и все будет внизу |
|
|
Semyon_hb
|
Сообщение
#7
|
|
просто я хотел сделать таблицей, но мне нужны были отступы и я решил не особо заморачиваться и просто поставить абсолютное позиционирование. А что лучше вместо таблицы тогда сделать блоки?
|
|
|
Exterior |
8.12.2008, 19:51;
Ответить: Exterior
Сообщение
#8
|
|
отступы выставляются margin:value; или padding:value; в зависимости от ситуации,
в вашем случае, расположение нижнего блока исходя из текущего расположения ячеек и так буде всегда ниже контента(текста) |
|
|
Semyon_hb
|
Сообщение
#9
|
|
а можно не менять то что у меня есть или лучше не задавать абсолютного позиционирования для таблицы? Или вообще блоками все сделать?
|
|
|
Exterior |
8.12.2008, 20:10;
Ответить: Exterior
Сообщение
#10
|
|
уверен, что в данном случае совсем нет необходимости задавать абсолютное позиционирование ни для ячеек, ни для таблицы в целом.
Сделайте еще раз скрин, но только всей страницы, заполненной каким-нибудь контентом (примерно так, как это было бы в оригинале) того что есть сейчас, и скрин того как вы хотите чтобы так было - так будет понятней что должно быть и где располагаться. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
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 автор: -Генрих Арутюнян- |
Текстовая версия | Сейчас: 24.4.2024, 13:04 |