Как правильно выровнять текст?

@бульбазавр · Регистрация: 07.05.2013

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

учу по определенным урокам возникло не понимания помогите)
как правильно надо написать в css что бы переместить текст как на рисунку?

в уроке сказано так:

CSS
1
2
3
4
5
6
7
8
9
10
11
.main{
    vidth:970px; margin:0 auto;
}
   .head{
   }
   .head h2{
       font:18px"Arial"; color:0000ff; float:left; margin-top: 20px;
   }
   .head a{
       font:18px"Arial"; color:0000ff; text-decoration:none; float:right; margin: 20px 100px 0 0;
   }

в итоге по правой стороне все нормально а по левой остается там где и был)
помогите разобраться)

Donald28 · 10.05.2013, 02:16

html не хватает.

Добавлено через 1 минуту
и что такое:

Сообщение от бульбазавр

vidth:970px;

может быть:

CSS
1
width:970px;

@Alexander519151 · 10.05.2013, 14:16

Всем привет.
попробуйте так:

HTML5
1
2
3
4
<div id="sidebar_L">ТЕКСТ</div>
<div id="content">HEAD</div>
<div id="sidebar_R">ТЕКСТ</div>
<div class="clear"></div>

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
62
63
64
65
66
67
68
69
70
body {
    margin:0;
    padding:0;
    
    font-family:Verdana, sans-serif;
    font-size:10px;
    color: #000;
    text-align:justify;
    }
 
p {
    text-indent:20px;
    margin-left:10px;
    margin-right:10px;
    }
 
h1, h2, h3, h4, h5, h6 {
    font-family:"Times New Roman";
    text-align:center;
    }
 
#sidebar_L {
    width:150px;
    border:ridge 12px;
    border-color:#FFF;
    border-radius:7px;
    -moz-border-radius:7px 7px 7px 7px;
    -webkit-border-radius:7px 7px 7px 7px;
    -ms-border-radius:7px 7px 7px 7px;
    -o-border-radius:7px 7px 7px 7px;
    -khtml-border-radius:7px 7px 7px 7px;
    margin-top:45px;    
    margin-left:5px;
    padding:5px;
    float:left;
    }
 
#content {
    border:ridge 12px;
    border-color:#FFF;
    border-radius:7px;
    -moz-border-radius:7px 7px 7px 7px;
    -webkit-border-radius:7px 7px 7px 7px;
    -ms-border-radius:7px 7px 7px 7px;
    -o-border-radius:7px 7px 7px 7px;
    -khtml-border-radius:7px 7px 7px 7px;
    margin-left:195px;
    margin-right:195px;
    padding:5px;
    text-align:center;
    }
 
#sidebar_R {
    width:150px;
    border:ridge 12px;
    border-color:#FFF;
    border-radius:7px;
    -moz-border-radius:7px 7px 7px 7px;
    -webkit-border-radius:7px 7px 7px 7px;
    -ms-border-radius:7px 7px 7px 7px;
    -o-border-radius:7px 7px 7px 7px;
    -khtml-border-radius:7px 7px 7px 7px;
    margin-right:5px;
    padding:5px;
    float:right;
    }
 
.clear {
    clear:both;
    }

Рамку указал для того, чтобы было видно границы областей.
Судя по ващему вопросу - нужно 3 области левая, центральная, правая.
Отступы отрегулированы с учетом рамки.
Адаптация к любому монитору
Это готовый исходник. Меняйте значения для себя.

С Уважением Александр.

@Taatshi · 10.05.2013, 18:08

Не по теме:

Alexander519151, ну что за привычка - писать в конце каждого сообщения "С уважением"? Тема на форуме - это прямой диалог, хоть и растянутый во времени, а не обмен письмами. Вы, когда разговариваете, тоже после каждой фразы "С уважением" говорите?

Отвлекает от сути разговора, ибо такое обращение инстинктивно воспринимается как финал обмена информацией. ИМХО, лишнее это.

@Alexander519151 · 10.05.2013, 18:17

понял, спасибо.

@Lovrentiy · 12.05.2013, 20:42

Я подозреваю в уроке изучают margin, а не пытаются разместить текст в разных углах сайта, хотя как знать? =)

Автор вкурсе что делает маргин и что должно произойти?

@бульбазавр · 13.05.2013, 16:19 **[ТС]**

Сообщение от Donald28

html не хватает.

Добавлено через 1 минуту
и что такое:

может быть:

CSS
1
width:970px;

да действительно вы правы сделал ошибку в слове width , и как бы не было фиксированной ширины каркаса сайта)

Добавлено через 1 минуту
всем огромное спасибо за помощь!!!

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Taatshi
	10.05.2013, 18:08
	Не по теме: Alexander519151, ну что за привычка - писать в конце каждого сообщения "С уважением"? Тема на форуме - это прямой диалог, хоть и растянутый во времени, а не обмен письмами. Вы, когда разговариваете, тоже после каждой фразы "С уважением" говорите? Отвлекает от сути разговора, ибо такое обращение инстинктивно воспринимается как финал обмена информацией. ИМХО, лишнее это. 1

@Alexander519151 461 / 461 / 6 Регистрация: 08.05.2013 Сообщений: 242
	10.05.2013, 18:17
	понял, спасибо. 2

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	12.05.2013, 20:42
	Я подозреваю в уроке изучают margin, а не пытаются разместить текст в разных углах сайта, хотя как знать? =) Автор вкурсе что делает маргин и что должно произойти? 1