Не могу найти ошибку..

@rockmania · Регистрация: 05.10.2009

Студворк — интернет-сервис помощи студентам

Вобщем задание такое(используя только CSS):

1. Текст заголовка должен быть минимум в 3 раза больше чем обычный текст и жирный.
2. Меню слева, ширина 12ем паддинг 0.5ем
3. Блок авторизации слева под меню(используя атрибут clear), бордер - двойной, ширина 12ем паддинг 0.5ем
4. Новостной блок справа, ширина 20ем, бордер 2пикселя и пунктир, паддинг 10пикс.
5. Содержание/контент справа - 15ем и слева 10ем.

Вот с пунктом номер 5 я никак не могу справиться. Контент вечно уезжает куда-то. Ну судите строго, я это первый раз делаю=) кстати html редактировать нельзя.

Вот код:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
body {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 4em;
}
 
#head > img {
    vertical-align: middle;
    
}
 
#menu > ul {
    width: 12em;
    padding: 0.5em;
    font-size: 0.3em;
    list-style-type: none;
    float: left;
}
 
#menu > ul > li {
    background-color: gainsboro;
    margin: 1px;
    width: 100%;
    padding-left: 1em;
}
 
#news {
    font-size: 0.3em;
    float: right;
    border:dashed 2px;
    padding: 10px;
    margin: 5px;
}
 
#news > h1 {
    font-size: 130%;
}
 
#login {
    float: left;
    border:double 4px;
    padding:0.5em;
    clear: left;
    width: 12em;
    font-size: 0.3em;
}
 
#content {
    left:15em;
    right:10em;
 
}
 
#content > p {
    font-size: 0.3em;
} 
 
#content > h1 {
    font-size: 0.9em;
    font-weight: bold;
}

[B]А должно быть примерно как на картинке. Так же выкладываю архив со всеми файлами.

@Герц · 20.02.2012, 23:18

Сейчас подумаем.
Хоть бы примеры нормальные давали ученикам, прежде чем требовать наваять внешний вид с помощью CSS.
Почему интересно заголовок в <h> тег не засунули?)

@rockmania · 20.02.2012, 23:27 **[ТС]**

Сообщение от Герц

Сейчас подумаем.
Хоть бы примеры нормальные давали ученикам, прежде чем требовать наваять внешний вид с помощью CSS.
Почему интересно заголовок в <h> тег не засунули?)

Я вот тоже думаю..почему..пришлось сделать размер всего текста на странице большим, чтобы заголовок подогнать..а хтмл править нельзя..

@Герц · 20.02.2012, 23:34

Поясните про последний пункт. Речь об отступе, границе, положении?

Я вот тоже думаю..почему..пришлось сделать размер всего текста на странице большим, чтобы заголовок подогнать..а хтмл править нельзя..

На всей не надо, делается так:

CSS
1
2
3
4
#head {
    font-size: 300%;
    font-weight: bold;
}

Если не задать четко ширину то content в любом случае будет ездить :-)
Сейчас он занимает все что хочется.

@rockmania · 20.02.2012, 23:45 **[ТС]**

Сообщение от Герц

Поясните про последний пункт. Речь об отступе, границе, положении?

Если не задать четко ширину то content в любом случае будет ездить :-)
Сейчас он занимает все что хочется.

Насчет последнего пункта: контент должен быть расположен на расстоянии 15 ем от левого края и 10ем от правого.
А вот отступ это или положение..непонятно=)Наверное отступ..

Про ширину да, я понимаю..только немного не понимаю как это сделать..

@Герц · 20.02.2012, 23:47

Ну значит это margin и он должен вытягиваться, занимая пространство так, чтобы всего было слева 15 и справа 10.

@rockmania · 20.02.2012, 23:48 **[ТС]**

Сообщение от Герц

Ну значит это margin и он должен вытягиваться, занимая пространство так, чтобы всего было слева 15 и справа 10.

это я тоже понимаю..как это реализовать не понимаю=)

@Герц · 20.02.2012, 23:52

Прикладываю файл.
При размере окна браузера как на картинке для примера получается примерно та же ситуация.
Блок с новостями залазит в контент и последний вынужден обтекать его.
css нельзя грузить :-) Выкладываю контент:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
body {
    margin-left: 5px;
    margin-right: 5px;
}
 
/* added by me */
#head {
    font-size: 300%;
    font-weight: bold;
}
 
#menu, #login {
    width: 12em;
    padding: 0.5em;
    float: left;
}
 
#menu {
    display: inline;
}
 
#login {
    clear: both;
    border: double;
}
 
#content {
    float: top;
    margin-left: 15em;
    margin-right: 10em;
}
 
#news {
    float: right;
    border: 2px dashed black;
    padding: 5px;
}
 
/* end added by me */
 
#head > img {
    vertical-align: middle;
}
 
#menu > ul {
    width: 100%;
    padding: 0px;
    list-style-type: none;
}
 
#menu > ul > li {
    background-color: gainsboro;
    margin: 1px;
    width: 100%;
    padding-left: 1em;
}
 
#news > h1 {
    font-size: 130%;
}

@rockmania · 21.02.2012, 00:05 **[ТС]**

Спасибо большое!=))
Буду дальше практиковаться=) float:top оказывается еще есть..=)
Спасибо еще раз=)

@Герц · 21.02.2012, 00:17

Вообще-то нету.
Забыл убрать эту строку, для эксперимента пробовал, она не влияет никак на отображение, так как такого типа float не существует. :-)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	20.02.2012, 23:18
	Сейчас подумаем. Хоть бы примеры нормальные давали ученикам, прежде чем требовать наваять внешний вид с помощью CSS. Почему интересно заголовок в <h> тег не засунули?) 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	20.02.2012, 23:47
	Ну значит это margin и он должен вытягиваться, занимая пространство так, чтобы всего было слева 15 и справа 10. 0

@rockmania 1 / 1 / 0 Регистрация: 05.10.2009 Сообщений: 27
	21.02.2012, 00:05 [ТС]
	Спасибо большое!=)) Буду дальше практиковаться=) float:top оказывается еще есть..=) Спасибо еще раз=) 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	21.02.2012, 00:17
	Вообще-то нету. Забыл убрать эту строку, для эксперимента пробовал, она не влияет никак на отображение, так как такого типа float не существует. :-) 0