AA Victor 0 Posted December 7, 2020 Report 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> Quote Link to post Share on other sites
Sherin 1 Posted December 11, 2020 Report 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 Quote Link to post Share on other sites
Monster RA 0 Posted December 20, 2020 Report Share Posted December 20, 2020 Is the answer the same for the w3.css framework? thanks I’m advance. Russ Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.