Войти
  1. ВКонтакте
  2. Facebook
  1. » » » сайт разваливается при просмотре на разных мониторах
Новые публикации Скрыть панель справаПоказать панель справа

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

2013-07-02T15:06:51+04:00 2013-07-02T15:06:51+04:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 15:06, 02.07.2013
Сверстал сайт по картинке которую прикрепляю, но в при изменении размера экрана весь дизайн ломается помогите. Заранее спасибо
HTML code:
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Владимир Жирнов.Профессиональная Фотография</title>
  6.        
  7.             <style type="text/css">
  8.                 *{
  9.    margin:0;
  10.    padding: 0;
  11.     }
  12.    body {
  13.    margin:0 auto;
  14.     background: url(image/bggg.jpg) repeat #282828;
  15.         color:#FFFFFF;
  16.     }
  17.    #content-main{
  18.    margin:200px  auto 0;
  19.     height: 310px; /* Высота блока */
  20.     width: 60%; /* Ширина блока */
  21.    
  22.  
  23.         }
  24.        
  25.        
  26.         .content{
  27.   background: url(image/bgg.jpg) repeat #282828;
  28.     height: 310px; /* Высота блока */
  29.    
  30.    
  31.  
  32.         }
  33.        
  34.    h1{
  35.    
  36.     font-family: Verdana, Arial, Helvetica, sans-serif;
  37.         font-weight: bolder ;
  38.         }
  39.    
  40.   .img{
  41.    
  42.    
  43.     float:left;
  44.    
  45.  
  46.    }
  47.    
  48.    .hg{
  49.    
  50.     font-family: Verdana, Arial, Helvetica, sans-serif;
  51.     font-style: italic  ;  
  52.         font-weight: normal;
  53.         color:#FECA00;
  54.    
  55.  
  56.    }
  57.    
  58.    .right{
  59.    
  60.     font-family: Verdana, Arial, Helvetica, sans-serif;
  61.     float:right;
  62.    
  63.  
  64.    }
  65.    .text{
  66.    
  67.     font-family: Verdana, Arial, Helvetica, sans-serif;
  68.      width: 260px;
  69.         float: left;
  70.          
  71.    }
  72.    .hh{
  73.    font-family: Verdana, Arial, Helvetica, sans-serif;
  74.     font-style: italic  ;  
  75.         font-weight: normal;
  76.         color:#FECA00;
  77.         float:right;
  78.         }
  79.        
  80.          .layer2 {
  81.     position: absolute; /* Абсолютное позиционирование */
  82.     top: 175px; /* Положение от нижнего края */
  83.     right: 225px; /* Положение от правого края */
  84.    
  85.    }
  86.     .contact {
  87.     position: absolute; /* Абсолютное позиционирование */
  88.     top: 215px; /* Положение от нижнего края */
  89.     right: 150px; /* Положение от правого края */
  90.    
  91.    }
  92.    
  93.      a:link {
  94.     color: #FFDD00; /* Цвет ссылок */
  95.    }
  96.    a:visited {
  97.     color: #FFDD00; /* Цвет посещенных ссылок */
  98.    }
  99.    a:active {
  100.     color: #FFDD00; /* Цвет активной ссылки */
  101.    }
  102.    a {
  103.     text-decoration: none; /* Убираем подчеркивание у ссылок */
  104.    }
  105.    a:hover {
  106.     text-decoration: underline; /* Добавляем подчеркивание
  107.                                    при наведении курсора мыши на ссылку */
  108.                                                                    
  109.    }
  110.    
  111.    
  112.    
  113.    .portfolio-item {float: left; padding-right: 8px; padding-bottom: 35px; text-align: center;}
  114. .portfolio-item img {display: block; padding-bottom: 1px;}
  115.  
  116. #footer{
  117.    margin:0px  auto ;
  118.     height: 310px; /* Высота блока */
  119.     width: 60%; /* Ширина блока */
  120.         overflow: hidden;
  121.         position: relative;
  122.         clear:both;
  123.         padding: 20px 0;
  124.    
  125.  
  126.         }
  127. .gallery{ padding-top: 128px;}
  128.  
  129.   </style>
  130.     </head>
  131.     <body>
  132. <header id="header">
  133. </header>
  134. <img class="layer2" src="image/znak.png">
  135. <h3><a href="contact.html" class="contact">Контакты</a></h3>
  136. <section id="section">
  137. <div id="content-main"><h1>Vladimir Jirnov  <span class="hg">Photography</span></h1>
  138. <div class="content">
  139. <img class="img" src="image/gerl.png"><!-- Gallery -->
  140.                 <div class="gallery">
  141.                        
  142.                         <div class="portfolio-item">
  143.                                 <a href="#"><img src="image/BC-collage.jpg" alt="" /></a>
  144.                                 <a href="#" class="menu">АРТ</a>
  145.                         </div>
  146.                         <div class="portfolio-item">
  147.                                 <a href="#"><img src="image/tc001.jpg" alt="" /></a>
  148.                                 <a href="#"class="menu">Коммерческая<br>фотография</a>
  149.                         </div>
  150.                         <div class="portfolio-item">
  151.                                 <a href="#"><img src="image/Bukhara-1.jpg" alt="" /></a>
  152.                                 <a href="#"class="menu">ПРОЕКТЫ</a>
  153.                         </div>
  154.                         <div class="portfolio-item last">
  155.                                 <a href="#"><img src="image/Certificate-022.jpg" alt="" /></a>
  156.                                 <a href="#"class="menu">Сертификаты<br>дипломы</a>
  157.                         </div>
  158.                        
  159.                         <div class="cl">&nbsp;</div>
  160.                 </div>
  161.                 <!-- End Gallery -->
  162.  
  163. </div>
  164.  
  165.  
  166. </div>
  167. </section>
  168. <footer id="footer"><div class="text">Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов. Профессиональная Фотография. Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов. Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.</div>
  169. <div class="right"><h3>Владимир Жирнов<span class="hh">&nbsp;Профессиональная Фотография</span></h3></div>
  170. </footer>      
  171.     </body>
  172. </html>
У Вас недостаточно прав для скачивания файлов.
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011