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



 

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

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

Открыть тему
Тема закрыта
> Блоки отображаются не так как хотелось бы, Помогите понять
kovyaro
kovyaro
Topic Starter сообщение 19.2.2011, 22:50; Ответить: kovyaro
Сообщение #1


Не могу создавать темы, поэтому, извините, спрошу здесь. Я первый раз, и не по своей воле, сел за программирование на HTML. Сразу же столкнулся с моментом, который не могу понять, если объясните, буду благодарен.

Вот код:


<body>

<div id="container0">

<div id="container1">

<div id="logo"> </div>

<div id="slog">

<font face="Tahoma, Geneva, sans-serif" color="#FFFFFF" size="+3">

<p align="center">Использование компьютерных технологий<br>в науке и образовании</p>

</font>

</div>

</div>

</div>

</body>



Код CSS:

#container0 {

    background:#CCC;

    height:auto;

    width:auto;

}


#container1 {

    background:#000000;

    margin:0 auto;

    margin-top:20px;

    text-align:left;

    height:168px;

    width:1000px;

}


#logo {

    background:url("Images/Logo.png") no-repeat;

    display:block;

    height:168px;

    width:200px;

}


#slog {

    background:#OOOOOO;

    margin-left:200px;

    display:block;

    height:168px;

    width:800px;

}



Проблема в том, что контейнер slog отображается под контейнером container1, а не внутри него, как по идее и задумывалось. Есть мысли, почему так?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 20.2.2011, 19:14; Ответить: ZiTosS
Сообщение #2


kovyaro, стоит вам посмотреть на вложенность блоков и на их размеры, прописанные в CSS и сразу всё становится понятно.
У нас такой расклад:
container1 - высота 168px
      logo - высота 168px
      slog - высота 168px

Думаю, заметно, что два дочерних блока размерами каждый по 168 ну никак не могут влезть в родительский, размером 168, т.к. суммарная высота дочерних - 168 + 168 = 336. Поэтому второму блоку ничего не остается как вылезти за родительские размеры.

P.s.: На языке HTML не программируют, а верстают.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kovyaro
kovyaro
Topic Starter сообщение 21.2.2011, 7:04; Ответить: kovyaro
Сообщение #3


#logo {
background:url("Images/Logo.png") no-repeat;
display:block;
height:168px;
width:200px;
}

#slog {
background:#OOOOOO;
margin-left:200px;
display:block;
height:168px;
width:800px;
}


Если я правильно понял, то блок "logo" должен находиться в крайне левой позиции блока "container1", а контейнер "slog" смещен вправо на 200px (
margin-left:200px;
). Итого общая высота блоков "logo" и "slog" составляет 168, что равно высоте блока "container1". Суммарная длина блоков "logo" и "slog" равна длине блока "container1" (1000рх). Я могу ошибаться в своих представлениях.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 21.2.2011, 11:26; Ответить: yury_mw
Сообщение #4


(kovyaro @ 21.2.2011, 6:04) *
Если я правильно понял, то блок "logo" должен находиться в крайне левой позиции блока "container1", а контейнер "slog" смещен вправо на 200px. Итого общая высота блоков "logo" и "slog" составляет 168, что равно высоте блока "container1". Суммарная длина блоков "logo" и "slog" равна длине блока "container1" (1000рх). Я могу ошибаться в своих представлениях.

kovyaro,
по вашему коду блок "logo" должен располагаться внутри блока "container1",
а блок "slog" должен располагаться опять-таки внутри блока "container1" под блоком "logo" (именно так работает свойство display:block;)
а поскольку высоту родителя "container1" вы задали меньше, чем суммарная высота "slog" и "logo", то второй блок еще и вылезает за пределы "container1".
причем пытается расположиться с отступом от левого края родителя — блока "container1" на 200px (margin-left:200px;)
В результате имеем кашу на экране, типа, что варили то и получили. ;)
Если вам надо, чтобы ваши блоки располагались не друг под другом, а по горизонтали, то нужно использовать не свойство display:block; а display:inline; или свойство, задающее обтекание — float:left; для блока "logo".

Да, кстати, строка
background:#OOOOOO;
не работает, пишите вместо букв "O" нолики, иначе эта строка в коде будет просто проигнорирована.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kovyaro
kovyaro
Topic Starter сообщение 21.2.2011, 12:23; Ответить: kovyaro
Сообщение #5


Помогло float:left;. Спасибо большое.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 23.2.2011, 13:44; Ответить: ZiTosS
Сообщение #6


kovyaro, тему так понимаю, можно закрывать?

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1125 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2300 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3922 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3653 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1947 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 18:59
Дизайн