#I edit the question:#
I have attached the html:
<div class="mainDiv">
<ul id="myUL">
<li id="li-1" class="myLI"></li>
<li id="li-2" class="myLI"></li>
<li id="li-2.1" class="myLI"></li>
<li id="li-2.2" class="myLI"></li>
</ul>
</div>
My UL is formatted dynamically, based on what comes back from the DB.
#-------------------------#
I have a UL, in which all the LIs within it are linked by an arrow.
In addition, I have LIs that consist of several LIs that are their subcategory, and when clicked on, the LIs subcategory - will go from dispaly: none mode, to display: inline-block mode.
My problem is when I have an LI that consists of several LIs, but is located at the end of the UL.
According to my CSS, after this LI, an arrow will appear, because basically, there is another LI in UL, it is just doesn't appear...
I have attached a picture that illustrates this.
As long as the LI that contains some LI is in the middle of the UL- everything is fine (like example A).
Once it's at the end of the UL (as in example B), I have an "unnecessary" arrow, which I would like not to show now, but only when my all LI are in display: inline-block.
I also attached my CSS.
ul#myUL {
list-style: none;
margin:auto;
}
li.myLI {
display:inline-block;
xpadding: 10px 25px;
xborder: 1px solid black;
margin: 0 25px;
position: relative;
}
li.myLI:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li.myLI:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}
div.mainDiv {
display:flex;
width:60%;
margin: auto;
border: 3px solid #73AD21;
}
I will really appreciate your help to resolve this.
Thanks!
Related
I have made a nav out of css drawn circles as anchor elements. They all have varying amounts of text in them causing them to spill out of the circles. So I have used a JS solution to horizontally align the text to the middle of the circle. The problem I now have is that the circles baselines are unequal depending on how many lines of text are in them. Is there an easy css solution to this. Or will I have to calculate and amend the heights of each list item with javascript as well?
.html
<ul class="list-inline nav-horizontal">
<li role="presentation" class="active">
#1
</li>
<li role="presentation">
#2
</li>
<li role="presentation">
#3
</li>
<li role="presentation">
#4
</li>
<li role="presentation">
#5
</li>
</ul>
.css
.list-inline {
display: inline-block;
padding: 6px;
}
.stylish {
display: block;
width: 140px;
height: 140px;
border-radius: 50%;
border: 8px solid #ED1B24;
font-size: 20px;
color: #BBAE92;
text-align: center;
text-decoration: none;
background: none;
line-height: 1.1em;
}
.stylish:hover, li.active .stylish {
color: #fff;
text-decoration: none;
background: #ED1B24;
}
.js
$("a.stylish").contents().wrap("<span>");
$("a.stylish span").css({
position : "relative",
"top" : function() {
return ($(this).parent().height() - $(this).height()) / 2
}
});
How about this? http://jsfiddle.net/hd8donbn/3/
.nav-horizontal li:before {
content:'';
display: inline-block;
vertical-align: middle;
height: 100%
}
.stylish {
display: inline-block;
text-decoration: none;
color: #ED1B24;
vertical-align: middle;
max-width: 90%
}
If its ok i will explain everything :D
I found a simple css solution. Adding vertical-align:text-top; to the class of .list-inline li solved the issue
well, not to be rude here, but i've written a markup of my own to cater to you needs, disregarding what you've given in your question. Hope you find it usefull:
HTML
<ul>
<li class="active">small</li>
<li>medium content</li>
<li>a bit larger content<`enter code here`/li>
<li>really large hunk of content</li>
<li>this is a rrrrreeeeaaaalllllllyyyyy big chunk, with a long word too</li>
</ul>
css
*{
margin: 0;
padding: 0;
}
ul {
display: inline-block;
list-style: none; /*remove markers for `li`*/
}
li {
border-radius: 50%; /*border-radius 70px;*/
overflow: hidden; /*hide overflowing text, if any*/
float: left; /*puts things in line, with their tops aligned. */
/*If `display:inline-block` is used, it will match the bottoms at same level. try it*/
border: 8px solid #ED1B24;
display: block;
height: 140px;
text-align: center;
width: 140px;
}
li a{
padding: 0 5px; /*prevent border cutting*/
word-wrap: break-word; /*breaks long words*/
text-decoration: none;
color: #BBAE92;
/*the next 4 allow a child to be centered vertically*/
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
li.active,
li:hover{
cursor: pointer; /*makes it look like a link*/
background: #ED1B24;
}
li.active a,
li:hover a{
color: #fff;
}
and some minor js
$('li').click(function(){
$(this).child('a').click();
});
I am using ddlevelsmenu.js from dynamic drive to display menu items on mouseover. everything works fine. just i have one very long list which appears little bit odd. Can i split the list items into different columns?
Below are my HTML codes followed by CSS codes:
<ul>
<li>Indian States</li>
</ul>
The above codes will trigger the below list items on mouseover
<ul id="stts" class="submenustyle">
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal pradesh</li>
<li>Jammu Kashmir</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Srinagar</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
<li>Uttaranchal</li>
<li>West Bengal</li>
</ul>
Below are the css codes
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 1.2vw;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 180px; /*width of menu (not including side paddings)*/
color: white;
background-color:#999999;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
.ddsubmenustyle li a:hover{
background-color:#333333;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 180px; /*width of menu (include side paddings of LI A*/
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
have you tried setting widths on the li?
ul{
width:800px;
}
li{
width: 40%;
display: inline-block;
}
this was already answered here: How to display an unordered list in two columns? by Gabriel. Following css should resolve your issue:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
I have created jsfiddle to test it and it works nicely. Have a look http://jsfiddle.net/tralala/jg0zycfw/1/.
I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:
http://css-tricks.com/triangle-breadcrumbs/
Relevant snippets:
<ul class="breadcrumb">
<li>Home</li>
</ul>
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
However, I'm using it as a directed flow, something like:
Main_Category >> Sub_Category >> Details
This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.
My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:
<li>Home</li>
But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.
If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.
Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.
<ul class="breadcrumb">
<li>Home</li>
</ul>
And in CSS:
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a.color-0:after {
background: black;
}
.breadcrumb li a.color-1:after {
background: blue;
}
I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.
Simply change your code to:
<li>Home</li>
Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:
<li>Home</li>
Some sample css, now you can set the before and after as you please:
.breadcrumb-color li a {
background: red;
}
.breadcrumb-color li a:after {
background: red;
}
ng-class should work for what you are trying to do.
<li>Home</li>
rough code example
please take a look at JSFiddle example.
I want to make menu with closing 'x' on it's right side. Menu pops-up after click on green div.
HTML
<div class="field">
<nav id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Item 3</li>
</ul>
<div class="close">X</div>
</nav>
CSS
.field {
background: green;
width: 350px;
height: 200px;
margin: 10px auto;
position: relative;
cursor: pointer;
}
#menu {
position: absolute;
display: none;
}
#menu ul {
width: 80%;
border: 1px solid #999;
float: left;
}
#menu li {
background: #fff;
padding: 5% 15%;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #999;
white-space: nowrap;
}
#menu .close {
background: #ccc;
width: 20%;
padding: 5%;
float: right;
}
JS
(JS is messy, I wrote it on quickly)
$('.field').on('click', function (e) {
var $pointer = $('#pointer'),
$menu = $('#menu'),
parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top,
circleX = relX - ($pointer.outerWidth() / 2) + 1,
circleY = relY - ($pointer.outerHeight() / 2) + 1;
$pointer.css('left', circleX);
$pointer.css('top', circleY);
$pointer.show();
$menu.css('left', circleX + $pointer.outerWidth());
$menu.css('top', circleY);
$menu.show();
$menu.one('click', '.close', function (e) {
$menu.hide();
$pointer.hide();
e.stopPropagation();
});
});
There are 2 issues:
li items doesn't overflow properly text inside them;
[x] element is under menu and not on its right side;
I tried different combinations suggested in other, similar questions but nothing works or I'm to tired and I missed something.
Important thing is that there should not be any hard coded values. Properly values are only %. That's because it should look good on different borwser sizes.
Any ideas how to fix those issues?
You should take a look at the CSS Box model. Padding, border and margin are always added to the width/height of the element and are not included in the width you define. Your floating X is jumping down, because there are no more 20% space left on the right side of the ul.
Better place the X outside of your div. You can also leave out all the floats. Set position: absolute on div.close and move it outside the boundary of the container using left: 100%.
#menu {
position: absolute;
display: none;
}
#menu ul {
border: 1px solid #999;
}
#menu li {
background: #fff;
padding: 5% 15%;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #999;
}
#menu .close {
background: #ccc;
width: 20%;
padding: 5%;
position: absolute;
top: 0;
left: 100%;
}
By the way, white-space: nowrap leads to your menu elements' texts being out of the boundary of the li, which is not very flexible.
Q:
I have a navigation menu ,i notice that every time i change the browser zoom. its position changed.how to make the menu fixed in its place.
the .css:
ul#topnav
{
margin-left:0;
margin-bottom:50px;
margin-top:5px;
padding: 0;
float: right;
width: 800px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background:#CC6A11; /*url(topnav_stretch.gif) repeat-x;*/
}
ul#topnav li
{
float: right;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a
{
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover
{
background: #1376c9 url(../images/topnav_active.gif) repeat-x;
}
ul#topnav li span
{
float: right;
padding: 10px 0;
position: absolute;
left: 0;
top: 35px;
display: none; /*--Hide by default--*/
width: 800px;
background: #1376c9;
color: #fff; /*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span
{
display: block;
}
/*--Show subnav on hover--*/
ul#topnav li span a
{
display: inline;
}
/*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover
{
text-decoration: underline;
}
.aspx
<div style=" margin-right:20%" >
<ul id="topnav">
<li>الرئيسية</li>
<li>النشاط التعليمي <span>العبأ التدريسي
| الأنشطة التعليمية | <a href="frm_EducationalActivitiesDirectly.aspx">
الأنشطة التعليمية المباشرة</a> </span></li>
<li>النشاط العلمي <span><a href="frm_ScientificActivity.aspx">النشاط
العلمي 1</a> | النشاط العلمي 2 | <a href="frm_ScientificActivity3.aspx">
النشاط العلمي 3</a> </span></li>
<li>النشاط الاداري</li>
<li>االاشتراك في أنشطة طلابية</li>
<li>التقييم العام</li>
<li>خروج</li>
</ul>
</div>
I use this menu
You just have to do two things, and it will solve your question !
1) Remove margin right from div.
Previous :<div style=" margin-right:20%" >
Modified: <div>
2) Update your topnav css as below :
ul#topnav {
background: none repeat scroll 0 0 #CC6A11;
float: right;
font-size: 1.2em;
list-style: none outside none;
margin-bottom: 50px;
margin-top: 15px;
padding: 0;
position: relative;
text-align: left;
}
Hope this will solve your problem!!!!!
It is going to zoom but you can make it stick by replacing:
<div style=" margin-right:20%; width:100%" >
with
<div style="position:absolute; top: 0px; left: 20px;" >
Ensuring that you have your meta viewport tag in your HTML files should help, and
setting the 'position' attribute to 'fixed' in your menu's CSS will make it sticky/float.