Позиционирование в CSS @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
 Страница 1 из 1 [ Сообщений: 21 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Заголовок сообщения: Позиционирование в CSS
Сообщение Добавлено: 6 Июль 2005, 02:00:06 
Привет всем.
Я наверное достал всех глупыми вопросами, но что делать, надо-же как то учиться.
Народ, подскажите ламеру.
Немогу скомпановать сайт. Проблема в следующем:
Все блочные элементы вставил в таблицу заданных размеров из одной ячейки , выравнил его

относительнно body по центру. В данную таблицу поместил банер, выравнил его относительно

родительского
слоя по центру задав ему position: relative;. Также поступил с горизонтальной панелью навигации и
с колонкой ссылок, выравнив их по правой стороне все тем-же позицированием position: relative.
А вот самое главное: нужно поместить два блока с текстом в тот-же контейнер таблици и
и разместить их по левой стороне. Пробую с помощью position: relative; left: #; top: #; .
Контейнер перемещается, но браузер оставляет с низу под него большое количество пустого места.
Пробую с помощью position: absolute; left: #; top: #; . Контейнер ввыравниваятся только по левой стороне
, вверх неподнимается, остается всегда на месте относительно окна браузера при его развертывании
или сжатии и при всем этом не видно нижней граници контейнера (то-бишь браузер непрокручивает до

конца страницу).
Вот сижу и ломаю голову, как все нормально расставить по местам.
Откликнитесь кто-нибудь...
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 6 Июль 2005, 06:10:15 
diverck, чтобы помощь была реальной, а не голословной, пример кода в операционную. Доктора ждут ;)

_________________
Frontend developer: IonDen.com
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 6 Июль 2005, 06:22:14 
diverck, поясню мысль коллеги IonDen666: докторА ждут. Пациента они ждут. Пока что могу одно сказать: кто на ком стоял непонятно, и зачем блочные элементы всовывать в таблицу - тоже непонятно.

Вы уж извольте объяснять конкретнее, например так:
1) Вот стоящая передо мною цель
2) Вот такие задачи я сформулировал для себя дабы этой цели достичь
3) Вот так я пытался решить эти задачи
4) Вот в этом месте мои решения оказались неверны
5) Господа! Я неправильно ставил задачи или неправильно их решал?

Вот туn-то и появятся доктора и помогут.


Последний раз редактировалось Акела 6 Июль 2005, 11:01:55, всего редактировалось 1 раз.
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 6 Июль 2005, 10:38:50 
не осилил

_________________
критиковать человека не имеет смыла, потому что критика заставляет его защищаться и, как правлио искать оправданий. критиковать человека опасно, так как критика наносит удар его гордости, задевает чувство собственной значитмости и обижает его. (Дейл Карнеги)
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Сообщение Добавлено: 6 Июль 2005, 11:01:19 
diverck, Акела нарисовал пошаговую блок-схему любых действий при постановке-решении задачи. Почему Вы игнорируете эти очевидные вещи? Не в первый раз, кстати. Я, если честно, в уме/голове/на_бумаге не смог сложить Ваш вопрос.

_________________
Keep in touch. Andrey Alexeev.
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 6 Июль 2005, 11:18:07 
подписываюсь

_________________
критиковать человека не имеет смыла, потому что критика заставляет его защищаться и, как правлио искать оправданий. критиковать человека опасно, так как критика наносит удар его гордости, задевает чувство собственной значитмости и обижает его. (Дейл Карнеги)
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Сообщение Добавлено: 6 Июль 2005, 14:27:25 
Акела, tentoys,

Цитата:
Вы уж извольте объяснять конкретнее, например так:
1) Вот стоящая передо мною цель
2) Вот такие задачи я сформулировал для себя дабы этой цели достичь
3) Вот так я пытался решить эти задачи
4) Вот в этом месте мои решения оказались неверны
5) Господа! Я неправильно ставил задачи или неправильно их решал?


пориму к во внимание :beer:
Pritorian Муж.
участник
0
Сообщения: 1867
Зарегистрирован: 19.01.05
Откуда: Odessa
Сообщение Добавлено: 6 Июль 2005, 14:29:19 
http://www.csscreator.com
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Сообщение Добавлено: 6 Июль 2005, 14:30:07 
Вот мой код:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Untitled</title>
   <style type="text/css">
   
   #block1{
   border: 0px;
   width: 800px;
   height: 70px;
   background-color:#ff6633;
   }
   #menu a {
   border: 1px #cc9966;
   border-style: solid;
   display: block;
   width: 100px;
   height:20px;
   text-align: center;
   text-decoration: none;
   font-family: arial;
   text-transform: uppercase;
   font-size: 10px;
   }
   #menu a:hover {color: red;
   border-style: none none outset outset;
   font-family: arial black;
   }
   menu {
   background-color:none;
   overflow: hidden;
   width: 740px;
   height: 25px;
   }
   #table2 td{
   display: block;
   border-style: none none dotted none;
   border: 1px #990033;
   width: 100px;
   height: 24px;
   text-align: center;
   }
   #table2 {
   border-style: none solid none solid;
   border: 1px #110000;
   }
   #table2 a{
   display: block;
   text-decoration: none;
   font-size: 12px;
   font-family: arial black;
   color: #993333;
   width: 100px;
   height: 24px;
   }
   #table2 a:hover{background-color: #ccffff;color: red;font-size: 14px;}
   #table3 {
   display: block;
   border-style:solid;
   border:1px #000000;
   width: 400px;
   height: 350px;
   text-align: center;}
   #menu {position: relative; text-align:right;}
   #button {position: relative; text-align:right;}
   /*------------------------------------------------------*/
   #table3 {position: absolute;left: 80px; top:200px; }
   /*------------------------------------------------------*/


   
   
   </style>
</head>


<body>
   <table align="center">
   <tr>
   <td>
   <div id="block1">
      </div>
      <div id="menu">
         <table>
            <tr>
               <td><a href="#">urxff cbxfcbl</a></td>
               <td><a href="#">url</a></td>
               <td><a href="#">url</a></td>
               <td><a href="#">url</a></td>
               <td><a href="#">ursl</a></td>
               <td><a href="#">url</a></td>
               <td><a href="#">urfrfl</a></td>
            </tr>
         </table>
      </div>
      <div id="button">
         <table id="table2">
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
            <tr>
               <td><a href="3">tratra</a></td>
            </tr>
         </table>
         </div>
           <table id="table3">
               <tr>
                  <td>text text text text
               </td>
                  <td>text text text text </td>
               </tr>
               <tr>
                  <td>text text text text </td>
                  <td>text text text text </td>
               </tr>
         </table>
      </div>
   </td>
   </tr>
   </table>
   </body>
</html>
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Сообщение Добавлено: 6 Июль 2005, 17:30:06 
diverck, во-первых, можно Вас попросить в следующий раз такой код приводить в виде ссылки на файл хтмл? ;-) Далее, теперь вопрос: что Вас не устраивает (потому как, глядя на Вашеу страничку нет ясности). "слова text text text" в таблице (не диве, кстати) у Вас позиционированы абсолютно. Это видно. Дальше что? Какие-то блоки, дивы, которые не хотят размещаться там, где Вам угодно -- задайте им фоновый цвет или бордер, чтоб потом было проще говорить (вот, мол, салатовый блок должен идти после мадженты, серый после фуксии)

_________________
Keep in touch. Andrey Alexeev.
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 6 Июль 2005, 18:28:30 
Задача-то не ясна.

_________________
критиковать человека не имеет смыла, потому что критика заставляет его защищаться и, как правлио искать оправданий. критиковать человека опасно, так как критика наносит удар его гордости, задевает чувство собственной значитмости и обижает его. (Дейл Карнеги)
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 6 Июль 2005, 18:51:25 
diverck, не надо так буквально понимать слова "код в студию". Копировать всю эту хню на свой сервер и смотреть - в лом. Дайте ссылку, которую можно будет смотреть теми средствами, которыми нам удобнее. И сформулируйте плз вопрос наконец-то!
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Сообщение Добавлено: 6 Июль 2005, 19:07:54 
Акела,
Цитата:
не надо так буквально понимать слова "код в студию".


Я новичок, поймите правильно... :confused:
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 6 Июль 2005, 19:17:55 
diverck, я понял. А теперь с самого начала плз: ссылку на код и формулировку задачи.
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Сообщение Добавлено: 7 Июль 2005, 01:37:41 
Акела, вот ссылка http://diverk1.narod.ru/chernovik.html.
Ситуация немного изменилась: Нужно блок id="tt"(с зеленой границей) поставить по центру окна браузера.
Пробовал с помощью body align="center", не вышло. Пробовал #tt text-algin: center; не вышло.
Далее, нужно выровнить блок текста id="div3" (желтого цвета) по левой стороне на расстоянии 20px от
зеленой границы родительского слоя id="tt". Пробовал #div3 position: absolute;left: 7%; top:150px;,
добился примерно нужного результата, но при уменьшении окна браузер блок стекстом начинает менять
свое положение.
Господа! Немогу понять что-ж я не так делаю ??? :lamer:
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 7 Июль 2005, 02:57:18 
diverck, Вы делаете неправильно главное. Вы бросьте заниматься CSS и HTML, а вместо этого нарисуйте на бумажке композицию, которую Вы хотите видеть. После этого - попробуйте её реализовать простыми средствами типа "шапка" "левая колонка", "основной текст" "правая колнка" и "подвал"

В XML и CSS есть огромное количество чудесных свойств, позволяющих осуществить самые смелые планы... :cry:

diverck, Надо-то чего???


Цитата:
выровнить

ой, Вейз мир...
abraitcev
новый человек
6
Сообщения: 165
Зарегистрирован: 28.09.02
Откуда: Murmansk
Сообщение Добавлено: 7 Июль 2005, 03:08:25 
diverck, практически всё, начиная с размеров в пикселах.
Вы видели свою страницу в чем-нибудь кроме IE? Посмотрите, поучительное зрелище. Я грешным делом хожу по интернету с помощью FF, так долго не мог понять о какой "зеленой" рамке идет речь.
Amaya просто вылетела с сообщением о системной ошибке.
Сам не люблю, когда в качестве ответа посылают читать первоисточники, но в Вашем случае это будет не лишне.
Еще могу посоветовать посмотреть внимательно на подходящий Вашим замыслам образец. Найдите в интернете, сохраниет на диске и препарируйте на здоровье.
!Я предлагаю именно посмотреть как работают профи, а не содрать у них дизайн и верстку. :)

Удачи!
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Сообщение Добавлено: 7 Июль 2005, 05:13:01 
abraitcev, скачал и установил сейчас Opera 8 и FireF.
ООООчень интересное зрелище, причем в обоих. :insane:
И по поводу зеленой рамки я вродебы действительно погорячился...
Теперь буду иметь ввиду.
diverck
новый человек
0
Сообщения: 36
Зарегистрирован: 14.02.05
Сообщение Добавлено: 14 Июль 2005, 14:59:26 
все переделалhttp://diverk1.narod.ru/chernovik.html
Вопрос следующий: как избавиться от белых полей (и откуда они взялись) над lable и url2 при просмотре
в Opera и FFox.
И как можно выровнить id="base" по центру относительно body.
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 14 Июль 2005, 17:47:53 
Эти проблемы можно решитьнапример так:

Код:
body {text-lign:center;}
div {margin:0; padding:0;}
p {margin:0; padding:3px 0 3px 0;}
#base {margin:0 auto; width:500px;}

_________________
Frontend developer: IonDen.com
abraitcev
новый человек
6
Сообщения: 165
Зарегистрирован: 28.09.02
Откуда: Murmansk
Сообщение Добавлено: 14 Июль 2005, 20:34:22 
diverck, посмотрите пару ссылок http://www.thenoodleincident.com/tutorials/box_lesson/index.html, http://www.bluerobot.com/web/layouts/

Я думаю, что если речь идет не о web-приложении, а о сайте, то абсолютное позиционирование и размеры в пикселях не к месту.
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
 Страница 1 из 1 [ Сообщений: 21 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


ООО ДеФорум
При использовании материалов сайта ссылка на DeForum.ru — обязательна.
Проект Павла Батурина ©2001-2077; // Powered by phpBB © 2013 phpBB Group
Rambler's Top100