Have a rather simple spoiler code for my website. It has sort of large border radii, which is fine when the element is expanded, but not so much when shrunk. Is there some way I can make the bottom border radii just go to 0px when its shrunk, or is that just not a thing with CSS?
And I would, yes, like it to be a CSS solution. It's no real problem for me to have to shrink the border radius, but y'know, might as well try to not if its possible.
I am not sure how to make the javascript my code uses work on stackoverflow (it just gives me errors), so here is a screenshot of what it looks like expanded.
.panel {
background-color: #F9F9F9;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family:arial;
}
.panel>h3 {
font-size:14px;
background-color:#820D1A;
color:#ededed;
border-bottom:1px solid #000;
text-align:left;
padding:4px;
padding-left:20px;
margin:0px;
border-radius: 21px 21px 0px 0px;
}
.panel>div {
padding:4px;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display:none">(PARAM2)</div>
</div>
.panel {
background-color: #820D1A;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family: arial;
}
.panel>h3 {
font-size:14px;
color:#ededed;
text-align:left;
padding-left:20px;
margin:5px;
}
.panel>div {
padding:4px;
background-color: #FFF;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display: none">(PARAM2)</div>
</div>
Does this look closer to what you are trying to achieve? There were two padding rules on the h3 and I was wondering why you have a background on there as well? Would this not work with your Javascript?
Eh, after messing around I came to the answer that no, it isn't possible. I just resolved to decrease the top border radii by 5 pixels (making them 17px) so that it'd look normal open or closed.
Thank you to everyone who put forth some help, though~
Related
Check it out:
That weird or what?
Here's the CSS:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid gray;
}
How do I lose the holes?
To answer your question...
Yes, that is weird but not that weird.
In terms of fixing it...
Well that depends on the HTML you have there. Assuming (as i have) that its a textarea inside a div with rounded corners then you should be able to use overflow:hidden to ensure the textarea's corners are clipped. EG:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid #333;
background:white;
overflow:hidden; /* <- try adding this */
transform:translateY(100%) scale(3); /* <- nothing to do with the solution - just zooming in so you can see the corner */
}
textarea {
border: none;
background:red;
}
<div class="highlight">
<textarea>
It not that weird
</textarea>
</div>
So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.
I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).
Below is an example of my issue.
http://dabblet.com/gist/3483670
I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.
Thanks for all the help.
Incase the Link does not work for you. See Below.
CSS
a {font: 19px/26px 'Exo',Arial,sans-serif;
list-style: none outside none;
margin: 0 0 0 -10px;
padding: 0 0 58px;
font-weight:100;
text-transform: uppercase;
width: 100%;
text-decoration:none;}
a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}
.triangle { width: 0;
height: 0;
background:no-repeat right center;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid black;
display:inline-block;}
HTML
<span class="plus">+</span> <span>HOME</span><span class="triangle"></span>
You can add
a[rel="catagory"] {
vertical-align:middle;
display:inline-block;
width:auto;
line-height:25px;
}
.triangle {
vertical-align:middle
}
Explanation:
The part which aligns them is
a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}
But anchor's height is 22px, so we need
a[rel="catagory"] {
display:inline-block;
line-height:25px;
}
in order to make the height 25px.
But you have another rule (I wonder why):
a{width:100%}
Before setting display:inline-block the anchor has display:inline, so that rule does nothing.
But now it works and we want to disable it, so we need
a[rel="catagory"] {
width:auto;
}
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}
I am talking about the "Previous" and "Next" post navigation links below the articles on my website, which look like this (below) in all modern browsers (IE > 7)
But in IE6 and IE7, it looks like this
Yes, the rest of my website looks very fine in these browsers as well, and want to get this to work, and without breaking anything else. I see that IE6 and IE7 can have float issues, and that there's a fix as well (a working one, I couldn't find).
This is the HTML code pertaining to the post navigation (mentioned above):
<div class="post-entries">
<div class="nav-prev fl"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</div>
<div class="nav-next fr">LG's Mouse Scanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></div>
<div class="fix"></div>
</div>
and here's the CSS code pertaining to the above:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }
.fl{float: left;}
.fr{float: right;}
.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}
I hope I am clear. Can someone help me out with this?
How about this? Added css:
/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}
Updated fiddle: http://jsfiddle.net/y3MBC/14/
I think if you just add a <div style="clear:left;></div> in between the two divs it will format the way you want. I tested it in ie7 but don't have an effective way of testing for ie6. Here's the updated fiddle: http://jsfiddle.net/D3Jja/
Looks like you haven't specified a width for the div's. Try this:
.fl{float: left; width: 100%}
.fr{float: right; width: 100%}
Also if you plan on using margin/padding add a display: inline to your floated elements to prevent old IE from doubling the amount of margin/padding.
Thanks to #marissa.c for the help, this is the answer...
modify this line:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
to his:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }
And then add this line:
.nav-prev, .nev-next { display:block; width:100%; }
And that fixes the float issues. It now even works in IE6, all credit to #marissa.c