Deepak Maurya Deepak Maurya - 4 months ago 8
HTML Question

Can't get a div element in the output

I'm quite new at front-end development. I was just experimenting with HTML/CSS. After making a simple poster, I was trying to make simple freestyle(not specific to any kind of website) page layout.

Here is what I did.

https://github.com/imdpm/CodoSapiens/tree/master/LayAtt

I'm trying to add a "content" type division. I've created a style for it in style.css and invoked it in index.html without any content. Just the division.

But output does not have any "content" division. I can't seem to understand where I have made a mistake.

Could anyone help?



body{
background-image: url("BackIm.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
#icon{
position: absolute;
left: 5px;
height:40px;
width:40px;
}
.topmenu{
background-color: #001a00;
position: absolute;
top: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
padding: 0;
border-bottom: 1px solid red;
}
.sidemenu{
background-color: darkgrey;
color: black;
position: left fixed relative;
margin: 190px 80px 0 40px;
padding: 8px 6px 0 8px;
border: 1px solid black;
border-radius: 8px;
max-width: 155px;
font-size: 30px;
font-family: sans-serif;
}
.banner{
background-color: #FFA500;
position: absolute;
top:44px;
left: 0;
right: 0;
height: 125px;
border-bottom: 1px solid #228B22;
}
.content{
background-color: #5651F3;
position: relative;
top: 60px;
right: 30px;
left: 25px;
}
#link{
color: black;
text-decoration: none;
padding: 2px 0 1px 0;
color:grey;
font-size:35px;
font-family:"Times New Roman";
font-weight:bold
}
a{
text-decoration: none;
color: black;
padding: 0;
}
hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

<html>
<head>
<title>LayoutAtt</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="topmenu">
<img id="icon" src="https://github.com/imdpm/CodoSapiens/blob/master/LayAtt/BackIm.jpg?raw=true" alt="Icon">
<a id="link" href="index.html">BackToBeg</a>
</div>

<div class="banner">
</div>

<div class="sidemenu">
<a href="index.html">BackToBeg</a><hr>
<a href="index.html">BackToBeg</a><hr>
<a href="index.html">BackToBeg</a><hr>
<a href="index.html">BackToBeg</a><hr>
<a href="index.html">BackToBeg</a><hr>
</div>

<div class="content">
</div>

</body>
</html>




Answer

You need to add a width and a height to your content div. Try this

.content{
  background-color: #5651F3;
  position: relative;
  top: 60px;
  right: 30px;
  left: 25px;
  width:100px;
  height:100px;
}

Use the inspector in the browser to look at the html and css being rendered. You can see what styles are being applied to which elements.

Comments