@charset "utf-8"; /* Дата: 15.02.2008 Автор: Берков Юрий Юрьевич Сайт: http://www.a4e40.com.ua E-mail: ahurafenix@yandex.ru Производитель и все права: Автомагазин A4-E40 Использованные методы: Раскладка колонок методом float Примечания: Если создаете комментарии на русском языке то добавляйте после них пустые комментарии как пример (если этого не сделать будут дублировать символы последниие вышестоящего текста) */ /**/ /* Это странное значение размера шрифта 100.01% компенсирует несколько глюков браузеров. Во-первых, установка значения размера шрифты по умолчанию в процентах (а не em) устраняет проблему IE/Win при непропорциональном растягивании и сжатии шрифтов, если затем используются em для других элементов. Кроме того, некоторые версии Opera показывают font-size: 100% мельче, чем другие браузеры. Safari же, имеет проблемы с font-size: 101%. Поэтому лучше использовать именно 100.01%!*/ /**/ html { font-size:100.01%; height:100%; } body { margin:0; padding:0; background: url(../images/bg.gif) #fff repeat; /* Заполнитель фона */ /**/ font: 62.5% Tahoma, Georgia, Arial, Sans-Serif; /* 10pt */ /**/ line-height:1.125em; } #container { position:relative; padding:0; margin:0 auto; width:848px; min-height:100%; } #title { width:848px; height:280px; } #topcontent { width:848px; height:87px; overflow:hidden; } #centertopcontent { float:left; margin-left:114px; width:707px; height:87px; border-top: 4px solid #000; background-color:#e4e4e4; } #leftopcontent { float:left; margin-left:-821px; width:114px; height:87px; background-color:#e4e4e4; background-image:url(../images/topleftgraycorner.gif); background-repeat:no-repeat; } #rightopcontent { float:right; width:27px; height:87px; background: #fff url(../images/toprightbar_slice.gif) right top repeat-y; background-color:#e4e4e4; } #content { overflow:hidden; /*Для того чтобы meta отодвигался под самую длинную колонку->*/ /**/ width:848px; /*->эта опция предназначена для content, так чтобы все три колонки он обхватывал.*/ /**/ background: url(../images/rasporka.gif) #e4e4e4 left top repeat-y; background-color:#e4e4e4; } #main { float:left; width:466px; /*Раскладка колонок методом float*/ /**/ margin-left:174px; /*Передвигаем местами main и sections*/ /**/ background-color: #e4e4e4; background-image: url(../images/mainborders.gif); /*background-color:#ff0000;*/ /**/ } #sections { float:left; width:174px; /*Раскладка колонок методом float*/ /**/ /*168px*/ /**/ margin-left:-640px; /*Передвигаем местами main и sections (#main {(margin-left:174px;)+(width:466px;)=640px)*/ /**/ /* background:url(../images/centerleftbar_slice.gif) #e4e4e4 left top repeat-y;*/ /**/ /*background-color:#00ff00;*/ /**/ } #news { float:right; width:208px; /*Раскладка колонок методом float*/ /**/ /* 848px - |#sections marginleft| */ /* background:url(../images/toprightbar_slice.gif) #defa11 right top repeat-y;*/ /**/ /*background-color:#0000ff;*/ /**/ } #windowmaincontent { padding:0 15px 0 15px; margin:10px 0 0 0; /*background-color:#aa3300;*/ /**/ } #windowsectionscontent { padding:0 5px 0 5px; margin:10px 0 0 27px; /*background-color:#33aa00;*/ /**/ } #windownewscontent { padding:0 5px 0 0; margin:10px 27px 0 0; /*background-color:#0033aa; */ /**/ } #search { position:absolute; top:0; left:0; margin: 287px 63px; width:255px; height:67px; text-align:center; background: url(../images/search.gif) right bottom no-repeat; } #topcontentdata { position:absolute; top:0; left:0; margin: 287px 335px; height:70px; width:480px; border:dashed 1px; text-align:center; /*font-size:90%;*/ /**/ } #bottomcontent { background-color:#fff; /* background-image:url(../images/A4E40_footer_all.jpg);*/ /**/ height:284px; width:848px; position:relative; /*как нормально выставить search форму? Дело в том, что таким образом форма отнесется к верхнему правому краю окна, а не 700-пиксельного . Чтобы контейнером для позиционирования считался , надо сделать из него “стакан”, который я описывал в статье про позиционирование*/ /**/ } #topbottomcontent { width:848px; height:166px; background-color:#e4e4e4; /* position:relative;*/ /**/ overflow:hidden; border-bottom:4px solid #000; } #centraltopbottomcontent { float:left; width:793px; height:166px; margin-left:28px; } #lefttopbottomcontent { float:left; width:28px; /*Раскладка колонок методом float*/ /**/ height:166px; margin-left:-821px; background-image:url(../images/centerleftbar_slice.gif); background-repeat:repeat-y; } #righttopbottomcontent { float:right; width:27px; /*Раскладка колонок методом float*/ /**/ height:166px; background-image:url(../images/toprightbar_slice.gif); background-repeat:repeat-y; /* background:url(../images/centerrightbar_slice.gif) #fff right top repeat-y;*/ /**/ } #bottombottomcontent { height:118px; background-color: #fff; /*font-size:70%;*/ } #people { position:absolute; bottom:0; left:0; background-image:url(../images/people2.gif); background-repeat:no-repeat; width:178px; height:285px; z-index:3; } #bottomhuk { position:absolute; bottom:0; left:0; background-image:url(../images/bottomhuk2.gif); width:422px; height:130px; margin: 0 0 -4px 0; z-index:2; } #bottominfodata { position:absolute; bottom:20px; right:0; /*Сдвигаем форму поиска, для такого подходит ->*/ /**/ margin: 0 35px 8px 0;/*->абсолютное позиционирование.*/ /**/ height:90px; width:580px; /*border:dashed 1px;*/ text-align:center; /*font-size:90%;*/ /**/ z-index:4; } #rightbottomcorner { position:absolute; bottom:0; right:0; /* margin: 0 -0.5px 114px 0;*/ /**/ margin: 0 0 98px 0; width:121px; height:110px; background-image:url(../images/rightbottomcorner.gif); z-index:1; } #bottomcontentdata { position:absolute; bottom:0; right:0; /*Сдвигаем форму поиска, для такого подходит ->*/ /**/ margin: 0 130px 130px 0; /*->абсолютное позиционирование.*/ /**/ height:140px; width:530px; /*border:dashed 1px;*/ text-align:center; /* font-size:90%;*/ /**/ z-index:5; } .section1_navigation_main { overflow:inherit; height:78px; /*26px + X*26px X-num of sections*/ /**/ width:140px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } .subsection1_navigation { overflow:inherit; background: url(../images/menustripe.gif) repeat-y; width:140px; height:26px; } .section1_navigation2 { overflow:inherit; height:182px; /* X*26px X-num of sections*/ /**/ width:140px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } .section1_navigation_request { } #section2_counters { overflow:inherit; height:126px; /*?*/ /**/ width:140px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } #subsection2_counters { overflow:inherit; background: url(../images/menustripe.gif) repeat-y; width:140px; height:26px; } #subsection2_counters2 { overflow:inherit; width:140px; height:100px; } #section3_workmode { overflow:inherit; height:104px; /* см ниже #subsection3_workmode {height} + #subsection3_workmode2 {height} */ /**/ width:140px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } #subsection3_workmode { overflow:inherit; background: url(../images/menustripe.gif) repeat-y; width:140px; height:26px; } #subsection3_workmode2 { overflow:inherit; /*background: url(../images/menustripe.gif) repeat-y;*/ /**/ width:140px; height:78px; } #news1_logon { overflow:inherit; height:96px; /* см ниже #subsection3_workmode {height} + #subsection3_workmode2 {height} */ /**/ width:174px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } #subnews1_logon { overflow:inherit; background: url(../images/menustripe_176.gif) repeat-y; width:174px; height:26px; } #subnews1_logon2 { overflow:inherit; width:174px; height:100px; } #news2_warninfo { overflow:inherit; height:90px; /* см ниже #subsection3_workmode {height} + #subsection3_workmode2 {height} */ /**/ width:174px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } #subnews2_warninfo { overflow:inherit; background: url(../images/menustripe_176.gif) repeat-y; width:174px; height:26px; } #subnews2_warninfo2 { overflow:inherit; width:174px; height:64px; } #news3_usersonline { overflow:inherit; height:102px; /* см ниже #subsection3_workmode {height} + #subsection3_workmode2 {height} */ /**/ width:174px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } #subnews3_usersonline { overflow:inherit; background: url(../images/menustripe_176.gif) repeat-y; width:174px; height:26px; } #subnews3_usersonline2 { overflow:inherit; width:174px; height:76px; } #news4_autonews { overflow:inherit; height:226px; /* см ниже #subsection3_workmode {height} + #subsection3_workmode2 {height} */ /**/ width:174px; border-style: solid; border-color: #d4d4d4; border-width: 1px; } #subnews4_autonews { overflow:inherit; background: url(../images/menustripe_176.gif) repeat-y; width:174px; height:26px; } #subnews4_autonews2 { overflow:inherit; width:174px; height:200px; } /* Прибиваем все отступы и границы элементов, которые браузер может добавить нашим элементам, по своему усмотрению. Для этого установим их значения в "0" для всех значений по умолчанию */ /**/ /*p, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, a, img { margin: 0; padding: 0; border: 0; } p { margin: 10px 0; } h1, h2, h3, h4, h5, h6 { margin: 20px 0; }*/ ul { list-style-image: url(../images/dot.gif); } ul.navmenu { list-style-image: none; } #windowmaincontent { font-size:1.3em; letter-spacing: 0.06em; word-spacing:0.06em; line-height:1.01em; } #windowmaincontent p { text-align:justify; text-indent:2.0em; } #windowmaincontent h3 { font-size:1.16em; text-align:center; } #windowsectionscontent, #windownewscontent { font-size:1.1em; letter-spacing: 0.04em; word-spacing:0.06em; line-height:0.9em; } #windowsectionscontent h3, #windownewscontent h3 { margin: 0;padding:8px; text-align:center; } #windowsectionscontent p, #windownewscontent p { text-align:center; line-height:1.2em; } #search input, #search select, #search button, #search em { font-size:1.2em; line-height:1.4em; } #search em { font-weight:bold; } #buttonsearch { margin-top: 0.35em; } #partner_azauto { border:0px solid #000; } #partner_azauto img { border:0px solid #000; } #partner_aztruck { border:0px solid #000; } #partner_aztruck img { border:0px solid #000; } #partner_behrhella { border:0px solid #000; } #partner_behrhella img { border:0px solid #000; } #bottomcontentdata h3 { font-size:1.35em; letter-spacing: 0.04em; word-spacing:0.06em; line-height:0.9em; }