I have to code a Website for my term paper and I really have no clue how to get my Links in the navigationbar in the middle of my box.
I already looked it up on the Internet but I didnt managed to fix it. It would be cool if someone could at least give me a hint :)
nav {
background-color: lightblue;
position: absolute;
height: 5%;
width: 100%;
top: 0%;
left: 0%;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
}
nav ul li a {
text-decoration: none;
float: left;
display: table-cell;
padding-right: 30px;
color: black;
}
nav ul li a:hover {
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Products
</li>
<li>Contact us
</li>
</ul>
</nav>
http://jsfiddle.net/y6L589f7/1
It would be really nice because I need it but I really dont get it.
Instead of specifying a height for the nav bar, you could remove the height and add padding to the links to give the bar it's height:
nav {
background-color:lightblue;
position:absolute;
width:100%;
top:0%; left:0%;
}
nav ul li a {
text-decoration:none;
float:left;
display:table-cell;
padding:15px 30px 15px 0;
color:black;
}
Updated Fiddle
Related
I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution
HTML
<div id="navbar">
<li>Home</li><!--
--><li>Link2</li><!--
--><li>Link3</li><!--
--><li><a href="#">Link4
<ul>
<li>SubLink1</li><br />
<li>SubLink2</li><br />
<li>SubLink3</li><br />
<li>SubLink4</li>
</ul>
</a></li><!--
--><li>Link5</li>
</div>
CSS
#navbar {
width:75%;
margin:0px auto;
text-align:right;
position:relative;
top:218px;
}
#navbar li {
list-style:none;
display:inline;
position:relative;
}
#navbar a {
background-color:#862D59;
font-size:18px;
width:60px;
margin:0px;
padding:10px 15px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#navbar a:hover {
background-color:#602040;
border-bottom:solid 4px #969;
}
#navbar li ul {
display:none;
}
#navbar li:hover ul {
position:absolute;
display:block;
}
Working Example
https://jsfiddle.net/o6Ldutp5/
Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.
Then validate your HTML, it contained a number of errors such as missing the opening ul etc.
Then it's just a matter of using position:absolute and appropriate values.
top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the li.
left:0 will align the left edge of the submenu to the left side of the parent li.
#navbar {
margin: 0px auto;
text-align: right;
}
ul,
li {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline-block;
position: relative;
}
#navbar a {
background-color: #862D59;
font-size: 18px;
width: 60px;
margin: 0px;
padding: 10px 15px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
}
#navbar a:hover {
background-color: #602040;
border-bottom: solid 4px #969;
}
#navbar li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#navbar li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Home
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<ul>
<li>SubLink1
</li>
<li>SubLink2
</li>
<li>SubLink3
</li>
<li>SubLink4
</li>
</ul>
</li>
<li>Link5
</li>
</ul>
</div>
I've written my own minimal CSS without the styling, try replacing your whole CSS with this -
I've also edited your HTML by removing the comments and <br /> tags
div#navbar li {
display: inline-block;
}
div#navbar li ul {
width: 200px;
position: absolute;
display: none;
top: 10px;
}
div#navbar li ul li {
display: block;
width: 150px;
}
div#navbar li:hover ul {
display: block;
}
ul,ol,li {
margin-left: 0;
padding-left: 0;
}
Here is the fiddle
On the 'shop' tab I have 5 drop down options that link to a specific part of content on the shop page. However my code does not seem to work, as when you hover over the shop tab when on the home page, the navigation appears inline with the rest of the navigation, whereas I would like the content to display below the word shop as a drop-down list.
This is the HTML
<pre>
<div id="navigation">
<ul class="nav-bar">
<li>home</li>
<li class="current">shop
<ul>
<li>Vintage Collection</li>
<li>Sofas & Beds</li>
<li>Tables & Chairs</li>
<li>Electricals</li>
<li>Storage</li>
</ul>
</li>
<li>about</li>
<li> get involved </li>
<li> contact us</li>
</ul>
</div>
</pre>
and this is the CSS
/* drop down list */
#navigation ul ul {
display: none;
top: 100%;
left:0;
background:#A3CC39;
padding: 0;
align-content: center;
width: 100%;
}
#navigation ul ul li {
float: none;
width: 100%;
margin-left:0px;
}
#navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#navigation ul ul ul {
top: 0;
left: 100%;
}
#navigation ul li:hover > ul {
display: block;
}
I have a feeling the reason it isn't working is to do with my code at the very top of my css which styles the original navigation bar. Really appreciate any help
EDIT: this is rest of the css for the navigation as a whole:
* {
margin:0;
border:0;
padding:0;
}
.wrapper {
max-width: 1000px;
margin: 0px auto;
clear: both;
text-align: center;
}
li {
display: inline;
list-style-type: none;
}
#navigation a:hover{
color: black;
background-color: #6A8F28;
}
#navigation a {
text-decoration: none; color:white;
}
a:visited {
text-decoration: none;
}
I'm having trouble with adding space to the hovered "home" right/left.
Adding proper spacing so after the hovered section of "home" appears that about and the other pages would follow.
CSS:
nav {
width:460px;
height:50px;
background-color:#0066ff;
float: left;
margin: 15px 0 0 324px;
position: fixed;
}
nav ul {
margin: 0;
padding: 0;
position: fixed;
width:493px;
border: 1px solid green;
}
nav li {
float: left;
text-align: left;
margin:0;
padding: 0 0 0 24px;
display: block;
width: 51px;
height: 50px;
}
nav li:first-child {
float: left;
text-align: left;
margin:0;
padding: 0 15px 0 0;
display: block;
height: 50px;
}
nav a:first-child {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav a {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color:#fff;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
This problem has been giving me headaches for hours.
Link Update
The blue space beside about can't happen.
Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing.
Many of your :first-child selectors are redundant, and don't need to be re-specified.
Mixing position:fixed with float:left is generally not a good idea as your CSS will be fighting layout structure.
You only need a position:fixed for the main container, the rest the nav's children will be relative to that.
There's a lot of unnecessary padding and such, you should use your browser's DOM inspector to play with the layout.
Check this JSFiddle that's cleaned it up.
A lot of the time, a small <div> is placed to the left of the "home" link to push it over like so:
#fillerdiv{
width:20px;
background-color:#0066ff;
}
then you could place it like so:
<nav>
<ul>
<div id="fillerdiv"></div>
<li> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
That produces this:
Or you could give the "home" button a specific class and add extra padding for it alone.
#home{
padding-left:20px;
}
And the HTML:
<nav>
<ul>
<li id="home"> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
I played around your code a bit and tried to simplify it. I hope you don't mind.
JSFiddle
/* styles.css */
nav {
float: left;
background: #0066ff;
border: 1px solid green;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
float: left;
display: block;
}
nav a {
margin: 0;
padding: 0;
padding:20px;
color:#fff;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
I have 5 menu items, that I'm having difficulty positioning in line with the background.
The menu text seems to bunch together in the middle, rather than listening to the "width" property to space them out in the correct places.
JSFIDDLE:
http://jsfiddle.net/nmHSD/
HTML:
<div id="menu">
<div class="table">
<ul>
<li>Home
</li>
<li>What we do</li>
<li>Our clients</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</div>
</div>
CSS:
#menu {
top:13px;
left:0px;
position:relative;
height:60px;
width:523px;
background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
.table {
display: table;
/* Allow the centering to work */
margin: 0 auto;
}
#menu ul {
width: 696px;
list-style: none;
padding-top: 20px;
}
#menu ul li {
display: inline;
}
You mean more like this? I changed somethings in your css..
I used float:left; on the <li> instead of inline and because you have 5 list-items i gave them a width:20%;.
Your new css: (less css but the outcome is what you want.)
#menu {
top:13px;
left:0px;
height:60px;
width:523px;
background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
#menu ul {
width:523px;
list-style: none;
padding-top: 30px;
padding-left:0;
}
#menu ul li {
float:left;
width: 20%;
text-align:center;
}
DEMO
i think following code can help for you:
replace code:
#menu ul {
list-style: none;
float: left;
padding: 20px 0 0 0;
}
and also
#menu ul li {
float: left;
width: 104px;
text-align: center;
}
You need to use display: inline-block; on <li> elements in order to be able to use the width, something like that like that:
#menu ul li {
display: inline-block;
width: 150px;
}
I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
Here's the code:
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
To move the #menu to the right and 50px down, add these properties
#menu {
position: absolute;
top: 50px;
right: 0px;
}
JSFiddle
If you want to use float and margin-top instead, you must restrict the margin to the #menu
#menu {
float: right;
margin-top: 50px;
}
JSFiddle
you seem to be targeting both the parent ul and the childs uls
try that:
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
Add float property to your list:
#menu {
float: right;
}
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
You can vary margin-right according to your website design.
If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.