This will be a question that is hard to exmplain but please keep an open mind.
My experiment:
I have a div that contains some content and this div is hidden on load.
So now i have an element that when it is clicked shows the content of the div.
What I want:
I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.
My css skills are nothing to brag about and I honestly dont even know where to start.
Image that might clarify:
How do I do this?
If you don't need to support older browsers you can create a triangle with borders like so:
.nav-item::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
obviously would need moving about to fit where you want it.
If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.
try this
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}
Related
This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 7 years ago.
I currently have an hover effect written in CSS:
h2:hover{
background-color: #FFE4B5;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
cursor: pointer;
}
But i noticed that when i hover each of the menu options, the text would move slightly up and then down. I didn't add anything that would cause this? I don't think.. How can i fix this and make them stay in place when hovering?
JSfiddle here
It's the border that's being added and removed that's causing this issue.
Two options: add box-sizing: border-box to the item or add transparent borders to the non-hovered elements.
Example box-sizing:
h2 {
box-sizing: border-box;
}
Example border:
h2 {
border-top: transparent 1px solid;
border-bottom: transparent 1px solid;
}
The movement comes from the border being added and removed on hover. An easy fix is to give the h2 element a transparent border of the same width when it's not being hovered:
h2{
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
This may be overly simple and I'm just missing it, but: I've created a simple random string generator that is constrained to characters used in the creation of Hex codes, then it applies that hex color to the background color of a div. I have also used some stock-css to make the div into a Hexagon. The problem here is I can't figure out how to change the CSS of the div's before and after elements.
I assumed it might be something along these lines:
document.getElementsByClassName('hexagon')[0].style['border-top'] = "25px solid" + randomStr + ";";
But it's coming back as undefined.
My jsfiddle so far: JSFIDDLE
It's not possible. However you could do something like this:
document.getElementsByClassName('hexagon')[0].className = "hexagon new_style";
Then in css:
.new_style:after {
border-top:25px solid #00f;
}
Although this doesn't include randomStr;.
However, if you don't use :after and just make border-top apply to the class, you can do this:
document.getElementsByClassName('new_style')[0].style['border-top'] = "25px solid "+ randomStr+";";
Instead of using peudo-elements you can use regular divs. Define your markup like this:
HTML
<div id="boxBefore" class="hexagonBefore" onclick="getColorHex()"></div>
<div id="box" class="hexagon" onclick="getColorHex()"></div>
<div id="boxAfter" class="hexagonAfter" onclick="getColorHex()"></div>
CSS
.hexagon {
width: 100px;
height: 55px;
background: #000000;
position: relative;
}
.hexagonBefore {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #000000;
}
.hexagonAfter {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #000000;
}
And then simple change the color of all 3 elements:
JavaScript
var colorBox = document.getElementById("box");
colorBox.style.backgroundColor = randomStr;
var colorBoxBefore = document.getElementById("boxBefore");
colorBoxBefore.style.borderBottomColor = randomStr;
var colorBoxAfter = document.getElementById("boxAfter");
colorBoxAfter.style.borderTopColor = randomStr;
Demo: http://jsfiddle.net/2p5qz/6/
LoL, the title has even confused me a little xD Apologies.
I have a fixed element div where once you scroll over it, it follows, simple no problem there.
Now, I'd like to add a simple border to the .div once the div.class is activated by javascript.
Here is an example : http://jsfiddle.net/2ds2y/
once .main.fixed is activated I'd like to add border-bottom: 2px solid #ddd; to the .main div.
I've been reading around but I haven't been able to make this work, I tried the following.
.main.fixed:active ~ .main {
border-bottom: 2px solid #ddd;
}
Just add a border rule to your CSS fixed class:
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid red;
}
jsFiddle example
When the class is applied and the div is fixed, the border will be added.
Ya friend simply add this line to the bottom of the CSS which is applied on .main.fixed
border-bottom: 2px solid #ddd;
like this
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid #ddd;
}
So I've read a few posts on stackoverflow and my site's not reacting very well.
My site: http://funnykittenmemes.com/
You can view the source code and Firebug to see the css and javascript I am using. I'm trying to get the floating bar (below the ad) to stay in fixed position, BUT when a user scrolls down, the bar should stay in place at the top of the pace. So it stays in place only until a user scrolls down.
I'm trying to use this code: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/
No idea what's wrong. Right now, the bar sticks but it sticks in the same position that it was originally on the site (you can see a space above the bar as you scroll down). It doesn't stick to the top of the page.
Apparently, this post is "too localized" so here's the code:
In my header file
(before the end head tag)
<script src="/waypoints/shortcuts/sticky-elements/waypoints-sticky.min.js"></script>
<script src="/waypoints/waypoints.js"></script>
(after the end head tag)
<header class="header-bar">
floating bar code here
</header>
In my footer file
(before the end body tag)
<script type="text/javascript">
$(document).ready(function() {
$('.header-bar').waypoint('sticky');
});
</script>
CSS
header {
height:40px;
background-color: #222222;
padding:0pt;
min-width: 1060px;
height:50px;
border-top: 1px solid #333;
border-bottom:1px solid #000;
box-shadow: #000000;
width: 100%;
z-index: 999;
position: fixed;
}
.header-below {
background-color: #000;
color: #fff;
height: 180px;
border-top: 1px solid #333;
}
.header-bar.stuck {
height:40px;
background-color: #222222;
padding:0pt;
min-width: 1060px;
height:50px;
border-top: 1px solid #333;
border-bottom:1px solid #000;
box-shadow: #000000;
width: 100%;
z-index: 999;
position: fixed;
}
The header-below attribute is for the area below the floating bar.
UPDATE: Got it working.
Changed the .header-bar.stuck css attribute property to this:
.header-bar.stuck {
position:fixed;
top:0;
box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
Moved the scripts to the footer file right above the $(document) code
Removed the "min" from "min.js". Didn't need the "min".
Took me a while to notice but that's what I did. Make sure that the floating bar has a class and is inside the $(document) code. The CSS and javascript have to match up. And make sure you call the right js file in your code. You can take a look at my source code if you need to :)
Changed the .header-bar.stuck css attribute property to this:
.header-bar.stuck {
position:fixed;
top:0;
box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
Moved the scripts to the footer file right above the $(document) code. Removed the "min" from "min.js". Didn't need the "min".
Took me a while to notice but that's what I did. Make sure that the floating bar has a class and is inside the $(document) code. The CSS and javascript have to match up. And make sure you call the right js file in your code. You can take a look at my source code if you need to :)
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.