I have a button with perfectly rounded corners; meaning, the button is 50px high and the border radius is 25px, making a perfect half-circle on either side of the button:
Achieving this with CSS is easy, provided you already know the height of the button (button height รท 2 = border radius).
But is it possible to maintain the perfectly-circular edges if the button's height increases dynamically (more text is added, for example)?:
Just set the border-radius to something high, like 360px.
div {
height:50px;
width:500px;
background:red;
border-radius:360px;
}
Look at this jsFiddle example to see what I mean.
Related
Hover element - how Can I do something like this in attachment. This triangular as element after or is better way (simple)?
Width is diffrent of each element.
Main problem is in triangular, should I populate width of background? Position left?
Please see http://jsfiddle.net/jachu/AB3wx/
The only way you could do this (with just CSS) is by having a triangular image and when you hover you trigger it to show in CSS.
See this: http://jsfiddle.net/cranavvo/ze8GQ/
10x10 Triangle: http://i.imgur.com/3dxUiTX.png
ul#navigation>li:hover{
background: url('http://i.imgur.com/3dxUiTX.png') no-repeat 100% 100% black;
}
I have a grid of tiles, what I want to be able to do is hover a tile and add a 3px border and keep the tile positioned correctly without disrupting the other tiles around it. At the moment I'm not completely sure how this can be achieved? Can this be achieved using floats or would I have to absolutely position each of the tiles and then increase the z-index of the hovered tile so it stands out above the rest?
Also the tile dimensions have to remain the same and the border has to be outside the tile and not inset.
Fiddle here: http://jsfiddle.net/Z7TwF/
On the :hover selector you need to remove the combined width of the borders:
li:hover{border:3px solid #f00; width: 44px; height: 44px;}
When you add a border to an element, it increases its dimensions. So when you hover the element, removing the combined width of the borders on the dimension attributes will fix the issue.
http://jsfiddle.net/Z7TwF/2/
Another solution is to change the box-sizing method:
li
{
box-sizing: border-box;
}
This in essence tells the browser to calculate the width of the borders in with the width of the element, preventing the offset you had in your original example.
http://jsfiddle.net/Z7TwF/3/
I have the following HTML & CSS: http://jsfiddle.net/j8aFS/1/
When you decrease the window size, the red box and the text expands over the grey area because of the word wrap.
What can I do to prevent this? Can I prevent this?
What I have tried so far:
using the CSS white-space: nowrap; property, but it seems that this
isn't the best solution.
simply leaving space below the red box, but this really influences the design too much.
What I want to achieve: The grey box should grow so the red box never expands over the grey box. The text inside the red box should not be cut off.
What do you want to happen instead?
If you make the gray box position relative and set it's overflow to hidden, the red box gets cut off.
.div1 {
height: 62%;
background-color: grey;
overflow: hidden;
position: relative;
}
DEMO
Unless you specify a set width for the red box, making the window smaller will cause it to get taller and overflow. You can hide it (my solution), let it overflow (current behavior) or not do the position absolute and let it make the gray box bigger. In your question it isn't clear at all what you want it to do.
Updated demo
You could set a width: 180px for your red box
The viewport for smaller screens.
If you would'nt position your box absolute, the box below would float down as well
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.
http://api.jquery.com/width/
http://api.jquery.com/resize/
or check out this stack.
How to dynamically change image/div dimensions based on window size?
Is it possible to hide lower div background fully?
I have two fixed position divs with shadow - semi transparent background so they overlap and become darker.
Is there a way - in Adobe Air - to make the lower div's background fully hidden?
Not sure if this helps or what you mean by "in adobe air" but can you not position the background of the second div to start further down with css eg
.div2 {
background-position: 0 50%;
}
Or you can move it down a set number of pixels maybe.
read more about bg positioning: w3c schools
If you want to hide the seconde div why not use jquery to hide it?
$("div1.class").hide()