VPF::Что за странная полоска после рисунка?

vchilikov

Дата 10.9.2008, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 21.9.2006

Репутация: нет
Всего: нет

Подскажите пожалуйста, что за странная полоска после рисунка images/collage.jpg? В IE7, Opera и Firefox я от нее избавился, а вот в IE6 не получилось. Вот страница http://www.phpdevelopment.ru/proba.html,
а вот код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>(X)HTML+CSS код шаблона</title>
<style type="text/css">

html, body {
    margin:0px; padding:0px;
    background:#fff;
    position:relative;
}

body {
    text-align:center;
}

#all {
    text-align:left;
    margin:0 auto;
    width:945px;
    min-width:945px;
    max-width:945px;
}

.head {
    display:block;
    height:419px;
    background-color: Green;
    padding:0px;
    margin: 0px;
}

.head h1
{
    color: #7d0c4e;
    position: relative;
    margin: 0px;
    left: 40px;
    top: 15px;
    font: 200% serif;
}

#headerbuttons
{
    position: relative;
    margin: 0px;
    left: 830px;
    top: -15px;
}

#headerbuttons img
{
    border: 0px;
}

.breadcrumbs
{
    background: #f8f6ea;
    padding: 4px 20px 12px 30px;
}

#container {
    position:relative;
    display:block;
    background:#f8f6ea;
    border-left:solid 200px #f8f6ea;
    border-right:solid 180px #f8f6ea;
}
#inner {
    display:block;
    position:relative;
    margin-left:-200px;
    margin-right:-180px;
    padding:1px;
}
#left {
    float:left;
    position:relative;
    width:200px;
    left:0px;
}
#right {
    float:right;
    position:relative;
    width:180px;
    right:0px;
}
#center {
    margin-left:200px;
    margin-right:180px;
    position:relative;
    display:block;
    height:1%;
}
.clear {
    clear:both;
}
.foot {
    display:block;
    height:30px;
    background:#D6D000;
    padding:1px;
}

.title-table
{
    width: 100%;
    color: White;
    background-color: #c7bc9e;
}


</style>
</head>

<body>
<div id="all">
    <div class="head">
        <h1>Ишимский краеведческий музей</h1>
        <div id="headerbuttons">
            <a href="#"><img src="images/headerbutton_01.gif"/></a>
            <a href="#"><img src="images/headerbutton_02.gif"/></a>
            <a href="#"><img src="images/headerbutton_03.gif"/></a>
        </div>
        <img src="images/collage.jpg" alt="Ишимский краеведческий музей" border="0"/>
    </div>
    <div class="breadcrumbs">
        Вы здесь:
        <a href="http://km/">Главная</a>
        » <a href="http://km/historyishim/ishimskiihronograf">История Ишима</a>
        »<span class="lastitem">Ишимский хронограф</span>
    </div>
    <div id="container">
        <div id="inner">
            <div id="left">
                <table class="title-table" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td width="25px" style="background-color: #f8f6ea;" />
                        <td width="20px"><img src="images/title-left.gif"/ alt="l"></td>
                        <td>Меню</td>
                        <td width="4px" style="text-align: right;"><img src="images/title-right.gif" alt="r"/></td>
                        <td width="10px" style="background-color: #f8f6ea;" />
                    </tr>
                </table>
            </div>
         <div id="right">
             <table class="title-table" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td width="10px" style="background-color: #f8f6ea;" />
                        <td width="20px"><img src="images/title-left.gif"/ alt="l"></td>
                        <td>Новости</td>
                        <td width="4px" style="text-align: right;"><img src="images/title-right.gif" alt="r"/></td>
                        <td width="15px" style="background-color: #f8f6ea;" />
                    </tr>
                </table>
         </div>
         <div id="center">
             <table class="title-table" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td width="10px" style="background-color: #f8f6ea;" />
                        <td width="20px"><img src="images/title-left.gif"/ alt="l"></td>
                        <td>Пейзаж 21 века</td>
                        <td width="4px" style="text-align: right;"><img src="images/title-right.gif" alt="r"/></td>
                        <td width="15px" style="background-color: #f8f6ea;" />
                    </tr>
                </table>
         </div>
         <div class="clear"></div>
        </div>
    </div>
    <div class="foot">Footer</div>
</div>
</body>
</html>

bars80080

Дата 10.9.2008, 16:28 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

поставь

Код


img { display: block; }

vchilikov

Дата 10.9.2008, 17:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 21.9.2006

Репутация: нет
Всего: нет

bars80080, спасибо все заработало.

Скажите если есть еще замечания по коду, т.к. в верстке я новичок.

bars80080

Дата 10.9.2008, 17:52 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

в общих чертах нормально, хотя я не вижу страницы

<td width="10px" style="background-color: #f8f6ea;" /> - куски повторяющейся раметки - однозначно выносить в класс
<td width="20px"><img src="images/title-left.gif"/ alt="l"></td> - тоже самое, можно даже картинку фоном пустить

html, body {
margin:0px; padding:0px;
и многочисленные margin: 0px; дальше в стилях реализуются просто одной строчкой, задаваемой всегда в начале:

Код


* { margin: 0px; padding: 0px; }

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »