CODEWITHSUNDEEP
htmlcss
Danny Chang
Danny Chang

Reputation: 39

The red box doesn't show up, instead, it's a line

As you can see the picture the red box has become a line, I set the height with 300px, but it has no effect the picture at all. I have provided the HTML and CSS. I have set the height with 200px in div ul of the CSS page.

I am not allowed to add picture, so I can't show the picture.

HTML PART:

<!DOCTYPE html>
<html>
<head>
    <title>multiple box</title>
    <link rel="stylesheet" type="text/css" href="test22.css">
</head>
<body>
    <div class="div1">
        <ul>
            <li><img src="chicken.jpg"/></li>
            <li><img src="chicken.jpg"/></li>
            <li><img src="chicken.jpg"/></li>
        </ul>
    </div>
</body>
</html>

CSS PART:

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

.div1{
    width: 800px;
    height: 400px;
    border: 1px solid #b4b4b4;
    margin-left: 100px;
    margin-top: 20px;
}

.div1 ul{
    width: 350px;
    height: 200px;
    border-top: 1px solid red;
    margin-left: 100px;
    margin-top: 20px;
    list-style-type: none;
}

.div1 li {
    width: 50px;
    height: 52px;
    border: 1px solid blue;
    float: left; 
}

.div1 img {
    width: 40px;
}

Upvotes: 1

Views: 37

Answers (1)

hannesvieider
hannesvieider

Reputation: 46

you are using border-top instead of border. so just the top edge of the box is drawn

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

.div1{
    width: 800px;
    height: 400px;
    border: 1px solid #b4b4b4;
    margin-left: 100px;
    margin-top: 20px;
}

.div1 ul{
    width: 350px;
    height: 200px;
    border: 1px solid red;
    margin-left: 100px;
    margin-top: 20px;
    list-style-type: none;
}

.div1 li {
    width: 50px;
    height: 52px;
    border: 1px solid blue;
    float: left; 
}

.div1 img {
    width: 40px;
}
<!DOCTYPE html>
<html>
<head>
    <title>multiple box</title>
    <link rel="stylesheet" type="text/css" href="test22.css">
</head>
<body>
    <div class="div1">
        <ul>
            <li><img src="chicken.jpg"/></li>
            <li><img src="chicken.jpg"/></li>
            <li><img src="chicken.jpg"/></li>
        </ul>
    </div>
</body>
</html>

Upvotes: 1

Related Questions