Цвет фона в моем div не отображается

0

Я искал в Интернете ответ на мою проблему. Конечно, это привело меня к нескольким темам здесь, в stackoverflow. Я попробовал решения, которые предлагали, но до сих пор у меня не было успехов! Кто-нибудь, пожалуйста, будьте так добры, чтобы быстро взглянуть на мой html & css? Это о значке боковой панели. Я определил цвет фона на красный, чтобы вы не могли его пропустить.

<!DOCTYPE HTML>
<html lang="nl">
    <head>
        <meta charset="utf-8" />
        <title>Eenmaal Andermaal</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
            table { 
                border-spacing:10px;
            }

            <!---Veiling foto's--->
            .imgBig {
                width: 252px;
                height: 252px;
            }

            .imgSmall {
                width: 80px;
                height: 80px;
            }

            #enlarged {
                float:left;
            }

            #thumbnails {
                float:left;
            }

            <!---Bod bar--->
            #sidebar {
                float:left;
                width:272px;
                height:739px;
                background-color:red;
            }

            <!---Links--->
            a {
                text-decoration:none;
                color:#535f79;
            }

            a:hover {
                text-decoration:underline;
            }
        </style>
    </head>

    <body>
        <h2>Titel van deze veiling</h2>

        <table>
            <tr>
                <td>Voorwerpnummer:</td><td>7324474820</td>
            </tr>
        </table>

        <!--Foto's-->

        <div id="enlarged">
            <img class = "imgBig" src = "img\versterker.jpg" alt="">
        </div>

        <div id="thumbnails">
            <table>
                <tr>
                    <td>
                        <a href="img\versterker.jpg"><img class = "imgSmall" src = "img\versterker.jpg" alt=""></a>
                    </td>
                    <td>
                        <a href="img\versterker.jpg"><img class = "imgSmall" src = "img\versterker.jpg" alt=""></a>
                    </td>
                </tr>

                <tr>
                    <td>
                        <a href="img\versterker.jpg"><img class = "imgSmall" src = "img\versterker.jpg" alt=""></a>
                    </td>
                    <td>
                        <a href="img\versterker.jpg"><img class = "imgSmall" src = "img\versterker.jpg" alt=""></a>
                    </td>
                </tr>
            </table>
        </div>

        <!--Biedingen-->
        <div id="sidebar">
            <table>
                <tr>
                    <td>Verkoper:</td><td>Gebruiker793</td>
                </tr>

                <tr>
                    <td>Locatie:</td><td>Arnhem</td>
                </tr>

                <tr>
                    <td>Beoordeling:</td><td></td>
                </tr>

                <tr>
                     <td><a href>Neem contact op met verkoper</a></td><td></td>
                </tr>

                <tr>
                    <td>Geplaatst:</td><td>22-11-2013 11:00</td>
                </tr>

                <tr>
                    <td>Looptijd:</td><td>7 dagen</td>
                </tr>
            </table>
        </div>

    </body>
</html>
Теги:
colors

3 ответа

2

CSS недействителен из-за комментариев: <!---Veiling foto's---> Это комментарий HTML.

Синтаксис CSS - 4.1.9 Комментарии

Комментарии [В CSS] начинаются с символов "/" и заканчиваются символами "/". Они могут встречаться где угодно вне других токенов, и их содержимое не влияет на рендеринг. Комментарии не могут быть вложенными.

Рабочий пример

Обновленный CSS

table {
    border-spacing:10px;
}
/* Veiling foto */
 .imgBig {
    width: 252px;
    height: 252px;
}
.imgSmall {
    width: 80px;
    height: 80px;
}
#enlarged {
    float:left;
}
#thumbnails {
    float:left;
}
/* bod bar */
 #sidebar {
    float:left;
    width:272px;
    height:739px;
    background-color:red;
}
/* Links */
 a {
    text-decoration:none;
    color:#535f79;
}
a:hover {
    text-decoration:underline;
}
1

Формат комментария должен быть /* comment */

Написать:

table {
    border-spacing:10px;
}
/*Veiling foto's*/
 .imgBig {
    width: 252px;
    height: 252px;
}
.imgSmall {
    width: 80px;
    height: 80px;
}
#enlarged {
    float:left;
}
#thumbnails {
    float:left;
}
/*Bod bar*/
 #sidebar {
    float:left;
    width:272px;
    height:739px;
    background-color:red;
}
/*Links*/
 a {
    text-decoration:none;
    color:#535f79;
}
a:hover {
    text-decoration:underline;
}

Заклинай здесь.

1

Вы используете неправильные комментарии <!---Bod bar---> для html. Для css вам нужно /* Comment goes here*/.

Ваша разметка также недействительна. Я думаю, что ваш источник изображения должен быть img/versterker.jpg вместо img\versterker.jpg

  • 0
    Я сделал несколько глупых ошибок. Большое спасибо всем за быстрые решения!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню