CSS positioning, need some advice - javascript

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;
}

Related

CSS styling, how to make this button stay on the right side and be responsive

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.

CSS hover over two different elements and affect one same element

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

Centering div vertically and horizontally

Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.

Width of div taking all remaining width

I am trying to put a top bar on the right of my left menu.
I put width: 100% of my #top_bar but there is so big. I would like that my top bar take only the remaining space of the screen.
HTML:
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
CSS:
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
height: 70px;
width: 100%;
}
Result:
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
top: 0px;
left: 200px;
right: 0px;
height: 70px;
}
You can use the margin left for the large div
CSS :
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
background-color: red;
margin-left: 200px;
height: 70px;
}
HTML :
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
Working Demo
Just add this to your css:
body {
margin: 0;
width: 100%;
overflow: hidden;
}
Try to use a 100% width container around your elements.
<div class="container">
<div id="menu_left">
</div>
<div id="top_bar">
NAVIGATION
</div>
</div>
See this pen I just created: http://codepen.io/anon/pen/MwodLx
Maybe this? You could only change width: 100% to right: 0. Also float: left is unnecessary.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
right: 0;
height: 70px;
}
<div id="menu_left"></div>
<div id="top_bar"></div>

CSS Layout nested div's weird behavior

I have a webpage im trying to layout and it current looks like this.
http://imgur.com/zu4OXHu
I want the purple box to be inline w/ the pink box in the yellow box, which is in the green box. When i change the display field in css to inline-block for the two the whole green box moves down to bottom of grey box w/ height = to yellow box. Why is this happening?
CSS
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
background-image: url('../images/6.png');
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
}
div.card.1 {
background-image: url('../images/1.png');
}
div.card.2 {
background-image: url('../images/2.png');
}
div.card.3 {
background-image: url('../images/3.png');
}
div.card.4 {
background-image: url('../images/4.png');
}
div.card.5 {
background-image: url('../images/5.png');
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/coup.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/file.js"></script>
</head>
<body>
<div> Image </div>
<div id="this" class="localPlayer">
<div id="card1" class="card 1"></div>
<div id="card2" class="card 2"></div>
<div id="status" class="status">
<div id="coinStatus" class="coinStatus">
<div class="coin"></div>
<div id="numberOfCoins" class="coinInfo"></div>
</div>
</div>
</div>
</body>
</html>
inline-block elements default alignment is vertical-align:bottom. So that it is going down to bottom. Apply vertical-align:top for your inline block elements. Hopefully it will fix the issue.
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}
Please check this " adding float: left might fix this
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 400px;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
float:left;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
float:left;
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}

Categories