I am trying to make a menu with images only. Can anyone tell me how I should markup this in the most semantic way possible? My best guess would be like this:
HTML
<ul>
<li></li>
</ul>
CSS
.menu {width: 40px; height: 40px}
#home {background: url('...')
EDIT: The query is because Ineed to use empty <a> tags or alternatively I can put the <img> tag within the <a> tags.
First, if you are willing to respect HTML5 semantics, your menu should be wraped in a <nav> tag.
Second, the alt="" should be replaced by a title="" attribute on the <a> tag (MDN for more info)
Third, you should use the <img> tag with the alt="" attribute so you can add more semantic context.
Your menu could look like this:
<nav>
<ul>
<li><img src="" alt="" /></li>
... OTHER LINKS ...
</ul>
</nav>
You can use Font-Awesome icons instead of images.
They are light and easy to load while image taking time to load and you can apply CSS on those icon same as text.
http://fortawesome.github.io/Font-Awesome/icons/
for e.g.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul>
<li><i class="fa fa-home"></i></li>
</ul>
But for using font-awsome icons you have to include font-awsome CSS and fonts to your directory.
Related
Is there a way to achieve the solution to following problem:
I have a carousel markup and it follows the same HTML structure as mentioned below.
<div>
// Contains the carousel slide
<div>
<ul>
<li><img src={....} /></li>
<li><img src={....} /></li>
<li><img src={....} /></li>
</ul>
</div>
// Container for arrows
<div class="carousel-arrows">
<button class="carousel-arrow"> < </button> // left arrow
<button class="carousel-arrow"> > </button> // right arrow
</div>
// Container for pagination
<ul class="carousel_pagination">
<li></li>
<li></li>
<li></li>
<ul>
</div>
Since the library, I'm using for the carousel follows this exact HTML structure I am unable to place the ul (pagination bullets) in between the left and right arrows.
I have tried using the position property as absolute to place the ul (pagination bullets) in between the arrows by setting a fixed width of carousel-arrows div, separating them with space-between and then placing ul in between them but I want the carousel-arrows width to be dynamic such that it can adjust based on increasing or decreasing number of bullets in ul.
When the bullets in pagination are less, then the width of the carousel-arrow should adjust itself accordingly and vice versa.
Is there a way to solve this using scss?
You can not do that with SCSS alone I'm afraid. position:absolute removes the element from the normal document flow, and no space is created for it in the page layout. As far as .carousel-arrows is concerned, .carousel_pagination does not exist from a layout perspective.
You would need to use JavaScript to solve your problem, basing the width of .carousel-arrows on the width of .carousel_pagination.
I'm new with css completely, thanks god there have many articles on the net, just like "CSS for IBM Notes and Domino XPages Developers", but I'm still confused with it, now go to the problem I meet, I didn't use my own create theme but the native bootstrap4 theme
here is my code (part of)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
yes...i used Knut's idea about the badge,thanks for that~ Knut
html code(part of):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
and this is what I want to show to user:
basically, I need this image float right always, that means I need add css myself, as I said beginning I have no idea with it although I read many people's article, and try this on my code, the interesting thing is it worked with below css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 update....yes, that's the media="print" thing...I used this css file before, but never try to remove it....How am I so stupid...thanks you guys help...and one more thing for me to do....reinstall my system....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:final update, I think I found the problem is...I removed not only media="print",but also tags...and everything go to the peace....
.xspNavigator .nav-item img {
float:right;
}
I know it works because ".xspNavigator .nav-item img", the strange thing is if I remove the #applicationLayout1 , it will be back like this, just no effect with css anymore...I really really can't understand why....
so...what's my css file problem? thanks
Remove media="print" from the STYLE tag.
Remove the media="print" part because it tells the browser to only use the CSS when printing.
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I am having an issue with IE positioning for li items position:absolute; . The structure works fine in all other browsers like this:
HTML
<div class="container">
<div class="container-nav">
<ul class="nav">
<a href="#">
<li id="an-item">Hi</li>
</a>
<ul>
</div>
<div>
All parent containers are position:relative and work fine in other browsers. In IE with this format the items start the positioning relative to outside the container. The only way I got it to be right is adding position:absolute; to the <a> tag. When I do this though it throws off all the other browsers. Any way to fix this? Should I use conditional CSS or is that not a standard anymore?
you can't put an anchor tag inside a ul IE doesn't allow that other browser are way friendly with some invalid HTML structure but not the case with IE what you can do is the following :
<div class="container">
<div class="container-nav">
<ul class="nav">
<li id="an-item">Hi</li>
<ul>
</div>
<div>
put your anchor tag inside the li
I'm trying to find out how to change the icon of a JStree node using only css?
There are a lot of posts explaining on doing it with javascript but i prefer to use css only.
Here's my code so far:
$("#treeview").jstree().on('loaded.jstree', function()
{
$("#treeview").jstree('open_all');
});
And the Html:
<div id="treeview">
<ul>
<li>
abcdefghijkl
<ul>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&pagina=dashboard&id=6',false);">
Beneden</a>
</li>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&pagina=dashboard&id=7',false);">
Boven</a>
</li>
</ul>
</li>
</ul>
</div>
For CSS i'm using the default style sheet delivered by jstree. The documentation provided by jstree is really crappy. So stackoverflow is a big help, but i couldn't find this one on the website.
If you need more code or information, please ask. Thanks
You just have to include this in the CSS:
a .jstree-icon
{
background-image: url("yourimage.png")!important;
background-position: 0!important;
}
This is a fiddle working correctly (updated 2016):