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

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

Помогите доработать тему для 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>

Изображения съезжают под сайдбар

Использую WP 2.8.6 тема Dezinerfolio simpress (пример http://simpress.ru/) , убрал один сайдбар за ненадобностью. При добавление большого изображения в новость и открытие новости на маленьком разрешении экрана, изображение съезжает до окончания информации в сайдбаре. Данная проблема наблюдается только в IE (использую 7 версию) в FF и опере все нормально. Выложу рисунок, чтобы наглядно было понятно.

Вот ссылка на файлик css: http://data.cod.ru/33790

Давно уже борюсь с этой проблемой, но универсального решения так и не нашел. Надеюсь на вашу помощь.

оформление списка ul li

редактирую чужую тему.
у меня на странице есть код, который выводит простой список

<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>

в браузере он выводится без оформления

Teenused

добавил в CSS таблицу код
#post li li {list-style:disc;}
все равно ничего не меняется

не понимаю что еще нужно добавить или, наоборот, убрать
в некоторых местах есть list-style: none;
но он там действительно нужен. вывод меню итд

таблица стилей
http://helen.edu.ee/cms/wp-content/themes/simple/style.css

заранее благодарен

“Расползается” сайдбар

Здравствуйте.
Вопрос вот в чем, у меня на сайте http://mult.name , я заметил маленький изъян, справа вверху, "шапка" в сайдбаре уходит на 1px вправо, причем это видно только в Firefox, в IE же, все нормально.

На изображении, это на границе между белым фоном и темным, в центре.

Поковырял сам сайд – понял что дело не в нем, даже если его полностью очистить такая проблема остаётся. Других идей не было, поэтому может быть кто поможет найти ошибку?

своя страницы темы

Необходимо, чтобы при обращении на www.сайт.ru/blog появлялись все записи выбраных категорий. До этого делал файл blog.php, закидывал в тему и делал страницу с шаблоном blog. Но сейчас заметил, что при таком методе не работает Page-Navi, постоянно открывает первую страницу. Как возможно по-другому реализовать blog или хотя бы чтобы работала навигация.

Слайдер не совместим с < ?php wp_head(); ? >

У меня проблема со слайдером.
Он перестает работать, когда в header.php добавляется код <?php wp_head(); ?>

Мой слайдер с сайта http://sorgalla.com/jcarousel/.

Подскажите, плиз, какая между ними связь?
Может, кто знает. как это исправить?

Неправильная ширина элемента input

Я попытался сделать элемент <input type="text"> в док-тайпе HTML 4.01 Strict.
Я указал ему ширину: <input type=’text’ style=’width: 200px;’>
Но в результате получил input с длиной 204 пиксела во всех браузерах (Opera 9.64, IE8, Chrome 3.0, FF 3.6).
Когда я убрал док-тайп, то ширина стала 200 пикселов.
Я попробовал применить XHTML Strict и XHTML Transitional, то всё равно получал длину элемента в 204 пиксела.

Помогите, пожалуйста, разъяснить ситуацию.

тёмно-серый фон сайта в Opera

Приветствую участников Форума!

Прошу подсказать, как лучше решить следующую проблему – наш сайт [url]www.ecofriendly.ru[/url] у НЕКОТОРЫХ (т.е. не у всех, у меня, например, всё нормально) пользователей браузера Opera выдаёт вместо белого тёмно -серый фон, читать на котором… мягко говоря сложно.

Вообще сайта на этом шаблоне работает уже полтора года и раньше всё было нормально.

В чём может быть проблема?

Заранее благодарю за поддержку и подсказку.

WordPress 2.3.3
плагины – джентльменский набор без экспериментальных – Сборка Макса.

Прошу отмести версию про реплики спамеров – вполне адекватные люди пишут в контактную форму (а не только в комменты) сайта с просьбой наладить отображение в Opera. У некоторых я даже переспрашивал и уточнял.

Выпадающие подменю

Здравствуйте, может хто встречался с проблемой http://www.prostosait.com.ua/portfolio/vodolazova/ , при наводе на пункт меню появляется жолтое подменю, потом когда с него убераю мышку оно пропадает, это реализовал с помощью jquery, но проблемав в IE6, жлолтое подменю непропадает .

Вот код скрипта

$(function(){

$("li:has(.sub)").mouseover(function () {
$("li:has(.sub)").parents("#header").css("height","85px");
;
});

$("li:has(.sub)").mouseout(function () {
$("li:has(.sub)").parents("#header").css("height","auto");
});

});

div float:left

здравствуйте

нужен совет. переделываю F8 Lite тему под себя,
и никак не могу понять почему блок с sidebar
в разделах висит как надо
http://helen.edu.ee/blog/oppetoo/

а на главной болтается внизу
http://helen.edu.ee/blog/

ведь у блоков с текстом одинаковый стиль

заранее спасибо

Подсветка верхних уровней li в меню

Добрый день.
Заранее прошу прощения, если подобный вопрос был. Искал, но как-то неудачно.

В данный момент я делаю выпадающее меню для социальных закладок.
При наведении мышкой на пункт главного меню "Закладки" выпадает нижняя панелька. Все это сопровождается подсветкой на фоне. Потом мышка переходит на панель закладок, подсветка у панельки остается, а у у пункту "Закладки" пропадает. (см.картинку)

ВОПРОС: Как прописать CSS что бы при наведении на панельку подсвечивался пункт "Закладки"

Примечание: Почему то при наведении на панельку загарается иконка над надписью "Закладки". Так и не понял почему, нигде такой зависимости не увидел.
Примечание 2: Подсветка произсодится полупрозрачной градиентной ПГНшкой

Вот код (HTNL+CSS) всего этого блока:

/***************************************************/
/********************* HTML ************************/
/***************************************************/


<div class="header-right">
    <ul class="top-menu">
        <li class="delitel"><span>&nbsp;</span></li>
        <li>
            <span class="bookmarks-menu">&nbsp;</span>
            <a href="#">Закладки</a>
            <div class="socials-menu rc10">
            <div class="chertochka">&nbsp;</div>
                <ul>
                    <li class="social-icons item-1">
                        <a href="..."><img src="..." /></a>
                    </li>
                </ul>
                <div>
                    <span class="link-socials item-1">...</span>
                </div>
            </div>
        </li>
        <li class="delitel"><span>&nbsp;</span></li>
        <li>
            <span class="reg-menu">&nbsp;</span>
            <?php wp_register('', ''); ?>
        </li>
        <li class="delitel"><span>&nbsp;</span></li>
        <li>
            <span class="login-menu">&nbsp;</span>
            <?php wp_loginout(get_option('home')); ?>
        </li>
    </ul>
</div>
/***************************************************/
/********************** CSS ************************/
/***************************************************/



.delitel {
background:#637285 url(images/delitel.png) repeat scroll 0 0;
height:100px;
margin:0;
width:1px;
}

ul.top-menu {
height:100px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;;
}

ul.top-menu li {
    display:inline;
float:left;
padding:0;
text-align:center;
}

ul.top-menu li:hover {
display:inline;
float:left;
padding:0;
}

ul.top-menu li a {
color:#CCCCCC;
display:block;
padding:75px 15px 10px;
}

ul.top-menu li a:hover {
background:transparent url(images/hover-top-menu.png) repeat-x scroll 0 0;
color:#FFFFFF;
display:block;
padding:75px 15px 10px;
}

ul.top-menu ul li a {
float:left;
padding:1px;
}

ul.top-menu ul li a:hover {
float:left;
padding:1px;
}

.login-menu {
background:transparent url(images/login-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

ul.top-menu li:hover span.login-menu {
background:transparent url(images/login.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

.bookmarks-menu {
background:transparent url(images/bookmark-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

ul.top-menu li:hover span.bookmarks-menu {
background:transparent url(images/bookmark.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

.reg-menu {
background:transparent url(images/reg-g.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

ul.top-menu li:hover span.reg-menu {
background:transparent url(images/reg.png) no-repeat scroll 0 0;
height:16px;
margin:55px -8px 0;
padding:0;
position:absolute;
width:16px;
}

.socials-menu {
background:#223146 none repeat scroll 0 0;
border:1px solid #637285;
float:none;
height:35px;
margin:-1px -60px 0;
padding:5px 5px 16px;
position:absolute;
width:auto;
}

.socials-menu div {
font-size:0.8em;
}

.socials-menu span {
height:10px;
left:7px;
position:absolute;
}

.chertochka {
background:#223146 none repeat scroll 0 0;
height:1px;
margin:-6px 0 0 54px;
position:absolute;
width:87px;
}

ul.top-menu li:hover div {
background:#223146 url(images/hover-top-menu.png) repeat-x scroll 0 -99px;
}

Выпадающее меню

Столкнулся с проблемой. неободимо реализовать на подобие выпадающего меню. Нужно, чтобы, к примеру, при нажатии на FAQ в навигации, переходило на страницу FAQ и при этом раскрывались дочерние сслыки FAQа. Находил информацию по созданию с помощью скрипта, но получалось, что дочернии ссылки раскрвались при наведении на родительское меню, а необходимо только при переходе. Плагины, что были на этом фоуме указаны, не подошли под данные задачи. Приблизительно представляю, что это можно сделать на css и php кодом.

проблема с динамическим меню

Помогите новичку.
Добавил динамическое меню. возникла проблема – обрезались выпадающие менюшки. как бы за основной текст ложились, решил с помошью отключения overflow.
Думал уже все, но тут начал добавлять новости. Получилось, что текст новостей ложится поверх меню.

сайт – aurum.in.ua/

не работает счетчик рейтинга майл.ру

Установил счетчик рейтинга майл в подвал блога но он не работает. Хотя рамблер топ 100 заработал сразу и без проблем. В чем может быть дело?

Помогите начертить бордюр в сайдбаре.

Имеется 2 сайдбара. Пытаюсь сделать бордюр (тонкая полоска, отделяющая сайдбар от центральной части сайта), но он доходит только до последней записи в сайдбаре (а не до низа). Если сайдбар пустой, то бордюра вообще нет.

#leftnav
{
float: left;
width: 190px;
margin: 0;
padding-top: 12px;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 20px;
text-align: left;
background: #756c50;
border-right:1px solid #909570;
}

Подскажите, пожалуйста, что не так?

Не работает форма на дятле

Решил перейти на водпресс со статического сайта. Форма подписки размещенная на обычной хтм-странице работала нормально, а при вставке ее в виджет для текста/хтмл в вордпрессе не хочет запускать страничку для активации подписки.

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

Помогите народ! На всякий случай привожу код формы подписки, может так будет нагляднее.

<table border=0 align=center>
<tr>
<form method=POST target=’ok’ action=’http://www.success.msk.su/woodpecker/index.php’ >
<input name=id type=hidden value= ‘uspex’ >
<input name=private type=hidden value= ‘4dc62e1cdd32cf8c5e089fd059ffe707’ >
<!– В это поле изменения вносить нельзя ! –>
<input name=do type=hidden value= ‘Подписаться’ >
<td valign=top>

<table border=0 align=center width=100%>
<tr>
<td align=center>
<font size=2 face=verdana><b>Ваше имя:</b></font>
<br />
<input type=text name=fio size=18 value=” maxlength=50>
</td>
</tr>
<tr>
<td align=center>
<font size=2 face=verdana><b>Ваш e-mail:</b></font>
<br />
<input type=text name=email size=18 value=” maxlength=50>
</td>
</tr>
<tr>
<td align=center><br />
<input type=submit name=go value=’Долой Трудоголизм!’>
</td></tr>
</table>
</td>
</form>
</tr>
</table>

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