Ok, so I have a small menu bar and three of of the elements inside the menu have further submenus. But the elements inside the menu bar have unnecessary spacing between them and also the submenus that I have created have an unnecessary background width which I have colored white in the code to make the reader understand. Because of this unnecessary width the hover effect that is supposed to appear on menu bar appears even if mouse is hovered on the invisible width which is white in this case but on live code it wont be white. So since it wont be visible in live code visitors might be confused as to why the submenu is still not getting hidden even when they have removed their mouse away from the submenu. So I want to remove the unnecessary spacing between the elements and make their alignment right in the menu bar and also reduce the width of the submenu to width of links inside the submenu. I know this might be a bit difficult to explain so I am posting this fiddle link. DEMO
I cannot post the CSS code because only 30000 characters are allowed to be posted in a question so you can compile the code on your local machine by copying from jsfiddle. Sorry for that extra effort. Html also I am posting only because it is a necessity to post some code.
HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="expertystemsHome2.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Expertystems</title>
</head>
<body>
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">AAAAAA</li>
<li class="Repair">BBBBBB
<ul class="submenu">
<li>
b1
</li>
<li>
b2
</li>
<li>
b3
</li>
<li>
b4
</li>
<li>
b5
</li>
<li>
b6
</li>
<li>
b7
</li>
<li>
b8
</li>
</ul>
</li>
<li class="Unlock"><a id="tempUnlock" href="">CCCCCC</a>
<ul id="mozillaPain2" class="submenu2">
<li>
c1
</li>
<li>
c2
</li>
<li>
c3
</li>
<li>
c4
</li>
</ul>
</li>
<li class="Expertise"><a id="Expertise" href="">DDDDDD</a>
<ul id="mozillaPain3" class="submenu4">
<li>
d1
</li>
<li>
d2
</li>
<li>
d3
</li>
<li>
d4
</li>
<li>
d5
</li>
<li>
d6
</li>
<li>
d7
</li>
<li>
d8
</li>
<li>
d9
</li>
<li>
d10
</li>
<li>
<img style="width: 158px;height: auto;" src="images/creation.png">
</li>
</ul>
</li>
<li class="Careers">EEEEEE</li>
<li class="Contact">FFFFFF</li>
</ul>
</div>
</body>
</html>
Are you using a tool to generate this code? If so it doesn't appear to be working.
Here is a summary of what is happening:
If you take a closer look and inspect the elements that have all of the spacing. The elements themselves have these really large margin-left:x;
ul.menu .Unlock a {
margin-left: 185px;
....
ul.menu .Expertise a {
margin-left: 277px;
....
If you manually go through and remove all of these margins your menu will start coming together.
But I would take a closer look at the tool you may be using because that is really were your problem is.
Updated Fiddle
try adding style="margin: 0;" to the ul-element or add ul { margin: 0; } to your stylesheet
Related
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
i want to place a image in a very specific place (top right of the NAV bar) and i have done that using postition:relative; (also tried absolute) and moving it accordingly.
when ever i crop the browser it will stay in the white space outside of the div wrapper i have.
so basically my image is not scaling with the div wrapper i have.
can anyone provide some tips? sorry for the noob question.
here is some code.
<div id ="Wrapper">
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a> </li>
<li class='has-sub'><a href='#'><span>Product 2</span></a> </li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<img src="images/register.jpg" width="50px" height="45px" id="register"/>
</div><!-- end of css -->
Wrapper div is at the bottom.
the css for the "register" id is just positioning coordinates
The nav bar is a template i downloaded.
Based on the CSS you provided in your comment, the reason it is doing this is because you are using pixels to set width. If you use a percentage, your image will shift to the screen size. So if you want it at the very right side of your container, try: left: 99%; or change the percentage value to place it where you need it to be.
ok simple try this.
<html>
<head>
<style>
h3 {
word-spacing: 100px;
}
</style>
</head>
<body>
<!-- make sure you put it in the heading tag of nav bar right allign-->
<hr>
<h3>
Example
Example
Example
Example
<!--Put Image below here-->
<img src="IMAGE.jpg">
</h3>
<hr>
I want two boxes with different content in them. I want them to line up at top. Default they line up with bottom http://jsfiddle.net/52VtD/9772/
How do I get them at top instead of bottom?
<ul class="list-inline">
<li class="box">
<ul>
<li>
aaa
</li>
<li>
aaa
</li>
</ul>
</li>
<li class="box">
<ul>
<li>
aaa
</li>
<li>
aaa
</li>
<li>
aaa
</li>
</ul>
</li>
</ul>
You need to vertically align the initial list items. Add the CSS (or rather, combine with the current rule):
.box{
vertical-align:top;
}
Demo Fiddle
Note that your HTML is also invalid, you need to ensure you are correctly closing each li
I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail.
Below is my code for a simple drop-down menu.
It works fine in every browser except IE.
html page:
<div id="nav">
<ul id="navul">
<li id="rootHome">
<ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
"height: 40px;" id="home" /></a>
</li>
<li id="rootProducts" onclick="showMenu(this)">Products
<ul id="Products">
<li>
<p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
</li>
</ul>
</li>
<li id="rootNews">
News
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<ul id="Company">
<li>
<p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
</li>
<li>
<p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
Us</p>
</li>
</ul>
</li>
</ul>
CSS: (formatting didn't work on here)
http://pastebin.com/raw.php?i=CjyQhXCs
Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
http://jsfiddle.net/uTBZN/30/
Credit to:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
Just like #Stu, I had a filter on my nav ul (in my case, .navbar):
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per #Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!
The following menu works really fine in the browser, but I cant get it to validate as XHTML. I took this example out of my CSS Book. It says it is right, but seemingly it is not.
<ul id="leftNavi">
<li>
left menu1
</li>
<li class="SCNL">left menu2</li>
<ul id="subnavi">
<li>
menu2/1
</li>
<li>
menu2/2
</li>
<li>
menu2/3
<li>
</ul>
<li>
left menu3
</li>
</ul>
Here a link to the page: http://www.yiip.de/arbeit/testlayout/standard_template.html I am talking about the left menu.
<ul id="leftNavi">
<li >left menu1</li>
<li class="SCNL">left menu2
<ul id="subnavi">
<li>menu2/1</li>
<li>menu2/2</li>
<li>menu2/3</li>
</ul>
</li>
<li>left menu3</li>
</ul>
You had a couple of problems:
The line with 3 as the list item didn't have a correct closing <li> element; and
The subnav1 list wasn't contained within a <li> element. It can't be a direct child of another list, which was the main problem with validating your HTML.