I've got a transform in a list and there appears to be space after the effect. As the item is inline, I presume this to be the reason.
That said, I'm looking for a solution - to return the word back to HYBRID without spaces.
visual
css
.hybrid {
display:inline-block;
transform:rotate(180deg);
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
html
<li>
Overview of H<span class="hybrid">Y</span>BRID
</li>
Your span is inheriting a text-indent from .sidebar-nav li (line 63 of stylish-portfolio.css). Fix it with:
CSS
.hybrid {
text-indent: 0;
}
Related
I want to create a horizontal navigation bar on one of my pages, so I used a list and then edited it in CSS. However, the same page also has other lists, and when I have applied the styling it has worked for the nav bar, but has completely destroyed the other lists! How do I get round this? I've tried ID tags but I don't know if they overrule applying a certain style to all lists? This is my CSS code:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
All lists on the page are 'standard' lists, i.e. they are all bog standard <ul> or <ol> with no id tags - apart from the navigation bar list, which I have called 'menubar'.
For the menubar styles you need to apply the id like #menubar also for its child elements if you only want them to apply inside the menubar
see example:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li {
float: left;
}
#menubar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul id="menubar">
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
<ul>
<li><a>normal one</a></li>
<li><a>normal two</a></li>
<li><a>normal three</a></li>
</ul>
the problem with your CSS is that you apply styles to all 'li' and 'li a' elements. The best way to get this to work is to be a bit more specific to where you want to apply the CSS.
Try the following (using your code above).
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li{
float: left;
}
#menubar li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
If you don't specify an ID or a class the style will affect every matching element.
In your example, you style elements with the id "menubar", and then you style ALL "li" elements and lastly all "li" and "a" elements.
If you wish to apply your style only to items in your navigation menu, you could give them a class like "nav_menu", and write the style like this:
.nav_menu {
float: left;
}
.li_and_a {
display: block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
so your list items with the float now need the class "nav_menu" and the list items and the a items need the "li_and_a" class.
Doing this will not impact any other "li" or "a" elements on your page unless they have that specific class.
There are several ways to resolve this, but I think that at this point, the most practical way would be to use the :not() selector with your lists and exclude the #menubar.
For example, if your #menubar is a id for a li, you could add it like this:
li:not(#menubar) {
/* your css */
}
li:not(#menubar) a {
/* your css */
}
EDIT 28/02
My understanding is that you have your horizontal bar with the #navmenu and the rest of your CSS you do not want to take effect in it.
If that is what you want, this solution does work. As it was tested on jsfiddle.
https://jsfiddle.net/a2kj8vds/
I want to make my navigation menu to be dropdown. I tried different ways, but nothing happend.
This is my HTML code:
<ul>
<li>Home</li>
<li>Geography</li>
<li>English</li>
<li class="icon">
☰
</li>
</ul>
And this is my CSS code:
ul {
padding: 15px;
margin: -10px;
overflow: hidden;
list-style-type: none;
background-color: #171B29;
}
li {
float: left;
}
li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
li a:hover {
background-color: #555;
}
li icon {
display: none;
}
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: absolute;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
When I try to make a dropdown menu, the whole menu becomes very bad. I know that my code is very bad for reading but I will appreciate it if someone have a solution. Thank you in adva
You should try to find answer on http://www.w3schools.com/css/css_dropdowns.asp
Webpage have pretty decent content and its easy understandable.
Have you included the JavaScript too? You are specifying a toggle (myFunction) on click so you need the JavaScript too.
Of course you can just use HTML and CSS for dropdowns, as listed in the post above.
If your issue is that you want the <li> elements to be stacked vertically, you can solve this quite simply using flexbox. Additionally, if you were planning on effecting the "drop-down" effect with just HTML & CSS, you need to add a :hover pseudoclass on the top-level element from which the navigation menu derives. In the example I'm linking to below, I did so on the <ul> element. Alternatively, you'd use the mouseover event in JavaScript.
Additionally, note that the li icon CSS selector you used is not actually a valid selector. There is no actual icon tag in HTML, although many people use the <i> tag as a container for icons.
https://jsfiddle.net/IsenrichO/8t4jhvcs/20/
I have some silly CSS problem. Cant get my navi bar working the way I would want it.
Problem is, that it keeps the arrows under anchor text somehow.
This is example of html:
<ul id="navi">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
and stylesheet:
#navi {
list-style: none;
padding: 0.5em;
}
#navi li {
float: left;
display: inline;
list-style-type: none;
}
#navi li a {
display: block;
font-weight: normal;
font-size: 13px;
color: #222;
padding: 0.2em 1em;
text-decoration: none;
}
#navi li a:hover, #navi li a:active {
background: #5ea0ff;
color: white;
text-decoration: none;
}
#navi li a.selected {
background: #444;
color: white;
text-decoration: none;
}
#navi li:after {
content: "\25B6";
}
#navi li:last-of-type:after {
content: "";
}
This is how it looks like: http://jsfiddle.net/M2AHY/1/
I want the arrows right after anchors, but I can't use a:after (which works good, but hovers with anchor text)
Thanks
This is due to the fact that the element the arrow is appearing after, the anchor tag, is styled with display:block - a property which by itself, will push subsequent content to a new line. If altering this slightly won't be a problem, you could replace the style with:
#navi li a {
display: inline-block;
}
Which allows the arrow to appear on the same line. Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
EDIT: Alternatively, you may apply a float to the anchor tag. For example:
#navi li a {
float:left;
}
This lets you retain the block display, but also allows the arrow to appear on the same line.
A simple approach to resolving this would be:
#navi li a:after {
content: " \25B6";
}
Note that I've added the content after the and put a space in the content. Hope that helps!
I'm trying to do something like file tree. The structure is like that:
<ul class="tree">
<li class="directory">
dir1
<ul>
<li class="file">file1</li>
<li class="file">file2</li>
</ul>
</li>
<li class="file">file3</li>
<li class="file">file4</li>
</ul>
I also used some CSS:
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
It gives me fine effect - I need tree more digged in with every inner directory, and <a> with width from given position to the end of line (tree area has specified width, but it can be scrolled if path or filename is longer then tree area's width). Well, it was ok until now.
But now I have to change it a little and put a "delete" option at the end of line. With it, <a> should end before "delete", so
display:block;
is probably no longer correct. I tried
display: inline-block;
but then, the <a> area ends with the end of file name - and I still need it until the "delete", which should be at the end of line.
The new structure should be like this:
<ul class="tree">
<li class="directory">
dir1Delete
<ul>
<li class="file">file1Delete</li>
<li class="file">file2Delete</li>
</ul>
</li>
<li class="file">file3Delete</li>
<li class="file">file4Delete</li>
</ul>
I don't know what styles or what else should I use to do it the way, I want to. So, could you help me, please?
I had to read your post multiple times to try to get what you were looking for. If I'm reading you correctly, what you want is the first <a> tag to act as a display:block so that when you hover over it the entire width is clickable, but you want the second <a> tag to float to the right on the same line.
I believe that this demo will accomplish what you wish. I changed the order of the anchor links to make it as easy as possible. Also added background colors so you could see what's going on.
<li class="file">DeleteLong Link Name
The CSS required would be:
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
background-color: gold; //so you can see what's happening
}
ul.tree .delete {
background-color: lightgreen; //so you can see what's happening
margin: 0 0 0 5px;
display: inline;
float: right;
}
ul.tree a:hover {
background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
If changing the order of the anchors is out of the question, I could muck around with some more elaborate CSS, but as the complexity of the CSS increases, so do your chances of it breaking in one browser or the other.
EDIT: Based on your reply, I've created some CSS to add an ellipsis (…) when the link text is too long. It requires setting a width on the main <ul>, but from your initial question it sounds like you're doing that anyway. You can see the updated JSFiddle here, and here's the updated CSS:
ul {
width: 333px;
}
ul ul {
width: inherit;
}
a {
overflow: hidden;
text-overflow: ellipsis;
}
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
background-color: gold; //so you can see what's happening
}
ul.tree .delete {
background-color: lightgreen; //so you can see what's happening
margin: 0 0 0 5px;
display: inline;
float: right;
}
ul.tree a:hover {
background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
Original Fiddle | Fiddle with long links
Change the anchor tags to inline block and then float the second one to the right
ul.tree a {
display: inline-block;
}
ul.tree li a:last:child {
float: right;
}
JSfiddle Demo
Have you considered using jQuery Javascript ?
You could use the append() function to add the <a> tags specifically where you need them to appear.
http://www.w3schools.com/jquery/html_append.asp
Adding some float and overflow to css:
ul.tree li {
...
clear: both;
overflow: auto;
}
.delete {
float: right;
}
.tree li a:first-child {
float: left;
}
http://jsfiddle.net/9rxeu/
I have an <ol> with some <li>'s in it, in FF it looks good, but for some reason in IE it looks like this:
HTML:
<ol start="1">
<li>Free gifts click here</li>
<li>Free gifts click here</li>
<li>Bonus gifts</li>
</ol>
CSS:
ol {
list-style: none outside none;
}
li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
}
Any idea?
Thanks,
hasLayout is involved here somewhere it's the cause of <ol>'s not numbering correctly as well as a few other lists oddities, you will need to post more CSS for the list so we can see if there is a workaround for your case, but meanwhile here's code that will reproduce it
ol {
list-style: none outside none;
background: #444;
color: #fff;
}
li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
zoom: 1;
}
the key is to keep hasLayout off the li element, in order to do that you have to make it so IE does not have to do any counting!, in this case the left margin means it's having to count to calculate the width - so if those items inside the list are links, perhaps you could remove the left margin from the li and add padding to the links instead?
definitely need more code for the use case though
Update:
some problems with ordered ;lists aren't curable, and the recommended solution is to wrap the ol in a div and apply any widths and colouring to that, and any heights to nested elements (like internal links) so that the list elements themselves can be left to default
See the lists section on; On Having Layout
Some of these problems cannot be
cured, so when the markers are desired
it's better to avoid layout on lists
and list elements. If it's necessary
to apply some dimension, this is
better applied to other elements: for
example a width can be applied to an
external wrapper, and a height to the
content of each list item.
so bearing this in mind and presuming you list elements do contain links (they do say Click Here ;))
div {
width: 180px;
overflow: hidden;
background: #444;
color: #fff;
}
ol {
padding: 0 0 0 30px;
margin: 0;
}
li {
margin-bottom: 12px;
}
a {
background: #444;
color: #fff;
text-decoration:none;
display: block;
line-height: 30px;
}
a:hover {
color: #444;
background: #fff;
}
with
<div>
<ol start="1">
<li>Free Gifts Click Here</li>
<li>Free gifts click here</li>
<li>Bonus gifts</li>
</ol>
</div>
You may want to try adding the property float: left; to every li:
li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
}
Edit: Also for future reference you may want to make it, just so if you add future rules for li they will not overlap and ol li remains the most specific.
ol li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
}