FAQ по дизайну и верстке (HTML, CSS)

Готовые ответы по дизайну и верстке

Нужно немного подправить Css

Установила к себе на блог (http://zhenskij-sajt-katerina.ru, WordPress) 2 блока тизеров LadyCash: один в сайдбаре (работает), второй внизу постов (отображается некрасиво, видно несколько серых границ). Написала в службу поддержки и получила такой ответ: "Блок подцепляет стили сайта. Нужно подправить стили на своем сайте, либо задать для нашего блока другие стили." Тем, кто разбирается, моя проблема скорее покажется пустяком, а я вот весь день искала в файле style.css, какие строки отвечают за цвет границы таблиц. Хотя не совсем уверена, что те серые границы тизерного блока вообще имеют хоть какое-то отношение к таблице. Сразу оговорюсь, что при оформлении самого тизерного блока никаких границ я не выбирала вообще, тем более серых. Кто сталкивался с такой проблемой, подскажите, что мне изменить.

Интеграция меню в движок

Имеется вот такое меню (изображение кликабельно):

HTML+CSS код для него уже сделан. Как видно, меню нестандартное для Вордпресс, просто так к wp_list_categories его не приладишь, имеются разные иконки в каждом меню+иконки сделаны спрайтом и при наведении картинка меняется+название категории написано нестандартно, так в админке не напишешь. Верстал часто под вордпресс, но с таким случаем столкнулся впервые. Есть мысли как можно такое меню реализовать?

P.S Дизайнеру бы руки оторвал… Видимо не знал, что в вордпресс такое меню не так просто сделать

Помогите за деньги

Помогите или подскажите пожалуйста, мне нужно чтобы в полной новости сайдбар был уже и наполнен совсем другим контентом, а также чтобы сама новость была более растянута в ширину.
А также хотелось бы чтобы в одной из рубрик новости выкладывались в другом порядке.
мой сайт http://blogforlife.cc/

Положение страницы в иерархии страниц

Требуется сделать в шапке строку, в которой в виде "Раздел – Подраздел – Страница" вывести полный путь конечной страницы в иерархии, а каждый вышележащий узел сделать ссылкой (Раздел со ссылкой на этот раздел, подраздел – со ссылкой на подраздел и т.д.). Все узлы являются страницами.
Как это реализовать?

Аккордеон для списка подрубрик

Если взять следующую конструкцию <?php wp_list_categories(‘child_of=4&hide_empty=0&orderby=ID&title_li=&depth=1’); ?>
Мы получим список подрубрик некой рубрики и список её подрубрик.
Что-то типа

ul > li.cat-item > ul.children > li.cat-item > a

При этом ul -> li.cat-item это будет заголовок , а ul.children > li.cat-item > a — вложенный список подрубрик.

Вопрос, кто-нибудь пробовал писать аккордеон для конструкции такого типа?

Рабочая форма поиска на русском

Помоги перевести форму поиска на русский, чтобы она нормально работа. Вот сама форма:

<form method="get" id="searchForm" action="<?php bloginfo(‘home’); ?>/">
<span><input type="text" value="Search the archives…" onfocus="if

(this.value == ‘Search the archives…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value =

‘Search the archives…’;}" name="s" id="s" /></span>
</form>

Вставлял вместо Search the archives "Поиск по архиву" и форма не правильно работа. Т.е. когда нажимаешь на форму текст должен автоматически исчезать, а при переводе на русский текст приходится самостоятельно удалять

сглаживание текста

Здравствуйте
Я по этому поводу гуглил, но в основном в 2002-2005годах
время течет и все меняеться, вот мб и со сглаживанием шрифтов тоже что то поменялось?

я бы не стал думать о переменах если не увидел бы это в действие
на данном сайте http://webreading.ru/
там во время загрузки текст сперва немного гривой, а потом красиво сглажен
"Вы любите читать книги? Тогда вы попали по адресу. Найдите книгу или автора через форму поиска:" (текст о катором речь)

“Оцентровать” страницу в Css для Ie

Уважаемые форумчане!
Помогите новичку.
посмотрите эту страницуhttp://daniel.guide-moscou.com/

в мозилле всё хорошо, блоки располагаются по центру, а вот в ИЕ- страница была сдвинута на левый край, так как margin: o auto он не понимает
Из всего,что пробовал, помогло только добавление к body в css text-align: center;

Всё вроде бы нормально, но теперь содержимое и текст в блоках тоже весь по центру :/
Мне это совсем ни к чему, надо как в мозилле.
Начал пробовать править у каждого атрибута в отдельности отступы и поля: запутался и уже заболела голова. Вернул всё обратно.

Может есть какое-то простое решение, чтобы фиксануть эту проблему? 🙁

Вот нынешний css

*/
body
{
font-family:Times New Roman;
background:#fff url("images/bk-body.gif") repeat top center;
margin:0px auto 0 auto;

}

img
{
border:0;
display:inline;
}

#top
{
height:220px;
background:url("images/bk-top.jpg") repeat-x top center;
color:Blue;
}

#top-drop-shadow
{
height:28px;
background:url("images/top-drop-shadow.gif") repeat-x top center;
}

#header
{
width:803px;
margin:0px auto 0 auto;
height:220px;
background:url("images/bk-header.jpg") ;
position:relative;
color:green;
}

#sitetitle a
{
position:absolute;
text-decoration:none;
color:#fff;
font-size:35px;
top:65px;
left:16px;
}

#sitetitle a:hover
{
position:absolute;
text-decoration: underline;
color:#fff;
font-size:35px;
top:65px;
left:16px;
}

#stamp
{
width:118px;
height:117px;
background:url("images/stamp.png") no-repeat top left;
position:absolute;
right:-21px;
top:88px;
}
*html #stamp
{
background:none;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/stamp.png', sizingmethod='scale');
}

#content
{
background:#fff url("images/bk-content.jpg") no-repeat top left;
width:803px;
margin:0 auto;

}

#mainnav
{
position:absolute;
top:183px;
left:189px;
margin:0;
padding:0;
height:36px;
}

#mainnav li
{
font-size:16px;
font-weight:bold;
line-height:100%;
float:left;
margin-left:10px;
margin-top:12px;
color:#fff;
}

#mainnav li a
{
color:#fff;
text-decoration:none;
margin-right:10px;
}

#mainnav li a:hover
{
text-decoration:underline;
color:#fff;
}

/*content
--------------------------------------*/

a, a:hover
{
color:#108070;

}

h1
{
font-size:18px;
line-height:100%;
margin:0 0 12px 0;
padding:12px 0 0 0;
color:#CC0033;
}

h2
{
margin:20px 0 0 0;
padding:0 0 10px 0;
color:#9933FF;
font-size:15px;
}

p
{
font-size:12px;
color:#333;
line-height:150%;
margin:0 0 20px 0;
padding:0;
}

p a, p a:hover
{
color:#333;
}

p.blue, p.blue a, p.blue a:hover
{
color:#108070;
}

p.bottom
{
margin-bottom:0;
}

ul
{
list-style-position:outside;
list-style-type:none;
}

#nav
{
float:left;
width:150px;
display:inline;
margin-top:28px;
margin-right:17px;
padding-left:21px;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background: #fff;
border: 1px solid #333;
padding: .2em;
}

#commentform textarea {
width: 550px;
}

#commentlist li ul {
border-left: 1px solid #ddd;
font-size: 110%;
list-style-type: none;
}

#commentlist li .avatar {
float: right;
margin-right: 25px;
border: 1px dotted #ccc;
padding: 2px;
}

#content #nav .top
{
margin-top:0;
}

#content #nav ul
{
font-size:14px;
line-height:160%;
margin:0;
padding:0;
color:#666;
}

#content #nav ul li
{
margin-bottom:8px;
}

#content #nav ul li a, #content #nav ul li a:hover
{
color:#108070;
}

#center
{
float:left;
width:614px;
display:inline;
}

#content .top
{
margin-top:22px;
}

#content .item
{
background: url("images/line.gif") no-repeat 0 5px;
position:relative;
margin-top:18px;
}

#content .item .date
{
color:#666;
font-size:10px;
position:absolute;
right:10px;
}

#content #center ul
{
padding:0 0 10px 0;
margin:0 0 0 0;
font-size:12px;
color:#333;
}

#content #center ul li
{
background:url("images/bullet.gif") no-repeat left center;
padding-left:10px;
margin-bottom:10px;
}

#content img
{
border:solid 5px #eee;
margin-bottom:20px;
}

#content #footer
{
background: url("images/line.gif") repeat-x;
position:relative;
margin-top:18px;
margin-right:10px;
}

#content #footer ul li a
{
font-size: 11px;
color: #999;
}

#content #footer ul li a:hover
{
font-size: 11px;
color: #999;
}

#content #footer ul li
{
display: inline;
background: none;
padding: 0 5px 0 0;
}

#rss-link
{
display:block;
text-indent:-9999px;
width:77px;
height:71px;
position:absolute;
top:172px;
left:46px;
outline:none;
}

Дизайн категории

Нужна Ваша помощь, отблагодарю WMZ. Вот сайт, http://takos.com.ua , нужно изменить дизайн рубрик слева. Когда будет создаваться новая, чтобы неприходилось редактировать стиль её. Сейчас установлен плагин, спомощью которого они могут выдвигаться вниз. Помогите пожалуйста сделать дизай рубрик, чтобы были хотябы в виде какой-то кнопочки простой. Заранье благодарен. Напишите пожалуйста в ЛС, вышлю ICQ.

Логотип в шапке , а не название-текст

Здравствуйте. Подскажите пожалуйста, как в уже установленном стандартном шаблоне реализовать в шапке сайта не название сайта в виде текста, а вывод графического логотипа. На примере сайта http://www.marinbiz.ru/ Естественно, Title для поисковых систем хотелось бы оставить прежним.

Спасибо.

Нестандартное меню

Добрый вечер! Можно на вордпрессе сделать вот такое меню?

Тема Traction. Как поменять логотип?

Здравствуйте. Помогите пожалуйста изменить логотип в шаблоне Traction. Взял от сюда http://www.wpbot.ru/?p=1568
Я хочу вместо стандартного логотипа, вставить свой рисунок размера 500х100. Но не получается, он съезжает…

Насколько я понимаю, надо изменить эти куски?
header.php

<div id="header" class="clear">
      <div class="logo">
        <?php if (is_home()) echo('<h1 id="title">'); else echo('<div id="title">');?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><?php if (is_home()) echo('</h1>'); else echo('</div>');?>
        <div id="description">
          <?php bloginfo('description'); ?>
        </div><!--end description-->
      </div><!--end logo-->
      <div id="cat-nav" class="clear">
        <ul class="nav">
          <?php if ($traction->hideCategories() != 'true') : ?>
            <?php wp_list_categories('orderby=ID&title_li='); ?>
          <?php endif; ?>
        </ul>
      </div><!--end navigation-->
    </div><!--end header-->

master.css

/*Header
------------------------------------------------------------ */
#header { padding-bottom: 20px; }
div.logo { float: left; }
h1#title, div#title, div.logo img {
  padding: 30px 0 0 20px;
  font-size: 3em;
  color: #f8f8f8;
  font-weight: bold;
  text-shadow: 0 2px 0 #000;
}
h1#title a:link, h1#title a:visited, div#title a:link, div#title a:visited  { color: #fff; }
h1#title a:hover, div#title a:hover { text-decoration: none; }
div.banner {
  float: right;
  margin: 20px 0 0 0;
}

Подскажите, что делать? Заранее спасибо.

Нужна помощь по WordPress 3.0

Доработать тему сайта
1. Галерея должна работать как тут: todayautonews.com
2. Раздел закладки Интересное отображает самые последние статьи. Как на todayautonews
3. Вкладки, что под галереей отображают фото из статьи.
4. Избранные статьи отображают статьи из выбранных в админке категорий. См. настройки темы.
5. Внедрить галерею для отображения фото на сайте. Типа lightbox. Установка плагина.

Какая-то белая полоса….

У меня на блоге на некоторых страницах в нижней части дизайн прерывается какой-то белой полосой, которая начинается сразу после копирайта и идет до самого низа, причем ширина у неё меньше видимой части сайта. Посмотрел в файрбуге, она никак себя не выдает. Что это может быть? С таким сталкиваюсь первый раз. Посмотрите на картинки, может кто-то сможет разобраться с этим явлением. На одной картинке страница без полосы, на второй – с полосой.

1)

2)

Заранее спасибо!

Вместо цитаты текст поста

Столкнулся с проблемой и не могу самостоятельно решить.

Там где должен выводиться Анонс, выводится текст поста, а в тексте поста выводится Анонс.
Этот перевертыш можно увидеть по этой ссылке
http://www.supermassager.ru/mn в статье апавпав

Выручайте, на Вас вся надежда, я слышал, что Вы профи!

Высылаю содержимое index.php

<?php
get_header();
?>

<div id="content">

<?php query_posts($query_string.’&cat=55′); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry <?php if(is_home() && $post==$posts[0] && !is_paged()) echo ‘ firstpost’;?>">
<h3 class="entrytitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a> </h3>

<div class="entrymeta">
<?php the_time(‘F dS, Y’);
echo " | ";the_category(‘,’);?>
</div>

<div class="entrybody">
<?php the_excerpt();?>
<a class="more-link" href="<?php the_permalink(); ?>">Читать далее</a>

<?php comments_popup_link( ‘Нет комментариев ‘,’1 Комментарий ‘,’% Комментариев ‘, ‘comments-link ‘,’Комментирование закрыто ‘);
edit_post_link(__(‘<strong>Изменить</strong>’));?>

</div>
<!–
<?php trackback_rdf(); ?>
–>
</div>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p>
<?php _e(‘Извините, ничего не найдено.’); ?>
</p>
<?php endif; ?>
<p>
<?php posts_nav_link(‘ — ‘, __(‘&laquo; Предыдущие товары’), __(‘Следующие товары &raquo;’)); ?>
</p>

</div>
<?php get_sidebar(); ?>

<!– The main column ends –>
<?php get_footer(); ?>

Установить магазин за деньги

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

Cкрипт должен быть на русском языке.

Настроить его работу.

Это должно выглядеть так:

  • кнопка "Купить" под описанием товара,
  • изображение корзины в сайдбаре,
  • при клике по кнопке "Купить" товар должен добавляться в корзину с переходом на страницу корзины.

После перехода должно быть три кнопки: «Продолжить покупки», «Оформить заказ», «Пересчитать». А также возможность удалить товар и кнопка удалить все товары.
Нужно, чтобы добавленный товар отображался в корзине в виде списка:

1 товар + его стоимость
2 товар + его стоимость
3 товар + его стоимость и т. д.

+ Общая цена выбранного товара в 3х валютах: рубли, гривны, евро (руб., грн., eur).

Также в корзине должна быть функция удаления товаров и кнопка "Оформить заказ" (страница 1) и «Оформить быстрый заказ» (страница 2)

При нажатии на эти кнопки покупатель должен попадать на соответствующую страницу.

Кнопка "Купить" должна отображаться в анонсах товара и в полной записи на сайте.
Т.е. в файлах single.php и archive.php темы. Чтобы товар можно было добавить в корзину со страниц сайта, не переходя для этого в магазин.

При нажатии на изображение в анонсах и в полной записи на сайте должен появляться лайтбокс с увеличенным изображением товара.

На странице «Оформить заказ" (страница 1) должно находиться:

  • список выбранных товаров с ценами и общей ценой, возле каждого товара должна быть кнопка «Удалить товар».
  • изображения выбранных товаров.
  • форма для заказа.
  • выбор способа оплаты.
  • Выпадающий список по странам «Выберите страну» таким образом: Украина, Россия и Укажите страну. При нажатии Укажите страну – поле очищается и человек просто вводит свою страну. Выбор одного из этих трех вариантов определяет то, кому отправляются данные формы (одному из трех админов).
  • Кнопка «Отправить заказ».

После нажатия на кнопку «Отправить заказ» Вся информация с этой страницы должна отправляться на почту админа.

На странице «Оформить быстрый заказ" (страница 2) должно находиться:

  • Список всех товаров, цена товара в трех валютах, выпадающий список для выбора количества товара и поле, в котором покупатель ставит "птичку", выбирая товар.

Кнопка – «Оформить заказ», которая отправляет покупателя на страницу «Оформить заказ» (страница 1)

В магазине не будет использоваться никаких способов оплаты.

Покупатель только выбирает способ оплаты из предложенного списка оплат, при заполнении формы заказа и эта информация по почте отправляется одному из трех админов (в зависимости от выбранной страны).

Дальнейшее не связано с магазином.

На сайте, также, нужно сделать несколько опросных форм:

Все формы должны иметь капчу, обязательные и необязательные поля.
Все формы отправляются админу.
Формы следующие:

ОПРОСНЫЙ ЛИСТ

ОФОРМИТЬ СКИДКУ

Это только форма, которую покупатель заполняет, чтобы получить скидку. Данные этой формы также отправляются по почте админу.

На этой странице нужно сделать выпадающий список по странам «Выберите страну» таким образом: Украина, Россия и Укажите страну. При нажатии Укажите страну – поле очищается и человек просто вводит свою страну. Выбор одного из этих трех вариантов определяет то, кому отправляются данные формы.

Форма для граждан дальнего зарубежья должна быть заполнена только буквами английского алфавита. Поэтому в начале нужно поставить два переключателя, при нажатии на которые меняются язык формы (пример: вместо Имя – name и т.д.).
_______________________________________________________

ОФОРМЛЕНИЕ ЗАКАЗА МАГАЗИНА

Формы опишу дополнительно.

Это вкратце. Подробности в процессе работы.

Помогите убрать пустую ссылку в шапке

design-vsego.dp.ua/

добрый день!
помогите пожалуйста убрать в шапке квадратик с надписбю "изображение"

он виден в IE и в Opera

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

подскажите что делать?
я вставила в header.php <img src="<?php bloginfo(‘stylesheet_directory’); ?>http://design-vsego.dp.ua/wp-content/themes/autofocus/img/logo.gif">
и в style.css
#header {margin:55px 0 0;height:105px;text-transform:normal;width:600px;clear:none;float:left;color:#f70080;background: transparent url(img/logo.gif) no-repeat left;margin-top:10px;}

Шаблон не отображает русские символы

Здравствуйте, задавал этот вопрос на mywordpress.ru, хочу узнать и у вас:
шаблон выдает такую строку <div id="homewidget" class="grid_4"><h1>Введите ваши данные</h1></div> (если заглянуть в исходный код). Но на странице ее не видно, если написать по-английски то нормально. Весь CSS перелопатил, class здесь не имеет значения, я его убирал, результат тот-же. Файл CSS здесь. Помогите

нужна помощь в починке сайта

Обратились ко мне знакомые с просьбой о помощи. Сам я далек от веб-программирования вообще и от WP в частности, поэтому просьба сильно не пинать за неточности в терминах :rolleyes:.
Сайт в свое время сделали, запустили и он работал нормально. Неделю назад было замечено, что сайт "поехал": центральная колонка стала выводится в самом низу справа, под правым сайдбаром. После чтения доков, форума и шаманства с page.php мне удалось вернуть отображение страниц в среднюю колонку:
Но вот поднять правый сайдбар на место мне не удается. И новости "разворачиваются" под сайдбаром, а не в центральную колонку.

Шаблон page.php:

<?php get_header(); ?>
<div id="wrapper">
<div id="wrapper_b">
<?php get_sidebar(); ?>


<div id="outer2">

<div id='content'>

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="post" id="post-<?php the_ID(); ?>">
            <div class="entry">
                <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

                <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

            </div>
        </div>
        <?php endwhile; endif; ?>

        </div><!--content-->
</div> <!-- outer2 -->
<?php get_footer(); ?>
<?php get_sidebar('right'); ?>

</div><!-- wrapper_b -->
</div><!-- wrapper -->

или надо что-то в style.css править? Или в шаблоне сайдбара? Подскажите, плиз, где собака порылась…

Не верно отображается в Opera

Здравствуйте.
Скачал тему http://www.wpbot.ru/?p=1551 там в опере (IE 8, Mozilla Firefox, Google Chrome – нормально) кнопка поиска съезжает вниз. Подскажите пожалуйста как исправить?

Anonymous
Отправить
Ответ на: