What is the simplest way to fade my 3 images into grayscale when hovered upon. This is for my footer.
Here is my html code:
<ul class="review-icons">
<li><a href="http://www.tripadvisor.ca/Restaurant_Review-g154943-d708757-Reviews-Balilicious-Vancouver_British_Columbia.html" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-trip-advisor.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
<li><a href="http://www.urbanspoon.com/r/14/181587/restaurant/South-Cambie-Street/Balilicious-Modern-Indonesian-Vancouver" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-urban-spoon.jpg" alt="Urbanspoon" height="26" width="26">
</a>
</li>
<li><a href=http://www.yelp.ca/biz/balilicious-modern-indonesian-vancouver?nb=1" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-yelp.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
</ul>
my CSS so far:
ul.review-icons > li {
display: inline;
list-style: none;
margin: 15px;
top: 5px;
position: relative;
}
what it looks like in fiddle:
http://jsfiddle.net/FLBRG/2/
** extra - is it possible for the grayscale to scroll in from bottom to top
Plz n Thx
One easy way (but depends on your background color being white):
ul.review-icons > li:hover {
opacity: 0.5;
}
Related
I have found a nested dropdown example for Materialize 0.98 but it's not working for Materialize 1.00. How would I port it over?
Working example with v0.98 -
https://gist.github.com/the0neyouseek/f1a92b9b8f8962a372c23ef415c63144
I tried to follow the upgrade guide but couldn't get it to work.
Dropdown
Removed gutter option
Removed stopPropagation option
Call plugin on .dropdown-content instead of .dropdown-button
Change attribute data-activates to data-target
Rename classes .dropdown-button to .dropdown-trigger
Rename option belowOrigin to coverTrigger
Removed automatic initialization, initialize it manually as shown in documentation
Please replace data-activates attribute with data-target.
<a class='dropdown-button btn' href='#' data-target='dropdown1' data-beloworigin="true">Nested DropDown</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a class='dropdown-button' href='#' data-target='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">▸</span></a></li>
<li>two</li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li>one</li>
<li><a class='dropdown-button' href="#" data-target="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">▸</span></a></li>
<li>three</li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
Materialize changed this attribute in version 1.0 .
Have a look at Materialize Dropdown Doc.
Try this solution.
.dropdown-content > li {
position: relative;
}
.dropdown-content li .dropdown-content {
position: absolute;
left: 0 !important;
top: 0 !important;
}
https://codepen.io/FOOGLES/pen/LYYdQeK i hope this help you or other people with the same problem.
nested dropdown its not supported in mat v1 so we need to do some tricks, you need to activate the nested dropdowns with hover, so in matv1 you have to use {
hover: true } in the dropdown selector with Jquery,later with some CSS you make the second and third dropdown take position to the right with left:-100%; or left:100%; if you want the dropdown take left position, i comment the three common options in the CSS.
HTML:
<a class='dropdown-trigger btn' href='#' data-target='dropdown1' >Menu</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li>uno</li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2' >uno*</a></li>
<li>uno</li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li>dos</li>
<li>dos</li>
<li>dos</li>
<li>dos</li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3" >dos*</a></li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li>tres</li>
<li>tres</li>
<li>tres</li>
<li>tres</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.dropdown-nested {
overflow-y: visible;
}
.dropdown-content .dropdown-content {
/* left: 100%;*/ /*drop hacia la izquierda*/
left: -100%; /*drop hacia la derecha*/
/* left: auto;*/ /*drop hacia el centro*/
}
.container {
background: #eee;
padding: 200px 100px;
border-radius: 8px;
}
$('.dropdown-trigger').dropdown();
$('.sub').dropdown(
{
hover:true
}
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 using the rtMedia plugin to display a masonry gallery with images uploaded by users. My question is: how can I add space between the images to distribute them evenly inside the ul? When I add margin, the li elements aren't displayed next to each other anymore (the third one appears in the next row). But when I add padding the div inside the li appears larger than the rest.
I added the following CSS code to resize the li elements automatically.
.rtmedia-container {
display: table;
width: 100%;
}
.rtmedia-container ul {
display: table-row;
}
.rtmedia-container ul li {
display: table-cell;
max-width: 33%;
}
<div class="rtmedia-container">
<div id="rtm-gallery-title-container">...</div>
<ul class="rtmedia-list">
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a"> ... </a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a"> ... </a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a"> ... </a>
</li>
</ul>
</div>
I just noticed that the gallery is overlaping the div (rtm-gallery-title-container) in every browser except for Firefox. Does someone know how to solve this problem?
I also had to add "position: relative" to the div .rtmedia-container, because the gallery hasn't been displayed on the right position in other browsers.
You can use border-collapse:separate + border-spacing
Snippet
.rtmedia-container {
display: table;
width: 100%;
table-layout: fixed; /* optional */
border-collapse: separate;
border-spacing: 5px;
/*demo */
border: 1px dashed red
}
.rtmedia-container ul {
display: table-row;
}
.rtmedia-container ul li {
display: table-cell;
width: 33%;
}
.rtmedia-container ul li img {
max-width: 100%;
height:auto;
display:block
}
<div class="rtmedia-container">
<ul class="rtmedia-list">
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a">
<img src="//lorempixel.com/700/300" />
</a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a">
<img src="//lorempixel.com/700/300" />
</a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a">
<img src="//lorempixel.com/700/300" />
</a>
</li>
</ul>
</div>
I am trying to make a simple responsive webpage and for that i need some way to resolve my issue -
Now when i resize the window and see
Now what i want is that this logo not to fload downwards but, stay there and scroll with the rest of the body.
Here is my html
<ul id="gn-menu" class="gn-menu-main" style="z-index:99">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li><a class="gn-icon gn-icon-download">Home</a></li>
<li><a class="gn-icon gn-icon-cog">Us</a></li>
<li><a class="gn-icon gn-icon-download">MSR Scenes</a></li>
<li><a class="gn-icon gn-icon-cog">Literature</a></li>
<li><a class="gn-icon gn-icon-help">Music</a></li>
<li><a class="gn-icon gn-icon-cog">Food</a></li>
<li><a class="gn-icon gn-icon-download">Gaming</a></li>
<li><a class="gn-icon gn-icon-cog">Sci-Tech</a></li>
<li><a class="gn-icon gn-icon-help">Horoscopes</a></li>
<li><a class="gn-icon gn-icon-cog">Art</a></li>
<li><a class="gn-icon gn-icon-download">Comic</a></li>
<li><a class="gn-icon gn-icon-cog">Sports</a></li>
<li><a class="gn-icon gn-icon-help">Pop Culture</a></li>
<li><a class="gn-icon gn-icon-download">Free Advice</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li style="position:relative"><img src="images/logo_01.jpg" width="230" height="90" style="z-index:-1" class="logo" ></li>
<li><a id="us" >Us</a></li>
<li><a id="home" ><span>Home</span></a></li>
</ul>
and the list styling is as follows -
.gn-menu-main > li {
display: block;
float: right;
height: 100%;
border-right: 1px solid #c6d0da;
text-align: center;
}
.gn-menu-main > li:nth-child(1) {
float: left;
border-right: none;
border-left: 1px solid #c6d0da;
}
.gn-menu-main > li:nth-child(2) {
float: left;
border-right: none;
border-left: 1px solid #c6d0da;
}
You can set the min-width property of the entire menu.
#gn-menu {
min-width: 300px;
}
jsFiddle Demo
i think you should change the logo image size using media query to fit it in the same place in small screen and you may also need to change the font size , padding etc with media query if you want to fit the menu in small screen size
.img{
width:100px;height:100px;
}
#media screen and(max-width:480px)
{
.img{
width:50px;
height:50px;
}
}
this is happening because when you are resizing your browser your img size is getting too large to fit in the same line
Does it need to overhang? If you don't mind keeping it inline, you could do: max-height: 100%; width: auto; which would keep it inside the bounds of the menu bar.
Pretty simple nut I'm trying to crack. I'm doing image rollovers with CSS only. When I plugged in my a href link, it just does not work. By not work I mean, it does not act like it's a link and as a result you cannon click through to the page. Figuring it has something to do with the <li> but I can't figure out what. Here's my HTML and CSS:
CSS
ul.navigation,
ul.navigation ul {
margin: 25px 0 0 0;
}
ul.navigation li {
list-style-type: none;
margin:15px;
}
.AboutUsNav{
display: block;
width: 159px;
height: 54px;
background: url('../images/N_About_Us.png') bottom;
text-indent: -99999px;
}
.AboutUsNav:hover {
background-position: 0 0;
}
HTML
<div>
<ul class="navigation">
<li class="AboutUsNav">About Phin & Phebes Ice Cream</li>
<li class="FlavorsNav">Ice Cream Flavors</li>
<li class="WheretoBuyNav">Where to Buy Our Ice Cream</li>
<li class="WholesaleNav">Wholesale Orders Ice Cream</li>
<li class="ContactUsNav">Contact Phin & Phebes Ice Cream</li>
<li>about</li>
</ul>
</div>
Your .AboutUsNav has text-indent: -99999px;, pulling the a outside of the clickable viewport.
You probably want to put the negative text-indent on the a itself, and then set the a element to display: block; width: 100%; height: 100%, depending on your circumstances.
don't apply the text-indent and background to the list - do it to the link instead.
Example:
<div id="main_nav">
<li class="home">
Home
</li>
<li class="news">
News
</li>
</div>
CSS:
#main_nav a {
background-image:url();
}
#main_nav .home a {
width: 82px;
background-position: 0px 0px;
}
#main_nav .news a {
width: 85px;
background-position: 82px 0px;
}
thank you for your help. I tried the approach you both recommended. I think this definitely works under certain circumstances. For me, my background image just wasn't showing up but the links were working.
I ended up solving this problem by leaving the CSS the same but changing the HTML markup as so:
<div>
<ul class="navigation">
<li><a class="AboutUsNav" href="/about">About Phin & Phebes Ice Cream</a></li>
<li><a class="FlavorsNav" href="/flavors">Phin & Phebes Flavors</a></li>
<li><a class="WheretoBuyNav" href="/buy">Where to Buy Phin & Phebes Ice Cream</a></li>
<li><a class="WholesaleNav" href="/wholesale">Wholesale Orders Ice Creamf</a></li>
<li><a class="ContactUsNav" href="/contact">Contact Phin & Phebes Ice Cream</a></li>
</ul>
I was working off this demo, which didn't include an unordered list: http://kyleschaeffer.com/best-practices/pure-css-image-hover/