Jump to content

CSS Website Layouts


AA Victor
 Share

Recommended Posts

Hello, 

How do add an 'Image or Logo' beside the 'Header' and   a 'Tagline' beneath the 'Header'.

So that everything Inline with 'Links'. On same horizontal line.

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

 

Screenshot (183).png

Link to comment
Share on other sites

<style>

.header img {
  float: left;
  width: 100px;
  height: 100px;

}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

</style>

 

<div class="header>

<img src="Your logo path" width="Your logo width" height="Your logo height" alt="Logo name">

<h1>Header</h1>

</div>


I hope this code is help for you

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...