1

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

Добрый день!

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

<!-- 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рх, как я прописал в стилях.

Наверняка что-то напутал. Помогите разобраться, где я что не так сделал.
http://voicedate.ru/header.jpg

2

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

auditor пишет:

Картинки положил в папку images. В результате, картинки не видны, а только сетка таблицы.[/url]

Не известно где Вы положили папку images...
1. Если в папку с темой, то тогда прописывайте полный путь к картинкам http://yoursite/wp-content/themes/yourcooltheme/images/gruz_01.jpg
2. TEMPLATEPATH - смотрите в Кодексе WP подробности об этой ф-ции

Или переместите папку images в корень сайта

3

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

Каталог images  лежит в каталоге темы ?


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

Данный стиль не сработает, т.к. http://www.codenet.ru/webmast/css2/syndata.php#q4

4

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

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

5

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

В кодексе я прочитал, что: "Идентификаторы не могут начинаться с дефиса или с цифры...". Исправил. Теперь идентификатор начинается с буквы. На локалхосте картинки лежат как в папке images: site\images\kartinka1.....\kartinka2 и т.д., так и просто в корне, вне папки images: site\kartinka1.....\kartinka2 и т.д. В хедере путь к картинкам прописывал двумя способами:

1. <img src="01.jpg">
2. <img src="images/01.jpg">

В стилях прописан идентификатор:

#head{    
        margin: 54px auto;
    height:206px; 
    width: 870px;
}

Скелет таблицы теперь стоит не месте:
http://voicedate.ru/header2.jpg
Но, картинок по-прежнему нет. Какой кодекс я опять нарушил?

На всякий случай часть кода хедера:

<div id="header">
     <h1 id="logo-text"><a href="<?php bloginfo('url'); ?>">
    <?php bloginfo('name'); ?>
    </a></h1>
  <p id="slogan">
    <?php bloginfo('description'); ?>
  </p>

<table id="head" width="870" height="206" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="01.jpg" width="267" height="69" alt=""></td>
        <td rowspan="3">
                ......................................
                </tr>
                </table>

6 (07-12-2009 17:33:08 отредактировано Qvot)

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

пути к картинкам относительные src="01.jpg"
т.е. если будет работать только на главной,а вы наверно смотрите на вторичной старинице
если прописать постоянный путь src="/01.jpg" то должно заработать.
при условии расположения картинки в корне

Проверь наверно в этом дело.
Но я бы в данном случае вывел картинки бы как фон, а не как изображение.

7

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

Qvot пишет:

пути к картинкам относительные src="01.jpg"
т.е. если будет работать только на главной,а вы наверно смотрите на вторичной старинице
если прописать постоянный путь src="/01.jpg" то должно заработать.
при условии расположения картинки в корне

Проверь наверно в этом дело.
Но я бы в данном случае вывел картинки бы как фон, а не как изображение.

src="/01.jpg" - этот вариант не прошел, результат тот же. Я бы не против вывести картинки как фон, но как это сделать для 9-ти картинок, чтобы каждая из них стала на своё место?

8

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

html

<tr>
    <td class="td1"></td>
    <td rowspan="3" class="td2"></td>
    <td rowspan="3" class="td3"></td>
    <td rowspan="3" class="td4"></td>
    <td class="td5"></td>
</tr>

css - прописать в файл стиля темы(style.css)
картинки должны лежать в папке images или аналогичной, но папка должна находиться в папке темы.

.td1{background-image: url('images/gruz_01.jpg'); width:267; height:69;}
.td2{background-image: url('images/gruz_02.jpg'); width:112; height:206;}
.td3{background-image: url('images/gruz_03.jpg'); width:115; height:206;}

http://htmlbook.ru/css/background.html
все необходимое здесь

9

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

Qvot пишет:

html
http://htmlbook.ru/css/background.html
все необходимое здесь

Всё прочитал. Сейчас так:

style.css:

#head{    
        margin: 54px auto;
    height:206px; 
    width: 870px;
}

.td1{background-image: url('images/01.jpg'); width:267; height:69;}
.td2{background-image: url('images/02.jpg'); width:112; height:206;}
.td3{background-image: url('images/03.jpg'); width:115; height:206;}
.td4{background-image: url('images/04.jpg'); width:105; height:206;}
.td5{background-image: url('images/05.jpg'); width:271; height:69;}
.td6{background-image: url('images/06.jpg'); width:267; height:72;}
.td7{background-image: url('images/07.jpg'); width:271; height:72;}
.td8{background-image: url('images/08.jpg'); width:267; height:65;}
.td9{background-image: url('images/09.jpg'); width:271; height:65;}

header.php:

<table id="head" width="870" height="206" border="0">
    <tr>
        <td class="td1"></td>
        <td rowspan="3" class="td2"></td>
        <td rowspan="3" class="td3"></td>
        <td rowspan="3" class="td4"></td>
        <td class="td5"></td>
    </tr>
    <tr>
        <td class="td6"></td>
        <td class="td7"></td>
    </tr>
    <tr>
        <td class="td8"></td>
        <td class="td9"></td>
    </tr>
</table>

Такая картинка должна быть:

http://voicedate.ru/header3.jpg

Такая сейчас:

http://voicedate.ru/header4.jpg

То есть, ширина всех кусков получилось одинаковая (хотя на самом деле разная) и между ними получился зазор.

10

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

уже что то.
далее обтачиваем напильником.
наверно не хватает в таблице параметров  cellpadding cellspacing, которые нужно приравнять к нулям.
http://htmlbook.ru/html/table.html

11

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

Qvot пишет:

уже что то.
далее обтачиваем напильником.
наверно не хватает в таблице параметров  cellpadding cellspacing, которые нужно приравнять к нулям.
http://htmlbook.ru/html/table.html

Я накануне уже обтачивал напильником:

<table id="head" width="870" height="206" border="0" cellpadding="0" cellspacing="0">

В результате, всё исчезает напрочь... На месте картинки ничего нет.

12

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

Спасибо, Qvot, за помощь! Теперь всё работает. Кому интересно - заработало только после того, как размеры картинок перенесли с файла стилей в файл header.php. Хотя, я до сих пор не могу понять, почему это так.

Тема закрыта!