I am trying to link buttons using a button tag that is set to show a button made with CSS3.
The button works and display properly in Chrome and Safari but in FireFox the button shows but it doesn't link, it also messes up the style of the page a bit.
I know you use to not be able to use the
The link to the page is here http://pt11.com/index2.php?x=videos.html
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="videos.css" />
</head>
<br>
<div class="vidholder">
<div class="textbox">
<h2>Eythor Bender at TEDMED 2011</h2>
</div>
<div class="textbox2">
Eythor Bender's Ekso Bionics makes powered, wearable robots known as "exoskeletons" that boost human strength, endurance, and mobility. But can they help a paraplegic walk? Watch this incredible story.
</div>
<div class="img">
<img src="ted.png">
</div>
<button type="button" name="" value="" class="css3button">Watch Video</button>
</div>
<br>
</div>
Then the CSS for the button
button.css3button {
padding
margin:-3px 0px 0px 325px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ab0000));
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
Is there a reason that you need the button element? Why not just use
<a class="css3button">
and change your css selector to match. That would apply the styles to the anchor, remove the need for the button element, and it would work in all browsers.
Related
I have 3 elements(p elements) inside a row class ( with col-md-4 each). Now I want to pass a class ( "well" ) on hover, so that whenever mouse hovers they each element can have an individual well class. I can do it without hover but with hover, I am struggling. Can anybody help?
use jquery to apply the class on hover:
$('.myText').mouseenter(function(){
$(this).addClass("well");
});
$('.myText').mouseleave(function(){
$(this).removeClass("well");
});
Use CSS
I would recommend you to do this in CSS alone. All you want is to have the well effect on your p tag when user hovers the mouse on the element. Instead of using Jquery and adding removing the classes its better if you pull out the bootstrap well style definition and use it on your p:hover rule.
The bootstrap definition of well is as below.
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
All you have to do is to add this custom CSS rule in your page
.YourMainDivClass p:hover {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
Here the idea with YourMainDivClass is that your p tag must be a part of div (as understood by your question), And you don't want this effect to work on all the p tags in your page. So to restrict the effect to specific group I have used the parent class in the selector.
Hope this helps!!
You can simply use jQuery's mouseenter and mouseleave functions:
$('p').mouseenter(function() {
$(this).addClass("well");
});
$('p').mouseleave(function() {
$(this).removeClass("well");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Item</p>
</div>
<div class="col-md-4">
<p>Item</p>
</div>
<div class="col-md-4">
<p>Item</p>
</div>
</div>
</div>
Of course you should change the selectors for your needs.
i've tryed making a smooth button with link tag in html and css, can i make so when people hover the button it will not show the link in bottom of the browser? and then when they click i want an option to control if it will open the link in a new tab. And maybe you can improve my button?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Professional Website</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu" type="text/css">
<style type="text/css">
.button {
background-color: #3366FF;
padding: 10px 30px;
border-radius: 5px;
color: lightblue;
font-family: 'Ubuntu', Arial;
font-size: 14px;
text-decoration: none;
}
.button:hover {
background-color: #0066FF;
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
}
.button:active {
border: 1px solid #0033CC;
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<br />
<br />
<center>
<a class="button" href="#">Link Button</a>
</center>
</body>
</html>
Thank you guys.
I dont think you can disable this behaviour as it is part of the browser. What you could do is maybe add a '#' as your href, and have the real link under a data attribute. Then when the button is clicked you redirect the user to said url using your data attribute content.
Now, everything you are asking is not user friendly at all. Removing the ability of the user to see where the link is pointing to, as well as forcing a new tab.
Can i make so when people hover the button it will not show the link in bottom of the browser?
This is a default behavior of the browser, when you hover over a link it shows the destination bottom left for the user. Sadly you can not style this and it will always show when hovering over an anchor tag with a href. Alternatives to this would be to use a form/submit work around or use JS to redirect the user.
When they click i want an option to control if it will open the link in a new tab
You can use the target attribute of an anchor tag and specify _blank which will open the new link in a new tab/window (depending on the setup of the users browser)
<a class="button" href="#" target="_blank">Link Button</a>
Here's how you can do it:
Add the href as a data attribute, like this:
<a class="hiddenurl" data-href="YOUR_URL">LINK_TEXT</a>
then in javascript:
window.onload = function(){
aLinks = document.getElementsByClassName("hiddenurl");
for(var i = 0; i < aLinks.length; i++){
aLinks[i].onclick = function(){
window.location.href = this.dataset.href;
}
}
}
I've got a table and inside of it I'm trying to give each td element rounded corners through css3. This works in Firefox, Chrome, Safari but not Opera and IE9. I just have to make this work for IE9 maybe someone knows what I'm doing wrong. I'm going to give pieces of the code cause there is a lot.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=1024">
</head>
<div class="timeline_page_wrapper">
<div class="wrap">
<table class="events_table">
<tr>
<th id="oct12">October</th>
<th id="nov12">November</th>
<th id="dec12">December</th>
<th id="jan13">January</th>
</tr>
<td class="event fn_milestone fn_healthcare fn_regulation fn_priority_med priority2 ">
<a class="inline-cBox" href="#milestone_3">
<div class="content">Again, Not Very Important</div>
<div class="lower">
<hr>
<span class="date">10.2012</span>
<span class="type">Regulation</span>
<img src="http://policyapp.beamland.com/img/icon-medical.png" alt="" height="21px" />
</div>
</a>
</td>
And the CSS:
td.event {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius:12px;
-o-border-radius:12px;
border-radius: 12px;
-webkit-box-shadow:
0 1px 2px #fff, /*bottom external highlight*/
1px 1px 1px #666, /*side right external shadow*/
inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
box-shadow:
0 1px 2px #fff, /*bottom external highlight*/
1px 1px 1px #666, /*side right external shadow*/
inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
behavior: url('../pie/PIE.htc');
}
When I look at the web inspector for IE9 it shows the borders being applied but dosen't show up. Any help would be greatly appreciated.
I will answer my own question because I didn't give enough of the CSS when I asked the question. Apparently IE 9 does not like you to use gradients and rounded corners at the same time. That was the problem I was having but didn't realize it. So I solved this by just using a solid color and voila the rounded borders appear.
just add
border-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
E9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.
Furthermore: don't forget to declare your IE coding is ie9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
It is not planned for IE8. See the CSS Compatibility page.
I'm trying to make a simple search form on my website and I'm using the input HTML element. But it is acting really weird.
It gets resized by the browser no matter which size I specify in the style. In the example below I've got an input element with the width of 180px, but the browser renders it as 147px. :/
Do you know what could be the problem?
Here's a video example and the code below: http://screencast.com/t/WwqAQDmofhf
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>
The meaning of 'width' depends on the page's box model. Traditionally width has included paddings and borders, but the standard model now excludes them.
If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.
<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>
It's probably to do with:
padding: 6px 27px 6px 6px;
27px of right padding + 6px of left padding + 147px of reported width = 180px
Have you tried it with Javascript turned off in your browser?
Does it happen in this example?
I'm trying to create an input box with two buttons on the left and right. Here's the frankenstein monster I have so far: http://vegan.fm/clone/?p=8679
It should look like the textbox+button here: http://appsumo.com/welcome/?next=/
I've been able to get it to align sort of well, but then it seems to just get jumbled on a different OS or computer.
I've done this by obsessively tweaking the padding and margin values, but my gut tells me there's a better practice. So far, I haven't found anything with a google/stackoverflow search. Any help is appreciated. Thank you.
Update: The problem I'm having is the "height" value for the button and the input box are exactly the same, yet the button is always higher than the input box.
Here's some code:
.halfbutton {
border-top: 1px solid #f0d995;
background: #806a43;
padding: 0px 3px 0px 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43));
background: -moz-linear-gradient(top, #d1ad51, #806a43);
height: 30px;
width:25px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
And for the input box:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... />
</form>
Dunno have i understood the question right.
To make it seems like in your link you need to use background img in your input form;
You may make it look like inset input form with css3
in css
#inputform{
background-color: #f7f7f7;
-moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
-webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
...
}
There's a link in the comments with your code from website;
At the moment, the alignment seems ok to me (in Chrome) but there's no border on the input so it's hard to tell what's going on.
My comment though - right now you have the add'l search options as a dropdown to the left of the input field, then the "more" dropdown with add'l choices attached to the right of the input. I'd argue this doesn't follow the typical user's model of search boxes where immediately to the right of the input is the submit/options button. Maybe move the options button to the right, then float the "more" as a separate button to the right of that (or below).
Just a thought.