Is there a way on hover two divs to affect one div different ways?
The best be to know the solution in CSS way, but if there is no CSS way then I am open to JQuery or Javascript way.
For example when I hover over div myData1, then I affect separator to have some style. And when I hover over div myData2, then I affect separator to be in any other unique way.
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData1:hover + #separator{
width: 50px;
heightL 100px;
background-color: #cba;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>
Using jQuery, this would be a solution:
$('.myData1').mouseover(function() {
$('#separator').css('background-color', '#cba');
});
$('.myData1').mouseout(function() {
$('#separator').css('background-color', '#666');
});
$('.myData2').mouseover(function() {
$('#separator').css('background-color', '#dba');
});
$('.myData2').mouseout(function() {
$('#separator').css('background-color', '#666');
});
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>
Just with css:
.wrapper {
position: relative;
}
.myData1 {
width: 50px;
height: 50px;
background-color: #444;
}
#separator {
width: 50px;
height: 100px;
background-color: #666;
position: relative;
top: -50px;
}
.myData2 {
width: 50px;
height: 50px;
background-color: #888;
position: relative;
top: 100px;
}
.myData1:hover ~ #separator {
background-color: #cba;
}
.myData2:hover ~ #separator {
background-color: #cba;
}
<div class="wrapper">
<div class="myData1"></div>
<div class="myData2"></div>
<div id="separator"></div>
</div>
.data{
position : relative;
height:200px;
width:50px;
display:inline-block
}
.myData1{
width: 50px;
height: 50px;
background-color: #444;
display:inline-block;
position:absolute;
top:0px;
}
.myData1:hover + #separator2{
width: 50px;
height: 100px;
background-color: blue;
display:inline-block;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
display:inline-block;
position:absolute;
bottom:0px;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
display:inline-block;
position:absolute;
top:50px;
}
#separator2{
width: 50px;
height: 100px;
background-color: #666;
display:none;
z-index:99999;
position:absolute;
top:50px;
}
<div class="data">
<div class="myData1">
</div>
<div id="separator2"></div>
<div class="myData2">
</div>
<div id="separator"></div>
</div>
Try this
Related
Here is my code:
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
As you can see, div.other_elements is under div.absolute_postion. How can I put that in the bottom of div.absolute_postion?
Give top:0 to .absolute_postion class and margin-top:30px to .other_elements.
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top:0;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
margin-top:30px;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
I see the height of .absolute_postion element is dynamic so you can achieve this with jquery.
You can use height() method to get the pixels of the div and apply margin-top with that value:
var val = $('.absolute_postion').height()
$('.other_elements').css('margin-top', val);
console.log(val)
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top:0;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
Note: Remember add top:0 to absolute_postion div.
Just Adding top margin equal to the height of absolute_position div
.absolute_postion {
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top: 0;
}
.other_elements {
border: 1px solid green;
height: 30px;
width: 100%;
margin-top: 32px;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
The comments button appears once someone adds a comment (ala medium.com). The p tag which holds the text is inside a bootstrap container which goes down the middle of the page. I want to keep my comments button to the right of that p paragraph.
Here's the screenshot of what I have currently.
As I make the page smaller, the button slides to the left eventually going all the way to the left side of the screen. When it comes to absolute and relative positioning I get a bit confused as I haven't worked with it much. I'm hoping you guys can guide me here.
My ultimate goal here is to keep the comments button to the right of the p tag (the paragraph) even while user is making the page smaller horizontally. If the button has to get responsively smaller, that's ok.
Here's the html and css:
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
EDIT: for more information and the html, here's a link to the github components:
https://github.com/milosbunijevac/medRails/tree/master/app/javascript/packs
and to the stylesheet:
https://github.com/milosbunijevac/medRails/blob/master/app/assets/stylesheets/main_control.scss
The only components I really used in this example are Main.jsx and SideComments.jsx
I have 3 suggestions to keep the button to the right of the p tag. But I needed add a div to wrap your 2 divs.
display: inline-block + white-space: nowrap
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
white-space: nowrap;
}
.wrapContainer>div {
display: inline-block;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
display: flex
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
display: flex;
flex-flow: row nowrap;
}
.wrapContainer>div {
flex: 1;
}
.wrapContainer>div + div {
flex: 0;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
You can change the margins and positions, but it maybe is beyond your main problem.
I am struggling with this :
I would like to put a div ( red in my code ) at the bottom of another div.
The div should be stick to the bottom of the parent div.
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
position:relative;
bottom:0;
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
I will appreciate any help from our community.
Thanks.
If you used flex, then use it again and add margins to the button to make it simple:
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
display:flex;/* added */
flex-flow:column;/* added */
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
margin-top:auto;/* added */
margin-bottom:0;/* added */
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<p>paragraph</p>
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
So the idea is to set margin-top:auto to button to push it all the way down, other sides can be having any value.
If you set auto for all 4 sides, then it will stand in the middle of the empty area (demo in snippet below).
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
display:flex;/* added */
flex-flow:column;/* added */
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
margin:auto;/* added */
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<p>paragraph</p>
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
Just set the parent's position to relative, and the child's position to absolute. https://jsfiddle.net/yak613/d43eytfb/
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
position: relative;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
position:absolute;
left: 0;
right: 0;
bottom:0;
background-color: red;
}
To stick an element to bottom of its parent
#elem{
position: absolute:
bottom: 0;
}
But if it is a footer you must set parent height so go to the end screen.
Here is my HTML code
<div id="container">
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
Here is my css code
#container{
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
}
#topright{
width: 50px;
height: 50px;
background-color: black;
position: relative;
top:0px;
right:0px;
}
#topleft{
width: 50px;
height: 50px;
background-color: black;
position:relative;
top:0px;
left:350px;
}
#bottomright{
width: 50px;
height: 50px;
background-color: black;
position: relative;
top:250px;
right:0px;
}
#bottomleft{
width: 50px;
height: 50px;
background-color: black;
position:relative;
top:250px;
left:350px;
}
Here is output
http://s23.postimg.org/dhgy9mpq3/image.png
What I need to obtain, is that all 4 black square to be positioned in the corner of the red square like in this image, what should i change or add in code? THX
http://postimg.org/image/r5kv15l5v/
Add position:relative to #container and position:absolute to inner divs.
You can combine common properties with comma, like
#bottomright,#bottomleft{css properties}
CSS:
#container {
position: relative;
}
#container > div {
width: 50px;
height: 50px;
background-color: black;
position: absolute;
}
#bottomright, #bottomleft {
bottom:0;
}
#topright, #topleft {
top:0;
}
#bottomleft, #topleft {
left:0;
}
#bottomright, #topright {
right:0;
}
DEMO here.
solution
Why your css failed : For bottom aligment, use bottom:0;left:0; instead of top and right....this is correct semantics which otherwise fails the concept of position...also, make child absolute and parents relative!! :)
#container {
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
}
#topright {
width: 50px;
height: 50px;
background-color: black;
position: absolute;
top:0px;
right:0px;
}
#topleft {
width: 50px;
height: 50px;
background-color: black;
position:absolute;
top:0px;
left:0;
}
#bottomright {
width: 50px;
height: 50px;
background-color: black;
position: absolute;
bottom:0;
right:0px;
}
#bottomleft {
width: 50px;
height: 50px;
background-color: black;
position:absolute;
bottom:0;
left:0;
}
Demo
#container{
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
}
#topright{
width: 50px;
height: 50px;
background-color: black;
position: absolute;
top:0px;
right:0px;
}
#topleft{
width: 50px;
height: 50px;
background-color: black;
position:absolute;
top:0px;
left:0;
}
#bottomright{
width: 50px;
height: 50px;
background-color: black;
position: absolute;
bottom:0px;
right:0px;
}
#bottomleft{
width: 50px;
height: 50px;
background-color: black;
position:absolute;
bottom:0;
left:0;
}
Make #container position relative. And div inside that absolute.
full code
#container{
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative; //change
}
#topright{
width: 50px;
height: 50px;
background-color: black;
position: absolute; //change
top:0px;
right:0px;
}
#topleft{
width: 50px;
height: 50px;
background-color: black;
position:absolute; //change
top:0px;
left:0px; //change
}
#bottomright{
width: 50px;
height: 50px;
background-color: black;
position: absolute;
bottom:0px; //change
right:0px;
}
#bottomleft{
width: 50px;
height: 50px;
background-color: black;
position:absolute; //change
bottom:0px; //change
left:0px; //change
}
the following css will work
#container {
background-color: #FF0000;
height: 400px;
margin: 0 auto;
position: relative;
width: 400px;
}
#topleft {
background-color: #000000;
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 50px;
}
#topright {
background-color: #000000;
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 50px;
}
#bottomleft {
background-color: #000000;
height: 50px;
left: 350px;
position: absolute;
top: 350px;
width: 50px;
}
#bottomright {
background-color: #000000;
height: 50px;
left: 0;
position: absolute;
top: 350px;
width: 50px;
}
How do I keep a resizable div from being overlapped by neighboring elements? I changed the z-index of the resizable div to have 1, and the rest 0.
This example will make it clear right away:
http://jsfiddle.net/gALUP/1/
HTML
<div id='grid'>
<div class='outline'>
<div class='container resizable'>
</div>
</div>
<div class='outline'>
<div class='container'>
</div>
</div>
</div>
CSS
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
z-index: 0;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
Remove z-index: 0 from .outline:
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
http://jsfiddle.net/elclanrs/gALUP/2/