I'm trying to display with css the navigation buttons that are located inside my jquery rotating banner.
Which are:
<a class="ls-nav-prev" href="#"></a>
<a class="ls-nav-next" href="#"></a>
For some reason I can't show them, I've tried changing their position, setting a z-index, adding a background-image and color.
Here's the website:
http://npmaudiovisual.com/esde/
This is what I have:
This is what I should have (buttons on corners)
You need some room for them on the page or they will be hidden.
Also there is no text or image within the DIVs.
a class="ls-nav-prev" href="#" style="float:left;">Prev</a>
<a class="ls-nav-next" href="#" style="float:right;">Next</a>
Firstly, your CSS for the following:
<a class="ls-nav-prev" href="#"></a>
<a class="ls-nav-next" href="#"></a>
in layerslider.css just has
.ls-nav-prev,
.ls-nav-next {
outline: none;
}
This does not generate any image or content. How are you testing it?
Secondly, separate the classes and add positioning properties:
.ls-nav-prev {
left:-35px
position:absolute
top:200px
}
.ls-nav-next {
left:935px
position:absolute
top:200px
}
You can play around with the left and top property values to suit your needs.
Related
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
I want to add an anchor symbol to my url when mouse hover in angular. Here is my code,
<a ng-click="download(File)"><img src="images/filePic.png"/>{{filename}}</a>
Like this maybe
⚓ {{filename}}
<a ng-click="download(File)">⚓ <img src="images/filePic.png"/>{{filename}}</a>
Update using CSS hover
a:hover:after {
content: ' \2693'
}
<a ng-click="download(File)"><img src="http://placehold.it/15x15"/> some filename</a>
Update 2 using CSS hover cursor
a:hover {
cursor: url('https://onedrive.live.com/download?resid=EC849DFEDB797EB9!1066&authkey=!AEmDTZM6b8_Ies0&ithint=file%2ccur'),auto;
}
<a ng-click="download(File)"><img src="http://placehold.it/15x15"/> some filename</a>
<br><br>
Note there is a small delay (first time hovering) from OneDrive before the anchor shows
I have a button:
<div id="cta">
<a href="#" class="btn btn-lg">
Who are we?
</a>
</div>
#cta {
margin-left:35%;
position:absolute;
z-index:1;
}
#cta a{
border-radius:100px;
border-color:#FFF;
border-width:thick;
background-color:#ff8900;
font-size:1.75vw;
}
http://codepen.io/anon/pen/elcEi
(sorry no bootstrap on codepen)
And I'd like to adjust the position of the text inside, and the height of the button (which changes with size of text).
I have messed with paddings, margins, heights, aligns, vertical-aligns, line-heights, + all these in negatives.
Any ideas?
Also, Bootstrap has additional styles for aligning text in an element, such as text-center or text-right.
P.S. Was wondering why you surrounded the button with a div. To could just as the cta class to the button itself.
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}
I have 10 country flags on my company's website (VS 2010/vb/asp.net4.0). Clicking a flag will display the website in that country's language for their entire session.
I would like to, when the client hovers over the flag, have a mini-picture of that country hover above and to the right of the flag. So when they click on the German flag, a mini-map of Germany appears to the upper right -- and I'll z-index it so it goes above the table row above it -- and in addition to the image, it'll say something like, "Deutch" or "View this website in German" (in German, of course).
**Images of countries here when hovering**
Flag1 Flag2 Flag3 Flag4 Flag5 Flag6 Flag7 Flag8
For someone like me who's not great at CSS, is this possible, and if so, how would I go about doing it? Any guidance would be greatly appreciated!
suppose you are using a list
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}
you can add extra css to do the positioning in the .map bit!
This is pretty simple to do with just CSS, Javascript isn't required at all. There are lots of details, but the basic pattern is to put your images inside the same element as the flag. Let's call it .flag. Set the country images to display:none;. Then, set the .flag:hover img to display:block;. That will make the image appear only when hovering on the flag.
You'll have to set the position of the flag element to relative, and the position of the country image to absolute. That will allow you to set the top and right positions of the image to where you want.
I would recommend using jquery as that will allow you to get the display of the image/text when you hover. CSS will be used to position and format image or text.
Here is a good reference to start with.
http://api.jquery.com/mouseover/
You can do it in CSS but if you need animations you need JS. Here is the code for the one without the anims.
HTML
</ul>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
.
.
.
</ul>
CSS
.item {
position:relative; /*Needed for pos:absolute below*/
}
.pic {
display:none;
}
.item:hover pic {
display:block;
position:absolute;
top:-20px;
}
I've created a fiddle for you - http://jsfiddle.net/UHZzJ/
You can substitute the list with <div>'s as well or as your structure requries. The line which says 'View this website in German' needs to be in a sub-div adjacent to the link and be absolutely positioned to the parent <div>.
Forgot to add, a li:hover will not work in IE6. Only a:hover is allowed for. In that case you'll have to put the div within the <a> (setting the display:block). If you're open to JQuery, there are more elegant solutions - http://flowplayer.org/tools/tooltip/index.html, http://craigsworks.com/projects/qtip/