CODEWITHSUNDEEP
htmlcss
Lexicon
Lexicon

Reputation: 145

HTML and CSS: Padding Assistance

I'm learning HTML and CSS, and was trying to build a webpage using whatever I've understood. I'm having problems with the "This Website" button that I'm trying to create on the top left. I want it to be centered(horizontally), for which I need about 20px worth of top padding (50px is a representative value in the code). Upon changing this value, there is no effect on the look whatsoever. How do I fix this? Here is the code.

<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0;padding:0;}
div.topbar {
background-color: #f44336;
height: 50px;  
}
a.left-top-bar {
background-color: #000000;
color: white;
font-size: 25px;
padding-top:50px
padding-bottom: 10px;
font-family: ISOCPEUR;
text-align: center;
}
nav.sidenav {
background-color: #a4a4a4;
width: 200px;
height: 500px;
padding-top: 15px;
font-family: Calibri;
color: white;
font-size: 20px;
float: left;
text-align: center;
line-height: 45px;
}
a.nav:link, a.nav:active, a.nav:visited {
text-decoration: none;
color: white;
background-color: #949494;
padding: 2px 10px 2px 10px;
border-style: solid;
border-color: #000000;
border-width: 2px;
border-radius: 10px;
}
a.nav:hover {
text-decoration: none;
background-color: #292929;
}

section.center {
background-color: #000000;
color: white;
}

a.topbar:link, a.topbar:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Calibri;
}

a.topbar:hover, a.topbar:active {
background-color: red;
}
a.image:hover {
background-color: red;
</style>
</head>
<body>
<div class="topbar">
<a class="left-top-bar">This Website</a>
</div>
<nav class="sidenav">
<a class="nav" href="https://www.wikipedia.org" target="_blank">Home</a><br> <a      class="nav" href="https://www.google.com" target="_blank">About Us</a>

</nav>
<section class="center">
<p>Information</p>
</section>


</body>
</html>

Upvotes: 0

Views: 98

Answers (2)

T04435
T04435

Reputation: 14032

Here is what I have done, but more than copy it read it and research more on how to make a website HTML , CSS

div.topbar {
  background-color: #f44336;
  font-size: 25px;
  height: 70px;
  font-family: ISOCPEUR;
  // remove next line to see the difference...
  position: relative;  //when element is relative positioned the childs will be constrained to the parent no to the body or greather relative parent
}

a.left-top-bar {
  background-color: #0e0e0e;
  color: whitesmoke;
  padding: 20px;
  position: absolute;  // check if you need to add relative in the parent
}

Good websites for reference are:

Upvotes: 1

Boltz0r
Boltz0r

Reputation: 980

https://jsfiddle.net/xgofzs55/

i did this fiddle for you

use 

Position:absolute;

Upvotes: 1

Related Questions