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

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

18.01.2014, 18:07. Показов 1087. Ответов 14
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть верстка: 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="https://www.cyberforum.ru/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
1
@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:400px;
    z-index:3;
    }
 
.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
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
18.01.2014, 18:07
Ответы с готовыми решениями:

Как задать четкое позиционирование элементу?
Есть верстка: 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);

14
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
21.01.2014, 14:06
необходимо partners поместить внутрь блока footer_left, и относительно него спозционировать.
HTML5
1
2
3
<div class="footer_left>
<div class="partners"></div>
</div>
1
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,712
22.01.2014, 11:41  [ТС]
Поместил. Ничего не поменялось. Наверное с позиционированием что-то не то?
0
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
22.01.2014, 12:19
Цитата Сообщение от morda77 Посмотреть сообщение
Есть верстка: http://morda77.zg5.ru/
- Здесь ничего не изменилось, как было так и осталось.
1
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,712
22.01.2014, 12:21  [ТС]
Цитата Сообщение от tree85 Посмотреть сообщение
- Здесь ничего не изменилось, как было так и осталось.
Я просто с локалки не перекинул. Сейчас перекину. Посмотрите через мин.5 , пожалуйста.
0
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
22.01.2014, 12:26
float:left - убрать. top -245px (например, а так как вам надо выставляйте)
1
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,712
22.01.2014, 12:29  [ТС]
Цитата Сообщение от tree85 Посмотреть сообщение
float:left - убрать. top -245px (например, а так как вам надо выставляйте)
Сделал. Так же катается по высоте при масштабировании.
0
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
22.01.2014, 12:32
Во-первых, вы не убрали первый див partners, а тот с которым мы работаем - он у сейчас внизу. Во-вторых, не 245px, а -245px
1
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,712
22.01.2014, 12:38  [ТС]
Цитата Сообщение от tree85 Посмотреть сообщение
Во-первых, вы не убрали первый див partners, а тот с которым мы работаем - он у сейчас внизу. Во-вторых, не 245px, а -245px
Вот я болбесина!))) Не проснулся еще, видать.))) Спасибище!
Вы первый, кто предложил верное решение!
А еще не подскажите, в футере текст при уменьшении масштабирование выезжает вниз за границу футера. На локалке все в порядке. Это дело в хосте (у них там внизу реклама их хоста) или в моей верстке?
Спасибо.
0
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
22.01.2014, 13:50
вываливается потому что у блока footer_left - фиксированная высота стоит. Шрифт не масштабируется .

Добавлено через 2 минуты
попробуйте такие чистящие стили
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
/*clear style*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
   
}
 
body {
    line-height: 1;
    font-family:arial, tahoma, verdana, sans-serif; 
    font-size: 14px;
    
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* clear style end*/
1
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,712
23.01.2014, 02:13  [ТС]
Цитата Сообщение от tree85 Посмотреть сообщение
попробуйте такие чистящие стили

Ну, я вставил все целиком в файл CSS, ничего не изменилось.
0
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
23.01.2014, 06:50
до манипуляций со вставкой partners, работало нормально? Проблема остается таже в масштабировании размера шрифта (нужно найти причину), думаю надо копать в этом направлении...
1
24 / 24 / 10
Регистрация: 22.12.2012
Сообщений: 2,712
23.01.2014, 06:52  [ТС]
Цитата Сообщение от tree85 Посмотреть сообщение
до манипуляций со вставкой partners, работало нормально? Проблема остается таже в масштабировании размера шрифта (нужно найти причину), думаю надо копать в этом направлении...
до манипуляций со вставкой partners было тоже самое.
0
 Аватар для tree85
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
23.01.2014, 07:19
вообще, это частенько в хроме происходит, при минимальном масштабировании, не обращайте внимания. Если не хотите, чтобы вылазило за пределы блока, то необходимо убрать его фиксированную высоту. И я бы попробовал footer_left поместить во внутрь footer
1
25.01.2014, 09:53
 Комментарий администратора 
morda77, одна тема - один вопрос. На каждый вопрос необходимо создавать новую тему.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
25.01.2014, 09:53
Помогаю со студенческими работами здесь

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
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 на бесплатный. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru