AA Victor Posted December 7, 2020 Share Posted December 7, 2020 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> Link to comment Share on other sites More sharing options...
Sherin Posted December 11, 2020 Share Posted December 11, 2020 <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 More sharing options...
Monster RA Posted December 20, 2020 Share Posted December 20, 2020 Is the answer the same for the w3.css framework? thanks I’m advance. Russ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now