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



 

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

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

Открыть тему
Тема закрыта
> Позиционирование, относительные координаты HELP!
Гость_0_*
Гость_0_*
Topic Starter сообщение 6.10.2008, 7:24; Ответить: Гость_0_*
Сообщение #1


Доброго времени суток, Не как не могу разобраться с относительным позиционированием.
Я накачал кучу книг по КСС, но там везде разметка в три колонки, и примеры не очень сложные. Крутят три дива и типа все показали, или мне книжки такие попались.
Помогите, пожалуйста, создать резиновый каркас, вот по такой примерно схеме. Разметка
Что то не получается у меня не с float: не с position: relative;
Заранее благодарю!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 6.10.2008, 11:41; Ответить: ZiTosS
Сообщение #2


Ну вот к примеру хотяб так
<html>
<head>
<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}

html,body
{
    margin: 3px;
    padding: 0px;

}

div.div_bg
{
    width: 90%;
    height: 80%;
    background-color: #FEFF8F;
    padding: 5%;
}

.block
{
    width: 100%;
    height: 100%;
}

.block_vnutr
{
    padding-top: 50px;
    width: 60%;
    height: 80%;
}

.div_top_l
{
    width: 15%;
    height: 10%;
    background-color: #F1A770;
    float: left;
}

.div_top
{
    width: auto;
    height: 10%;
    background-color: #68DC83;
    float: center;
}

.div_top_r
{
    width: 15%;
    height: 10%;
    background-color: #F1A770;
    float: right;
}

.div_line_l
{
    width: 15%;
    height: 80%;
    background-color: #6D68DC;
    float: left;
}

.div_line
{
    width: auto;
    height: 80%;
    float: center;
}


.div_line_r
{
    width: 15%;
    height: 80%;
    background-color: #6D68DC;
    float: right;
}
</style>
</head>
<body>
<div class="div_bg">
<div class="block">
    <div class="div_top_l"></div>
    <div class="div_top_r"></div>
    <div class="div_top"></div>

    <div class="div_line_l"></div>
    <div class="div_line_r"></div>
    <div class="div_line">
        <center>
        <div class="block_vnutr">
            <div class="div_top_l"></div>
            <div class="div_top_r"></div>
            <div class="div_top"></div>
        
            <div class="div_line_l"></div>
            <div class="div_line_r"></div>
            <div class="div_line"></div>
        
            <div class="div_top_l"></div>
            <div class="div_top_r"></div>
            <div class="div_top"></div>
        </div>
        </center>
    </div>

    <div class="div_top_l"></div>
    <div class="div_top_r"></div>
    <div class="div_top"></div>
</div>
</div>
</body>
</html>


Под Мазилой смотрится нормально, а вод под IE размер получились совсем другие. Тут скорее всего нужен доктайп!

Но идею я вашу передал :)


Поблагодарили: (1)
djrafn
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_*
Гость_0_*
Topic Starter сообщение 6.10.2008, 13:24; Ответить: Гость_0_*
Сообщение #3


Спасибо большое! :) Можете пояснить, что это за птица? <center></center> и какую она роль играет в данном каркасе?
И вот еще вопрос. float: center; я такого, ни где, не видел. И в программулине "TopStyle 3.5" тоже такого значения, для float нету.
Хотел еще спросить, в чем разница между классом и дивом? тобишь Див с ИД. <div id="TOP"> или класс <div class="div_bg">
Еще раз спасибо за ваше терпение и время! :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 6.10.2008, 23:41; Ответить: ZiTosS
Сообщение #4


Отвечу на все вопросы.
1)<center></center> определяет положение элемента или текста по центру внешнего блока. Этот тег валиден и полностью соответствует стандартам.
2)
float: center;

Да я сам такого float не видел, но поставил, и заработало в двух браузерах (мазиле и IE, оперы нету), иначе не знаю, как его сделать по центру + ещё и на автомате по максимуму растянуть :( Насчёт как будет ли он работать при доктайпе я не знаю, делал без доктайпа.
3) разница большая
id - (уникальный идентификатор) идентификатор указывающий на ОДИН и только ОДИН элемент, одного и того же id не может быть у 2 элементов!
class - (класс элементов) указывает на группу элементов, которые нам надо оформить, к примеру у нас есть 3 div'а, которым нам надо дать одно и тоже оформление, тогда используем классы.

Ещё одно дополнение, если вы хотите использовать сразу 2 класса для одного элемента, это легко осуществимо.(К примеру красный цвет текста + жирный текст)

.red
{
  color: #FF0000;
}

.bold
{
  font-weight: bold;
}

.......

<div class="red bold">Текст жирный и красный</div>


Пишем через пробел.

Есть очень много тонкостей вёрстки которых мы не знаем, надо пытаться импровизировать и мыслить по-своему :)
Удачи!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_*
Гость_0_*
Topic Starter сообщение 7.10.2008, 7:00; Ответить: Гость_0_*
Сообщение #5


Посмотрите пожалуйста, где ошибка, нарушина иерархия Div = center. Не могу понять почему он не подчиняется потоку.
<html >
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>WTF</title>
<style type="text/css">
#left_colum{border: solid 1px;width: 165px;height: 600px;float: left; padding: 5px;float: left;}
  
#right_colum {border: solid 1px;width: 240px;height: 600px; padding: 5px;float: right;}

#top_center_colum{ padding: 5px; width: auto;height: 100%;background-color: #ff7f50;float: center;}

#center_left{margin-left: 5px;width:330px; height: 100%; border: solid 1px;float: left;}

#center_right{margin-right: 5px;width: 330px; height: 100%;background-color: #5f9ea0;float: right;}

#center{margin-left: 182px;margin-right: 256px;background-color: maroon;width: auto;height: 500px;text-align: center;float: center;}
</style>
</head>

<body>
<div id="top_center_colum">
  <div id="left_colum">left</div>
     <div id="right_colum">right</div>
        <div id="center_left">Программа Punto Switcher предназначена для автоматического переключения раскладки
ООО «Яндекс» 2008</div>
           <div id="center_right">right</div>
      <div id="center">WTF? center</div>
</div>
</body>
</html>

Мне казалось, что он должен идти после <div id="center_left"> и<div id="center_right"> а он залезает на один уровень сними.
посмотреть кривую верстку -----> тут
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 7.10.2008, 19:49; Ответить: ZiTosS
Сообщение #6


Вы не поняли... Вам надо запихнуть 3 дива в один цельный, вот код примерный...
<html>
<head>
<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}

html,body
{
    margin: 3px;
    padding: 0px;

}

div.div_bg
{
    width: 98%;
    height: 80%;
    background-color: #FFF;
    padding: 1%;
}

.block
{
    width: 100%;
    height: 100%;
}


.div_top_l
{
    width: 15%;
    height: 50%;
    background-color: #F1A770;
    float: left;
}

.div_top
{
    width: auto;
    height: 50%;
    background-color: #ff7f50;
    float: center;
}

.div_top_r
{
    width: 15%;
    height: 50%;
    background-color: #F1A770;
    float: right;
}

</style>
</head>
<body>
<div class="div_bg">
<div class="block">
    <div class="div_top_l">left</div>
    <div class="div_top_r">right</div>
    <div class="div_top">
    <div class="div_top_l">left</div>
    <div class="div_top_r">right</div>
    <div class="div_top">asdasd</div>
    </div>
</div>
</div>
</body>
</html>


Там уж форматируйте как хотите :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_*
Гость_0_*
Topic Starter сообщение 12.10.2008, 8:02; Ответить: Гость_0_*
Сообщение #7


(ZiTosS @ 7.10.2008, 19:49) *
Там уж форматируйте как хотите :)

Как хотим, не получается :)
После долгих экспериментов, удалось создать такой каркас.
Ляпы смотреть -----> Тут
Хотел, чтобы #с3 –что красный, шел бы сразу за #c1 и #c2, тобишь сразу подними. А его вон куда вставляет.
Объясните, пожалуйста, почему так вышло? Как сделать чтобы #top_c1 не обтекал #с3
<body>
<div class="div_bg">
<!-- --------------------------------------Tyshka start---------------------------------------------- -->
   <div id="TOP">
      <div id="top_l1"></div>
          <div id="top_r1"></div>
                 <div id="top_c1">
                    <div id="c1"></div>
                        <div id="c2"></div>
                          <div id="c3"></div>
           </div>
  </div>
<!-- ----------------------------------Footer Block start-------------------- -->
<div id="footer1">footer1</div>
<div id="footer2">footer2</div>
</div>  </div>
</body>

body,html {
  padding          : 0;
  margin           : 0;
  margin: 0px;
  }
div.div_bg
{
    width: 90%;
    height: 80%;
    background-color: #FEFF8F;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
}
#TOP{
   background-color: aqua;
   width: 100%;
   height: 100%;
   }

#top_l1{
   background-color: #c71585;
    width: 200px;
   height: 100%;
   padding: 5px;
   float: left;
}
#top_c1{
width: auto;
    height: auto;
    background-color: #68DC83;
    margin-right: 350px;
    margin-left: 210px;
    }
    
#top_r1{
   background-color: green;
    width: 340px;
   height: 100%;
   float: right;
   padding: 5px;
}

#c1{
padding: 5px;
float: left;
width:48%;
background-color: #b8860b;
}

#c2{
padding: 5px;
float: right;
width: 48%;
background-color: maroon;
}

#c3{
clear: both;
background-color: red;
width: 98%;
height: 20px;
float: right;
}

#footer1{
clear: both;
width: auto;
height: 200px;
background-color: #4682b4;
border: solid 1px;
}

#footer2{
clear: both;
width: auto;
height: 200px;
background-color: yellow;
}

Вскрыться можно с этим форматированием :(
Разобрался убрал для div c3. clear: both; все встало на свои места.
Укажите на ошибки, если кому времени не жалко или хотелось бы посмотреть альтернативный вариант такого каркаса.
М.Б. кто нибуть посоветует материал для изучения по форматированию и позиционированию блоков.
Заранее спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 12.10.2008, 21:23; Ответить: ZiTosS
Сообщение #8


Вот могу привести сайт который вам поможет разобраться с блочной вёрсткой http://htmlbook.ru/
Там либо в статьях, либо в другом разделе не мало инфы по блокам.
А вот ещё один интересный сайт по некоторым хакам, по блочной вёрстке там ничего не видел... http://tigir.com/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dreemix
dreemix
сообщение 13.4.2009, 18:41; Ответить: dreemix
Сообщение #9


pika4y, книги надо не качать, а читать. Хорошая книга "Большая книга CSS" Дэвида Сойера.

Про float:center тоже никогда не слышал...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 14.4.2009, 11:44; Ответить: ZiTosS
Сообщение #10


Renovatio, про float: center я наврал... Извиняюсь. Можно сделать так. Левый, float: left, а два правых в обратном порядке c float: right. Который будет центральный делаем width: auto

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Wap снова торт - minion.help
 1 MinionTeam 3811 5.2.2020, 14:30
автор: MinionTeam
Открытая тема (нет новых ответов) HELP ME!!!!
 0 blacklool 5196 19.5.2012, 0:56
автор: -blacklool-
Открытая тема (нет новых ответов) Позиционирование блока в "резиновом" сайте
 4 arthur1974 7725 16.5.2012, 18:26
автор: -arthur1974-
Открытая тема (нет новых ответов) Позиционирование логотипа по центру
 0 nuon 3373 30.4.2012, 10:30
автор: -nuon-
Открытая тема (нет новых ответов) Форма обратной связи в модальном окне HELP!!!!
 0 Dani_hb 10250 2.8.2011, 1:06
автор: -Dani-


 

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

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

RSS Текстовая версия Сейчас: 19.4.2024, 14:05

Дизайн

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