Позиционирование элемента

@yurij04 · Регистрация: 20.10.2015

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

Я позиционирую надпись "Мой сайт", подвинул ее так как мне нужно но при увеличении уменьшении окна браузера получается такое то есть надпись уходит влево.
Вот html и css код.
Подскажите пожалуйста как правильно сделать чтобы надпись не уходила влево.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
              <html>
              <head>
                   <title>Мой сайт</title>
                   <meta charset="utf-8" />
                   <meta name="keywords" content="" />
                   <meta name="description" content="" />
                   <link rel="stylesheet" type="text/css" href="index.css" />
              </head>
                    <body>                  
                         <div class="header"></div>
                         <div class="zagolovok"><h2>Мой сайт</h2></div>
                         <div class="fix">
                         <div class="slider">
                         <img src="images/The Conjuring1.jpg">
                         </div>
                         <div class="content">
                         <div class="leftCol"><h2>Левая колонка</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                         <div class="main"><h1>Привет мир!</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                         </div>
                         <div class="footer"></div>
                         </div> 
                    </body>
              </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
62
63
64
65
66
* {
    margin: 0;
    padding: 0;
}
 
html,body {
    width: 100%;
    height: 100%;
    background-image: url(background/0-0-0-194-20.png);
    background-attachment: fixed;
    position: relative;
}
 
.header {
    widht: 100%; 
    height: 60px;
    background-color: #000000;
    margin-bottom: 100px;
}
 
 
.fix {
    width: 900px;
    margin: 0 auto; 
    min-height: 100%; 
    background-color: #FFFFFF;
    position: relative;
    }
    
    .zagolovok {
    color: white;
    position: absolute;
    left: 230px;
    top: 100px;
}
    
.slider {
    width: 100%;
    height: 300px;
    background-image: url();
    }
    
.content {
    padding: 20px 20px 70px;
    overflow: hidden;
}
 
.leftCol {
    width: 180px;
    padding: 10px;
    background-color: #808080;
    float: left;
    margin-right: 20px;
}
 
.main {
    overflow: hidden;
}
    
.footer {
    width: 100%;
    height: 50px;
    background-color:  #000000;
    position: absolute;
    bottom: 0;
}

@alc0 · 16.03.2016, 12:58

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

@yurij04 · 16.03.2016, 13:07 **[ТС]**

Это position: relative; в html,body я сам дописал. То есть это оставить и задать в %?

Добавлено через 4 минуты
Нет,стоит на месте теперь но контент съезжает. А если в html,body убрать position: relative; как было то как правильно сдвигать название?

@alc0 · 16.03.2016, 13:12

у заголовка position:absolute...у боди relative;...выставляем у заголовка top:1%; left:1%; проценты свои...и он будет подстраиваться...под ширину боди

Добавлено через 3 минуты
просто, подумайте еще как сделать обертку для своего всего контента хеадера и футера...считаю, что не надо разбрасываться блоками, как у вас, желательно оборачивайте в блоки ... я думаю вы поняли))

Добавлено через 1 минуту
и обычно, никто позиционирование для боди не делает)

@yurij04 · 16.03.2016, 13:18 **[ТС]**

Я же Вам пишу что position: relative; я добавил, вот без этого свойства как правильно сделать?

Добавлено через 1 минуту
у заголовка position:absolute...у боди relative;..
Это я сам экспериментирую, а как правильно?

Добавлено через 1 минуту
По Вашему так получается

@alc0 · 16.03.2016, 13:31

relative у боди (есть он или нету)...не повлияет на позиционирование заголовка...позиционируйте процентами..чтобы позиционировать пикселями, нужная обертка блока заголовка, которая будет иметь фиксированную ширину и высоту...понятно??

Добавлено через 52 секунды
ну проценты выставить свои же надо...а не везде 1%

Добавлено через 1 минуту
так, заголовок должен находиться над картинкой, где контент???

Добавлено через 2 минуты
можете засунуть заголовок в блок slider, убрать position, и выставить margin:0 auto;

Добавлено через 2 минуты
извиняюсь, лучше заголовок в блок fix закидывать...

Добавлено через 2 минуты
margin:0 auto; выставить его по центру ...а если он вам нужен возле угла картинки, то не задавайте margin...ну вообщем закиньте его в блок fix и там думаю разберетесь...

@yurij04 · 16.03.2016, 13:42 **[ТС]**

Если его я закину в блок fix как я уже это делал сегодня то получится полная билеберда так как умfix есть белый фон который открывается,ну может я не так объясняю как то ну в общем это совсем не то что мне нужно. Я сейчас не могу уже с компьютера зайти, чуть позже посмотрю все и напишу. Спасибо

@alc0 · 16.03.2016, 13:47

мде...значит сделайте, такие же свойства как у fix в блоке zagolovok; и все...

CSS
1
2
3
4
5
.zagolovok {
     width: 900px;
    margin: 0 auto; 
color: white;
}

и дурить голову не придется

@yurij04 · 16.03.2016, 14:26 **[ТС]**

А если мне теперь эту надпись нужно поднять немного вверх?

Добавлено через 2 минуты
Видите как она стоит сейчас а как ее передвинуть вверх немного ?

@alc0 · 16.03.2016, 14:38

отступы назначаются с помощью margin:""; например отступ снизу: margin-bottom:20px; отступ сверху: margin-top:10px; так же и действуют отрицательные значения отступа - например : margin-top:-20px; или margin-bottom:-10px ( но в этих случаях элементы, с такими параметрами, будут залазить на другой блок)...эксеперементируйте...в вашем случае, чтобы был отступ от блока fix - необходимо задать margin-bottom:10px...кстати, у вас есть отступ от header 100px...измените его...либо задайте отрицательный отступ margin-top:-20px;

Добавлено через 4 минуты
я бы сделал так

CSS
1
2
3
4
5
6
7
8
9
10
11
.header {
    widht: 100%; 
    height: 60px;
    background-color: #000000;
    margin-bottom: 0px;
}
.zagolovok {
     width: 900px;
    margin: 50px auto; 
color: white;
}

Добавлено через 2 минуты
как работает свойство margin: a b c d;
a-отступ сверху
b-отступ справа
c-отступ снизу
d-отступ слева

Добавлено через 2 минуты
значения auto - выстраивает по центру;
когда указано только 2 значения : margin:20px 50px;
то оно аналогично варианту: margin:20px 50px 20px 50px;

@yurij04 · 16.03.2016, 14:42 **[ТС]**

Спасибо! Наконец то получилось и все стоит правильно!

@alc0 · 16.03.2016, 14:45

не за что)

@yurij04 · 16.03.2016, 15:00 **[ТС]**

И вот что я еще заметил такую проблему при уменьшении размера браузера
Вот код, не подскажите как ее решить?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
              <html>
              <head>
                   <title>Мой сайт</title>
                   <meta charset="utf-8" />
                   <meta name="keywords" content="" />
                   <meta name="description" content="" />
                   <link rel="stylesheet" type="text/css" href="index.css" />
              </head>
                    <body>                  
                         <div class="header"><div class="logo01"><img src="images/090901.png"></div></div>
                         <div class="zagolovok"><h2>Мой сайт</h2></div>
                         <div class="fix">
                         <div class="slider">
                         <img src="images/The Conjuring1.jpg">
                         </div>
                         <div class="content">
                         <div class="leftCol"><h2>Левая колонка</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                         <div class="main"><h1>Привет мир!</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                         </div>
                         <div class="footer"></div>
                         </div> 
                    </body>
              </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
62
63
64
65
66
67
68
69
* {
    margin: 0;
    padding: 0;
}
 
html,body {
    width: 100%;
    height: 100%;
    background-image: url(background/0-0-0-194-20.png);
    background-attachment: fixed;
}
 
.header {
    widht: 100%; 
    height: 60px;
    background-color: #000000;
    margin-bottom: 50px;
}
 
.logo01 {
     
}
 
 
.fix {
    width: 900px;
    margin: 0 auto; 
    min-height: 100%; 
    background-color: #FFFFFF;
    position: relative;
    }
    
    .zagolovok {
     width: 900px;
    margin: 0 auto; 
     margin-bottom:50px;
color: white;
}
    
.slider {
    width: 100%;
    height: 300px;
    background-image: url();
    }
    
.content {
    padding: 20px 20px 70px;
    overflow: hidden;
}
 
.leftCol {
    width: 180px;
    padding: 10px;
    background-color: #808080;
    float: left;
    margin-right: 20px;
}
 
.main {
    overflow: hidden;
}
    
.footer {
    width: 100%;
    height: 50px;
    background-color:  #000000;
    position: absolute;
    bottom: 0;
}

Добавлено через 1 минуту
Логотип уезжает влево а при увелечении

@alc0 · 16.03.2016, 15:09

я не знаю, где там должен точно находиться логотип, но просто задайте так

CSS
1
2
3
4
.logo01{
width: 900px;
margin: 0 auto; 
}

и будет всегда на уровне с контентом...

а то, что при увелечении искажается картинка, это нормально...то же самое, если картинку с размером 100x200 увеличить до 500x800...

@yurij04 · 16.03.2016, 15:12 **[ТС]**

Да вот сейчас правильно! Спасибо Вам еще раз за помощь)

@alc0 · 16.03.2016, 15:13

не за что) удачи в начинаниях)

@yurij04 · 16.03.2016, 15:21 **[ТС]**

Тут опять проблемка получается)) Но мне так не нужно что бы лого у меня был посередине, нужно что бы с краю, но если я подвину его в левый угол сайта тог при уменьшении размера окна браузера он опять съедет )))

Добавлено через 2 минуты
Уже книгу по html css xhtml head first купил и всю прочел))

@alc0 · 16.03.2016, 15:37

CSS
1
2
3
.logo01{
float:left;
}

Добавлено через 42 секунды
так...стоп

Добавлено через 35 секунд
киньте img как должно быть и с какой позиции не уходило

Добавлено через 6 минут
кстати, прочитать книжку мало...надо много примеров,задачек решать...

Добавлено через 6 минут

CSS
1
2
3
4
5
6
7
8
9
.logo01{
max-width:1600px;
min-width:900px;
margin:0 auto;
}
 
.logo01 img{
float:left;
}

Добавлено через 30 секунд
ну хотите, так сделайте)

@yurij04 · 16.03.2016, 15:43 **[ТС]**

Вроде как правильно сейчас )) Спасибо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Позиционирование элемента

Решение

Решение

Решение

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 12:58
	Сообщение было отмечено yurij04 как решение Решение позиционирование заголовка, задайть в процентах...так как боди имеет резиновую ширину и выосту 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 13:07 [ТС]
	Это position: relative; в html,body я сам дописал. То есть это оставить и задать в %? Добавлено через 4 минуты Нет,стоит на месте теперь но контент съезжает. А если в html,body убрать position: relative; как было то как правильно сдвигать название? 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 13:12
	у заголовка position:absolute...у боди relative;...выставляем у заголовка top:1%; left:1%; проценты свои...и он будет подстраиваться...под ширину боди Добавлено через 3 минуты просто, подумайте еще как сделать обертку для своего всего контента хеадера и футера...считаю, что не надо разбрасываться блоками, как у вас, желательно оборачивайте в блоки ... я думаю вы поняли)) Добавлено через 1 минуту и обычно, никто позиционирование для боди не делает) 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 13:18 [ТС]
	Я же Вам пишу что position: relative; я добавил, вот без этого свойства как правильно сделать? Добавлено через 1 минуту у заголовка position:absolute...у боди relative;.. Это я сам экспериментирую, а как правильно? Добавлено через 1 минуту По Вашему так получается 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 13:31
	relative у боди (есть он или нету)...не повлияет на позиционирование заголовка...позиционируйте процентами..чтобы позиционировать пикселями, нужная обертка блока заголовка, которая будет иметь фиксированную ширину и высоту...понятно?? Добавлено через 52 секунды ну проценты выставить свои же надо...а не везде 1% Добавлено через 1 минуту так, заголовок должен находиться над картинкой, где контент??? Добавлено через 2 минуты можете засунуть заголовок в блок slider, убрать position, и выставить margin:0 auto; Добавлено через 2 минуты извиняюсь, лучше заголовок в блок fix закидывать... Добавлено через 2 минуты margin:0 auto; выставить его по центру ...а если он вам нужен возле угла картинки, то не задавайте margin...ну вообщем закиньте его в блок fix и там думаю разберетесь... 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 13:42 [ТС]
	Если его я закину в блок fix как я уже это делал сегодня то получится полная билеберда так как умfix есть белый фон который открывается,ну может я не так объясняю как то ну в общем это совсем не то что мне нужно. Я сейчас не могу уже с компьютера зайти, чуть позже посмотрю все и напишу. Спасибо 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 14:26 [ТС]
	А если мне теперь эту надпись нужно поднять немного вверх? Добавлено через 2 минуты Видите как она стоит сейчас а как ее передвинуть вверх немного ? 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 14:42 [ТС]
	Спасибо! Наконец то получилось и все стоит правильно! 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 14:45
	не за что) 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 15:12 [ТС]
	Да вот сейчас правильно! Спасибо Вам еще раз за помощь) 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 15:13
	не за что) удачи в начинаниях) 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 15:21 [ТС]
	Тут опять проблемка получается)) Но мне так не нужно что бы лого у меня был посередине, нужно что бы с краю, но если я подвину его в левый угол сайта тог при уменьшении размера окна браузера он опять съедет ))) Добавлено через 2 минуты Уже книгу по html css xhtml head first купил и всю прочел)) 0

@yurij04 3 / 3 / 2 Регистрация: 20.10.2015 Сообщений: 413
	16.03.2016, 15:43 [ТС]
	Вроде как правильно сейчас )) Спасибо! 0