CODEWITHSUNDEEP
htmlcssheadernavbar
Ayho
Ayho

Reputation: 1

Creating a header in HTML

enter image description here

I want to create this header for my website with these two white lines, the logo and the navigation bar.

Upvotes: 0

Views: 131

Answers (3)

Thorny84
Thorny84

Reputation: 335

Use padding.
HTML:

<header>
   <div id="inner"></div>
</header>

css:

header{
    width:100%;
    background-color: blue;
    padding-top:10px;
    padding-bottom: 10px;
}
#inner{
    height: 80px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    background-color: green;
}

Or do as I love, use the flexbox.
(flexbox) css:

header{
    width:100%;
    height: 200px;
    background-color: blue;
    display: flex;
    align-items: center;
}
#inner{
    width: 100%;
    height: 75%;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    background-color: green;
}

Using Flexbox is easy and intuitive. I recommend it. Look at this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

GDavid
GDavid

Reputation: 140

Use this (replace texts, image and links to what you want):

<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Example</title>
<style type="text/css">
#nav {
text-decoration: none;
}
</style>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(255, 204, 153);"
alink="#000099" link="#000099" vlink="#990099">
<div style="width: 100%; height: 2px; background-color: white;"></div>
<table style="text-align: left; width: 100%; height: 40px;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
  <td style="width: 200px;"><img alt="logo"
src="logo.png" style="width: 200px; height: 30px;"
align="middle" hspace="10"></td>
  <td
style="vertical-align: bottom; color: rgb(51, 51, 51); font-family: Times 
New Roman;"><i>Site
title</i></td>
  <td style="width: 40%;">
  <table
style="width: 100%; text-align: left; margin-left: auto; margin-right: 0px;"
border="0" cellpadding="2" cellspacing="0">
    <tbody>
      <tr>
        <td style="text-align: center;"><a
href="link1.html" id="nav"
style="color: rgb(153, 51, 0);">Link
1</a></td>
        <td style="text-align: center;"><a
href="link2.html" id="nav"
style="color: rgb(51, 51, 51);">Link
2</a></td>
        <td style="text-align: center;"><a
href="link3.html" id="nav"
style="color: rgb(51, 51, 51);">Link
3</a></td>
        <td style="text-align: center;"><a
href="link4.html" id="nav"
style="color: rgb(51, 51, 51);">&nbsp;Link
4</a></td>
      </tr>
    </tbody>
  </table>
  </td>
</tr>
</tbody>
</table>
<div style="width: 100%; height: 2px; background-color: white;"></div>
</body>
</html>

White line:

<div style="width: 100%; height: 2px; background-color: white;"></div>

Upvotes: 0

Freelancer
Freelancer

Reputation: 887

body{background-color:brown;}
ul{width:100%;padding:3px;text-align:right;border-top:1px solid white;border-bottom:1px solid white;}
li{display:inline;margin-right:10px;cursor:pointer;height:100%;color:white;}
li:hover{color:yellow;}
<ul>
  <li>Home</li>
  <li>About</li>
</ul>

Upvotes: 0

Related Questions