Web Standards – Форум http://webstandards.org.ru/forum/index.php Sat, 19 May 2012 11:32:09 +0400 1 Руководство по оформлению HTML/CSS кода от Google http://webstandards.org.ru/forum/index.php?showtopic=353 http://habrahabr.ru/post/143452/]]> Tue, 08 May 2012 22:10:48 +0400 http://webstandards.org.ru/forum/index.php?showtopic=353 Не отображается граница при выводе на печать http://webstandards.org.ru/forum/index.php?showtopic=352 Т.к. форума о табличном говнокоде нет, то пишу сюда. Создается декстопное приложение на языкек C#. В нём используется компонент WebBrowser. Соответственно, у этого компонента движок от "любимого" IE. Есть довольно простая верстка:
Код
* {margin: 0px; padding: 0px;}
body {height: 100%;}
.tbl, .tbl3 {width: 800px; height: 100%;}
.tbl2 .st {height: 30px;}
.tbl2 .st2 {height: 60px;}
.tbl2 .st3 {height: 20px;}
td {padding: 5px;}

.border {border-right: black 1px solid; border-left: black 1px solid;}
.border2 {border-left: black 1px solid; border-bottom: black 1px solid;}
.border3 {border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;}
.border4 {border: black 1px solid;}
.border5 {border-right: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;}
.border6 {border-left: black 1px solid;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>
<body>
<table class="tbl3" style="border: none;" align="center" cellpadding="1" cellspacing="0">
    <tbody>
        <tr>
            <th class="border3" align="middle">Перечень основных данных и требований</th>
            <th class="border4" align="middle">Основные данные и требования</th>
        </tr>
        <tr>
            <td class="border6" align="left">1. Основание для проектирования</td>
            <td class="border" align="left">1.1. <input style="width: 80%;"></input></td>
        </tr>
        <tr>
            <td class="border6" align="left">Заказчик</td>
            <td class="border" align="left">1.2. <input style="width: 80%;"></input></td>
        </tr>
        <tr>
            <td class="border2" align="left">Источник финансирования</td>
            <td class="border5" align="left">1.3. <input style="width: 80%;"></input></td>
        </tr>
        <tr>
            <td class="border2" align="left">2. Сроки проектирования</td>
            <td class="border5" align="left">2.1. <input style="width: 80%;"></input></td>
        </tr>
...

При выводе на печать получаем такую картину (см. прикрепленное изображение). Собственно вопрос: как отобразить правую границу при печати?
Спасибо.]]> Thu, 12 Apr 2012 11:46:38 +0400 http://webstandards.org.ru/forum/index.php?showtopic=352 Центрирование текста в блоке http://webstandards.org.ru/forum/index.php?showtopic=351 Есть меню, в нём текст. Необходимо, чтобы текст располагался по центру, как по вертикали, так и по горизонтали.
Спасибо.
Код
#content ul#menu {font-size: 1.22em; background: #1c1c1c; width: 960px; height: 68px; list-style: none;}
#content ul#menu li {display: inline; float: left; text-transform: uppercase; width: 120px; height: 68px;}
#content ul#menu li a {display: block; height: 68px; text-decoration: none; font-weight: bold; color: #fff;}
#content ul#menu li a:hover, #content ul#menu li a.active {background: #fff; color: #000;}

<div id="content">
    <ul id="menu">
    <li><a class="active">главная</a></li>
    <li><a href="about.html">о нас</a></li>
    <li><a href="services.html">услуги</a></li>
    <li><a href="gallery.html">галерея</a></li>
    <li><a href="clients.html">клиенты</a></li>
    <li><a href="partners.html">партнеры</a></li>
    <li><a href="/">инвестиции в европе</a></li>
    <li><a href="contacts.html">контакты</a></li>
    </ul>
</div>
]]> Tue, 20 Mar 2012 20:25:39 +0400 http://webstandards.org.ru/forum/index.php?showtopic=351 Нестандартные кнопки социальных сетей http://webstandards.org.ru/forum/index.php?showtopic=350 Я тоже где-то видел на работающем сайте - теперь проблема найти где. Проблема и в реализации с нуля, если наложить сверху картинки абсолютным позиционированием и передавать клик на реальные кнопки скриптом, то как? Ведь все соц-кнопки загружаются в iframe'ах, разумеется с другого домена, значить кликнуть ссылку внутри такого фрейма не представляется возможным. Разве что прибегнуть к проксированию этих кнопок. Может кто знает попроще реализацию?

П.С. где-то видел еще он-лайн генератор подобоных кнопок, тоже не могу найти. В общем пропасть ).]]> Tue, 20 Mar 2012 17:58:56 +0400 http://webstandards.org.ru/forum/index.php?showtopic=350 Расположить блок в правом нижнем углу http://webstandards.org.ru/forum/index.php?showtopic=349 Задача такова: необходимо расположить блок в правом нижнем углу родительского блока (без абсолютного позиционирования). Есть разметка:
Код
#main #preview {width: 960px; height: 434px;}
#main #preview p.image {margin: 0px 5px 0px 0px; float: left;}
#main #preview p.image img {display: block; width: 620px; height: 434px;}
#main #preview a.button {text-indent: -9000px; display: block; width: 100px; height: 38px; background: url(../images/button_more.png) no-repeat; position: relative; }


<div class="coda-slider-wrapper">
   <div class="coda-slider preload" id="preview">
    <div class="panel">
        <p class="image"><img src="images/previews/01_ryb.jpg" alt=""></p>
        <p>Проект Многофункционального комплекса в составе жилого, социально-бытового и общественно-делового назначения с подземными автостоянками и воссозданием памятника архитектуры «Училищный дом».</p>
        <p>Адрес: Санкт-Петербург, Невский район, Рыбацкий проспект, дом 18, литер А.</p>
        <p>Общая площадь здания - 149 115 м<sup><small>2</small></sup></p>
        <a class="button" href="/">подробнее</a>
    </div>
   </div>
</div>

Необходимо, чтобы class = "button" был в правом нижнем углу блока #preview.
Спасибо.]]> Sun, 18 Mar 2012 21:56:09 +0400 http://webstandards.org.ru/forum/index.php?showtopic=349 Новый метод замены текста картинкой, или избавляемся от -9999px http://webstandards.org.ru/forum/index.php?showtopic=348 Собственно, оригинал статьи у Зельдмана: http://www.zeldman.com/2012/03/01/replacin...ge-replacement/
В русских буквах на Хабре: http://habrahabr.ru/blogs/css/139311/]]> Sat, 03 Mar 2012 20:51:32 +0400 http://webstandards.org.ru/forum/index.php?showtopic=348 Наложение слоев http://webstandards.org.ru/forum/index.php?showtopic=347 Задача такая: сделать, чтобы слой в левой колонке наползал на шапку (см. прикрепленное изображение).
Моя раметка:
Код
@charset "windows-1251";
* {margin: 0px; padding: 0px;}
html {height: 100%;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #464646; background: #505050; min-width: 732px; height: 100%;}
img {border: 0;}
#outer {width: 732px; min-height: 100%; margin: 0px auto; position: relative; background: #FFFFFF;}


#header {background: url(../images/bg_header.jpg) no-repeat; width: 100%; height: 228px; position: relative;}
#header h1 {font-size: 4.36em; font-weight: bold; line-height: 1.01em; width: auto; position: absolute; left: 25px; top: 80px;}
#header h1 a {display: block; color: #FFFFFF; text-decoration: none; overflow: hidden;}
#header span {font-size: 1.01em; line-height: 1.01em; font-weight: bold; color: #FFD970; position: absolute; left: 25px; top: 130px;}

#content {width: 732px; margin: 0px auto; padding-bottom: 110px; overflow: hidden;}

#main {width: 452px; float: right;}

#sidebar {width: 280px; float: left;}
#panel {width: 220px; background: #524E52; border-radius: 10px;}
#panel h3 {color: #FFFFFF; background: url(../images/bull.gif) 0 0 no-repeat;}
#panel ul {list-style: none;}


<div id="outer">
    <div id="header">

    </div>
    <div id="content">
        <div id="main">
        
        </div>
        <div id="sidebar">
                  <div id="panel">

                  </div>
        </div>
    </div>
</div>
<div id="footer">

</div>

Каким образом #panel можно "надвинуть" на #header? Спасибо за помощь.]]> Fri, 03 Feb 2012 01:50:47 +0400 http://webstandards.org.ru/forum/index.php?showtopic=347 Нумерованные списки css http://webstandards.org.ru/forum/index.php?showtopic=346
Есть ли возможность задать цифрам в нумерованном списке стиль, который бы отличался от того что в самом контейнере.

Код
#content ol{ font:18px/18px 'AGLettericaCondensedBold', Arial, Helvetica, sans-serif; color:#000;}/* для нумерации*/
#content ol li{ font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; background:url("ol.png") no-repeat 0 0;}/* для контейнера*/

-это я пытался задать стили для нумерации ((
http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=198
пробовал так, но последнее правило работает для всех]]> Tue, 31 Jan 2012 11:16:34 +0400 http://webstandards.org.ru/forum/index.php?showtopic=346 box-shadow:inset, opera, bag http://webstandards.org.ru/forum/index.php?showtopic=345
Столкнулся с проблемой в Opere 11.10, со свойством {box-shadow:inset;}

почему-то появляются горизонтальная и вертикальная полосы прокрутки, а когда тени нет все норм.

http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=196

Код
.conteiner{ min-height:100%; -webkit-box-shadow:0px 0px 50px #777 inset; -moz-box-shadow:0px 0px 50px #777 inset; box-shadow:0px 0px 50px #777 inset; -o-box-shadow:0px 0px 50px #777 inset;}


также пробовал задавать для body

так должно отображаться:
http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=197

Проверял в Opere 11.61 такой проблемы нет)))]]> Fri, 27 Jan 2012 11:15:01 +0400 http://webstandards.org.ru/forum/index.php?showtopic=345 Кружок прокручивыемый курсором мыши http://webstandards.org.ru/forum/index.php?showtopic=341
Сделать имитацию прокрутки картинки не проблема.
1. Использование около 10 разных положений заранее подготовленных в фотошопе.
2. Использование сanvas.

Проблема с виртуальным невидимым кружком, который по сути есть движок управляемый курсором - с нуля писать дорогое удовольствие. Если кто-нибудь встречал подобные алгоритмы, плагины, прошу поделиться.]]> Tue, 20 Dec 2011 04:26:28 +0400 http://webstandards.org.ru/forum/index.php?showtopic=341 Фиксированные блок и вертикальная прокрутка http://webstandards.org.ru/forum/index.php?showtopic=340
Когда на странице появляется прокрутка, фиксированное меню сдвигается влево.
Может направите в нужное русло.]]> Thu, 15 Dec 2011 11:12:53 +0400 http://webstandards.org.ru/forum/index.php?showtopic=340 Изучение JS http://webstandards.org.ru/forum/index.php?showtopic=339 Здравствуйте. Подскажите пожалуйста, с чего лучше начать изучение Java Script? С какой литературы? Wed, 07 Dec 2011 01:55:04 +0400 http://webstandards.org.ru/forum/index.php?showtopic=339 Доступ к iframe в IE7,8 http://webstandards.org.ru/forum/index.php?showtopic=338 Вообщем-то is null хоть на локале хоть на сервере, когда я определяю iframe через переменную. Когда напрямую через document.getElementById, то все работает. Не могу понять разницу между двумя обращениями.

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        window.onload = function(){
        //через переменную
        user_frame = document.getElementById("user_frame");
        alert(user_frame.contentWindow); // не понимает
        
        //через id
        alert(document.getElementById('user_frame').contentWindow.document.links.length); // понимает и даже показывает ссылки
        }
    </script>
</head>

<body>
    <iframe id="user_frame" width="100%" height="100%" src="user_frame.html"></iframe>
</body>
</html>


Фрейм
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>
<ul id="headerMenu">
        <li><a href='#m2' title=''>О компании</a></li>
        <li><a href='#m3' title=''>Заказ</a></li>
        <li id="lastLiOfHeaderMenu"><a href='#m4' title=''>Еще что-то</a></li>
    </ul>
</body>
</html>


Задача самоликвидировалась. Одинаковые названия id и переменной служили причиной неполадок. Топик можно стереть.]]> Thu, 17 Nov 2011 00:34:36 +0400 http://webstandards.org.ru/forum/index.php?showtopic=338 Выравнивание текста в полях формы в IE http://webstandards.org.ru/forum/index.php?showtopic=334 Вот код:
Код
<div id="sort">
<select name="kom" class="pokom" >
<option>По командам</option>
<option>Яндекс</option>
<option>Почта</option>
<option>Рамблер</option>
</select>
<select name="data" class="podata">
<option value="b" selected>По дате</option>
</select>
<select name="chemp" class="pochemp">
<option value="c" selected>По чемпионату</option>
</select>
</div>

А вот CSS:
Код
#sort{  outline:none;  float:left; width:1000px; height:50px; background:#e6e6e6;}
.pokom {
border:none;
background:url("img/fon_sort.png");/* фон только ДЛЯ IE */
width:250px; height:30px;
text-indent:10px;/*---отступ слева текста  в форме ДЛЯ IE НЕ КАТИТ---*/
margin:10px 0 0 18px; }
.podata{
border:none;
background:url("img/fon_sort.png");/* фон только ДЛЯ IE */
width:250px; height:30px;
text-indent:10px;/*---отступ слева текста  в форме ДЛЯ IE НЕ КАТИТ---*/
margin:10px 0 0 20px;}
.pochemp{
border:none;
background:url("img/fon_sort.png");/* фон только ДЛЯ IE */
width:250px; height:30px;
text-indent:10px;/*---отступ слева текста  в форме ДЛЯ IE НЕ КАТИТ---*/
margin:10px 0 0 20px;}

http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=188

при padding вот что получается :http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=189
А марджин не работает.
В мозиле 5,0,1 получается вот так :http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=190]]> Tue, 11 Oct 2011 22:38:55 +0400 http://webstandards.org.ru/forum/index.php?showtopic=334 <![CDATA[Обводка Тег <map> в Opera]]> http://webstandards.org.ru/forum/index.php?showtopic=333
Хотел узнать, может кто сталкивался с такой проблемой:

при клике на карте в области мы переходим на страницу, если нажать на ссылку "Назад к списку округов" то все нормально, а вот если вернуться назад по клику в браузере или на мышке то появится черная обводка у той области, кот. нажимали.
=(

Ссылка:
okean.minhost(.ru)/where_to_buy/maps/]]> Fri, 30 Sep 2011 11:52:27 +0400 http://webstandards.org.ru/forum/index.php?showtopic=333 Косяк верстки http://webstandards.org.ru/forum/index.php?showtopic=331
Не могли ли вы мне помочь, в каком двигаться направлении... ну или возможно ли это вообще...
Взгляните

У меня идет фон для #wrapper {
background: url("images/fon_main.gif") repeat-y scroll 0 0 transparent;

который перекрывается справа, симулируя собственно колонки #container {
background: url("images/fon_right.gif") repeat-y scroll right top transparent;

Но когда текста мало - фон справа уже заканчивается, а основной фон fon_main.gif идет и получается бежевая дыра под правой колонкой..
Я бы поназначала бы html или body фоны - но они уже все заняты... И высота у них же только на экран.
Решаю в данный момент таким костылем -
#sideRight {
min-height:700px;
Но это же не дело, да?((
И еще вопрос - если я диву задаю высоту явную... И пытаюсь в нем, допустим рисунок, - позиционировать книзу - vertical-align:bottom; - вообще не срабатывает - в чем может быть причина?

И еще - во всех браузерах "извращенно" прилепленный фон background: url(images/for_menu.gif) no-repeat 0 315px; отображается ровненько - а в FF5 - на один пиксель сползает..

32.gif Помогите, пожалуйста, копаюсь-копаюсь, а клиент нервничает..]]> Tue, 16 Aug 2011 12:01:24 +0400 http://webstandards.org.ru/forum/index.php?showtopic=331 Боковые скролы или резиновый блок http://webstandards.org.ru/forum/index.php?showtopic=330
Код
#header {width: 97%; margin: 14px 13px 0px 13px; height: 46px; top: 127px; font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1;position:absolute;}
в файле что отвечает за шапку добавил
Код
<img id="mylogo" src="ссылка на картинку" />
<style type="text/css">
#mylogo {width: 100%; margin: 13px 0px 0px 0px;}
</style>
JОна стала растягиваться, но как сделать что бы и блок "Главная и др" растягивался не знаю. Двиг opencart. Это как один из вариантов, а еще один есть, как сделать боковые скролы, что бы как не уменьшать размер браузера или смотреть на большем мониторе размер был один и тот же.

Очень благодарен заранее за любую помощь.]]> Thu, 21 Jul 2011 18:46:46 +0400 http://webstandards.org.ru/forum/index.php?showtopic=330 IE7 z-index http://webstandards.org.ru/forum/index.php?showtopic=327 я к вам с очередной проблемой 01.gif
на сайте
в ie7 блок с дверями перекрывает выпадающее меню
если какой-нибудь способ решения с помощью скрипта?]]> Sat, 18 Jun 2011 12:57:13 +0400 http://webstandards.org.ru/forum/index.php?showtopic=327 Резиновая верстка, прошу помощи http://webstandards.org.ru/forum/index.php?showtopic=326
Я взялся за резиновый сайт, с целью научиться верстать сие добро или зло - пока еще не понял.
Но случилась неприятность и мне пришлось бросить то, что я даже не успел начать. Сейчас у меня уже не так много времени и сегодняшний день я в панике убил впустую играясь с шириной, и отступами в процентном соотношении, понял, что резина - это не так просто, как мне казалось и гугл мне не помог.
Перед сном, как и в былые времена, решил попробовать обратиться к форуму за помощью:

Есть сайт, он тянется от 960 до 1220 пикселей (весь сайт заключен в div#wrapper с min-width:960px и max-width:1200px).
В блоке с контентом, в середке есть 2 задачки, которые ставят меня в тупик.

1 задача:
Нужно тянуть 3 блока, строго без изменения отступов между ними. Т.е. тянется сайт - тянутся эти блоки.

2 задача:
Нужно тянуть 4 блока строго без изменения ширины, тянутся только отступы между ними

Для наглядности прикрепляю изображение:
http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=185

Решение должно быть кроссбраузерным начиная от IE6

Очень прошу мне помочь, может где есть наглядные примеры реализации подобных задач. Можно ли решить подобные задачи с помощью блочной верстки или здесь без таблиц никак. Буду благодарен за любую подсказку...]]> Mon, 13 Jun 2011 01:58:54 +0400 http://webstandards.org.ru/forum/index.php?showtopic=326 Генераторы CSS http://webstandards.org.ru/forum/index.php?showtopic=325 CSS: http://habrahabr.ru/blogs/css/118056/#habracut

Константин, хотелось бы увидеть генератор HTML и CSS от вашей конторы. Такое возможно?
Спасибо.]]> Tue, 07 Jun 2011 21:13:25 +0400 http://webstandards.org.ru/forum/index.php?showtopic=325 Расположение блока http://webstandards.org.ru/forum/index.php?showtopic=324 В прикрепленном файле изображен собственно блок, который надо сверстать. Стрелки слева должны быть прижаты к левому краю, соответственно. Текс в сером блоке будет фиксированным и ничего туда добавляться не будет. Вопрос, собственно, в том, как лучше такое нарезать и сверстать: цельной картинкой вырезать или стрелки отдельно отрезать?

Как оптимальнее? Спасибо.]]> Tue, 07 Jun 2011 20:21:25 +0400 http://webstandards.org.ru/forum/index.php?showtopic=324 При уменьшении окна браузера сбивается фон http://webstandards.org.ru/forum/index.php?showtopic=323
Появилась проблема - когда уменьшаешь ширину браузера до такой степени, что получается горизонтальный скролл - фон сайта, который не помещается на экране, а за скроллом, неадекватно отображается - сбивается фон обоих обрамляющих дивов - кажется, я уже встречалась с такой проблемой, не помню правда как решила.. 20.gif Помогите, пожалуйста - если кто сталкивался...


И еще.... в списках маркер (в качестве маркера квадрат) в ie ни в одном не отображается... 13.gif]]> Sat, 04 Jun 2011 17:18:15 +0400 http://webstandards.org.ru/forum/index.php?showtopic=323 Расположение блоков http://webstandards.org.ru/forum/index.php?showtopic=322
Есть два вопроса по расположению блоков. Сделал такую разметку:
Код
@charset "windows-1251";
* {margin: 0px; padding: 0px;}
html {height: 100%;}
body {background: #F7F7F7; min-width: 1000px; width: 100%; height: 100%;}
#outer {width: 100%; min-height: 100%; margin: 0px auto; position: relative;}

#content {width: 100%; padding-bottom: 162px; overflow: hidden;}
#content div.news {width: 100%; background: url(../images/newsbg.gif) no-repeat center top; font-family: Tahoma; color: #939393; padding-top: 20px;}
#content div.news div.col {display: inline; width: 200px; margin-left: 30px; float: left;}

#twitter {width: 118px; height: 21px; position: absolute; left: 443px; top: 20px;}
#twitter a {background: url(../images/twitter.jpg) no-repeat; text-indent: -9000px; display: block; width: 118px; height: 21px; overflow: hidden;}
#twitter a:hover {background-position: 0px -21px;}

<div id="outer">
    <div id="header">

    </div>

    <div id="content">
        
        
        <div class="news">
            <div class="col">

            </div>
            <div class="col">

            </div>
            <div class="col">

            </div>
        </div>
    </div>

    <div id="auth">

    </div>
    
    <div id="twitter">
        <a href="http://twitter.com/comp4me">comp4me</a>
    </div>
</div>

<div id="footer">
</div>

Собственно первый вопрос: слой twitter располагается в шапке. Но по разметке он у меня вынесен вне шапки и абсолютно позиционирован. При масштабировании страницы происходит наползание слоя auth на twitter. Как этого избежать?

Второй вопрос. Мне необходимо расположить класс news по центру блока content. Как это можно реализовать?

Спасибо.

По второму вопросу реализовал так:
Код
#content div.news {width: 911px; margin: 0px auto; background: url(../images/newsbg.gif) no-repeat center top; font-family: Tahoma; color: #939393; padding-top: 20px;}
#content div.news div.col {display: inline; width: 273px; margin-left: 30px; float: left;}

При помощи margin'а 0px auto. Оно? Остается тогда первый вопрос.]]> Fri, 03 Jun 2011 14:27:17 +0400 http://webstandards.org.ru/forum/index.php?showtopic=322 Раскройка меню http://webstandards.org.ru/forum/index.php?showtopic=321
Давно я тут не появлялся, а зря. Возник такой вопрос. Как правильно порезать из макета меню, которое находится в приложенном файле? У меня есть мысля, что порезать надо когда оно все неактивное (серое) и когда все активное (синее). Склеить два этих файла в один и потом в стилях прописывать наведение на каждый конкретный пункт.

Прав ли я? Спасибо.]]> Thu, 26 May 2011 20:24:33 +0400 http://webstandards.org.ru/forum/index.php?showtopic=321 Не работают ссылки в подвале http://webstandards.org.ru/forum/index.php?showtopic=319
У меня в макете в подвале не работают ссылки во всех браузерах, кроме Оперы и IE
То есть не наводятся, не выделяются, не переходят...

Может это связано с margin ом...

Код
@charset "utf-8";
/* CSS Document */
html {
    height: 100%;
    
}
body {
    
    width: 100%;
    height: 100%;
    margin:0 auto;
    position:relative;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:13px;
}
#middle {
    width: 100%;
    padding: 0 0 100px;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 270px 0 11px;
}
#wrapper {
    width: 1000px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    
}
#footer {
    background:url(img/bottom_grad.gif) repeat-x bottom;
    margin: -76px auto 0;
    height: 76px;
    clear:both;
    
}
#footer_in
{
    background:url(img/footer.png) no-repeat center bottom;
    width:1000px;
    height: 76px;
    margin:0 auto;
}
.footer_logo
{
    float: left;
    padding:12px 0 0 15px;
    color:#6f7072;
    font-size:11px;
    width:186px;
    text-align:left;
}
.footer_logo a, .footer_logo a:visited
{
    color:#6F7072;
    text-decoration:none;
}
.footer_logo a:hover
{
    text-decoration:underline;
}
.footer_logo img
{
    float:left;
    padding: 0 5px 0;
}
.footer_logo p
{
    padding:3px 0 0 2px;
    float:left;
    text-align:left;
}
.footer_adress
{
    float: right;
    padding:12px 92px 0 0;
    text-align:right;
    color:#333333;
    font-size:11px;
}
.footer_adress a, .footer_adress a:visited
{
    color:#3D8FCE;
    text-decoration:none;
}
.footer_adress a:hover
{
    text-decoration:underline;
}
.mail_to
{
    margin-right:40px;
}


Код
<div id="wrapper">
<div id="#wrapp_in">
    <div id="header">
        
    </div>

  <div id="middle">

        <div id="container">
            <div id="content">
                

            
          </div>
        </div>

        <div id="news">
        </div>

    </div>

</div>
</div>
<div id="footer">
  <div id="footer_in">
          <div class="footer_logo">
            <a href="#"><img src="img/logo_.png"/></a>
            <p><a href="">Р1111</a></p>
        </div>
        <div class="footer_adress">
            <p>445454</p>
            <p class="mail_to">e-mail: <a href="mailto:kkbmb">bbmbn</a></p>
        </div>
  </div>      
</div><!-- #footer -->


Помогите пожалуйста..]]> Mon, 16 May 2011 09:32:36 +0400 http://webstandards.org.ru/forum/index.php?showtopic=319 Отступы в IE7 http://webstandards.org.ru/forum/index.php?showtopic=318
У меня проблема с меню в ие7 почему-то он игнорирует отступы
HTML
#menu ul li{margin:0 15px;}

Что я не так сделал? 19.gif

Скачать архив.
]]> Mon, 02 May 2011 12:19:34 +0400 http://webstandards.org.ru/forum/index.php?showtopic=318 <![CDATA[IE – слой по z-index проблемка]]> http://webstandards.org.ru/forum/index.php?showtopic=315 Конкретно: выпадающее меню, по li:hover вываливается вправо еще одно меню, позиционированное абсолютно(left:204px;), под ним получается слой с текстом, который в ишаке всегда оказывается сверху.
собсно страница: http://realtsib.ru/oldman/test_menu/index.html]]> Thu, 24 Mar 2011 16:18:47 +0400 http://webstandards.org.ru/forum/index.php?showtopic=315 Нестандартный шрифт http://webstandards.org.ru/forum/index.php?showtopic=313
На сайте, в заголовках используется нестандартный шрифт (не совсем, он предустановлен в Vista/7 и возможно в других ОС, нет его в XP)
Как вариант можно предлагать браузеру использовать этот шрифт, если его нет - подключенный через @font-face шрифт в разных форматах (предварительно конвертируемых из оригинала), если нет - максимально похожий из стандартного набора. (судя по всему у людей пытающихся решить вопрос этим методом проблемы с Оперой, даже последних версий)
Еще один вариант - можно было бы воспользоваться js скриптом cufon

Заказчик придирается к каждому килобайту - нет, никакого csshover и никаких .htc для ie6 - они много весят.
Шрифт ? - нет, он много весит, давай картинками. В общем, фиг с ним, сделаю как просит, но хотелось бы определиться на будущее...

Какое решение на Ваш взгляд меньше нагружает браузеры?
Каким решением пользуетесь Вы и почему?

Минусы, которые я вижу без достаточного опыта:
Cufon не будет работать при отключенном JS и нельзя выделить текст.
@fonе-face проблемы с Оперой (не решаемая?)]]> Tue, 08 Feb 2011 10:58:25 +0400 http://webstandards.org.ru/forum/index.php?showtopic=313 Фиксированная верстка + резиновое меню http://webstandards.org.ru/forum/index.php?showtopic=312
Обычно, при верстке меню для определения ширины каждого пункта меню я использую css свойство padding.
Когда количество пунктов меню меняется - значения этого свойства подгоняются под количество так, чтобы пункты меню занимали все отведенное для них пространство.
Это решение мне всегда подходило и заказчиков устраивало, но еще не разу не требовалась динамика в блоке меню.

Сейчас возникла ситуация:
На каждой странице будущего сайта меню будет отличатся.
Задача состоит в том, чтобы не требовалось подгонять padding-и на каждой странице, чтобы пункты меню автоматически подстраивались под 1000px;
+ одинаковое расстояние по бокам от текста меню к разделителю.

Подскажите пожалуйста, как можно решить задачу...

Вот как выглядит меню:
http://webstandards.org.ru/forum/index.php?act=attach&type=post&id=178

HTML:
Код
        <ul class="main-menu">
            <li class="first active"><span><span><span><a href="#">Главная</a></span></span></span></li>
            <li><span><span><span><a href="#">Каталог</a></span></span></span></li>
            <li><span><span><span><a href="#">Акции</a></span></span></span></li>
            <li><span><span><span><a href="#">Где купить</a></span></span></span></li>
            <li class="active"><span><span><span><a href="#">Сервис и поддержка</a></span></span></span></li>
            <li><span><span><span><a href="#">Форум</a></span></span></span></li>        
            <li><span><span><span><a href="#">Запасной раздел</a></span></span></span></li>    
        </ul>


CSS:
Код
.main-menu {
    width: 1000px;
    position: absolute;
    left: 0;
    top: 82px;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px;
    list-style: none;
    font-weight: bold;
}
.main-menu li {
    float: left;
    background: url(images/menu-sep.gif) no-repeat left;
    height: 32px;
    padding: 14px 38px 0 38px;
}
.main-menu li.first {
    background: none;
}
.main-menu a {
    color: #fff;
    text-decoration: none;
}
.main-menu a:hover {
    text-decoration: underline;
}
.main-menu li.active a {
    color: #1c8295;
    display: block;
    margin-top: 18px;
}
.main-menu li.active {
    padding: 0px 8px 0 9px;
    height: 46px;
}
.main-menu li.active span {
    background: url(images/menu-top.jpg) repeat-x top;
    display: inline-block;
    height: 46px;
}
.main-menu li.active span span {
    background: url(images/menu-left.jpg) no-repeat left;
}
.main-menu li.active span span span {
    background: url(images/menu-right.jpg) no-repeat right;
    padding: 0 30px 0 31px;
}
]]> Mon, 07 Feb 2011 11:51:25 +0400 http://webstandards.org.ru/forum/index.php?showtopic=312 Браузеры показывают сайт не так, как задумывалось, вечная тема http://webstandards.org.ru/forum/index.php?showtopic=311 Прикрепил 3 файла. Все настройки по умолчанию.]]> Sun, 06 Feb 2011 22:24:27 +0400 http://webstandards.org.ru/forum/index.php?showtopic=311