logo
down
shadow

CSS Navigation Bar is not horizontal and has wrong colours


CSS Navigation Bar is not horizontal and has wrong colours

By : felicia
Date : November 22 2020, 10:33 AM
it should still fix some issue You're missing the periods in your class identifiers of your CSS.
Example:
code :
nav ul li a:hover{
   text-decoration: none;
   color:#ffc0f8;
}
.nav ul li a:hover{
   text-decoration: none;
   color:#ffc0f8;
}
  aside {
        width: 32%;
        height: 650px;
        display: block;
        border-width: 1px;
        border-color: #ffffff;
  }


Share : facebook icon twitter icon
Horizontal navigation bar when resizeing browser window going wrong

Horizontal navigation bar when resizeing browser window going wrong


By : areukiddingme
Date : March 29 2020, 07:55 AM
it should still fix some issue my problem is when i minimize the browser window the horizontal navigation bar starts to go back into a vertical navigation and i don't want this. I tried the min-width and max-width but it did not help my problem or else i was just applying it wrong. This is the html: , Try
code :
#nav { white-space: nowrap; }
Creating a horizontal navigation with different colours

Creating a horizontal navigation with different colours


By : Xin Zheng
Date : March 29 2020, 07:55 AM
this one helps. I am trying to create a simple navigation menu with different background colours for each option, and which is horizontal. So far I have my navigation as shown. , You'll want to do the following with your code:
CSS:
code :
#session-nav { list-style: none; }
#session-nav li { display: inline-block; padding: 5px 10px; }
#session-nav li.session1 { background: green;  }
Horizontal Navigation Bar: How to center text and set colours

Horizontal Navigation Bar: How to center text and set colours


By : Adam Kauper
Date : March 29 2020, 07:55 AM
should help you out I am trying to create a horizontal navigation bar with the following properties: , You can use below CSS to get all the 3 things you wanted.
code :
    #navbar ul
    {
        list-style-type: none;
        display: table;
    }
    #navbar li{
        float: left;
        text-align: center;
    }

    #navbar li a
    {
        display: table-cell;
        width: 200px;
        height: 50px;
        text-decoration: none;
        color: black;
        vertical-align: middle;
        background-color: #f0e68c;
    }

    #navbar li a:hover{
        color: #f0e68c;
        background-color: black;
    }
What am I doing wrong in constructing a horizontal navigation bar?

What am I doing wrong in constructing a horizontal navigation bar?


By : Brandon
Date : March 29 2020, 07:55 AM
I hope this helps you . A nav bar (menu) could use something like this:
remove link underline by: text-decoration: none;
code :
header {
  font-family: Impact, Haettenschweiler;
  font-size: 45px;
  text-align: center;
}

#mynav {
  float: left;
  margin: 0;
  padding: 0;
}

#mynav ul {
  display: inline-block;
  list-style-type: none;
  height: auto;
  text-align: center;
}

#mynav li {
  display: inline-block;
  padding: 5px;
}

#mynav li a {
  text-decoration: none;
}

#mynav li:hover {
  background: lightgray;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Title</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header> Welcome to Toner Stock </header>
  <div id="mynav">
    <ul>
      <li><a href="home-page.html">Home</a></li>
      <li><a href="add-buyer.html">Add Buyer</a></li>
      <li><a href="add-manager.html">Add Manager</a></li>
      <li><a href="current-stock.html">Current Stock</a></li>
      <li><a href="transactions.html">Transactions</a></li>
    </ul>
  </div>
</body>

</html>
HTML/CSS Horizontal navigation submenu hover wrong displayed

HTML/CSS Horizontal navigation submenu hover wrong displayed


By : Rohit
Date : March 29 2020, 07:55 AM
may help you . Your problem goes from setting width to 13%. This way the li in the submenu also is 13% of its parrent width. Another issue you will see with margin-right: -4px; I suggest this code:
code :
nav li {
    line-height: 40px;
    text-align: left;
    border-bottom: none;
    height: 50px;
    display: inline-block;
}


nav > ul > li {
    width: 13%;
  margin-right: -4px;
}
Related Posts Related Posts :
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org