I have an issue with some CSS shrinkwrapping. First the (very simple) code...
<!doctype html>
<html lang="en-US">
<head>
<title>Device Activation</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: white;
font-family: "Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
//border: 1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
//display: inline-block;
padding: 0px 10px;
//text-align: justify;
//-moz-border-radius: 40px;
}
</style>
</head>
<body>
<h1>Boogy-woogy</h1>
<div id="start" class="toggleable">
<p>Test</p>
</div>
<script type="text/javascript">
function makeVisible() {
// Not here yet, but that's okay...right?
}
</script>
</body>
</html>
The issue: When you remove the comments from border: 1px solid; the div top and bottom margins will increase significantly.
I have done some research and I understand that this issue relates to collapsing-margins, but I have tried several fixes and nothing seems to effect my end result.
Any help would be greatly appreciated.
i think what you mean is because the p has got default margins and padding. add
p {
margin:0px;
padding:0px;
}
to the css
Maybe your code sample is just a typo.
If not, then please note that with JavaScript comments, you have the options of:
// This is a javascript comment
/* This is a javascript comment as well... */
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments
If you want to make a CSS comment,
you cannot use the // this is a comment snyntax.
You need to use the /* this is a comment */ syntax.
http://www.w3.org/TR/CSS21/syndata.html#comments
Now, when I hide the border: 1px solid line, I do not see the top or bottom margin changing. But I think what was happening with the improper syntax you used in the code in your question, the div was resorting to display: block because the inline-block rule was not being applied. Because inline-block was not being applied, the div stretched to its full width.
http://jsfiddle.net/2f59k/
body {
background: white;
font-family:"Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
/* border: 1px solid;*/
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
display: inline-block;
padding: 0px 10px;
text-align: justify;
-moz-border-radius: 40px;
}
Again, if nothing else is gleaned from this answer,
this is not a CSS comment:
// border: 1px solid;
This is a CSS comment:
/* border: 1px solid; */
UPDATE
This issue has nothing to do with border radius, borders, etc. Your problem, if understood solely as the amount of space above and below the text, yet inside the grey background, is that the margin surrounding the text.
This increase is significant, but not nearly as significant as the change in the width when the div goes between block and inline-block.
Setting the margin of the inner paragraph to margin: 0 resolves the issue.
http://jsfiddle.net/74eTg/
Related
I have managed to remove the tooltip entirely, just to see if it was possible to style this tooltip, in any way. But what I actually need is to position it centred below the choose file button.
The CSS for getting rid of the tool tip was basically this:
input[type="file"] {
display: none;
}
Which basically results in the button looking like this
However, if I remove the css, I am left with this mad button inside of a button mess which includes the tooltip inside the button
To be clear, both the button and the button within the button do the same thing. I am not 100% clear on why it displays like it as this is my first time working with a file upload button which isn't my own code.
Followed by this Codepen you can simply do it like this:
<html>
<style>
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
</style>
<input type="file" class="custom-file-input" />
</html>
Now the question is how it works?
To get the answer know about css ::before selector here
Hope this helps!
JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.
Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn
You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle
Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.
Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle
You can see the code here: http://jsfiddle.net/KfwyL/
I have a div and inside of the div there is an h1. I have the h1 set so that on hover it becomes green. I want to make it so that when the mouse hovers over the h1, the div gets a box shadow. my code is not working.
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css">
<title> Max Pleaner's First Website
</title>
</head>
<body>
<div class="welcomebox">
<h1 class="welcometext">Welcome to my site.
</h1>
</div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>
css:
body {
background-image:url('../images/sharks.jpg');
}
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
Javascript:
welcomeboxshadow = document.getElementsByClass("welcometext");
function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;
The first thing you'll want to do is discover your browser's Dev Tools. On Chrome and IE, press F12, but you can find it somewhere in the menus. The dev tools console reports errors, amongst other things.
Here it would be telling you that getElementsByClass doesn't exist on document. The method is called getElementsByClassName (note the "Name") at the end.
Once past that, you'd find that it would complain that NodeList doesn't have a style property. getElementsByClassName returns a NodeList (a list of nodes, in this case elements). Each of those has a style, but not the list. So you'd have to loop through the list to work with the style of each element.
here is a working version of your code that doesn't use jQuery since I figured you wanted to know how to do this in pure JS...
welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover',
function() {
var topbox = document.getElementsByClassName("welcomebox");
topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
}, false)
I changed the inline style to a class but the concept is the same.
The problems were mostly invalid function names (getElementsByClass*Name*), trying to set properties that didn't exist (topbox.style.box-shadow)
Also you need to remember that function returns a collection, not a single element, so you need to reference it using [0]
Note that I would recommend not using the raw js approach in this
case, I'd prefer to use jQuery as it's much cleaner and once you go beyond anything simple like your code you will be glad you used it
This doesn't use your event listeners, but gives you an idea of how to apply the drop shadow. This uses jQuery.
http://jsfiddle.net/KfwyL/20/
I modified your html since it doesn't want you to use head/body tags.
<div class="welcomebox">
<h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
</h1>
</div>
css:
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
.boxshadow
{
box-shadow: 10px 10px 5px #888888;
}
Here's a working version with a box shadow working correctly without using jQuery:
Live demo
Javascript:
welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)
HTML changes:
<div class="welcomebox" id="welcomeDiv">
<h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>
Im not an expert either, but why not just add:
.welcomebox:hover { box-shadow here }
to your css?
Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?
Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files
#player_container{
display:none;
height:510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
margin-top: -510px;
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
}
On video add a transparent border seems to fix it
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
There is a couple off different way to fix the next part off your question. One quick way is too add another container like
<div style="display: block;" class="gradient sh" id="player_container">
<div class="jquery-youtube-tubeplayer" id="player">
<div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&autohide=1&controls=1&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=0&start=0&theme=dark&color=red&enablejsapi=1&origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
<div class="bottomSpan"></div>
</div>
and put your box shadow on this
.bottomSpan {
box-shadow: 0 10px 5px #888888;
display: block;
height: 17px;
position: absolute;
width: 100%;
}
For me changing the margin on the corresponding < li > would make more sense.
That is because on hover you are adding a border which makes the container 2px bigger
the solution to give the initial class a border
.video {
border: 1px solid #fff
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
Second Problem:
To make z-index work you need to give it a position:relative property
#player_container {
display: none;
height: 510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
z-index: 2;
position: relative;
}
You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.
Some browsers allow you to switch back to the "border-box" box sizing model:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:
-ms-box-sizing: border-box;
(You'd put that on the ".video" style.)
edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.
You really should be using something like Firebug to play with the CSS interactively.
I'm afraid your mixing things up a bit:
Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.
Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)
Add padding to the extra containing div, which also holds the background.
also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width
How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)
Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}
There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.
The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.
Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.
The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.