How can I do one list of elements (ul with text) in a row and that each element has an icon or an image to its left. Here's an example: list row columns with different icons in css
My main problem is to put the images or icons. I dont know how to make it with an image or an icon different for each element (text) too.
You can either include the icon/image in the list element:
<ul>
<li><img src="icon1.png" alt="icon" /> Text next to icon</li>
<li><img src="icon2.png" alt="icon" /> Text next to icon</li>
</ul>
...or if you're using an icon font like FontAwesome then you can just do:
<ul>
<li><i class="fa fa-desktop"></i> Text next to icon</li>
<li><i class="fa fa-apple"></i> Text next to icon</li>
</ul>
I can agree with Lauri. But this is how you can achive your goal without frameworks by pure css.
<style>
ul {
padding: 0;
}
li {
padding: 0.15em 0 0.5em 1.5em;
margin-bottom: 0.2em;
text-indent: 0.4em;
font-weight: bold;
list-style: none;
background-repeat: no-repeat;
background-size: 10px;
background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR_DztL2nlERHrDWBFIyA5dp9sblqn6zt57uoRB4IbAbymgpFskfg");
}
</style>
<ul>
<li>Text</li>
<li>Text</li>
</ul>
Related
I want to add image/logo inside Nav Bar.
How to make sure that the nav bar height always fit the image and the other elements stay in center.
I am currently using nav bar with Nav-wrapper class from materialize framework.
I have tried to add min-height to nav-wrapper but that make the other elements slide off from the center.
Code pen link
Try like this its working for me
step-01 Im added this class navbar-brand
step-02 Im added this CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 64px;
padding: 0px;
width: auto;
}
.black {
background-color: #111 !important;
}
nav
<nav>
<div class="nav-wrapper black">
<div class="container">
<img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg">
<ul id="Nav2" class="right hide-on-med-and-down">
<li><i class="material-icons">search</i></li>
<li><i class="material-icons right">refresh</i>Link with Left Icon</li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</div>
</nav>
Codepen
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.
Thanks!
JSFIDDLE DEMO
HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and li:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item">Item 1</li>
<li class="lnav_item">Item 2</li>
<li class="lnav_item">Item 3</li>
<li class="lnav_item">Item 4</li>
</ul>
</div>
Also very common to have a tags inside li.
Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
To get rid of a underline use text-decoration: none; and override its default coloring if you wish.
Javascript (jQuery):
It'll be easy to bind clickListener to the items:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
EDIT:
If you want to give each of the navigation items a different style, etc, you can achieve it different ways:
jsfiddle DEMO
You can use CSS' nth-child() selector:
.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}
If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.
$('.lnav_item > a').each(function(index) {
if(index == 0) {
//give it a different onClick, CSS rule, etc
}
//and so on
});
index is zero-based, but nth-child starts from one.
The typical HTML5 markup for a site navigation menu would be a nav element that contains an ul element:
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
If you can get your CSS/JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and/or span elements: they are meaningless, so they don’t change the semantics of your document.
NAV elements are simply LISTS.
You don't need to wrap them in anything.
Here's an example of my own Navigation Panel (I also placed it on the left-hand side of my screen)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>
I am trying to add image/Icon to bootstrap dropdown btn list options HERE
It works somehow but as you can see from the demo and following image the hover function does not reacting (highlighting)on the whole li area!
Can you please let me know how to fix this highlits all width of the li element?
Here is my code as well
CSS:
li.one {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 5px 7px;
width: 60px;
height: 25px;
}
and the HTML
<div class="btn-group">
<button class="btn span2">Select</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="one">Item 1</li>
<li class="two">Item 2</li>
<li class="three">Item 3</li>
<li class="four">Item 4</li>
<li class="five">Item 5</li>
<li class="six">Item 6</li>
<li class="divider"></li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Thanks
Using list item background as an icon is a bad idea since it makes laying on the text really tricky (as you experienced).
I'd definitely encourage you to add a new, separate element for the icons. By convention, icons are added in bootstrap in format <i class="icon-[name]"></i>. If you want custom icons, you can of course define your own classes and related CSS styles.
Here's a quick example:
HTML:
<li class="one"><i class="icon-custom-1"></i>Item 1
CSS:
.icon-custom-1 {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 0px 7px;
width: 60px;
height: 25px;
}
On a related note, you can wildcard all icon-* styles so you don't have to copy&paste the same stuff everywhere:
div[class*='icon-custom-'] {
/* Insert common CSS styles here */
}
Note that I'm using extra custom- to separate this custom icon formatting from icons provided natively by bootstrap.
Happy bootstrapping!
If you're simply looking to have the highlight extend to the right when hovered I would suggest removing the width: 60px; from each of your li.one, li.two etc.
Maybe add some extra margin on your li a selector as well to reduce the overlap.
Overall I would agree with jsalonen that you should look into utilizing the built-in icon code in Bootstrap.
I'm trying to display a grid of items, with each item having a photo on the left and a description on the right, something like this:
----------------------------
| photo | item description |
----------------------------
I want to display these items in a 3x3 grid on the page. I have the grid part worked out, what I'm having trouble with is alignment of the photo and description. When the height of the description exceeds the height of the photo, I don't want the text to wrap under the photo. I essentially want to maintain two separate columns.
I have tried this:
.item{
padding-left: 60px; // size of photo + 5px margin
background-position: 5px 0px;
}
<div class="item" style="background-image: url('/img/photo123.jpg');">
Here is the item description
</div>
That has worked very well. the markup is clean and I don't have to mess around with absolute/relative, however, now I can't add a border to the image. Can anyone suggest a workaround or alternative?
IMHO that is not clean. Those are obviously content relevant images, so they shouldn't be background images.
It usually very simple with floating, but there are several other ways.
CSS:
.item img {
float: left;
}
.item p {
margin-left: 60px; // size of photo + 5px margin
}
HTML:
<div class="item">
<img src='/img/photo123.jpg'> <!-- Add width/height and alt text -->
<p>Here is the item description</p>
<div style="clear:left"></div>
<!-- or any other clearing solution, for example, "clearfix" -->
</div>
Have a look here. You just need to apply min-height on your div.
Why don't you want to use a table? This seems to me to be tabular data (admittedly with the image being a data element), so wouldn't a table would be the obvious choice?
you could use list-elements like so
<ul>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
</ul>
and the CSS
ul {width: 960px; font-family: Arial; font-size: 12px; float: left;}
ul li {width: 80px; height: 180px; padding: 10px; background: #444444; list-style: none; float: left; color: #cccccc; }
ul li.image {width: 180px; height: 180px; padding: 10px; background: #cccccc; margin: 0 20px 20px 0; color: #444444; }