Нарисовать и сверстать заглушку для сайта

dakia

Привет! Я - дизайнер-график, из верстки мне хорошо знаком только
. Но, поставили задачу - нарисовать и сверстать заглушку для сайта. http://www.elizabethdouglas.ru/ все ведет себя так как надо кроме одного момента: когда размер окна становится менее 480px и картинки выстраиваются в один ряд, div с текстом масштабируется относительно текста. мне же нужно чтоб он вел себя как картинки, т.е. был 325px по высоте при 100% (100% - 1920px) и пропорционально уменьшался, в точности как и картинки. При больших размерах окна такого, понятно, не происходит, так как размер держат соседние по строке div'ы. Подозреваю, что это не проблема, просто мне не хватает элементарнейших знаний. Поверхностные поиски ничего не дали (при изменении параметра height расколбашивает все и не масштабируется). Я сломала себе уже весь мозг =) Если вы можете мне помочь, прошу формулировать ответ и инструкцию в форме "для дебила": строчка такая-то, написать то-то. Спасибо.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ELIZABETH DOUGLAS - пледы ручной работы</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="http://www.cyberforum.ru/images/adapt.css" rel="stylesheet" type="text/css">
<!-- 
Дополнительные сведения об условных комментариях вокруг HTML-тегов в верхней части файла:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
 
Выполните следующие действия, если вы используете модифицированную сборку modernizr ([url]http://www.modernizr.com/):[/url]
* вставьте здесь ссылку на свой javascript;
* удалите ссылку ниже на html5shiv;
* добавьте класс no-js в HTML-теги в верхней части;
* вы также можете удалить ссылку на respond.min.js, если MQ Polyfill входит в сборку modernizr. 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<style type="text/css">
   A {
    color: #523628; /* Цвет ссылок */
   }
   A:visited {
    color: #523628; /* Цвет посещенных ссылок */
   }
   A:active {
    color: #523628; /* Цвет активных ссылок */
   }
  </style>
 
</head>
<body>
<div class="gridContainer clearfix">
  <div id="LayoutDiv1">
    <div id="LayoutDiv2"></div>
    <div id="LayoutDiv3"><img src="http://www.cyberforum.ru/images/maket_03.jpg"></div>
    <div id="LayoutDiv4"><img src="http://www.cyberforum.ru/images/maket_05.jpg"></div>
    <div id="LayoutDiv5">
      <h1 id="fittext">Уважаемые посетители! </h1>        
      <p>Сайт находится в разработке.<br>
      Пожалуйста, возвращайтесь позже. </p>
      <p>тел./факс: +7 495 788-78-51,        
      <br>788-79-94 (доб. 153)<br>
      моб.: +7 926 370-93-27
        <br><a href=mailto:[removed_email]>
        [email][removed_email][/email]</a>
</p>
    </p></div>
    <div id="LayoutDiv6"><img src="http://www.cyberforum.ru/images/maket_09.jpg"></div>
    <div id="LayoutDiv7"><img src="http://www.cyberforum.ru/images/maket_10.jpg"></div>
    <div id="LayoutDiv8"><img src="http://www.cyberforum.ru/images/maket_11.jpg"></div>
    <div id="LayoutDiv9"><img src="http://www.cyberforum.ru/images/maket_12.jpg"></div>
    <div id="LayoutDiv10"><img src="http://www.cyberforum.ru/images/maket_13.jpg"></div>
    <div id="LayoutDiv11"><img src="http://www.cyberforum.ru/images/maket_14.jpg"></div>
    <div id="LayoutDiv12"><img src="http://www.cyberforum.ru/images/maket_15.jpg"></div>
    <div id="LayoutDiv13"><img src="http://www.cyberforum.ru/images/maket_16.jpg"></div>
    <div id="LayoutDiv14"><img src="http://www.cyberforum.ru/images/maket_17.jpg"></div>
    <div id="LayoutDiv15"><img src="http://www.cyberforum.ru/images/maket_18.jpg"></div>
    <div id="LayoutDiv16"><img src="http://www.cyberforum.ru/images/maket_19.jpg"></div>
    <div id="LayoutDiv17"><img src="http://www.cyberforum.ru/images/maket_20.jpg"></div>
    <div id="LayoutDiv18"><img src="http://www.cyberforum.ru/images/maket_21.jpg"></div>
    <div id="LayoutDiv19"><img src="http://www.cyberforum.ru/images/maket_22.jpg"></div>
    <div id="LayoutDiv20"><img src="http://www.cyberforum.ru/images/maket_23.jpg"></div>
  </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
        $("#fittext").fitText(1.3, { minFontSize: '10px', maxFontSize: '20px' })
        $("#LayoutDiv5").fitText(1.9, { minFontSize: '4px', maxFontSize: '16px' })
        </script>
 
</div>
</body>
</html>
 
@charset "utf-8";
/* Простой «резиновый» носитель
   Примечание. Для «резинового» носителя требуется удалить атрибуты высоты и ширины из HTML
   [url]http://www.alistapart.com/articles/fluid-images/[/url] 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE6 не поддерживает атрибут max-width, поэтому по умолчанию используется ширина 100*% */
.ie6 img {
    width:100%;
}
 
/*
    Свойства Dreamweaver Fluid Grid
    ----------------------------------
    dw-num-cols-mobile:     3;
    dw-num-cols-tablet:     6;
    dw-num-cols-desktop:    9;
    dw-gutter-percentage:   20;
    
    Вдохновлено книгой «Отзывчивый веб-дизайн» (Responsive Web Design) Итана Маркота (Ethan Marcote) 
    [url]http://www.alistapart.com/articles/responsive-web-design[/url]
    
    и системой Golden Grid Джони Корпи (Joni Korpi)
    [url]http://goldengridsystem.com/[/url]
*/
 
/* Мобильный макет: 480 пикс. и меньше. */
 
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 60.4444%;
    padding-left: 1.7777%;
    padding-right: 1.7777%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv4 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv5 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv6 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv7 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv8 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv10 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv11 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv12 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv13 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv14 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv15 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv16 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv17 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv18 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv19 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv20 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
 
/* Макет для планшета: 481–768 пикс. Наследует стили от мобильного макета. */
 
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 79.7222%;
    padding-left: 1.1388%;
    padding-right: 1.1388%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv4 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv5 {
    clear: both;
    float: left;
    margin-left: 0; 
    margin-top: 9%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv6 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv7 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv10 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv11 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv12 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv13 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv14 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv15 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv16 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv17 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv18 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
#LayoutDiv19 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.5714%;
    display: block;
}
#LayoutDiv20 {
    clear: none;
    float: left;
    margin-left: 2.8571%;
    width: 48.5714%;
    display: block;
}
}
 
/* Макет для настольного компьютера: 769–1232 пикс. (максимум). Наследует стили от мобильного макета и макета для планшета. */
 
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 49.074%;
    max-width: 1232px;
    padding-left: 0.4629%;
    padding-right: 0.4629%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.0754%;
    display: block;
}
#LayoutDiv4 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv5 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
    font-family: Arial;
    font-size: 100%;
}
#LayoutDiv6 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.0754%;
    display: block;
}
#LayoutDiv7 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.0754%;
    display: block;
}
#LayoutDiv10 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv11 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv12 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.0754%;
    display: block;
}
#LayoutDiv13 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv14 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv15 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.0754%;
    display: block;
}
#LayoutDiv16 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv17 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv18 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.0754%;
    display: block;
}
#LayoutDiv19 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
#LayoutDiv20 {
    clear: none;
    float: left;
    margin-left: 1.8867%;
    width: 32.0754%;
    display: block;
}
}
2 ответа

dakia

Добавить для дива
<div class="gridContainer clearfix">
Свойство css
min-width: 690px;
Может то что ищете


dakia

если я все сделала правильно
<div id="LayoutDiv5" class="gridContainer clearfix">
(строка 47) и css'ный в LayoutDiv5, то ничего не работает. все разьезжается и перестает контачить jquery