i have full width slider and i have button on each image with link
but when i apply hover effect on first slider anchor tag its not working while its working for second slider,when i write a:hover{background:blue;} its not working for first slider.
here is my html
<ul class="cbp-bislideshow" id="cbp-bislideshow">
<li style="background-image: url('images/slides/slide1.jpg'); opacity: 1;">
<div class="info">
<h2>The Real Thing</h2> <label>Quality. Beauty. Durability. Only from </label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
<img alt="image01" src="images/slides/slide1.jpg">
</li>
<li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;">
<div class="info">
<h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
<img alt="image02" src="images/slides/slide2.jpg">
</li>
</ul>
i use this slider
http://tympanus.net/Blueprints/BackgroundSlideshow/
try
.info{
z-index:999;
position:relative;
}
Might be because of the order in which you've got your elements.
Try setting the elements out like below. If you're trying to do what I think you are the image will be covering the html above it so the hover effect won't work.
<li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;">
<img alt="image02" src="images/slides/slide2.jpg">
<div class="info">
<h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
</li>
Related
How can I achieve fixed tabs using angular and bootstrap :
Here is my code:
<div #header>
<div *ngIf="loaded; else loading">
<ul ngbNav #nav="ngbNav" [(activeId)]="selectedTab" [destroyOnHide]="false" class="nav-pnb-tabs nav-tabs">
<li [ngbNavItem]="'dashboard'">
<a ngbNavLink>Dashboard</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<dashboard></dashboard>
</div>
</ng-template>
</li>
<li [ngbNavItem]="'policyList'">
<a ngbNavLink>Policy List</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<policy-list></p-policy-list>
</div>
</ng-template>
</li>
<li class="nav-item" [ngbNavItem]="'policysearch'">
<a ngbNavLink>Search</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<policy-search></policy-search>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</div>
I have to keep my tabs fixed while scrolling the content:
When I use: style="position:fixed; width:100%" it is not scrolling the content also.
If I used overflow:scroll on the content div, it is asking for height which if I set it, then my content inside scroll is getting cut after the certain height is reached.
Can you please help me how to achieve Fixed tabs using angular powered with bootstrap?
Thanks.
I created a menu with a href="#" links and it works in all pages of my website but on the page "about it doesnt work and i think its because ive also another "href="#"" funcion in another div.... how can i solve this?
MENU:
<a class="toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
<div class="menu-drawer">
<ul>
<li>Home</li>
<li>About</li>
...
INSIDE OF ABOUT PAGE, I'VE:
<li class="About">
<a href="#">
<img width="347" height="500" src="https://files.cargocollective.com/c791011/dino-a-cores.jpg" class="imgvor wp-post-image" alt="" srcset="https://files.cargocollective.com/c791011/dino-a-cores.jpg 1000w, https://files.cargocollective.com/c791011/dino-a-cores.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" style="width: 347px; height: 500px; left: 402px; top: 280.667px; mix-blend-mode: multiply;">
(the class="about" is one funcion that ive, one picture follow my cursor on about section.)
thank you
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
I'm trying to develop a website with Materialize and there is a slider in site. Materialize is responsive and working well at various resolutions. However, When I decrease the screen size, the slider width is decreasing as well (as it should be). But the image in it just getting cropped instead of scaling it to the size of the slider. I added the responsive-img class to the img but nothing changed.
Slider code
<div class="slider">
<ul class="slides">
<li>
<img src="images/slider/slide_1.jpg">
<div class="caption center-align">
<h3>Eraltek Kurumsal</h3>
<h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
</div>
</li>
<li>
<a href="panoramic/panoramic.html">
<img src="images/slider/slide_2.jpg">
<div class="caption right-align">
<h3>Eraltek Mağaza</h3>
<h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
</div>
</a>
</li>
<li>
<img src="images/slider/slide_3.jpg">
</li>
<li>
<img src="images/slider/slide_4.jpg">
</li>
<li>
<img src="images/slider/slide_5.jpg">
</li>
</ul>
</div>
Try to define in your css file
.slider .slides li img {
background-size:100% auto;
background-repeat: no-repeat;
}
You should try adding a css
max-width : 100%;
to the <img> tag. Hope this will resolve the issue. Also don't forget to add responsive-img class to <img>
Use img-responsive class with img tag.(you are using responsive-img, It is a bootstrap class. It is not working in materialize design)
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Try
.slider li img{max-width:100%;height:auto;}
This is my code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/article-logo.png" alt="img"/></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li><a href="#">COLUMN</li>
<li><a href="#">TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="img/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title-1">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2">
<img src="img/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title-2">Shopify Expert</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
This is my JSfiddle what i tried:
http://jsfiddle.net/u89q6cyz/
Now my page look this:
http://s13.postimg.org/js23ca6nr/Untitled_1_copy.png
Now i need to display the footer-content as i marked in my image in the right side of the image.
I tried all possible ways.. I don't know how to fix..
Can anyone help me?
You have to do two modification in your CSS code.
Remove the margin-left on the following class.
.footer-column2
{
/*margin-left: 112px !important;*/
}
Add width:50% for your footer columns.
.footer-column1,.footer-column2
{
float:left;
width:50%;
}
DEMO