С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
23 / 23 / 9
Регистрация: 22.12.2012
Сообщений: 2,537
1

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

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

Author24 — интернет-сервис помощи студентам
Есть верстка: 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...

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

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

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

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

Ну, я вставил все целиком в файл CSS, ничего не изменилось.
0
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
23.01.2014, 06:50 12
до манипуляций со вставкой partners, работало нормально? Проблема остается таже в масштабировании размера шрифта (нужно найти причину), думаю надо копать в этом направлении...
1
23 / 23 / 9
Регистрация: 22.12.2012
Сообщений: 2,537
23.01.2014, 06:52  [ТС] 13
Цитата Сообщение от tree85 Посмотреть сообщение
до манипуляций со вставкой partners, работало нормально? Проблема остается таже в масштабировании размера шрифта (нужно найти причину), думаю надо копать в этом направлении...
до манипуляций со вставкой partners было тоже самое.
0
61 / 61 / 0
Регистрация: 27.06.2012
Сообщений: 219
23.01.2014, 07:19 14
вообще, это частенько в хроме происходит, при минимальном масштабировании, не обращайте внимания. Если не хотите, чтобы вылазило за пределы блока, то необходимо убрать его фиксированную высоту. И я бы попробовал footer_left поместить во внутрь footer
1
Taatshi
25.01.2014, 09:53     Как задать четкое позиционирование элементу?
  #15
 Комментарий администратора 
morda77, одна тема - один вопрос. На каждый вопрос необходимо создавать новую тему.
0
25.01.2014, 09:53
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.01.2014, 09:53
Помогаю со студенческими работами здесь

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

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

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

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

Как задать иконку элементу управения (для панели инструментов)?
как задать иконку елементу управения?

Не удается задать позиционирование фонового рисунка
Не удается задать позиционирование фонового рисунка относительно левого внутреннего отступа ,во...


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
Полезные поделки на Arduino, которые можно сделать самому
raxper 06.01.2025
Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .
Подборка решений задач на Python
IT_Exp 06.01.2025
Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллер­­ы
raxper 06.01.2025
Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .
Из чего собрать игровой компьютер
inter-admin 06.01.2025
Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .
Обновление сайта www.historian.b­y
Reglage 05.01.2025
Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .
Как использовать GraphQL в C# с HotChocolate
Programming 05.01.2025
GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .
Модель полного двоичного сумматора с помощью логических операций (python)
AlexSky-coder 04.01.2025
def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()
Это мы не проходили, это нам не задавали...(аси­­­­­­­­­­­­­­­­­­­­­­­­­­х­р­о­н­­н­­­ы­­й счётчик с управляющим сигналом зад
Hrethgir 04.01.2025
Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru