CODEWITHSUNDEEP
htmlcss
Clock Slave
Clock Slave

Reputation: 7957

Overlapping elements in HTML

I am trying to create an index page for a dummy website which has a header followed by a couple of blocks displaying previews of posts. There are two problems I am facing.

My header element overlaps with the following div's. Following suggestions I got from stackoverflow, I wrapped the header and following div elements inside a wrapper div. But that didn't help. I have made a fiddle to explain the problem here. How do I tackle this?

The issue I am facing is that- if you look at the header element, you'll see that it is offset from the top and left by a few pixels. I used width:100% along with margin and padding as 0px. If I add the following to the header, the issue gets resolved. 

position:absolute;
left:0px;
top: 0px;

But I'm reluctant on using the position attribute as I have had difficulties working with them. Is there any other way to have the header element start right off the corners

Upvotes: 1

Views: 105

Answers (2)

Zuber
Zuber

Reputation: 3473

  • Remove unnecessary css of .page_header. here i have commented those lines
  • Set margin: 0; and padding: 0 to body
  • Remove margin of h1 in page_header

body {
  padding: 0;
  margin: 0;
}
.page_header {
    /* position:absolute;
    left:0px;
    top: 0px; */
    background-color:rgba(146,0,0,0.8);
    font-weight:500;
    font-family:Roboto;
    font-size:30px;
    color: #fff;
    width: 100%;
    text-align:center;
    margin: 0px auto;
    text-transform:uppercase;
    /* height: 100px; */
    display:block;
}
.page_header h1 {
  margin-top: 0;
}
.post_preview{
    display:block;
    width: 60%;
    height: 200px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    text-align:left;
}

.post_preview_img{
    height: 100px;
    padding: 10px 10px 10px 0px;
}
.post_preview_header{
    font-size:24px;
    font-family:Roboto;
    color: rgba(8,8,8,0.60);;
    font-weight:200;
}
.post_preview_dt{
    font-size: 12px;
    font-family:Verdana;
    color:rgba(64,64,64,0.60);
}
.post_preview_txt{
    font-size:16px;
    font-family:Roboto;
    color:rgba(64,64,64,0.50);
}

.post_preview:hover{
    background-color: rgba(240,240,240, 0.75)
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&subset=latin,vietnamese,latin-ext,cyrillic,greek,cyrillic-ext,greek-ext"
          rel="stylesheet" type="text/css">
<div>
    <header class = 'page_header'>
        <h1>Notes on Machine Learning</h1>
    </header>
    <div class = 'post_preview'>
        <img src = "" class = 'post_preview_img'/>
        <h3 class = 'post_preview_header'>K Means ++ as an initialization algorithm</h3>
        <p class = 'post_preview_dt'>19 May 2018</p>
        <p class = 'post_preview_txt'>Results of K Means depends on the initialized cluster values. Is there a smarter way to do it?</p>
    </div>

    <div class = 'post_preview'>
        <img src = "" class = 'post_preview_img'/>
        <h3 class = 'post_preview_header'>Missing Value Imputation using K Nearest Neighbors</h3>
        <p class = 'post_preview_dt'>19 May 2018</p>
        <p class = 'post_preview_txt'>Like common cold, missing values appear everywhere. </p>
    </div>

    <div>
    </div>
</div>

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add margin:0; to body and h1 

body {
  margin : 0;
}
.page_header {
    background-color:rgba(146,0,0,0.8);
    font-weight:500;
    font-family:Roboto;
    font-size:30px;
    color: #fff;
    width: 100%;
    text-align:center;
    margin: 0px auto;
    text-transform:uppercase;
    display:block;
}
h1 {
  padding: 0;
  margin: 0;
}

https://jsfiddle.net/ott9qxq2/1/

Upvotes: 2

Related Questions