I've been having problems with display: inline; for my navigation menu. I'd like to make it horizontal, but it doesn't seem to want to work. I tried using display: inline-block but it still doesn't do anything. May I have some help? I've tested this with FireFox, Google Chrome, Internet Explorer, and Fiddle: http://jsfiddle.net/SpottedFire/fs69dz6p/1/
HTML:
<body>
<div id="overall">
<div class="content">
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>Art</li>
<li>Animations</li>
<li>About</li>
</ul>
</div>
</div>
</div>
CSS:
body {
background-color: #CBA482;
color: #D2DAEF;
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.nav{
text-align: right;
background-color: rgba(255,255,255,0.5);
border: solid 2px;
border-color: white;
border-radius: 10px;
margin: 0;
padding: 0;
width: 80%;
}
li.nav {
display: inline-block;
}
a:link {
color: #DBE8EF;
text-decoration: none;
}
a:hover {
color: #BED2E3;
text-decoration: none;
}
a:visit{
color: #BE71DB;
text-decoration: none;
}
li.nav {...}
should be
.nav li {...}
Its your css class definition at line 21, ive updated your JS Fiddle, instead of using li.nav, the correct selector should be .menu > li
.menu > li{
display: inline-block;
margin-right: 10px;
}
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
Can someone explain me how i need to set the css statements to get the navbar one after another, without any free spaces?
Also it would be handy to know, how i can set the navbar over the whole display, that its automaticly working on different screen resolutions.
I tried finding a solution on w3schools.
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.navbar li {
display: inline;
}
.navbar a {
border: none;
padding: 2px;
margin: 0px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.button:active {
background-color: #f0a041;
color: #ffff00;
}
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
tr, th {
border: none;
text-align: right;
}
Add the negative margin and your problem will get solved .
Here is the snippet .
just change the css property of the following class .
.navbar li {
display: inline;
margin-right: -0.26rem;
}
This will definitely solve your problem .
Just add float: left to li.
.navbar li {
display: inline;
float: left;
}
Give ul a display: flex, and the a tags a white-space pre:
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
}
.navbar a {
padding: 2px 5px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
white-space:pre;
}
.button:active,
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
I am trying to display some content in div tag when hovering on the menu. Here I am trying to display a div when hovering on About. But it does not work.Kindly only check the commented portion. Ignore rest!
Here is my html:
<html>
<head>
<link rel="stylesheet" href="Style/styling.css">
<head>
<body>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li >Center</li>
<li >Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
<ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
</body>
</html>
And CSS:
.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
background-color: #e0e0d1;
margin-top: 40px;
width: 96px;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
/*the css for hiding and displaying*/
.dispmenu:hover .submenu {
visibility: visible;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
Here's a jQuery option if you go that route..
fiddle
https://jsfiddle.net/Hastig/ns6j55zg/
You can read about .hover here
$('.dispmenu').hover(function() {
$('.submenu').addClass('dispmenu-hover');
}, function() {
$('.submenu').removeClass('dispmenu-hover');
})
body {
margin: 0;
}
.container {
/*width: 1000px;*/
/*height: 1000px;*/
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
display: flex;
}
.navigation ul li {
display: flex;
background-color: #e0e0d1;
margin-top: 40px;
/*width: 96px;*/
flex: 1;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
/*the css for hiding and displaying*/
/* this class moved to appear after .submenu class */
.dispmenu-hover {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li>Center</li>
<li>Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
</ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
.dispmenu:hover .submenu {
You have a space between those selectors. A space is a descendant combinator.
The element <div class="submenu"> is not a descendant of the element <li class="dispmenu">. It is a sibling of the great-grandparent of the list item.
CSS selectors provide no way to describe going up the DOM tree, so you can't achieve this without either:
Changing the structure of the DOM
Using JavaScript
Ideally you should do both since:
It doesn't make much sense for a submenu to be completely disconnected from the menu item it is for. Think about how that type of data is normally represented.
You can't put in things like time delays before a menu vanishes, which makes a menu like the one you are trying to create challenging for people with some accessibility needs (e.g. sufferers of arthritis who many struggle to move the mouse in a straight line and keep the pointed inside the borders of the menu).
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5