Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714

Как задать четкое позиционирование элементу?

16.01.2014, 16:32. Показов 2332. Ответов 21
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть верстка: http://morda77.zg5.ru/

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Святогор Реалти</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
 
 
</head>
<body>
 
<div class="fix"><!--Класс fix-->
    <div class="header"><!--Класс Header-->
      <div class="logo"><!--Логотип--><a href="/"><img src="images/logo.png"></div><!--Конец класса Logo-->
      <div class="navigation_gorizont"><!--Верхнее горизонтальное меню-->
        <ul>
          <li><a href="#">Аренда квартир</a></li>
          <li><a href="#">Продажа квартир</a></li>
          <li><a href="#">Аренда офисов</a></li>
          <li><a href="#">Продажа офисов</a></li>
         </ul>
      </div><!--Конец верхнего горизонтального меню-->
      <div class="navigation_vert"><!--Верхнее вертикальное меню-->
            <ul>
              <li><a href="#">Аренда жилья</a></li>
              <li><a href="#">Продажа / покупка жилья</a></li>
              <li><a href="#">Коммерческая  недвижимость</a></li>
              <li><a href="#">Загородная  недвижимость</a></li>
              <li><a href="#">Оформление документов</a></li>
              <li><a href="#">Полезная информация</a></li>
              <li><a href="#">О компании</a></li>
              <li><a href="#">Вакансии</a></li>
              <li><a href="#">Контакты</a></li>
             </ul>
          </div><!--Конец вертикального меню-->
          <div class="head_right"><!--Правая колонка хедера-->
          <ul>
              <li><a href="#"><h1>Группа компаний «Святогор»</h1></a></li>
              <br>
              <li>Мы всегда устремлены вперед.<p> Принцип нашей работы – постоянное<p> развитие, совершенствование<p> качества услуг и расширение круга<p> деятельности. В ближайших планах<p> компании – завоевание достойных<p> позиций на формирующихся рынках<p> инвестиционных контрактов и<p> земельных участков.</li><br><br><br>
                <li><h2>Спецпредложения —</h2></li>
             </ul>
            </div><!--Конец правой колонки хедера-->
     </div><!--Конец класса Header-->
        
    <div class="content_pictures"><!--Класс картинки контента--></div><!--Конец класса картинки контента-->
    <div class="content"><!--Класс content-->
        <div class="left"><!--Класс left-->
        </div><!--Конец rласса left-->
        <div class="partners"><!--Rласс partners-->
        </div><!--Конец класса partners-->   
    </div><!--Конец класса content-->
    <div class="footer"></div>
    <div class="footer_left"><p>Владельцам недвижимости, желающим продать или сдать в аренду, мы поможем быстро продать или сдать помещение на выгодных условиях. Вы можете оставить заявку или связаться с нами по телефону.
Консутьтации по вопросам аренды и продажи недвижимости бесплатно.</p><!-- Класс footer_left -->
        </div><!-- Конец класса footer_left -->
 
 
</div><!--Конец класса fix-->
 
</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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
@import url(reset.css);
 
*{
    margin:0;
    padding:0;  
}
 
html,body{
    width:100%;
    height:100%;
    background-color:#CCCCCC;
    }
    
.fix{
 
    width:1260px;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;
}
 
.header{
    width:100%;
    height:452px;   
    background-image:url(../images/header_bacground.jpg);
    outline: 1px solid #FF0000;
}
 
.logo{
    display:block;
    float:left;
    width:191px;
    height:41px;
    background-repeat:no-repeat;    
    margin-left:78px;
    margin-top:70px;
    }
 
.navigation_gorizont{
    position:relative;
    left:-40px;
    width:720px;
    height:20px;
    margin-left:280px;
    padding-top:70px;
}
    
.navigation_gorizont ul {/*Структура навигации верхнего меню*/
    
}
    
.navigation_gorizont ul li{/*Структура блоков ссылок верхнего меню*/
    float: left;
}
    
.navigation_gorizont ul li a{/*Вид ссылок верхнего меню*/
    color:#FFF;
    text-decoration:none;
    font-family:Myriad Pro;
    font-size:14px;
    padding:0 23px;
}
 
.left {
    float:left;
    width:200px;
    clear:both;
    margin-left:80px;
    }
 
.navigation_vert{
    width:200px;
    margin-left:62px;
    }
    
.navigation_vert ul li{
    width:200px;
    padding:3px 5px;
    margin-left:10px;
    }
 
.navigation_vert ul li a{
    color:#000000;
        
    }
    
.head_right{
    float:right;
    width:190px;
    height:228px;
    position:absolute;
    left:1000px;
    top:120px;
    margin:40px 20px;
        }   
 
.head_right ul li{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif 11px;
    font-size:11px;
    color:#FFF;
    }
 
.head_right ul li h1{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif 11px;
    font-size:14px;
    color:#FFF;
    text-decoration:underline;/*Нижнее подчеркивание*/
    }
    
.head_right ul li h2{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif 11px;
    font-size:14px;
    color:#FFF;
    text-decoration:none;
    }   
        
.content{
    position:relative;
    padding:20px 20px 311px;
    outline: 1px solid #FF00FF; 
    background-color:#FFFFFF;
    
}
 
.content_pictures{
        position:absolute;
        width:970px;
        height:128px;
        background-image:url(../images/content_pictures.png);
        background-repeat:no-repeat;
        margin-top:-80px;
        float:left;
        z-index:3;
        outline: 1px solid #993399;
    }
 
.partners{
    position:relative;
    width:134px;
    height:22px;
    background-image:url(../images/partners.png);
    background-repeat:no-repeat;
    float:left;
    left:279px;
    top:600px;
    z-index:3;
    outline: 1px solid #993399;
    }
 
.footer{
    width:100%;
    height:157px;
    background-image:url(../images/footer_bacground.jpg);
    position:absolute;
    bottom:0;
    outline: 1px solid #00FF00;
 
    }   
    
.footer_left{
    width:279px;
    height:291px;
    background-image:url(../images/footer_left.jpg);
    position:absolute;
    bottom:0;
    outline: 1px solid #FFFF00;
    z-index:4;
    font-family:Arial, sans-serif;
    font-size:11px;
    line-height:2;
    padding:10px;
    }
        
.footer_left p{
    margin-left:70px;
    margin-top:20px;
    }
Проблема в том, что при масштабировании элемент partners съезжает вверх и вниз.
Задача в том, что бы заставить элемент partners оставаться на одном и том же месте, как на рис 1, при любом масштабировании.
Заранее благодарю всех, кто поможет советом.
Миниатюры
Как задать четкое позиционирование элементу?   Как задать четкое позиционирование элементу?   Как задать четкое позиционирование элементу?  

0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
16.01.2014, 16:32
Ответы с готовыми решениями:

Как задать четкое позиционирование элементу?
Есть верстка: http://morda77.zg5.ru/ &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;...

Как задать элементу две тени?
Делаю так box-shadow: -8px -8px #7f731d, -4px -5px #9b8619; вроде как надо параметры каждой тени отделять запятой, но не...

Как элементу задать и цвет и градиент одновременно?
Типа такого, чтобы градиент был над цветомbackground: red, linear-gradient(to top, black, white);

21
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 17:16
у футер абсолютное позиционирование, поэтому предыдущий блок content полностью накладывается поверх футера
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
16.01.2014, 19:00  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
у футер абсолютное позиционирование, поэтому предыдущий блок content полностью накладывается поверх футера
Это да. Но если я изменю позиционирование футера, то он не будет прижиматься книзу страницы браузера. Как тогда быть?
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 19:16
сделай отступ о нижнего края страницы равной высоте футера, высота футера же задана
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
16.01.2014, 19:29  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
сделай отступ о нижнего края страницы равной высоте футера, высота футера же задана
Какому блоку надо придать этот отступ и как? margin-ом ?
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 19:57
то, что поменял
CSS
1
2
3
4
5
6
7
8
.content{
    bottom: 157px;/*теперь нижняя граница content соприкасается с верхней границей footer*/
}
.partners{
    position:absolute;
    bottom: 0;/*прижал блок partners к низу content*/
    left: 300px;/*т.к. у блока абсолютное позиционирование отсчет идет от верхнего левого края content - родительского блока*/
    }
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
16.01.2014, 20:07  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
то, что поменял
CSS
1
2
3
4
5
6
7
8
.content{
    bottom: 157px;/*теперь нижняя граница content соприкасается с верхней границей footer*/
}
.partners{
    position:absolute;
    bottom: 0;/*прижал блок partners к низу content*/
    left: 300px;/*т.к. у блока абсолютное позиционирование отсчет идет от верхнего левого края content - родительского блока*/
    }
Вот что получилось:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.content{
    position:relative;
    padding:20px 20px 311px;
    outline: 1px solid #FF00FF; 
    background-color:#FFFFFF;
    bottom: 157px;/*теперь нижняя граница content соприкасается с верхней границей footer*/
}
 
.partners{
    width:134px;
    height:22px;
    background-image:url(../images/partners.png);
    background-repeat:no-repeat;
    float:left;
    top:400px;
    z-index:3;
    position:absolute;
    bottom: 0;/*прижал блок partners к низу content*/
    left: 300px;/*т.к. у блока абсолютное позиционирование отсчет идет от верхнего левого края content - родительского блока*/
    }
Элемент partners также плавает при масштабировании, а блок .content_pictures съехал ниже, чем надо.
Миниатюры
Как задать четкое позиционирование элементу?  
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 20:23
а можешь скрин всего макета выложить?
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
16.01.2014, 20:26  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
а можешь скрин всего макета выложить?
Так выложил же я и скрины и весь код html и css и ссылку на сайт. Или я чего-то не понял?

Добавлено через 41 секунду
Цитата Сообщение от BigBob Посмотреть сообщение
а можешь скрин всего макета выложить?
Или ты про макет PSD?
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 20:29
ну, да, исходный так сказать
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
16.01.2014, 20:29  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
а можешь скрин всего макета выложить?
Вот то что должно получиться.
Миниатюры
Как задать четкое позиционирование элементу?  
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 20:55
честно говоря верстка дохлая.
я бы начал оптимизацию с самого верха.
сделай верхнюю картинку фоном в .fix
CSS
1
.fix{background: url(../images/header_bacground.jpg) no-repeat #FFFFFF;}
это решит некоторые затруднения с позиционирование элементов, т.е. теперь высоту хедера можно уменьшить.
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
16.01.2014, 20:59
и дальше можно например разбить весь макет на три колонки и верстать каждую отдельно
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
16.01.2014, 21:04  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
и дальше можно например разбить весь макет на три колонки и верстать каждую отдельно
Вложение 354968
Вот вставил. Один хрен.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.fix{
    background-image: url(../images/header_bacground.jpg) no-repeat;
    width:1260px;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;
}
 
.header{
    width:100%;
    height:552px;   
    background-image:url(../images/header_bacground.jpg);
    outline: 1px solid #FF0000;
}
http://morda77.zg5.ru/
0
16.01.2014, 21:04

Не по теме:

сегодня уже ничем не смогу помочь - уезжаю

1
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
17.01.2014, 10:40

Посмотрел еще верстку. картинки нужно вырезать без иконок, текста, номеров телефонов, еще какие-то лишние линии на этой картинке. Поотключай все лишние слои в фотошопе и заново сохрани эту картинку. Весь текст нужно добавлять как текст, все кнопки и иконки вырезаются отдельно.
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
17.01.2014, 12:12  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
Вложение 355121
Посмотрел еще верстку. картинки нужно вырезать без иконок, текста, номеров телефонов, еще какие-то лишние линии на этой картинке. Поотключай все лишние слои в фотошопе и заново сохрани эту картинку. Весь текст нужно добавлять как текст, все кнопки и иконки вырезаются отдельно.
Это все ерунда. Помоги лучше найти решение по моей теме.

Добавлено через 3 минуты
Цитата Сообщение от BigBob Посмотреть сообщение
Вложение 355121
Посмотрел еще верстку. картинки нужно вырезать без иконок, текста, номеров телефонов, еще какие-то лишние линии на этой картинке. Поотключай все лишние слои в фотошопе и заново сохрани эту картинку. Весь текст нужно добавлять как текст, все кнопки и иконки вырезаются отдельно.

И, кстати, ты в фотошопе мой скриншот макета как-то обработал, что убрал все слои? Как ты это сделал?
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
17.01.2014, 13:14
Цитата Сообщение от morda77 Посмотреть сообщение
И, кстати, ты в фотошопе мой скриншот макета как-то обработал, что убрал все слои? Как ты это сделал?
нет, эта картинка залита у тебя на сервере на сайте
0
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,714
17.01.2014, 13:21  [ТС]
Цитата Сообщение от BigBob Посмотреть сообщение
нет, эта картинка залита у тебя на сервере на сайте
А.. Ясно. Через мозилу -открыть фоновое изображение- сохранить изображение как.)

Так что с моей траблой? Есть какие мысли на этот счет?
0
13 / 13 / 5
Регистрация: 30.07.2013
Сообщений: 74
17.01.2014, 13:38

Проблема не только в partners, еще в footer_left текст за пределы вылазит, да и дальше ты будешь добавлять контент всё будет прыгать.
Я вижу только одно решение - нормально спозиционировать все блоки, начиная с родительских.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.01.2014, 13:38
Помогаю со студенческими работами здесь

Как задать прозрачность любому элементу?
Делал свой калькулятор и хочу наложить прозрачную панельку или картинку на textbox, подскажите как это сделать? Вот несколько моих...

Как задать свойства элементу контейнерного массива
Значит, ситуация. Необходимо формировать массив из рандомной последовательности 0 и 1. принято решение использовать динамический массив,...

как задать значение статическому элементу класса
В классе есть статический Private элемент, мне нужно создать статическую функцию которая будет перезаписывать значение этого элемента. Вот...

Как задать каждому элементу массива значение по умолчанию?
Например я знаю что void max(int t=9){//значение по умолчанию переменой t++; } А как такую штуку сделать для каждого елемента...

Как убрать/задать элементу checkbox свойство checked?
Здравствуйте. У меня страница генерится по шаблону с нескольких частей. Основное меню и посередине прикрепляются (include) 2 файла - это...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
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&amp;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. На борту пять. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru