Full width div doesn't appear

user_13719294 0
Viewed 45

I am creating a site and often I'm getting a fairly big amount of bugs.

What I want to fix now is that my div doesn't appear on the screen.

My code:
1) index.html

...
<link rel="stylesheet" type="text/css" href="style.css">
...
<div class="content">
    <div class="titl">
        <a class="atitle" href="#" target="_self">test</a>
    </div>
</div>
...

2) style.css

div.titl {
    width: 100%;
    color: #414042;
    height: 50px;
    transition: .25s;
}

So the div called titl was used to appear and be at the very top of the page, but I only get the "test" line there.

What have I tried? Well, using the position: absolute; which didn't work.





EDIT: My a.atitle code:

a.atitle {
    text-align: center;
    display: block;
    font-family: 'Kanit', sans-serif;
    color: white;
    transition: .25s;
    font-size: 32px;
    position: absolute;
}

a.atitle:hover {
    display: block;
    text-align: center;
    font-size: 48px;
    color: #414042;
}

a.atitle:visited {
    display: block;
    text-align: center;
    color: #FF6E4E;
}
position format containers css html
2 Answers

Use background-color in place of color like:

div.titl {
    width: 100%;
    background-color: #414042;
    height: 50px;
    transition: .25s;
}
user_136986250 

div.titl {
  width: 100%;
  background-color: #414042; /* Change from color to background-color */
  height: 50px;
  transition: .25s;
}

a.atitle {
  text-align: center;
  display: block;
  font-family: 'Kanit', sans-serif;
  color: white;
  transition: .25s;
  font-size: 32px;
  position: absolute;
}

a.atitle:hover {
  display: block;
  text-align: center;
  font-size: 48px;
  color: #414042;
}

a.atitle:visited {
  display: block;
  text-align: center;
  color: #FF6E4E;
}
<div class="content">
  <div class="titl">
    <a class="atitle" href="#" target="_self">test</a>
  </div>
</div>

user_76530070
Related