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

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

Квадратики в заголовке страницы

Доброго! Помогите плиз. Появились квадратики в заголовке страницы. Как на рисунке, указанном ниже

Как решить эту проблему?

Нужна помощь в нескольких вопросах

1. Есть сайт http://arbat.sebastopol.ua – это чтобы всем интересующимся была видна проблема явно и сразу.
2. как приклеить footer к низу странички?
3.Самый важный вопрос, есть ли где то в WordPress редактор html?Хорошо знаю html/css но не знаю почти php, не пойму например как мне подправить что то где то, к примеру вот на выше указанном сайте есть в сайдбаре номера телефонов, так вот ни в одном файле темы (footer.php/sidebar.php/comments.php/боковая панель.php и т.д.) пересмотрев внимательно весь код не нашел этих надписей-НЕ Я создатель сайта, но мне приходится теперь его администрировать и наполнять, в html-быстро бы все нашел и сделал, или тут только ПХП и все?
4.Видите как залезли кнопочки read more и как они прыгают? опять же пхп, какой модуль этим управляет, и как сделать чтобы они были все на одной горизонтали?
5.Как найти редактируемую главную страницу, вот в редакторе страниц есть все кроме главной…?
6.видел есть интересные плагины, как их загружать?вот скачался zip-файл, внутри плагин, устанавливать ftp на комп и загружать в указанный путь архив а потом уже ловить его в панели управления?
Большое всем спасибо за ответы… очень их жду

Возможно было, но я искал, честно!!!

смысл в чем :

сайт – www.shtar.ru
шаблон – http://blogstyle.ru/1213
проблема – вот там меню, оно по левому краю ровняется, всю голову сломал чтобы сделать по центру, проблема еще в чем там есть, ссылки во вторую строчку переходят , т.е. как будто барьер у сайдбар2 (правая колонка) как исправить и сделать меню по центру???

выручаем плиЗ))

Помогайте все плывет(

Сам как ни химичил – так ничего и не получилось сделать. вот сам глюк : http://henzo.org/kartinki/dab665e76affd6ece6524a6b42dc012ad.png http://henzo.org/kartinki/437eff971f704fb434707dba7627b633.png
глючит преимущественно в опере. Ссылка на css : http://henzo.org/wp-content/themes/deMar/style.css
может подскажите чего?

Где исправлять ошибки?

Подскажите пожалуйста где (в каких файлах index.php или другой) нужно исправлять ошибки, найденные валидатором "validator.w3.org"
Например такая:
Line 9, Column 87: end tag for "link" omitted, but OMITTAG NO was specified
…el="stylesheet" href="http://popularly.ru/wp-content/themes/Sublime/style.css">(именно знак больше подчёркнут)

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
очень надо! помогите!

перенести меню в шапке с права на лево

добрый день!
сайт http://design-vsego.dp.ua

не могу пенести меню в шапке в правый угол – так как тема свестрана не совсем мне понятно!
используются z-index и я пока в этом ничего не понимаю.

куча текста – и что здесь отвечает за положение менюшки – не могу понять!

помогите пожалуйста!

/* begin Menu */
/* menu structure */

.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
  text-align:left;
  text-decoration:none;
  outline:none;
  letter-spacing:normal;
  word-spacing:normal;
}

.artmenu, .artmenu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.artmenu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background:none;
}

.artmenu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.artmenu li li
{
  float: none;
}

.artmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background:none;
}

.artmenu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.artmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.artmenu:after, .artmenu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.artmenu, .artmenu ul
{
  min-height: 0;
}

.artmenu ul
{
  background-image: url(images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.artmenu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}


/* menu structure */

.nav
{
  position: relative;
  margin: 0  auto;
  width: 982px;
  height: 23px;
  z-index: 100;
}

.artmenu
{
  padding: 0px 0px 0px 0px;
}


.nav .l, .nav .r, .nav .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 23px;
}

.nav .l
{
  left: 0;
  right: 0px;
}


.nav .r
{
  right: 0;
  width: 0px;
}


.nav .r div
{
  width: 982px;
  right: 0;
}


.nav .l, .nav .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/nav.png');
}

/* end Menu */

/* begin MenuItem */
.artmenu ul li
{
  clear: both;
}

.artmenu a , .artmenu a span
{
  height: 23px;
  display: block;
}


.artmenu a
{
  cursor: pointer;
  text-decoration: none;
  margin-right: 0px;
  margin-left: 0px;

}
.artmenu a span span
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  color: #CDF1F9;
  padding: 0 12px;
  margin: 0 0px;
  line-height: 23px;
  text-align: center;
  background-image: url('images/item-center.png');
  background-position: left top;
  background-repeat: repeat-x;

}




.artmenu a:hover span span
{
  color: #FCEFEE;
  background-position: left -23px;
}

.artmenu li:hover a span span
{
  color: #FCEFEE;
  background-position: left -23px;
}


/* end MenuItem */

/* begin MenuSeparator */
.nav .separator
{
  display: block;
  width: 1px;
  height: 23px;
  background-image: url('images/item-separator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.artmenu ul a
{
  display:block;
  text-align: center;
  white-space: nowrap;
  height: 23px;
  width: 180px;
  overflow:hidden;
  line-height: 23px;
  margin-right: auto;


  background-image: url('images/subitem-bg.png');
  background-position: left top;
  background-repeat: repeat-x;

  border-width: 1px;
  border-style: solid;
  border-color: #B5B0A1;
}

.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 23px;
  color: #0C4C5A;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
}

.artmenu ul ul a
{
  margin-left: auto;
}

.artmenu ul li a:hover
{
  color: #000000;
  border-color: #A19A87;
  background-position: 0 -23px;
}

.artmenu ul li:hover>a
{
  color: #000000;
  border-color: #A19A87;
  background-position: 0 -23px;
}

.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
  color: #000000;
}

.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
  color: #000000;
}


/* end MenuSubItem */

Новости на главной!

Здравствуйте!
У меня возникла проблема!
Есть сайт – http://bee.lviv.ua/
Так на нем на главной там где должна быть статьи выводяться категории!
Как зделать чтоб вместо категорий выводились статьи?

Header.php + jquery = Слайдшоу, как?

Доброго времени суток!

Есть у меня тема с изображением в шапке banner.gif, который прописан в header.php как

<div id="banner"></div>

а в style.css как

#banner { background: transparent url(images/banner.gif) no-repeat; width: 936px; height: 209px; margin-bottom: 20px; position: relative; top: 7px; left: 8px;}

Возникло желание заменить изображение в шапке на красивое слайдшоу. Полазил по форумам, посоветовали воспользоваться jquery, но как его прикрутить к моей теме я немогу додуматся, методом тыка мутил-мутил, безрезультатно.

Нашел на руселлере плагин к jquery с нужным эффектом (fade) http://ruseller.com/lessons.php?rub=32&id=400
но не могу никак прикрутить его, помогите 🙂

Нужна помощь за деньги

Помогите пожалуйста решить.
Есть код, который выводит содержимое рубрики. У нас есть записи, которые принадлежат к 2 рубрикам. Тут возникает проблема.
Этот код привязывает запись к одной из двух рубрик, и только там ее выводит. А в другой рубрике код не выводит название записи.
Например как тут: http://antioxbio.ru/category/for-life-bad/kardio-for-life-bad/
В рубрике "Кардио" опубликованых статей: 4 – а выводит только две!

Может ли кто-нибудь помочь решить это? Мы готовы заплатить.
Спасибо.

Галерея на новом хосте

Прошу подсказать, может кто сталкивался с такой проблемой.
Приобрел отдельно хостинг именно для хранения файлов (jpg). Теперь проблема: как настроить некст ген галерею, что-бы она использовала файлы которые собираюсь хранить на новом хосте?

выравнивание sidebar’oв

добавил второй сайдбар, но не могу выровнять его на странице
тема – default
прописал через "div" свойства

#sidebar
{
    border-left: solid 1px #ddd; 
    padding: 20px 0 20px 0;
    margin-left: 520px;
    width: 190px;
    padding-left: 10px; 
    border: 1px solid red;
    
    }

#sidebar form {
    margin: 0;
    }

#sidebar1
{
    border-left: solid 1px #ddd;
    padding: 0;
    margin-top: 0;
    margin-left: 730px;
    width: 190px;
    padding-left: 10px; 
    border: 1px solid red;
    }

http://picasaweb.google.com/lh/photo/9V-LIEVCk_3QZ9G4GiPouA?authkey=Gv1sRgCMewrKjfqYva3QE&feat=directlink

спасибо

Как растянуть поле для контента?

Люди добрые, помогите кто чем может! 🙂 Не могу решить задачку. Надо растянуть до низа поле для контента. Для наглядности привожу код (из файла стилей) и прикладываю скрин темы.

/** BEGIN content **/
#content {
    width: 560px;
        background: #ffffff;
    float: left;
    padding: 10px 10px 0px 10px;
}
    #content .latest {
        padding: 0px 0px 0px 10px;
    }
        #content .latest h2 {
            margin-bottom: 0px;
            font-size: 1.5em;
        }
            #content .latest h2 a {
                color: #2d2d2d;
            }        
            #content .latest h2 a:hover {
               color: #000;
            }
        #content .latest .details {
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 0.9em;
            color: #000;
        }
            #content .latest .details a {
                color: #2d2d2d;
            }
            #content .latest .details a:hover {
                color: #000;
                text-decoration: none;
            }
        #content .latest p {
         text-align: justify;
        }        
    #content p {
        line-height: 1.3em;
        margin-bottom: 10px;
    }
    #content ul {
        margin: 0 0 10px 16px;
    }
    #content ol {
        margin: 0 0 10px 18px;
    }
    #content li {
        line-height: 1.3em;
        padding: 2px 0;
    }
    #content h3 {
        font-size: 1.5em;
        font-weight: normal;
    }
    #content blockquote {
        padding: 10px 10px 0;
        border: 1px solid #cccccc;
        background-color: #eeeeee;
        font-weight: bold;
        margin-bottom: 10px;
    }
/** END content **/

Заголовок заметки

Как сделать, чтобы первая буква заголовка была определенным цветом?

Как сменить цвет заголовка новости?

В теме Arthemia? Не понимаю через какой тег это сделать. В Div-ах ничего толком не нашла. Подскажите плиз.

Вопрос о wp-pagenavi

Приветствую. Как сделать, чтобы страницы, созданные с помощью wp-pagenavi отображались примерно так: 1, 2, 3 …. 9, 10.
А не 1,2,3,4,5,6,7,8,9,10

Помогите доработать тему для WordPress

Здравствуйте!

Создаю блог на WordPress через связку Apache 2.2.13 + PHP 5.3 + MySQL 5.1.39 + phpMyAdmin
(не Денвер). Изменяю тему Blue Sky Beach Theme под себя. Изначально в ней было 2 сайдбара, которые располагались справа от контента. С помощью другой темы DIYTheme я распределил сайдбары по краям блога с помощью функций

<?php include(TEMPLATEPATH."/l_sidebar.php");?>

и

<?php include(TEMPLATEPATH."/r_sidebar.php");?>

Создал файлы с этими именами и скопировал в них участки кода, которые отвечают за отображение конкретного сайдбара. Функцию get_sidebar() удалил. После этого обновил блог и стал подгонять положение сайдбаров и контента, чтобы они синхронно встали. Мне это удалось! Но каким же было мое удивление, когда, зайдя на другие страницы, я увидел необъяснимое… Область контента отобразилась в левом углу, а сайдбары оказались сверху него и недалеко друг от друга… С чего бы такое?… :unsure: Плюс я решил немножко изменить меню. Меню у меня горизонтальное и у одного пункта имеется подменю со списком страниц, реализованного через функцию:

<?php wp_list_pages('title_li=&depth=-1'); ?>

Я решил немножко изменить меню, расформировал страницы по разным пунктам меню и страницу "О блоге" вынес в отдельное меню, а также значение главной страницы. Раньше у меня на главной странице выводились последние записи блога, а теперь за главную страницу отвечает конкретная страница: "О блоге". Для вывода последних записей я создал пустую страницу "Новое на блоге". Теперь у меня проблемы с меню начались. Активные пунты меню не подсвечиваются, т.е. при наведении на пункт меню он подсвечивается, но подсветка не остается для активной страницы… Класс current_page_item я не трогал… Вот он:

#header #header-menu ul li.current_page_item a{             
color: #0062c0;             
background: url("images/header_menu_hover.gif") no-repeat;                  
}

Рисунок на месте, все должно работать. Условие на активность меню описано. Но вот какая штука. Когда заходишь на страницу "Новое на блоге", подсвечивается кнопка "Главная", как будто я на ней, а на самом деле нет… Другие же кнопки не подсвечиваются, когда я щелкаю по ним, т.е. активность не фиксируют, класс current_page_item не обрабатывается… Вот описание одного из пункта меню:

<?php if ( is_single() ) { ?>                 
<li class="current_page_item"><a href="http://localhost/localblog/novoe-na-bloge">Новое на блоге</a>
</li>                 
<?php } else { ?>                 
<li><a href="http://localhost/localblog/novoe-na-bloge">Новое на блоге</a></li>                 
<?php } ?>

Т.е. есть условие, что если пункт меню активный, то добавлять класс current_page_item. В противном случае кнопка обычная…

В моей же ситуации подсвечивается только кнопка "Главная", если я перехожу на страницу "Новое о блоге", хотя этого быть никак не должно… Помогите мне, пожалуйста, разобраться в этой проблеме…

Пробовал отключать все плагины – не помогло…

Если Вам нужны какие-то материаллы, скажите и я вышлю…

P.S. Да уж… Хочешь быть программистом – имей железные нервы…=)))

С уважением, Сергей.

Опять валидатор недоаолен

Подскажите, плиз, кто знает, в чем причина этой ошибки?

Первая ошибка:
<a href="#top" onClick="scroll(0,0); return false;" title="Вверх страницы" id="ancor"> </a>

Место, которое не понравилось валидатору я обозначила красным цветом.

Вторая ошибка:
Ошибка значения : background  Ошибка разбора  [empty string]

Вот строка, которая вызвала ошибку:

background: url(‘/wp-content/themes/My_theme/images/menu/page-menu.png’) repeat-x 100%;

Поменяла на background-image – теперь ошибка называется:

Слишком много значений или нераспознанное значение

И еще вопрос: Код видео-роликов с ютуба не признают валидным.
То же самое с некоторыми скриптами.

Если я исправляю то, что что валидатор подсказывает (например &), скрипты перестают работать,
и видео тоже.

Что с этим лучше делать: все таки переделывать код скриптов и видео или несколько ошибок в коде, вызванных этим – это не так уж и важно?

Что вы в таких случаях делаете?

Internet Explorer Опять.

понимаю что тема уже задавалась, но чтото выхода я не нашёл из уже перечитанных.

1)
Стоит 2.8.4. Тема отображается в Mozillе нормально, в IE все плывет.
Сайт -> http://www.great-upgrade.ru

2)
Тот же самый 2.8.4 В мозилле все гуд, в IE плывет тока главная, страницы работают нормально.

Хедер разбитый на части

Добрый день!

Вопрос такой. Решил уменьшить вес картинки хедера, поэтому разбил её на несколько частей. Находятся они в таблице. Но, вот прописать их не смог. Кто знает, как это сделать. Вот сама таблица (здесь же прописал идентификатор):

<!-- ImageReady Slices -->
<table id="01" width="870" height="206" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/gruz_01.jpg" width="267" height="69" alt=""></td>
        <td rowspan="3">
            <img src="images/gruz_02.jpg" width="112" height="206" alt=""></td>
        <td rowspan="3">
            <img src="images/gruz_03.jpg" width="115" height="206" alt=""></td>
        <td rowspan="3">
            <img src="images/gruz_04.jpg" width="105" height="206" alt=""></td>
        <td>
            <img src="images/gruz_05.jpg" width="271" height="69" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/gruz_06.jpg" width="267" height="72" alt=""></td>
        <td>
            <img src="images/gruz_07.jpg" width="271" height="72" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/gruz_08.jpg" width="267" height="65" alt=""></td>
        <td>
            <img src="images/gruz_09.jpg" width="271" height="65" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->

Таблицу вставил в файл header.php. В стилях прописал так:

#01{
    margin: 200px auto;    
    height:206px; 
    width: 870px;
}

Картинки положил в папку images. В результате, картинки не видны, а только сетка таблицы. А также расстояние от верха не 200рх, как я прописал в стилях.

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

Удалить с footer.php

Есть тема iGreat, но куча ссылок в footer.php.
При удалении сайт выдает ошибку, как удалить эти ссылки безболезненно ?

</div>
<div id="footer">
Copyright &copy; <strong><?php bloginfo('name'); ?></strong> | Powered by 2009
</div>
<div id="footer2">Get <a href="http://www.bestincellphones.com/">Cheap Cell Phones</a> and Wireless Deals. | Thanks to <a href="http://www.bankingzen.com/savings/">Best Savings Accounts</a>, <a href="http://www.thepiggybanker.com/">CD Rates</a> and <a href="http://www.cheaper-loan.co.uk">UK Loan</a></div>
</div>
<?php
wp_footer();
echo get_theme_option("footer")  . "\n";
?>
</body>
</html>
Anonymous
Отправить
Ответ на: