Jump to content

CSS Website Layouts


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 post
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 post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...