I want to get data from server and displaying it using ng-repeat in jade drop down view. The content is getting displayed but not one by one instead it is displaying side ways. I have spent a lot of time but I couldn't find any solution.
Please help me with this.
JADE CODE
li.dropdown.btn.btn-primary.col-10(align='center',style='margin:10px;',ng-repeat='category in vm.categories', ng-if=" category.categoryType !== 'ADDON'")
span
| {{category.categoryName}}
span.caret
ul.dropdown-menu.dropdown-toggle(data-toggle='dropdown',ng-repeat='product in vm.products',ng-if='category.categoryName===product.productView.category.categoryName')
li(role='menuitem',ui-sref="app.order.list" , ng-click='vm.show(product)')
a {{product.productView.productName}}
CSS CODE
#import "../../../../stylesheets/fy_config";
$imgPath: '../../../imgs';
a {color: black;margin: 5px; text-decoration: none;}
.dropdown-menu li:hover{
visibility: visible;
height:auto;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu .sub-menu {
align: center;
position: relative;
top: 0;
float:none;
}
Related
I've put an image in a superfish menu to separate list items. It seems to be jacking up the alignment on the menu. Any clue as to why and how to fix?
My code is super simple
#menu .sf-menu li:not(:first-child):before {
content: url('../images/menubord.png');
}
You can see it here:
Menu
Thanks for any assistance!
S
You can position the image in relation to the list item:
#menu .sf-menu li:not(:first-child):before {
content: url('../images/menubord.png');
position: absolute;
top: 5px;
}
If you do not want to make it with position, then use following it will work
#menu .sf-menu li:not(:first-child):before {
content: url(../images/menubord.png);
float: left;
margin-top: 5px;
}
I've created a responsive fixed Top Navigation Bar for a site I'm working on. I'm teaching myself CSS and as of this moment, I only have 2 weeks experience with the language.
Fiddle Link can be found here.
/* BASIC STYLE START */
body {
margin: 0;
background-color: #FFFFFF;
font-family: 'Titillium Web', Arial, sans-serif;
}
/* BASIC STYLE END */
/* NAVIGATION BAR START */
ul.topnav {
margin: 0;
padding: 0;
background-color: #2F2E2E;
overflow: hidden;
list-style-type: none;
width: 100%;
position: fixed;
top: 0;
}
ul.topnav li {
margin: 0;
padding: 0;
float: left;
}
ul.topnav li a {
margin: 20px;
padding: 0;
color: #FFFFFF;
overflow: hidden;
display: block;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
ul.topnav li a:hover {
color: #B0AAA9;
transition: 0.3s;
}
ul.topnav li a.active {
color: #B0AAA9;
}
#media screen and (max-width: 800px){
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* NAVIGATION BAR END */
My issue is with aligning the links within the Nav Bar. I want to align the below accordingly.
Allegiance Title - Left side of Nav Bar
Home-FAQ Links - Center Column of Nav Bar
Register & Login Links - Right of Nav Bar
The problem I face is that I can't seem to actually manage to align them properly. I figured out how to change the class in HTML and move the Register & Login links to the right, but I can't move the Home-FAQ links to the centre. Also, when I do change values in padding / margin in the Nav Bar, the responsive Mobile menu changes with the links all over the place (non-centered).
I would appreciate any help as I'm very new to this. Also, please let me know if I have redundant code in the stylesheet.
Ultimately, I want to create one of those 3 column parallax scrolling sites with this Nav Bar sitting on top. I was going to use a downloaded template, but there is no point as I won't learn anything.
The issues are:
You cannot have a <div> directly inside <ul>. It's totally invalid.
The rule ul.topnav li.right, ul.topnav li is contradicting with float: none;
What you need to do is, create this rule:
ul.topnav li {float: left;}
You should be all set. If you need parallax scrolling, it definitely requires JavaScript.
Preview
Fiddle: https://jsfiddle.net/9go9x2ug/
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
Ah ha, I've discovered the problem. Html code further down was overlapping my menu. Z-index and few tweaks solved it. See changes below. No doubt a css wizard can make further improvements, but this has put me on the road.
Many thanks to all for input.
As intended, drop down selections appears on the right of my vertical menu upon mouse hover. But they disappear as soon as I move the mouse to the right to select. Can some kind soul point out what changes I need to make in the code below to have a fully functional vertical drop down menu?
Many thanks,
LRP
My css code:
div.tools {
padding: 0 0 0 0;
}
div.tools ul {
margin: 0;
padding: 0;
width: 9em;
background: #00ab6f;
color: white;
border-radius: .3em;
}
.tools li {
position: relative;
list-style: none;
margin: 0;
}
.tools ul ul {
position: absolute;
top: 0;
left: 9em;
display: none;
}
.tools ul li a {
display: block;
text-decoration: none;
color: white;
padding: .6em;
border-radius: .3em;
}
.tools ul li:hover ul {
display: block;
z-index: 3;
}
.tools ul li ul li:hover {
display: block;
z-index: 3;
}
Note that I've found solution. See edits above.
Thanks to all.
LRP
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).