i tried to ask same question on this post but the result i get shows the menu in vertical
how do i display it horizontal. if i set the display property block then it sets menu vertically? please share code if possible i asked same question her you will get code
Please Share CSS and HTML code that will give me expected result;
I would do something like this...
li#home {
padding: 40px 0 0 0;
background: url(images/home.png) no-repeat center top;
}
You may also possibly need margin-bottom: -10px to move it down from its siblings.
This is the code I would use. I'm not going to assume your knowledge of HTML/CSS, so here goes:
HTML:
<ul id="navigation">
<li class="home">Home</li>
<li class="car">Car</li>
<li class="mobile">Mobile</li>
<li class="old">OldThings</li>
</ul>
CSS:
#navigation {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 50px 20px 20px;
}
You will also need to add your image (seen over the 'Home' item) - which I would suggest as a background image, on the "a" tag.
If you do want the "Home" link to be on a different level as the others, you can simply change the "home"'s class to be something like this:
#navigation li.home a {
display: block;
padding: 60px 20px 10px;
}
Just adjust the padding on the "a" style, to match where you want each element (as I have guessed :) ). You'll also have to add colours, and hover states.
Good luck!
you need this ...
display: block;
inline lays out all the elements horizontally. block lays out the elements one above the other. i don't think you will be able to layout that one LI element with the display: block because you have an element and a (or something along those lines in the same LI element.
you would be better off to set the width property for that one LI element to be small enough that it automatically lays out the word on the next line instead of being auto width.
Just use clear:right;flow:left; to your image see example
here is demo:
http://3dserg.be/test/hormenu.html
here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<style type="text/css">
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #fff;
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}
#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}
#navlist li a:hover
{
color: #039;
border-bottom: 3px solid #bbb;
cursor: pointer;
background: #eee;
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #999;
}
#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: #eee;
}
#navlist li img
{
clear:right;
flow:left;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item one</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item two</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item three</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item four</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item five</li>
</ul>
</div>
</body>
</html>
Related
I have created an unsorted list/list that I would like the lines in between each word to show... so far I have this:`
#header {
position: absolute;
width: 100%;
}
#navbar {
position: relative;
padding-top: 0.8em;
padding-left: 31em;
}
ul {
list-style-type: ;
margin: 0;
padding: 0;
float: left;
}
li {
display: inline;
padding: 0.4em;
}
a {
text-decoration: none;
color: #FFFFFF;
font-family: "Century Gothic";
font-size: 100%;
<img id="header" src="images/headerfit.png" />
<div id="navbar">
<ul>
<li>HOME
</li>
<li>CUCINA
</li>
<li>ESPRESSO
</li>
<li>BAR
</li>
<li>FUNCTIONS
</li>
<li>CONTACT
</li>
</ul>
</div>
How do I make it so there is a line between each word (the space)... thankyou.
you need border for your list:
li {
display: inline;
padding: 0.4em;
border-right: 1px solid #000;
}
li:last-child {
border-right: none;
}
http://jsfiddle.net/4s2ho1kj/2/
If i have understood you right (not sure that i have) what you want is space between each word you could do this by saying
li{
margin-left:10px;
}
li:first-child{
margin-left:0px;
}
This way you will make the line that you want by adding a border to the right side of each menu item except the last.
li { border-right: 1px solid #000000; }
li:last-child { border-right: none }
here in this jsfiddle you can see what you need and try adjusting it a little till how you want it:
http://jsfiddle.net/9qdefux6/
I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}
Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.
My links have these dots in them. As the picture shows.
My code is simple:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.
You want to use the code - list-style: none;
so your code will look like
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}
Add this style:
list-style-type: none;
To this selector:
ul#nav li
Modify your declaration for ul#nav li to include this property
list-style:none;
http://jsfiddle.net/bcDDk/
I have a weird problem with my horizontal drop down menu. Please find the code below.
My HTML Menu part looks like follows -
<div id="page-wrap">
<ul class="dropdown">
<li><img src="images/home.png" border="0"></li>
<li><img src="images/aboutus.png" border="0"></li>
<li><img src="images/profile.png" border="0">
<ul id="submenu">
<li id="firstItem"><img src="images/submenu_center_top.png"></li>
<li>Support Team</li>
<li id="lastItem"><img src="images/submenu_bottom.png"></li>
</ul>
</li>
<li><img src="images/activities.png" border="0">
<ul id="sub_menu">
<div><img src="images/submenu_center_top.png">
<li>Nutrition & Tips</li>
<div><img src="images/submenu_bottom.png"></div>
</ul>
</li>
<li><img src="images/shiningstars.png" border="0"></li>
<li><img src="images/testimonials.png" border="0"></li>
<li><img src="images/gallery.png" border="0">
<ul id="sub_menu">
<div><img src="images/submenu_center_top.png">
<li>Photo Gallery</li>
<li>Audio Visual Gallery</li>
<li>In Press</li>
<li>Articles</li>
<div><img src="images/submenu_bottom.png"></div>
</ul>
</li>
<li><img src="images/eventsnews.png" border="0">
<ul id="submenu">
<div><img src="images/submenu_center_top.png">
<li>Upcoming Events</li>
<div><img src="images/submenu_bottom.png"></div>
</ul>
</li>
<li><img src="images/contactus.png" border="0"></li>
</ul>
</div>
And my CSS file contains the following code:
#page-wrap {
width: 1004px; margin: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
ul.dropdown {
position: relative;
}
ul.dropdown li {
font-weight: normal; float: left; zoom: 1; /*background: #ccc; */
}
ul.dropdown a:hover {
color: #fff;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li a {
display: block;
padding: 0px 0px 0px 0px;
/*border-right: 1px solid #333;
color: #000;*/
}
ul.dropdown li:last-child a {
border-right: none;
} /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
background: #1C1C1C;
/*color: white;*/
position: relative;
}
ul.dropdown li.hover a {
color: black;
} /*LEVEL TWO*/
ul.dropdown ul {
width: 200px;
visibility: hidden;
position: absolute;
width: 100%;
top: 100%;
/*margin-left: -90px;*/
left: 0;
}
ul.dropdown ul li {
font-weight: normal;
font-size: 12px;
background: #333333;
color: #969696;
/*border-bottom: 1px solid #ccc;*/
border-left: 5px solid #969696;
border-right: 5px solid #969696;
/*float: left;*/
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
border-right: none;
width: 100%;
display: inline-block;
} /*LEVEL THREE*/
ul.dropdown ul ul {
left: 100%;
top: 0;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
#firstItem, #lastItem {
background: none;
border-left: none;
border-right: none;
}
.sub_menu {
float: center;
}
I have been getting weird results both in IE 8 and Chrome too. The alignment is just not happening. Can somebody pleas ehlp? I am relatively new to HTMl and CSS.
Thanks in advance!
There are a lot of different things going on here.
The simplest answer for you though, for your alignment issues, is that your ul#sub_menu has padding.
Zero out the padding with this:
.sub_menu { padding: 0px; }
[Update: Your html should use class="sub_menu" instead of id="sub_menu". Your html is invalid if you have more than 1 element with the same id]
A common practice these days is to start your CSS file with a bunch of "resets". This will change the default padding and margin for a bunch of common tags to 0, so that you don't end up with spacing issues when you don't desire them. For example, some resets I normally employ:
body, div, ul, ol, li, p, h1, h2, h3
{ padding: 0px; margin: 0px; }
Other things that might help you, that I notice in your code:
float: center is not valid. The only valid values are: left, right, both, none, inherit
ul.dropdown ul ul does not reference anything. You only have 2 levels of ul, but this selector references 3 ul deep. You probably got this CSS from a drop down menu example. If you don't need a 3rd level of drop downs, it's best to remove this CSS so as not to confuse yourself in the future.
visibility: hidden, visibility: visible, I suggest using display: none and display: block. The reason is, that visibility: hidden still takes up space on the page, even though it is invisible. display: none however, does not render the DOM element at all, and it will not take up page space
You have <div> elements as direct child elements of the <ul> tag in some of your sub-menu's. Only <li> elements are allowed as direct children
You have some elements named sub_menu and some named submenu. You need to have consistent names if you want the styles to be applied correctly.
Here is a jsFiddle with your code, and all the changes I mentioned. I added width to your li and background colors to help see what was going on.
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.