How to make a vertical header in HTML?
2 answers
@odessa To make a vertical header in HTML use writing-mode :
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <h1 style="writing-mode: vertical-lr">My Heading</h1> </body> </html> |
@odessa
To make a vertical header in HTML, you can use CSS to style a <div> or <nav> element and position it vertically. Here's an example:
HTML:
1 2 3 4 5 6 7 8 |
Home
About
Services
Contact
|
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.vertical-header { width: 100px; /* adjust this width as needed */ background: #f2f2f2; position: fixed; top: 0; bottom: 0; left: 0; } .vertical-header ul { list-style-type: none; margin: 0; padding: 0; } .vertical-header li { padding: 10px; } .vertical-header a { text-decoration: none; color: black; } .vertical-header a:hover { color: blue; } |
In this example, we create a <div> element with a class of "vertical-header". The CSS styles apply a fixed position to the div so it stays in place while scrolling. The width, background color, and positioning properties can be adjusted to match your requirements.
Inside the div, we have an unordered list <ul> containing the list items <li>. Each list item can contain a link <a> pointing to different sections of your website. Modify the list items and links as per your needs.
Finally, we apply CSS styles to the list items and links to customize their appearance.