I'm sure this cannot be done with CSS, since all what's inside position: relative will be inside of it. So I was wondering maybe there was a javascript solution.
Basically what I want to achieve is this: http://jsfiddle.net/ZVL8W/3/
But if you wrap it up with relative container and fixed width it won't work like in this: http://jsfiddle.net/ZVL8W/8/
And it must be in relative container, but those two elements must break out from it and work like in first link example. Is this possible somehow maybe with javascript? Note that I cannot remove relative parent container.
try this http://jsfiddle.net/ZVL8W/9/
HTML,BODY {
width: 100%;
height:100%;
margin:0;
padding:0;
}
.container {
position: relative;
width: 100%;
height:100%;
}
.left-box {
width: 100px;
height: 100px;
background-color: red;
display: block;
position:ABSOLUTE;
top:50%;
left:0px;
margin-top:-50px
}
.right-box {
width: 100px;
height: 100px;
background-color: blue;
display: block;
position:absolute;
top:50%;
right:0px;
margin-top:-50px
}
or this http://jsfiddle.net/ZVL8W/10/
.container {
position: relative;
width: 200px;
}
.left-box {
width: 100px;
height: 100px;
background-color: red;
display: block;
position:fixed;
top:50%;
left:0px;
margin-top:-50px
}
.right-box {
width: 100px;
height: 100px;
background-color: blue;
display: block;
position:fixed;
top:50%;
right:0px;
margin-top:-50px
}
Related
So i have a container with a some text and a button after the text. This widget is repeated several times on my screen. Each container is having its height set based on the height of its contents and its a bootstrap column so its width changes as well. My problem is I want the button to always stick to the bottom of its widget, but if I set the position: absolute; bottom:0; right:25%; it is only centered as long as the widgets width doesn't change. Which it does. Any suggestions?
Here's your "flex"able friend in action. I am using some arbitrarily sized divs for illustration purposes:
div {
background: pink;
display: flex;
justify-content: center;
align-items: flex-end;
float: left;
margin-right: 10px
}
#flexDiv1 {
height: 200px;
width: 100px;
}
#flexDiv2 {
height: 300px;
width: 70px;
}
#flexDiv3 {
height: 100px;
width: 200px;
}
<div id="flexDiv1">
link
</div>
<div id="flexDiv2">
link
</div>
<div id="flexDiv3">
link
</div>
Check if this is what you need:
<div class="holder">
<div class='widget-footer'>
<button class="btn-inner">
foo
</button>
</div>
</div>
html, body{
height:100%;
margin:0;
padding:0;
}
.holder{
width: 100%;
height:100%;
/*height: 250px;*/
background: #dedede;
position:relative;
}
.widget-footer{
position:absolute;
bottom:0;
text-align:center;
width:100%;
}
.btn-inner{
margin-bottom: 5px;
}
https://jsfiddle.net/qw54w9j9/2/
Easy:
CSS
#dinamic {
position:relative;
height: 300px;
background: #ddd;
}
.center-bottom {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center
}
HTML
<div id="dinamic">
<div class="center-bottom">
<button>Click-me!</button>
</div>
</div>
https://jsfiddle.net/8pyn4Le4/
How to make that hovering the mouse over the boundary between two elements (here on the vertical line which separates the blue and red)
makes it possible to resize the width of each element?
I'm looking for the behaviour of https://stackedit.io/editor
Is this possible directly with <textarea> resizing possibilities ?
* { margin: 0; border: 0; padding: 0; }
textarea { background-color: red; width: 50%; position: absolute; top:0; left:0; height: 100%; }
#separator { cursor: ew-resize; position: absolute; top:0; width:1%; left:50%; height: 100%; }
#right { background-color: blue; width: 49%; position: absolute; top:0; right:0; height: 100%;}
<textarea>hello</textarea>
<div id="separator"></div>
<div id="right">yo</div>
Sort of like this:
* { margin: 0; border: 0; padding: 0; }
html,body { height: 100% }
textarea { background-color: red; width: 50%; height: 100%; resize: horizontal; min-width: 1px; max-width: 99%; float: left; }
div { background-color: blue; height: 100%}
textarea:active {width: 1px;}
<textarea>hello</textarea>
<div>yo</div>
Note that the textarea:active style is necessary because of an issue with chrome that won't allow an element to be resized less than it's initial width. It's a bad hack to work around it until chrome fixes it.
I'm using a div, and inside that div another div which needs to stick to the parent div.
But when i rescale the browser there's it's not sticking to the right place. Do i need to do this with javascript?
HTML
<div class="block">
White div block
<div class="block-content">
Green div
</div>
</div>
CSS
.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */
}
.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}
The green dot should stick inside the white square.
LIVE DEMO
<div class="block">
<div class="block-content"></div>
</div>
.block {
position: absolute;
background:#fff;
border-radius:10%;
width: 200px;
height: 200px;
padding:50px;
left: 65%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.block-content {
position: absolute;
background: #00A652;
border-radius:50%;
width: 200px;
height: 200px;
}
#media (max-width: 600px) {
.block{
left: 50%;
}
}
Assuming your goal is the image I made this fiddle which mimics what you seem to need.
FIDDLE
HTML:
<div class="block">
<div class="block-content">
Hierzo!
</div>
</div>
CSS:
.block{
position:relative;
margin: 300px 0 0 50%;
width:30%;
height:80px;
background:grey;
border-radius:10px;
}
.block-content{
width:50px;
height:50px;
background:green;
border-radius:50px;
position:absolute;
top:50%;
left:50%;
margin: -25px 0 0 -25px;
}
Hope this helps!
EDIT Added responsive width to .block
I am not able to set overflow: hidden; on div wrapper for this script.
Please look at this js fiddle.
http://jsfiddle.net/CwzAD/1/
My aim is to display 10 cells (200 px in height) on the page and showing only animation within this limit, so to act as a mask.
Any idea what I am doing wrong? Any alternative approach even using JavaScript if with only CSS is not possible?
*{
margin: 0;
padding: 0;
}
#pageset {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 200px;
border: 1px solid rgba(0,255,255,1);
-webkit-box-sizing:border-box;
}
#wrapper {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
background-color: green;
/*overflow: scroll;*/ /* PROBLEM HERE----------------*/
/*height: 200px;*/ /* PROBLEM HERE----------------*/
}
#navigator {
position: absolute;
left: 600px;
}
ul {
list-style: none;
/* margin:0px;
padding:0px;*/
}
li:nth-child(even) {
background: #d80000;
}
li {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0px;
}
.focus {
background-color: yellow !important;
}
.btn {
float: left;
width: 50px;
height: 50px;
border: 2px gray solid;
margin: 10px;
background-color: #f0f0f0 ;
}
.icon {
width: 60px;
height: 60px;
border: 2px gray solid;
margin: 10px;
background-color: #99ff66;
}
Solution here
http://jsfiddle.net/Uz5a9/
Basically, what you need to do is use the #wrapper div as a container, which is only 200px high.
The .content div you generate should then scroll inside that wrapper.
To accomplish this you need to position the wrapper relatively, and then position the content div absolutely inside the wrapper. The wrapper should never move around.
The content can be as high as you want, the wrapper should always stay 200px high.
Check the following fiddle, which demonstrates exactly this: http://jsfiddle.net/Uz5a9/
Try this css it will work fine DEMO HERE
.content {
height:200px;
overflow:hidden
}
Just apply these additional rules to #wrapper:
#wrapper { max-height: 200px; overflow: hidden; }
and it seems to work just as described.
I have a problem with a <a> tag on hover function.
<a href='#' onClick='javascript:showPrev();'class='prev'> </a>
The problem is in CSS code. If I set background-color in both a{} and a:hover{} the image will be visible. Otherwise, if there is no background-color or set to none, the image wont show on hover.
Here is my CSS
a.next {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 534px;
top: 0px;
width: 266px;
height: 600px;
display: inline;
}
a.prev {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 0px;
float:left;
top: 0px;
width: 266px;
height: 600px;
display: inline;
}
#slideshow a.next:hover {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 534px;
top: 0px;
width: 266px;
height: 600px;
display: inline;
background:url(../images/next.png) 90% 65% no-repeat;
}
#slideshow a.prev:hover {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 0px;
float:left;
top: 0px;
width: 266px;
height: 600px;
display: inline;
background:url(../images/prev.png) 10% 65% no-repeat;
}
Does anybody know what might be the problem? Thanks in advance.
There does seem to be some weird IE issue that means the a tags remain behind the image unless you set a background property, and I can't work out why at the moment...
BUT...
You can get around this by copying your background attributes from the :hover states to the 'normal' a states, and then adding a large negative background position, so they are effectively hidden until they are hovered over, e.g.:
a.next {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 534px;
top: 0px;
width: 266px;
height: 600px;
display: inline;
background:url(../images/next.png) 90% -1000% no-repeat;
}
This should work
You have a \ just before #slideshow a.next:hover{ it's probably messing up IE's effort at parsing your CSS