 Seperate buttons on nav bar, How do I create Seperate buttons beside the main ones? |
  |
| Satoriwolf |
 Dec 7 2020, 08:25 AM
Post
#1
|
|
Group: Members Posts: 3 Joined: 6-December 20 Member No.: 27,673  |
Hey Guys,
What HTML/CSS do I use to create a profile and cart button as seen in the image attached. I have my standard buttons but I don't have the profile and cart, the issue is I want them different size and alignment more to the top right. Do they need to be in the navbar or superimposed on it? so to speak <!DOCTYPE html> <html lang='en'> <head> <title> Home Page </title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <meta charset="utf-8"> </head> <body> <header> <div class="container"> <img src='images/logo.png' style="width:180px;height:180px alt="logo" class="logo"> <nav> <ul> <li><a href="index.html"> HOME </a></li> <li><a href="tour.html"> TOUR </a></li> <li><a href="tickets.html"> BUY TICKETS </a></li> <li><a href="gallery.html"> GALLERY </a></li> <li><a href="about.html"> ABOUT </a></li> </ul> </nav> </div> </header> <img src='images/pic1.png' alt="home page image" class="image"> <div class="social-icons"> <img src='images/whatsapp.png' style="width:50px;height:50px" alt="whatsapp"> <img src='images/facebook.png' style="width:50px;height:50px" alt="facebook"> <img src='images/insta.png' style="width:50px;height:50px" alt="insta"> <img src='images/twitter.png' style="width:50px;height:50px" alt="twitter"> </div> </body> </html> Attached thumbnail(s) 
|
  |
 
|
| Christian J |
Dec 7 2020, 12:02 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,664 Joined: 10-August 06 Member No.: 7 |
Hi
QUOTE(Satoriwolf @ Dec 7 2020, 02:25 PM)  What HTML/CSS do I use to create a profile and cart button as seen in the image attached. The actual icons could be image links. Or maybe there is some Unicode symbol for this, but in that case I'm not sure of browser support.  QUOTE alignment more to the top right. Do they need to be in the navbar or superimposed on it? There are many ways to achieve that: - You could float the nav menu left, and float a separate container element (containing Profile and Cart) right. That way the latter should end up beneath the nav menu is narrow windows, which is user-friendly. - Another way is absolute positioning, but then the sections may overlap in narrow windows. You could avoid the latter with a minimum window width, but then you'd get annoying horizontal scrolling instead. - A third way is to put Profile and Cart in the nav menu too, but again you'd get horizontal scrolling in narrow windows. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 8th May 2024 - 04:49 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC