Due to Intellectual Property issues with the client I just can't discuss any code.
There is a line or space between two LI tags in IE7 which are not present in Firefox or Chrome.
I tried very hard to detect where is the problem. I think after 6 hourse of try. So any fresh ideas would be helpful.
First, try to integrate a good CSS Reset (good one you can found on www.html5boilerplate.com ).
Second, I can only suppose menu CSS/HTML code (why you don't publish here the code? When is online, EVERY person can read your css/js/html code!):
HTML:
<div class="menu">
<ul>
<li>menu item</li>
<li>menu with subitem
<ul>
<li>sub menu item</li>
...
</ul>
</li>
...
CSS:
.menu ul {
...
}
I can suggest this kind of reset:
.menu ul, .menu li {
margin: 0 !important;
padding: 0 !important;
display: block;
list-style: none;
}
and try to obtain other padding/spacing with sub elements (span, a, ecc.).
Related
I'm looking to make a very simple dropdown menu for a navbar, very similar to how Bootstrap's dropdown menu works - without being Bootstrap (with some regular links in my navbar and some dropdown links). Essentially what I want is to come up with some with some js and probably a little bit of CSS that will enable this to happen for the following HTML code:
<ul class="main-nav">
<li>HOME</li>
<li>CONTACT</li>
<li class="dropdown">
ACCOUNT <b class="caret"></b>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
I just don't really know where to start on something like this. I spent a few hours trying to put together an all-CSS way of doing this but my CSS just started interfering with itself and I kind of gave up on that. I don't really know any js but it strikes me that there should be a really easy way to toggle a dropdown style on and off with js by clicking a link. I even tried for quite a while to implement js dropdown scripts other people have put out and other StackOverflow answers that essentially did that but their HTML was structured significantly different than mine and I didn't know enough js to restructure their code.
At this point, I'd be more than content with the simplest way possible - a dropdown link that when clicked, opens up a single-colored rectangle 'under it' with the links stacked within in it. I know that's a lot to ask for, but if anyone could point me in the right direction, it would be much appreciated. I apologize for not showing more code but after working on this all day, I really just don't have anything useful to show for.
The idea is that the dropdown-menu is hidden using display: none and when its parent dropdown has the class open then you show it using display: block, to toggle the classes we use js.
$(document).ready(function(){
$("[data-toggle='dropdown']").click(function(e) {
$(this).parents(".dropdown").toggleClass("open"); /*when you click on an element with attr data-toggle='dropdown' it toggle the class "open" on its parent with class "dropdown"*/
e.stopPropagation();
});
$("html").click(function() {
$(".open").removeClass("open"); /*when you click out of the dropdown-menu it remove the class "open"*/
});
});
.main-nav{
background: deepskyblue;
padding: 0;
}
.main-nav li{
list-style: none;
display: inline-block;
position: relative; /*with respect to this element dropdown-menu is positioned*/
}
.dropdown-menu{
display: none; /*hide the menu*/
/*this style are just to position the menu*/
position:absolute;
top: 100%;
left: 0;
}
.open .dropdown-menu{
display: block; /*show the menu when its parent has class "open"*/
}
a.nav-item{
display: inline-block;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
.dropdown-menu{
background: skyblue;
padding: 10px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a class="nav-item" href="index.html">HOME</a></li>
<li><a class="nav-item" href="contact.html">CONTACT</a></li>
<li class="dropdown">
<a class="nav-item dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret">></b></a>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
The above is just a basic example to point you in the right direction, most of the CSS code is just to make viable the example, the important parts are commented.
I have inherited some code which uses horizontal lists in a form:
<ul>
<li>...</li>
<li>...</li>
</ul>
Where <li> is inline-block. I need to populate those lists with ng-repeat:
<ul>
<li ng-repeat="item in items">...</li>
</ul>
To avoid (well-known) gaps between inline-block elements they have to be written either:
<li>...</li><li>
...</li>
Or:
<li>...</li><!--
--><li>...</li>
But I have no idea how to achieve that with ng-repeat!
Anyone? :)
P.S.: I read this. I wonder if there's an elegant "angular specific" solution.
You can manage them by applying css rule:
li{
display: inline-block;
margin-right: -4px;
}
Or, if you don't want to use negative margin, then you can use float: left; instead of inline-block.
However, this would be costlier. Another solution I think is using ng-repeat-start and ng-repeat-end like below:
<ul>
<li ng-repeat="item in items">...</li><!--
<myDir ng-repeat-end>--></myDir>
</ul>
May be you need to use > instead of > and so on.
And with the compile function remove the element so that there would remain just --> using element.unwrap()
I'm not sure the above method would work fine as you're requiring. You could try this once in your project and let me inform.
If we want to muck around with css options...
ul {
font-size:0;
}
li {
display:inline-block;
font-size:12pt;
}
I have some links within a div:
<div class="sidebar" id="sidebar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
I load a stylesheet that has this:
.sidebar a {
text-decoration: none;
font-weight:normal;
}
.sidebar a:hover {
color: #FFF;
text-decoration: underline;
font-weight:bold;
}
This stylesheet is used on multiple pages. On some, I want to change the color of the "a" elements. Based on my research, I have tried this jquery to change the color of the "a" elements:
$("div.sidebar a").css({color : "#000000"});
But when I do this, I get this error: Object expected.
Holy cow, what in the world am I missing?
Are you sure jquery is loading on the pages where you get the Object expected error?
Looks like its working here.
http://jsbin.com/ekinuy/1/edit
Also note:
jquery IE8 $(document).ready "object expected" error
Working here: http://jsfiddle.net/8dk9F/
$(".sidebar a").css("color", "red");
Try this it should work for you. Some browsers are a little more finicky than others.
$('div.sidebar a').css({"color" : "#ccc"});
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item
I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!
Here's an example with CSS that makes it work:
HTML:
<body>
<div class="tabs">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1">
bla1
</div>
<div id="item2">
bla2
</div>
<div id="item3">
bla3
</div>
</div>
</div>
</body>
CSS:
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.
See it in action here: http://jsfiddle.net/V8CK4/
I would use divs nested inside a list.
<ul>
<li>Tab1
<div> Content for Tab1</div>
</li>
<li>Tab2
<div> Content for Tab2</div>
</li>
<li>Tab3
<div> Content for Tab3</div>
</li>
</ul>
Then with css style ul li div to not show. I would use jQuery to show the child divs upon click of the parent li.
EDIT: Thanks to the comment... Note the li's would have to be styled inline so they do not break line after every one. Also set the li list-style to none.
In my opinion I would write it like this:
<div class="tabContainer">
<ul class="tabList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<em class="tabMessage">This is the message on the right.</em>
<div class="tabInnerContainer">
<div id="item1">
bla
</div>
<div id="item2">
bla
</div>
<div id="item3">
bla
</div>
</div>
</div>
This way will allow you to make it function al least to some extent without Javascipt, degrading nicely in browsers with JS turned off. Some of the classes could be removed if using CSS3 sleectors.
I assume the problem is to make the tab and the bar below it seem like one piece without using too much code.
What I have done before is to make the two elements I want to join overlap slightly (or not at all) and then put a third element (in the same color as both other elements) where the overlap is. This acts as a kind of patch.
Like this:
I. without patch
_________________
| |
| tab |
__|_________________|________________________________
| |
| menu bar |
|_____________________________________________________|
II. with patch
_________________
| tab |
|- - - - - - - - -|
___| patch |_______________________________
| - - - - - - - - - |
| menu bar |
|_____________________________________________________|
You will only need to use z-indexes to make this work properly. The patch may extend over the tab div it is contained in by using position: absolute and an adequately high value for top.
Update: demonstration
http://jsfiddle.net/7GJaW/
Like #Otis mentioned, nesting is a pretty good technique. I usually nest ul's
Link 1
Link 1 Item 1
Link 1 Item 2
However, if you are not trying to attempt to do a dropdown...