С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
usrash
-24 / 3 / 0
Регистрация: 15.07.2011
Сообщений: 229
1

В разных браузерах картинки в шапке имеют разное положение

28.03.2016, 18:08. Просмотров 357. Ответов 3
Метки нет (Все метки)

В разных браузерах картинки в шапке имеют разное положение как решить данный вопрос?
если флоаты использовать данной проблемы нет, но их больше не используют

Добавлено через 3 минуты
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
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
<!DOCTYPE html>
<html>
    <head>
    <meta charset='utf-8'><!--Кодировка --> 
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon'><!--пдоключаем иконку ее размер должен быть от 16х16 до 48х48(не поддежриватеся IE6 и ниже(нужно упоковать в один файл ico 2 иконки 16x16 и 48х48)( допускается использование GIF и PNG для этого меняем type на image/gif или image/png)--> 
    <link href='style.css' rel='stylesheet' type='text/css'><!--подключаем файл стилей--> 
    <script type='text/javascript' src='js/jquery-2.2.1.min.js'></script><!--подключаем автономно  бибилиотеку jquery --> 
    <script type='text/javascript' src='js/jq.js'></script><!--подключаем свой скрипт для задания свойств меню (#menu) -->  
        <title>главная страница</title>
        
    </head>
    <body>
        <div id='main'>  <!-- блок  включающий в себя все содержимое страницы целиком-->
            <div id='header'> <!--блок включающий в себя всю полностью шапку-->         
                <div class='logo'><!--логотип-->
                    <a class='logo-item'>HT</a>
                </div>
                <div class='slogan'></h1><!-- задаем класс для слоган(название сайта)-->
                    <a class='slogan-item'>Информационно-развлекательный портал</a> <!-- текст в слогане-->
                </div>
                <div id ='head-conact-sh'><!-- блок  включающий в себя правую надпись в шапке + форму поиска -->
                    <div id ='head-conact'><!--правая надпись в шапке-->
                    <p>Администрация сайта не несет ответсвенности за публикуемые материалы.По всем вопросам обращайтесь  к авторам статей.<br>
                        <a href ='#'>Правила сайта </a></p>
                                
                    </div>
                    <div id ='search-headdv'>
                        <form method ='get' action=''><!--форма поиска, get предназначен для получения требуемой информации и передачи данных в адресной строке ограничение по отправке данных в 4 Кб, action указывает обработчик, к которому обращаются данные формы при их отправке на сервер-->
                        <ul class='search-head'><!--cоздаем списки для вывода блоков с текстовым полем и кнопкой поиск-->
                            <li>
                        <input type='search' name='text'class='search-style' name='search-form' placeholder='Что будем искать?'><!-- input-предназначен для создания текстовых полей, различных кнопок, search-Поле для поиска, name-Устанавливает идентификатор метатега для пары «имя=значение»(это якорь) , placeholder Выводит текст внутри поля формы, который исчезает при получении фокуса.-->
                            </li> 
                        <li>
                            <input type ='image' class='search-btn' src='img/search-btn.jpg'  name ='search'/><!--выводим кнопку поиска в виде картинки, class='search-btn' класс для управления кнопкой поиска(src обязательный атрибут)-->
                        </li>
                        </ul> 
                        </form>
                    </div>
                </div>
                </div>
                    <div id='menu'><!--стили для меню-->
                    <ul>
                            <li> <a href='#'>Главная </a></li><!--это пункты меню, они будут являться ссылками-->
                            <li> <a href='#'>О играх</a>
                        <ul>
                                <li> <a href='#'>Подраздел 1</a></li>
                                <li> <a href='#'>Подраздел 2</a>
                            <ul>
                                <li> <a href='#'>Подраздел 1.1</a></li>
                            </ul>
                        </ul>
                            <li> <a href='#'>Программирование</a>   <!-- <li> jпределяет отдельный элемент списка-->
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Мобильные телефоны </a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Планшеты и консоли</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Софт</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Прочее</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Форум</a></li>
                    </ul>       
                </div>  
            
            <div id='contentwrapper'><!-- блок включающий в себя  центральную область, левую и правую колонки(в данном случае  нужен чтобы сделать отступ в высоту шапки (чтобы сайт не принимал  значение высоты шапки)) -->           
                <div id = 'left-bar' > <!-- блок включающий в себя левую колонку-->
                left
                </div>
                
                <div id = 'right-bar' ><!-- блок включающий в себя правую колонку-->
                right
                </div>
                <div id = 'content' ><!-- блок включающий в себя центральную область-->
                Задача организации, в особенности же рамки и место обучения кадров в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач. Таким образом рамки и место обучения кадров позволяет оценить значение модели развития. Таким образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании существенных финансовых и административных условий. Задача организации, в особенности же постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки направлений прогрессивного развития.
Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке форм развития. Повседневная практика показывает, что рамки и место обучения кадров требуют определения и уточнения существенных финансовых и административных условий. Разнообразный и богатый опыт новая модель организационной деятельности представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Таким образом сложившаяся структура организации в значительной степени обуславливает создание новых предложений. Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке направлений прогрессивного развития.
Разнообразный и богатый опыт сложившаяся структура организации требуют от нас анализа направлений прогрессивного развития. Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание дальнейших направлений развития. Равным образом укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям. Разнообразный и богатый опыт реализация намеченных плановых заданий позволяет оценить значение новых предложений.
Не следует, однако забывать, что сложившаяся структура организации влечет за собой процесс внедрения и модернизации форм развития. Равным образом сложившаяся структура организации влечет за собой процесс внедрения и модернизации форм развития. Разнообразный и богатый опыт реализация намеченных плановых заданий представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития.
Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности играет важную роль в формировании новых предложений. Товарищи! рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании форм развития. Равным образом дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития. Не следует, однако забывать, что рамки и место обучения кадров способствует подготовки и реализации систем массового участия. С другой стороны реализация намеченных плановых заданий в значительной степени обуславливает создание модели развития.
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности требуют определения и уточнения направлений прогрессивного развития. Товарищи! новая модель организационной деятельности играет важную роль в формировании соответствующий условий активизации. Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке соответствующий условий активизации.
Значимость этих проблем настолько очевидна, что сложившаяся структура организации играет важную роль в формировании соответствующий условий активизации. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки дальнейших направлений развития. С другой стороны постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке новых предложений. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации новых предложений. Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации новых предложений.
Повседневная практика показывает, что сложившаяся структура организации способствует подготовки и реализации направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Повседневная практика показывает, что консультация с широким активом требуют от нас анализа существенных 
                </div>
                
                <div id = 'footer' ><!--подвал-->
                footer
            </div>
        </div>  
        </div>
    </body>
 </html>
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.03.2016, 18:08
Ответы с готовыми решениями:

Разное отображение в разных браузерах
И снова вопрос во выводу контента... Открываю страницу в разных браузерах, а...

Разное отображение шрифта в разных браузерах
Для меню используется нестандартный шрифт AXP FreeSetC Bold. Шрифт прогнала...

В разных браузерах разное расположение картинок и расстояние между текстом(
Помогите пожалуйста! (только не пугайтесь,все лишнее с html ,что не касается...

Как скорректировать положение картинок в разных браузерах?
Привет! Проблема из самых обычных - в разных браузерах все по-разному. Вопрос...

Размер картинки в разных браузерах
Есть вот такой код &lt;script type=&quot;text/javascript&quot;&gt; function showhide(n) {...

3
usrash
-24 / 3 / 0
Регистрация: 15.07.2011
Сообщений: 229
28.03.2016, 18:08  [ТС] 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
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
@charset "utf-8";
/*сбросы */
*{
    margin:0; 
    padding:0;/*margin:0 скидываем все  внешние отступы до нуля, padding:0 обнуляем внутренние отступы*/
    outline: 0; /* убираем контуры */
    box-sizing: border-box;
    font-family: sans-serif; /* Устанавливается  семейство шрифтов  по умолчанию семейство шрифтов */
    -ms-text-size-adjust: 100%; /* 1 Предотвращение и IE ОС IOS размер шрифта регулировки после изменения ориентации устройства , Без отключения пользовательского зума.*/
    -webkit-text-size-adjust: 100%; /* 1 */
}
 
 
/* стили*/
html, body
    {
    width:100%; 
    height:100%; 
    min-height:100%;/*Задает минимальную высоту элементов*/
    
    }
 body{
     background:#f2f2f2; /*задаем цвет для фона сайта*/
    }
    #main{
    width:1200px;  /*минимальная ширина сайта, меньше этой ширины он сжиматься не  будет*/
    margin:0 auto; /*отцентрируем контент сайта, отступ сверху, снизу 0, справа, слева автоматически вычислять*/
    height:100%;
    }
        #header/*стили для шапки*/
        {
        
        position:relative;  
        margin: 0 auto;
        padding:0;/*margin:0 скидываем все  внешние отступы до нуля, padding:0 обнуляем внутренние отступы*/
        background-color:#C0C000;   
        width:1200px;
        height:200px;
        
        }   
               
 
    .logo/*логотип сайта*/
    {
        position:relative;/* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места)*/
        display: table-cell; /* Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>). в дивах лучше его использоать вместо float*/
        margin: 0 auto;
        width: 240px;
        height:200px;
        background-image: url(img/logo.png); /* Путь к фоновому изображению */
        background-position:center center;/* Задает начальное положение фонового изображения, установленного с помощью свойства background-image (1 положение по горизонтали 2 положение по  вертикали)*/
        background-repeat: no-repeat;/* не повторять фоновое изображение*/
        background-color:#FFFFFF;/*задаем фоновый цвет логотипу*/
        
        
        
        
    }
        .logo-item/*стили для текста в логотипе */
        { 
            position:absolute;/*Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет*/
            top:38%;
            font-size: 55px;
            font-weight:bold;/*Устанавливает насыщенность шрифта*/
            color:#FFFFFF;/*Устанавливает цвет текста*/
            width: 240px;
            height:200px;
            text-align:center;/*text-align Определяет горизонтальное выравнивание текста в пределах элемента.center Выравнивание текста по центру*/
            line-height: 0.7;/*устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта.*/
        }
    .slogan/*стили для слогана сайта*/
    { 
        position:relative;/* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места)*/
        display: table-cell; 
        width:600px;
        height:200px;  
        background-image: url(img/slogan.png); /* Путь к фоновому изображению */
        background-position:center center;/* Задает начальное положение фонового изображения, установленного с помощью свойства background-image (1 положение по горизонтали 2 положение по  вертикали)*/
        background-repeat: no-repeat;/* не повторять фоновое изображение*/
        background-color:#FFFFFF; /*задаем фоновый цвет */
        
            
    }
    .slogan-item  /* стили для текста в слогане*/
    {   
        position:absolute;/*Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет*/
        width:600px;
        height:200px;
        text-align:center;/*text-align Определяет горизонтальное выравнивание текста в пределах элемента.center Выравнивание текста по центру*/
        font-size: 13px;
        padding-top: 22%;/* отступы внутри элемента  1 параметр сверху, 2 параметр справа, 3 параметр снизу, 4 параметр слева*/
        line-height: 0.7;/*устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта.*/
    }
        
    #head-conact-sh /* общие стили  для правой надписи в шапке + формы поиска */
    {
        position:relative; /* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места)*/
        display: table-cell;
        width: 360px;
        height:200px;
        background-color: #0000FF;
    }   
        #head-conact/*стили для информации справа*/
        {   
        position:relative; /* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места)*/
        width: 360px;
        height:171px;
    
        }
        #head-conact a/*стилли для ссылок #head-conact*/
        {
             text-decoration: none; /* Отменяем подчеркивание у ссылки */
             color: red; /* Цвет ссылок */
        }
        .search-headdv{
            position:absolute;
            width:360px;
            height:29px;
        }
        
        .search-head/*стили для поиска*/
        {
            clear: both;/*служит для очищения потока элемента float,благодаря этому в уменьшенном окне браузера не происходит смещения формы поиска(both Отменяет обтекание элемента одновременно с правого и левого края)*/
            margin-right:53px;
            list-style:none;/*убираем маркеры*/
            background:url(img/bg-search.png) no-repeat;
            width:307px;
            height:29px;    
            margin: 0 0;/*задаем отступы 1 отступ сверху, второй справа, третий снизу, четвертый слева*/
        }   
            .search-head  li  /*задаем стили для <li> в search-head */
            {
               float:left;/*выравниваем в одну строку*/                       
               
            }
                .search-style/*стили для строки поиска*/                          
                {
                /*скрываем стандартную строку поиска при помощи стилей*/                      
                border:none; /*убираем рамку*/
                margin:6px 30px 3px 10px;/*задаем отступы 1 отступ сверху, второй справа, третий снизу, четвертый слева*/
                width: 210px;/*ширина*/
                font-size:12px;
                }
            .search-btn /*стили для кнопки поиска*/
            {    
                margin:8px 0 0 0;/*отступы для надписи найти*/    
            }
    #menu/*стили для меню*/
    {   
        position:relative;/* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места)*/
        z-index:9999;
        clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ 
        background-color:#330033;
        width:1200px;/*ширина меню*/
        height:50px; /*высота меню*/    
        display:table;/*Определяет, что элемент является блочной таблицей*/
        list-style:none;/*отменяет маркеры для списка*/ 
        font-size:12px;/*размер шрифта меню */  
        text-align:center;/*text-align Определяет горизонтальное выравнивание текста в пределах элемента.center Выравнивание текста по центру*/
    }
        #menu ul
        {
        margin:0;
        padding:0;    
        }
    #menu li /*стили для пунктов в меню*/
            {
                position: relative;
                width:142px;/*ширина пунктов меню*/
            }
        #menu>ul>li/* стили для пунктов меню*/
        {
            
            float: left; /*делаем меню горизонтальным*/
            list-style:none;/*отменяет маркеры для списка*/
            height:50px;/*высота пунктов меню*/
            position: relative;
            display: inline-block; /*Значение inline-block генерирует блочный элемент, с поведением строчного элемента*/
            border-left: 1px solid white;/*левая граница для пунктов меню */   
            padding-top:1% ;/* выравниваем текст посередине */
            
        }
            #menu li a /* стили для ссылок в меню*/
            {   
                text-decoration: none;
                display: block;
                 padding: 8px 0.38rem;/*Единица rem задаёт размер относительно размера шрифта элемента*/ 
                color: white;/*меняем цвет текста ссылок в меню*/
            }
            #menu li:first-child /*псевдокласс отвечающий за первый элемент в списке*/
            {   
                border-left:none;/*убираем левую границу*/
            }
                
                    
            #menu li:last-child /*псевдокласс отвечающий за последний элемент в списке*/
            {
                border-right:none;/*убираем правую границу*/
            }
                #menu ul li
                {
                    float:left;/*выравниваем по левому краю*/
                    background-image: url(img/bg-menu.png);/* Путь к фоновому изображению */
                    background-repeat: repeat-x ;/*повторять по оси x фоновое изображение*/
                }
                #menu ul:first-child::before /*свойства для 1 элемента в списке Псевдоэлемент ::before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.*/
                {
                        float:left;/*выравниваем по левому краю*/
                        content: url(img/1-menu.png);
                        margin-bottom: -0.3em; /* убираем отступ внизу от картинки  */ 
 
                }   
                #menu ul:last-child::after/*свойства для последнего элемента в списке( ::after Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется.  Работает совместно со свойством content.*/
                {
                    float:left;/*выравниваем по левому краю*/
                    content: url(img/2-menu.png);
                    margin-bottom: -0.3em; /* убираем отступ внизу от картинки  */ 
 
                }
        #menu>ul>li ul 
        {
          background: white;
          display: none;  /*скрываем вложенные пункты*/
        }
        #menu>ul>li>ul a 
        {
          color: black;
        }
        #menu>ul>li:hover>ul 
        {
            display: block;  /*скрываем вложенные пункты*/
        }
            /*Выпадающее меню*/
            #menu>ul>li ul 
            {
            position: absolute;
            display: none;
            
        }
                        #menu>ul>li>ul /*1 подуровень*/
                            {
                            top: 100%;
                            left: 0;
                            width: 150px;/*задаем ширину подуровней*/
                            list-style-type: none; /* Убираем маркеры */
                            }
                            #menu>ul>li>ul>li:hover>ul 
                            {
                                display: block;
                            }
        
                                #menu>ul>li>ul>li>ul /*2 подуровень*/
                                {
                                    top: 0;
                                    left:100%;/*по потребности, можно слева выдвигать, можно справа*/
                                    width: 150px; /*по потребности, можно и жесткую ширину*/
                                    list-style-type: none; /* Убираем маркеры */
                                }
                                    #menu>ul>li>ul>li>ul>li>ul 
                                    {
                                        top: 0;
                                        right: 100%;/*по потребности, можно слева выдвигать, можно справа*/
                                        width: 100%; /*по потребности, можно и жесткую ширину*/
                                    }
                            #menu li ul li:first-child /*псевдокласс отвечающий за первый элемент в подпунктах меню*/
                            {
                            background-image: none;/* убираем картинку */                                                   
                            }
                            #menu li ul li:last-child /*псевдокласс отвечающий за последний элемент в  в подпунктах меню*/
                            {   
                            background-image: none;/* убираем картинку */
                        
                            }
                            #menu li ul:last-child::after/*убираем картинку в подменю и дочерних подпунктах*/
                            {
                            content: none;/* убираем картинку */
                            }
                        
                    
                .change/*класс из бибилотеки jquery суть этого класса при скроллинге страницы  значение position:relative подменяется на position:fixed*/
                    {
                    position:fixed 
                !important; width:100%; top:0px/* Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля. */
                }
        #contentwrapper /* стили для блока включающего в себя  центральную область, левую и правую колонки +футер*/
        {
             position:relative; /* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места) здесь чтобы задать absolute для колонок (для корректной работы position)*/    
             margin-bottom:100px;
            min-height:100%;/*Задает минимальную высоту элемента.(чтобы content растягивался по всей длине текста находящегося в нем)*/
        }
        #left-bar/*стили для  левой колонки */
        {
            position:absolute;
            left:0; /* для position определяет расстояние от левого края */
            background-color:#00C0C0;
            width:240px;/*с шириной 240px*/
            height:100%;
    
        }
        #content/* стили для центральной области*/
        {     
        margin:0 240px 0 240px; /*чтобы контент(колонка) встал на место делаем отступы  справа 240px и слева 240px*/
        background-color:#8080FF;
        width: 720px;/*с шириной 240px*/
        height:100%;/*задаем высоту содержимого контента чтобы колонки вытянулись*/
        }
        #right-bar/* стили для правой колонки*/
        {
        position:absolute;  
        right:0;/*для position определяет расстояние от правого края родительского элемента*/           
        background:#900;/*выделяем цветом правую область(колонку)*/
        width:240px;/*с шириной 240px*/
        height:100%;
        
        }
        #footer/* стили для подвала*/
        { 
        position:relative; /* Относительное позиционирование(Положение элемента устанавливается относительно его исходного места)  */ 
        background-color:#FFC0FF;
        width:1200px;
        height:100px;
        }
0
usrash
-24 / 3 / 0
Регистрация: 15.07.2011
Сообщений: 229
28.03.2016, 18:11  [ТС] 3
В разных браузерах картинки в шапке имеют разное положение


В разных браузерах картинки в шапке имеют разное положение
0
usrash
-24 / 3 / 0
Регистрация: 15.07.2011
Сообщений: 229
28.03.2016, 21:05  [ТС] 4
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
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
<!DOCTYPE html>
<html>
    <head>
    <meta charset='utf-8'><!--Кодировка --> 
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon'><!--пдоключаем иконку ее размер должен быть от 16х16 до 48х48(не поддежриватеся IE6 и ниже(нужно упоковать в один файл ico 2 иконки 16x16 и 48х48)( допускается использование GIF и PNG для этого меняем type на image/gif или image/png)--> 
    <link href='style.css' rel='stylesheet' type='text/css'><!--подключаем файл стилей--> 
    <script type='text/javascript' src='js/jquery-2.2.1.min.js'></script><!--подключаем автономно  бибилиотеку jquery --> 
    <script type='text/javascript' src='js/jq.js'></script><!--подключаем свой скрипт для задания свойств меню (#menu) -->  
        <title>главная страница</title>
        
    </head>
    <body>
        <div id='main'>  <!-- блок  включающий в себя все содержимое страницы целиком-->
            <div id='header'> <!--блок включающий в себя всю полностью шапку-->         
                <div class='logo'><!--логотип-->
                    <a class='logo-item'>HT</a>
                </div>
                <div class='slogan'></h1><!-- задаем класс для слоган(название сайта)-->
                    <a class='slogan-item'>Информационно-развлекательный портал</a> <!-- текст в слогане-->
                </div>
                <div id ='head-conact-sh'><!-- блок  включающий в себя правую надпись в шапке + форму поиска -->
                    <div id ='head-conact'><!--правая надпись в шапке-->
                    <p>Администрация сайта не несет ответсвенности за публикуемые материалы.По всем вопросам обращайтесь  к авторам статей.<br>
                        <a href ='#'>Правила сайта </a></p>
                                
                    </div>
                    <div id ='search-headdv'>
                        <form method ='get' action=''><!--форма поиска, get предназначен для получения требуемой информации и передачи данных в адресной строке ограничение по отправке данных в 4 Кб, action указывает обработчик, к которому обращаются данные формы при их отправке на сервер-->
                        <ul class='search-head'><!--cоздаем списки для вывода блоков с текстовым полем и кнопкой поиск-->
                            <li>
                        <input type='search' name='text'class='search-style' name='search-form' placeholder='Что будем искать?'><!-- input-предназначен для создания текстовых полей, различных кнопок, search-Поле для поиска, name-Устанавливает идентификатор метатега для пары «имя=значение»(это якорь) , placeholder Выводит текст внутри поля формы, который исчезает при получении фокуса.-->
                            </li> 
                        <li>
                            <input type ='image' class='search-btn' src='img/search-btn.jpg'  name ='search'/><!--выводим кнопку поиска в виде картинки, class='search-btn' класс для управления кнопкой поиска(src обязательный атрибут)-->
                        </li>
                        </ul> 
                        </form>
                    </div>
                </div>
                </div>
                    <div id='menu'><!--стили для меню-->
                    <ul>
                            <li> <a href='#'>Главная </a></li><!--это пункты меню, они будут являться ссылками-->
                            <li> <a href='#'>О играх</a>
                        <ul>
                                <li> <a href='#'>Подраздел 1</a></li>
                                <li> <a href='#'>Подраздел 2</a>
                            <ul>
                                <li> <a href='#'>Подраздел 1.1</a></li>
                            </ul>
                        </ul>
                            <li> <a href='#'>Программирование</a>   <!-- <li> jпределяет отдельный элемент списка-->
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Мобильные телефоны </a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Планшеты и консоли</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Софт</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Прочее</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Форум</a></li>
                    </ul>       
                </div>  
            
            <div id='contentwrapper'><!-- блок включающий в себя  центральную область, левую и правую колонки(в данном случае  нужен чтобы сделать отступ в высоту шапки (чтобы сайт не принимал  значение высоты шапки)) -->           
                <div id = 'left-bar' > <!-- блок включающий в себя левую колонку-->
                left
                </div>
                
                <div id = 'right-bar' ><!-- блок включающий в себя правую колонку-->
                right
                </div>
                <div id = 'content' ><!-- блок включающий в себя центральную область-->
                Задача организации, в особенности же рамки и место обучения кадров в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач. Таким образом рамки и место обучения кадров позволяет оценить значение модели развития. Таким образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании существенных финансовых и административных условий. Задача организации, в особенности же постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки направлений прогрессивного развития.
Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке форм развития. Повседневная практика показывает, что рамки и место обучения кадров требуют определения и уточнения существенных финансовых и административных условий. Разнообразный и богатый опыт новая модель организационной деятельности представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Таким образом сложившаяся структура организации в значительной степени обуславливает создание новых предложений. Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке направлений прогрессивного развития.
Разнообразный и богатый опыт сложившаяся структура организации требуют от нас анализа направлений прогрессивного развития. Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание дальнейших направлений развития. Равным образом укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям. Разнообразный и богатый опыт реализация намеченных плановых заданий позволяет оценить значение новых предложений.
Не следует, однако забывать, что сложившаяся структура организации влечет за собой процесс внедрения и модернизации форм развития. Равным образом сложившаяся структура организации влечет за собой процесс внедрения и модернизации форм развития. Разнообразный и богатый опыт реализация намеченных плановых заданий представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития.
Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности играет важную роль в формировании новых предложений. Товарищи! рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании форм развития. Равным образом дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития. Не следует, однако забывать, что рамки и место обучения кадров способствует подготовки и реализации систем массового участия. С другой стороны реализация намеченных плановых заданий в значительной степени обуславливает создание модели развития.
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности требуют определения и уточнения направлений прогрессивного развития. Товарищи! новая модель организационной деятельности играет важную роль в формировании соответствующий условий активизации. Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке соответствующий условий активизации.
Значимость этих проблем настолько очевидна, что сложившаяся структура организации играет важную роль в формировании соответствующий условий активизации. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки дальнейших направлений развития. С другой стороны постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке новых предложений. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации новых предложений. Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации новых предложений.
Повседневная практика показывает, что сложившаяся структура организации способствует подготовки и реализации направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Повседневная практика показывает, что консультация с широким активом требуют от нас анализа существенных 
                </div>
                
                <div id = 'footer' ><!--подвал-->
                footer
            </div>
        </div>  
        </div>
    </body>
 </html>
Добавлено через 2 минуты
Ребят что неужели трудно подсказать
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.03.2016, 21:05

"Скачут" картинки в разных браузерах
Всем привет! Кто может знать, почему такая ситуация происходит как н скринах ...

Разное отображение в браузерах
Добрый день. Помогите пожалуйста. Вроде бы проверила страницы на валидность....

Картинки в шапке
Шапка сайта Мне нужно вставить несколько картинок в эту шапку и задать между...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru