Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/15: Рейтинг темы: голосов - 15, средняя оценка - 4.73
20 / 20 / 5
Регистрация: 18.04.2013
Сообщений: 495
1

Сайт разваливается при просмотре на разных мониторах

02.07.2013, 13:12. Показов 2913. Ответов 9
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Сверстал сайт по картинке которую прикрепляю, но в при изменении размера экрана весь дизайн ломается помогите. Заранее спасибо
Миниатюры
Сайт разваливается при просмотре на разных мониторах  
Вложения
Тип файла: zip www.zip (125.2 Кб, 7 просмотров)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 02.07.2013, 13:12
Ответы с готовыми решениями:

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

Нормальное отображение, на разных мониторах
Всем привет форумчане, возникла такая вот проблемка, в колледже пишу сайт на обычном ЭЛТ мониторе,...

Меню по-разному отображается на разных мониторах
Приветствую, есть меню width 100% , по середине картинка, вощле картинки с правой и левой стороны...

Софт для теста на разных мониторах
Есть ли софтина хорошая для теста сайтов на различных мониторах, в частности широкоформатниках?

9
20 / 20 / 5
Регистрация: 18.04.2013
Сообщений: 495
02.07.2013, 13:41  [ТС] 2
Вот код:
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
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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>Владимир Жирнов.Профессиональная Фотография</title>
       <link rel="stylesheet" type="text/css" href="style/style.css" />
        <style type="text/css">
        *{
   margin:0;
   padding: 0;
    } 
   body {
   margin:0 auto;
    background: url(image/bggg.jpg) repeat #282828;
    color:#FFFFFF;
    } 
   #content-main{
   margin:200px  auto 0;
    height: 310px; /* Высота блока */
    width: 60%; /* Ширина блока */
    
  
    }
    
    
    .content{
  background: url(image/bgg.jpg) repeat #282828;
    height: 310px; /* Высота блока */
    
   
  
    }
    
   h1{
   
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bolder ;
    }
   
  .img{
   
    
    float:left;
   
 
   }
   
   .hg{
   
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: italic  ;  
    font-weight: normal;
    color:#FECA00;
   
 
   }
   
   .right{
   
    font-family: Verdana, Arial, Helvetica, sans-serif;
    float:right;
   
 
   }
   .text{
   
    font-family: Verdana, Arial, Helvetica, sans-serif;
     width: 260px;
    float: left;
     
   }
   .hh{
   font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: italic  ;  
    font-weight: normal;
    color:#FECA00;
    float:right;
    }
    
     .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    top: 175px; /* Положение от нижнего края */
    right: 225px; /* Положение от правого края */
    
   }
    .contact {
    position: absolute; /* Абсолютное позиционирование */
    top: 215px; /* Положение от нижнего края */
    right: 150px; /* Положение от правого края */
    
   }
   
     a:link {
    color: #FFDD00; /* Цвет ссылок */
   }
   a:visited {
    color: #FFDD00; /* Цвет посещенных ссылок */
   }
   a:active {
    color: #FFDD00; /* Цвет активной ссылки */ 
   } 
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчеркивание 
                                   при наведении курсора мыши на ссылку */
                                   
   }
   
   
   
   .portfolio-item {float: left; padding-right: 8px; padding-bottom: 35px; text-align: center;}
.portfolio-item img {display: block; padding-bottom: 1px;}
 
#footer{
   margin:0px  auto ;
    height: 310px; /* Высота блока */
    width: 60%; /* Ширина блока */
    overflow: hidden;
    position: relative;
    clear:both;
    padding: 20px 0;
    
  
    }
.gallery{ padding-top: 128px;}
 
  </style>
    </head>
    <body>
<header id="header">
</header>
<img class="layer2" src="image/znak.png">
<h3><a href="contact.html" class="contact">Контакты</a></h3>
<section id="section">
<div id="content-main"><h1>Vladimir Jirnov  <span class="hg">Photography</span></h1>
<div class="content">
<img class="img" src="image/gerl.png"><!-- Gallery -->
        <div class="gallery">
            
            <div class="portfolio-item">
                <a href="#"><img src="image/BC-collage.jpg" alt="" /></a>
                <a href="#" class="menu">АРТ</a>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="image/tc001.jpg" alt="" /></a>
                <a href="#"class="menu">Коммерческая<br>фотография</a>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="image/Bukhara-1.jpg" alt="" /></a>
                <a href="#"class="menu">ПРОЕКТЫ</a>
            </div>
            <div class="portfolio-item last">
                <a href="#"><img src="image/Certificate-022.jpg" alt="" /></a>
                <a href="#"class="menu">Сертификаты<br>дипломы</a>
            </div>
            
            <div class="cl">&nbsp;</div>
        </div>
        <!-- End Gallery -->
 
</div>
 
 
</div>
</section>
<footer id="footer"><div class="text">Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов. Профессиональная Фотография. Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов. Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.</div>
<div class="right"><h3>Владимир Жирнов<span class="hh">&nbsp;Профессиональная Фотография</span></h3></div>
</footer>      
    </body>
</html>
0
39 / 39 / 1
Регистрация: 12.02.2013
Сообщений: 177
02.07.2013, 13:45 3
По семантике, если я не ошибаюсь, h3 не может идти перед h1
0
20 / 20 / 5
Регистрация: 18.04.2013
Сообщений: 495
02.07.2013, 13:55  [ТС] 4
Valiant, ну это если они объединены в hgroup...
0
39 / 39 / 1
Регистрация: 12.02.2013
Сообщений: 177
02.07.2013, 14:07 5
использование hgroup несемантично
0
162 / 162 / 11
Регистрация: 07.09.2011
Сообщений: 995
02.07.2013, 14:29 6
Не заглядывая глубоко.... а зачем margin: 0 auto; для body?!
0
20 / 20 / 5
Регистрация: 18.04.2013
Сообщений: 495
02.07.2013, 15:26  [ТС] 7
Цитата Сообщение от Lovrentiy Посмотреть сообщение
Не заглядывая глубоко.... а зачем margin: 0 auto; для body?!
да это по привычке сунул
а так и не надобно
0
1 / 1 / 1
Регистрация: 03.07.2013
Сообщений: 16
03.07.2013, 04:33 8
Запилить div с position: relative и фиксированной шириной, и обвернуть в него весь сайт, дело в том что у тебя стоит position:absolute, из-за этого и гуляют блоки, ну или просто убрать absolute

 Комментарий модератора 
Нарушение правил форума пункт 4.6

Обсуждение вопросов - только в теме на форуме. Приглашения к обсуждению еще где-либо (в том числе и с помощью системы личных сообщений) запрещены, за исключением коммерческих разделов.
0
20 / 20 / 5
Регистрация: 18.04.2013
Сообщений: 495
04.07.2013, 12:18  [ТС] 9
discognate, Вот сделал вот так , это то что ты имел ввиду и как есчо его можно оптимизировать?
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
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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>Владимир</title>
       <link rel="stylesheet" type="text/css" href="style/style.css" />
        <style type="text/css">
        *{
   margin:0;
   padding: 0;
    } 
   body {
    margin:0;
   padding: 0;
    background: url(image/bggg.jpg) repeat #282828;
    color:#FFFFFF;
    
    } 
    #wrapper{
   
  width: 820px;
    margin:140px auto;
    padding: 0;
    
    } 
    
    section{
    margin:0 auto;
    padding: 0;
  background: url(image/bgg.jpg) repeat #282828;
  position:relative ;
  height: 311px;
    }
    article{
    clear:botch;
    }
    
  
    
    
    #header{
       
   
  
    }
    
    .ie6 #header {
    width: 100%;
}
 
 
.h2, .h1{
  font-size:2em;
  color:;
    }
.h2{
  
  color:#FFDD00;
    }
    .p{
  
  
    }
    .znak{
  
    position:absolute ;
    left:790px;
    top:-52px;
    }
    .znak1{
  
    position:absolute ;
    left:804px;
    top:-10px;
    }
    .contact{
  
    position:absolute ;
    left:853px;
    top:-10px;
    }
 a:link {
    color: #FFDD00; /* Цвет ссылок */
   }
   a:visited {
    color: #FFDD00; /* Цвет посещенных ссылок */
   }
   a:active {
    color: #FFDD00; /* Цвет активной ссылки */ 
   } 
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчеркивание 
                                   при наведении курсора мыши на ссылку */
                                   
   }
   #znak a:link,#znak a:visited,#znak a:active{
    color: #FFFFFF; 
   } 
   .img{
  
    float:left; 
    margin:0;
   padding: 0;
    }
    .gallery {padding-top: 130px;}
       .portfolio-item {float: left; padding-right: 0px; padding-bottom: 35px; text-align: center;}
.portfolio-item img {display: block; padding-bottom: 1px;}
   #comment{
   width: 40%;
   float:left;
   text-align: justify;
   }
   <!-- .p1{
   float:right;
   } -->
   .h3, .h4{
  font-size:1.2em;
  color:;
    }
    .h4{
  
  color:#FFDD00;
    }
    
  </style>
    </head>
    <body><div id="wrapper"><header id="header"><p class="p"><span class="h1">Vladimir</span><span class="h2">&nbsp;Photography</span></p></header>
<section id="section"><div id="znak"><img class="znak" src="image/znak.png"><a href="mainen.html" class="mainenurl"><img class="znak1" src="image/faase.jpg"></a><a href="contact.html" class="contact">Контакты</a></div>
<img class="img" src="image/gerl.png">
<!-- Gallery -->
        <div class="gallery">
        
            
            <div class="portfolio-item">
                <a href="#"><img src="image/BC-collage2.png" alt="" /></a>
                <a href="#" class="menu">АРТ</a>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="image/tc0011.png" alt="" /></a>
                <a href="#"class="menu">Ком</a>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="image/Buk" alt="" /></a>
                <a href="#"class="menu">ПРО</a>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="image/DSC" alt="" /></a>
                <a href="#"class="menu">Изд</a>
            </div>
            <div class="portfolio-item last">
                <a href="#"><img src="image/Cer alt="" /></a>
                <a href="#"class="menu">Сер</a>
            </div>
            
            <div class="cl">&nbsp;</div>
        </div>
        <!-- End Gallery -->
</section>
<article id="article">
<div id="comment">Добро пожаловать на сайт 
 Более 
</div>
<p class="p1"><span class="h3">Владимир</span><span class="h4">&nbsp;Профессиональная</span></p>
</article>
 
      
    </div></body>
</html>
0
1 / 1 / 1
Регистрация: 03.07.2013
Сообщений: 16
04.07.2013, 13:10 10
#wrapper - добавь position: relative;
0
04.07.2013, 13:10
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 04.07.2013, 13:10
Помогаю со студенческими работами здесь

Верстка из PSD - шаблона и отображение на разных мониторах
Доброго времени суток! Взялся первый раз сверстать страницу из PSD-шаблона. Скачал бесплатный...

Свойство letter-spacing по-разному отображается на разных мониторах
Добрый день! Интересная штука со свойством css - letter-spacing. Подскажите, пожалуйста, кто...

Открытие ссылок в разных окнах на разных мониторах
Есть массив мониторов, полученный через Screen.AllScreens и массив ссылок, которые нужно открыть....

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


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru