On small screens ( <720px) I have a toggle menu with a font awesome icon.
I noticed yesterday that there is a full stop appearing before the menu. I can't figure out where this is coming from.
The dot in question.
The code for the menu (taken from developer tools.)
<ul id="toggle-menu">
<li class="pullDown">
<a href="#" id="pull">
<i class="fa fa-bars fa-3x "></i>
</a>
</li>
</ul>
It it appearing in the DOM within this line, even when all elements within the li are deleted.
<li class="pullDown"></li>
The site is here
The full code is here
Thanks in advance
In your style.css add this code
#toggle-menu li {
float: right;
list-style-type: none;
}
See here for an example of it in action.
The reason that dot is there is that you're adding it as a list element -- it's not a full stop, necessarily, just the marker for a new element in an unordered list. list-style-type:none gets rid of any style for the list elements.
It's not a full stop, it's a list item bullet. You're using a list with <li> tags, and the default behaviour is to put a bullet in front of whatever is inside the <li>
The real answer here though is that your code isn't very semantically correct. Why is an icon inside of an unordered list in the first place? Consider two other options...
1) Just putting <a> containing your icon in front of the nav and leaving it at that
2) Incorporating the font awesome icon in to a :before or :after psuedo-element of the nav menu itself using CSS styling. Information about how to add icons via CSS can be found on the font awesome site.
Your toggle-menu class should contain something like
list-style: none;
Related
Pretty much, I am trying to add an icon of a paw next to the link once its hovered. So I want icon to be invisible, and just shows when I hover over the link. I managed to do that, but when I hover over a link, other links jump to the side due to the icon being visible. How can I make it so the links already take size of the icon into consideration and do not jump on side once it shows up on hover?
[HTML](https://i.stack.imgur.com/a1CQq.png)
[CSS](https://i.stack.imgur.com/f17Ew.png)
[Before Hover](https://i.stack.imgur.com/MMFDV.png)
[After Hover](https://i.stack.imgur.com/HQv12.png)
Since I'm still quite new in Web Dev maybe solution to the problem is quite easy. I just tried random things which I don't even remember to be honest. Was adding and removing code just to see if it will make any difference. I didn't really manage to make any difference as no matter what I do ( try to include total width of the link after hovering to the basic width when not being hovered, and push the link text to the side blah blah ), it was always the same. Links just jump to the side when I hover.
Thank you in advance.
The problem here is that elements with display:none are not rendered in the DOM, so the width of the element will not be calculated, thats why it will move if you make them visible via display:block.
there are sereval solutions for your problem. I will give you two simple solutions:
1. Use visibility
HTML:
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
CSS:
.icon.hide {
visibility:hidden
}
a:hover .icon.hide {
visibility:visible
}
2. Use opacity (here you would be able to add transition effects)
HTML:
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
CSS:
.icon.hide {
opacity:0
}
a:hover .icon.hide {
opacity: 1
}
Hope this will answer your question.
First time asking a question here...
I'm making a drop down menu with some effects that I got from cssdeck.com.
Basically the nav is from one source, and the sub menu from another.
I've mixed two cssdeck.com source to make it look like one.
So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.
The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...
How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????
<nav>
<div class="nav_main ph-dot-nav">
Home
<a href="#">About
<div id="sub_about">
<ul>
<li class="li_first">회사소개 </li>
<li>대표인사말 </li>
<li class="li_last">회사연혁</li>
</ul>
</div>
</a>
Services
Portfolio
Partners
Contact
<div class="effect"></div>
</div>
</nav>
Fiddle Demo here
You can solve this, if you also show the submenu if you hover on it. See
https://jsfiddle.net/7xfrod2s/
#sub_about:hover {
visibility: visible;
}
Also I moved the visible: hidden style to the parents tag of ul (#sub_about).
Maybe you need an other :before tag so that there is no gap between the header and the submenu (a curser-bridge so to say) ;)
To achive this with CSS there's are rules your need to stick with. First take a look as this pic.
http://i.imgur.com/IAsz39w.png
(I'd love it, if someone help me post a pic)
must be have no space in between your Menu tag and subMenu. It will fail if there is 1px in between thse element.
use the simple hover stage like follow
subMenu must be children of Menu
hide the subMenu
.subMenu{
display: none;
}
make subMenu appear when you hover on its parent or itself
.menu:hover .subMenu{
display: block;
}
Explaination: the hover state of DOM quite simple. if you are hovering on a child element it also mean that you are hovering on its parent. So this is while you must not let any space inbetween Menuand subMenu. Because the movement your cursor hover on that 1px for 1ms the DOM will understand as the hover state over. So it will hide the subMenu away
For example: in the pic. Pretending like your submenu not hiding, so if you are hovering on subMenu the DOM also understand as you are also hovering on Menu (parent menu)
I'm working on a resume-layout done in html/css. The problem I am encountering is an inheritance issue, I think. I've done a bit of research online, and this seems to be a fairly common problem, often associated with IE (insert expletives about IE).
This is what I'm attempting:
Edit
I want to have the parent list item underlined with no bullet point (disc).
I want the child (nested list) to have a bullet point (disc) and no underline.
So I've gone to JSfiddle and cut out the sections of the code (CSS normalize checked) to try and sort out what's going on and what I might be doing wrong.
HTML:
<h3>Qualifications Summary</h3>
<ul id="qualifications">
<li>BS in Computer Animation with a focus on art, design, illustration, and motion graphics.</li>
</ul>
<h3>Related Experience</h3>
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
<li>Nov 2006 - April 2008 ~ <span class="jobtitle">Graphic / Web Design</span> ~ National A1 Inc, Philadelphia, PA
<ul>
<li>Junior Designer</li>
</ul>
</li>
</ul>
This is the CSS:
ul {
padding-bottom: 15px;
margin:0px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 14px;
}
/*Nested List Issues*/
ul.experience li {
text-decoration:underline;
list-style: none;
}
ul.experience ul li{
text-decoration:none;
list-style: disc;
}
Even with the code sectioned out and only the CSS that relates directly to it used, I still get the error.
Question I've been asking myself:
1) Is it something in the Normalize code? Not that I can see.
2) Is it the Browser/version? I use Chrome 36.x mostly. I've checked it in IE and Firefox. The same issue occurs.
3) Is there another way of doing this? Perhaps and very likely my syntax or usage is wrong. I've tried other ways including the > selector, but the most I get is the discs on the nested li shows up.
I made other attempts but as I am new.... I can't posted them yet. :)
I just can't seem to get it to work. What have I done incorrectly?
edit
Current suggestions offer to place a span tag around the parent element's content and style that. So far that seems to work. It adds more code to the markup rather then focus on CSS muscle. Inelegant but functional.
The normalize setting causes margin and padding on the list items to be removed. Try setting the list item to have a margin-left of 2em for instance. Also, instead of the text-decoration on the outer li, place your text in a span, and set the text-decoration on that instead.
You don't state exactly what the issue is, but I'm going to assume that it's 2 things:
1) The underline text-decoration property is showing up in the sub-list items. This is a bit confusing until you look at the markup:
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
Note that the first-level list item for <ul class="experience"> is not closed until after the sub-list is closed. What this means is that the sub-list gets the underline appearance even if you over-ride it on the sub-list items (as the property is actually on the parent list item).
To get around this, wrap the part you want underlined in another element, like a span and apply the underline style to the span:
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
CSS:
ul.experience > li span {
text-decoration:underline;
}
2) The other issue I assume, is the disc not showing up. That's because normalize.css removes margin and padding from all lists. Add that back in:
ul.experience ul {
list-style: disc;
padding-left: 2em;
}
fiddle
IF you un-check "Normalized CSS" on the Fiddle Options (left pane of Fiddle) your code should work somehow... (it worked for me).
Using both steveax and Steven Don's suggestions I still had trouble with it. I realized that a part of the issue was with Bootstrap 3.0. After singling out the code and the CSS in Jssfiddle, though it mostly worked there, it still was not working in my working draft.
After a bit of adjusting both html and the css I finally got it to behave with little issues. However where it worked in JSFiddle, it wasn't working in my working code.
So because I was using bootstrap I double checked the documentation and still couldn't find the issue there. So I used Chrome's inspect element. For some reason list-style does not override the more specific list-style-type in Bootstrap.
So I switched the CSS around so I wasn't turning off and then on-again the list style Bootstrap was enforcing. I just switched off the disc for the main entry heading that was underlined as well, and then used the span tag on it (the first li) to underline it while avoiding underlining the child element as well.
I even removed the span around the job title, and used the strong tag instead.
HTML
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <b>Freelance Illustrator & Web Designer</b> ~ Drakenhart Studios </span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
</ul>
CSS
ul.experience > li { padding-left:2em; }
ul.experience ul { list-style:disc; padding-left:2em; }
ul.experience > li span { text-decoration:underline; }
Less code then I was using before in my CSS. It now works properly.
Try using the CSS important. An example of how it would be used is below:
text-align: center !important;
As you can see, it goes just before the semi-colon. Hope this helps!
So, I was recently working on this Admin theme that I'm creating and as I was creating the nav bar, I ran across this small thing: http://gyazo.com/6e4feee215852ab8fddb534413e24553
So, What I am getting stuck is on the background color of the dropdown once I click on it. I want it to be transparent, which I know how to do via rgba. Here is the HTML for the dropdown also.
<div class="apps2"
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
Blood
</ul>
</li>
</ul>
</div>
The apps2 class within the first div is just positioning the icons (margin/float)
Changing the Bootstrap files isn't the right approach. That's known as "hacking the core" and sets you up for bothersome maintenance and upgrade problems.
Instead, load a custom CSS file after Bootstrap.css and add your overrides.
http://jsfiddle.net/isherwood/4W3YR/
ul.nav li ul {
background-color: transparent;
}
Ok. So I eventually found out the problem on my own. Going to the bootstrap.min.css file, had some weird contents within it, but within that, there is a small string (you can ctrl+f 'find' it, just type this: .nav .open>a:focus Once you located that, within the { & } symbols, you will find the background-color attribute, you can change that to the rgba, hex or text color you want. :)
There is an unordered list, and one of the list items contains two links. For some reason, Internet Explorer 8 is showing the part of the list item beginning with the first link as outside the list and apparently outside the containing div also. Here is what it looks like (those two lines should be on one line!):
Illustration of list Problem http://img231.imageshack.us/img231/7726/listproblem.png
The html:
<!-- These div make up the background image -->
<div class = "box">
<div class="boxBody">
<ul>
<li> </li>
<li> </li>
</ul>
</div>
</div>
The CSS:
li {
list-style-type: square;
margin-left:25px;
font-size: 12px;
}
EDIT: On going step by step through the code, I found that for some reason having links inside the li is what is causing the problem. Anyone know why this would be?
I don't think having links inside LI can cause any issues. By any chance are you using any reset CSS? (some CSS code to reset LI, UL etc..?)
And the answer is...that I forgot to close a previous link.