Found 1566 Articles for CSS

Add arrow in tooltip with CSS

Rishi Rathor
Updated on 23-Jun-2020 14:57:22

3K+ Views

With CSS, you can add a small arrow to the tooltip, using :after. With that, use the content property as well.You can try to run the following code to add an arrow in the tooltip:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          bottom: 100%;          left: 60%;          margin-left: -90px;          text-align: center;     ... Read More

Set the navigation bar to stay at the bottom of the web pagewith CSS

varun
Updated on 23-Jun-2020 15:00:04

3K+ Views

To set the navigation bar at bottom, use position: fixed property, with bottom property.You can try to run the following code to implement a menu that stays on the bottom, ExampleLive Demo                    ul {             list-style-type: none;             position: fixed;             bottom: 0;             width: 100%;          }          li {             float: left;         ... Read More

Set the navigation bar to stay at the top of the web page with CSS

Chandu yadav
Updated on 23-Jun-2020 14:55:13

200 Views

To set the navigation bar at top, use position: fixed property, with top property.You can try to run the following code to implement a menu that stays on the top, ExampleLive Demo                    ul {             list-style-type: none;             position: fixed;             top: 0;             width: 100%;          }          li {             float: left;           ... Read More

Role of CSS position: sticky;

varma
Updated on 01-Jul-2020 11:05:30

166 Views

To create a sticky navbar, use the position: sticky; property. You can try to run the following code to create a sticky navbar, ExampleLive Demo                    ul {             list-style-type: none;             position: sticky;             overflow: hidden;             top: 0;             width: 100%;          }          li {             float: left;       ... Read More

Arrow to the bottom of the tooltip with CSS

Nancy Den
Updated on 01-Jul-2020 11:04:34

685 Views

Use the top CSS property to add arrow to the bottom of the tooltip.ExampleYou can try to run the following code to add a tooltip with arrow to the bottom:Live Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          bottom: 100%;          left: 60%;          margin-left: -90px;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-top: 50px;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          top: 100%;          left: 50%;          margin-left: -10px;          border-width: 7px;          border-style: solid;          border-color: blue transparent transparent transparent;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

How to add link dividers in a Navigation Bar with CSS

George John
Updated on 23-Jun-2020 14:51:27

2K+ Views

To add link dividers in a Navigation Bar, use the border-right property for the element.ExampleLive Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;             border-right: 1px solid white;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }          li:last-child {             border-right: none;          }                              Home          News          Contact          About          

Float List Items to the right with CSS

Daniol Thomas
Updated on 23-Jun-2020 14:50:35

2K+ Views

To float the list items to the right, use float: right property in CSS. You can try to run the following code to implement it,ExampleLive Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }                              Home          News          Contact          About          

Build Horizontal Navigation Bar with Floating List Items in CSS

Ankith Reddy
Updated on 01-Jul-2020 11:05:06

800 Views

To create a horizontal navigation bar, use the floating list item.ExampleYou can try to run the following code to create a horizontal navigation barLive Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }                              Home          News          Contact          About          

What are Floating List Items in CSS

seetha
Updated on 01-Jul-2020 11:04:06

461 Views

To create a horizontal navigation bar, use the floating list item.ExampleYou can try to run the following code to create horizontal navigation bar −Live Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }                              Home          News          Contact          About          

Create a Horizontal Navigation Bar with CSS

George John
Updated on 01-Jul-2020 11:02:38

3K+ Views

To create a horizontal navigation bar, set the elements as inline.ExampleYou can try to run the following code to create horizontal navigation barLive Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          .active {             background-color: #4CAF50;             color: white;          }          li {             border-bottom: 1px solid #555;             display: inline;          }                              Home          Company          Product          Services          Contact          

Advertisements