Перейти к содержимому


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 525 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #2

    OlgaGetman
    Очков активности: 351 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 346.5 3 темы, 24 сообщения, 7 баллов репутации

  • Фотография ShowPrint
    #4

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 76.5 2 темы, 11 сообщений, 3 балла репутации

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 63 1 тема, 18 сообщений, 2 балла репутации

  • Фотография re-search
    #7

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

  • Фотография Strazh
    #8

    Strazh
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

  • Фотография pozitron123
    #9

    pozitron123
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

  • Фотография Constantine
    #10

    Constantine
    Очков активности: 33 3 темы, 13 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.03.2019
  • Яндекс выдача: 18.04.2019
Топ 5 участников по репутации


Блоки отображаются не так как хотелось бы

#1 kovyaro

kovyaro
  • Неактивные
  • 14 сообщений
  • Репутация: 0
0

Отправлено 19 Февраль 2011 - 21:50

Не могу создавать темы, поэтому, извините, спрошу здесь. Я первый раз, и не по своей воле, сел за программирование на 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

#2 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 20 Февраль 2011 - 18:14

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

P.s.: На языке HTML не программируют, а верстают.
  • 0

#3 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 21 Февраль 2011 - 06:04

#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рх). Я могу ошибаться в своих представлениях.
  • 0

#4 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 21 Февраль 2011 - 10:26

Если я правильно понял, то блок "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" нолики, иначе эта строка в коде будет просто проигнорирована.
  • 0

#5 kovyaro

kovyaro
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 0

Отправлено 21 Февраль 2011 - 11:23

Помогло float:left;. Спасибо большое.
  • 0

#6 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 23 Февраль 2011 - 12:44

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



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru