<div>
header
</div>
<div>
sidebar
</div>
<div>
content
<img src="prev.png">
<img src="next.png">
</div>
how do I fix the arrow in the center of the div content to the right and left?
http://jsfiddle.net/shvj40ta/embedded/result/
SOLUTION
The question below helped me understand about override:
How to override "inherited" z-indexes?
I put the z-index in div arrows, not in children divs
With the help of user #justinas I got the solution
http://jsfiddle.net/gislef/3by7r0ek/1/
With css 'position: absolute; top: 50%; margin-top: -(height / 2)';
.wrapper {
background-color: rgba(0, 0, 0, .2);
position: relative;
margin: 10px auto;
height: 200px;
width: 300px;
}
.left,
.right {
width: 0;
height: 0;
border: 20px solid transparent;
position: absolute;
top: 50%;
/* actual height is 40 */
margin-top: -20px;
}
.left {
border-right-color: black;
left: 5px;
}
.right {
border-left-color: black;
right: 5px;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
Related
I have a DIV that I'm using as a "separator".
Requirements:
That separator should be placed on the bottom of the header.
I need that separator to span across the full viewport width.
I need to style it using box-shadow on it.
Problems:
I have an outer Layout DIV that limits everything to max-width = 500px;
My header is not fixed (it's sticky, so it only becomes fixed after some scroll). It starts as relative, so I can absolute position the separator.
I had to make the separator DIV with position: absolute and width: 100vw so make it span the full viewport with.
QUESTION
It works as intended if I use the border-bottom property. It spans the full width of the viewport (1st snippet).
But it doesn't work with box-shadow (nothing is displayed. 2nd snippet). Why? Is it possible to make it work with box-shadow in this situation?
SNIPPET: works with border-bottom
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 3px;
top: 100%;
border-bottom: 1px solid black;
/*box-shadow: 0 4px 3px -3px black;*/
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
SNIPPET: does NOT work with box-shadow
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 3px;
top: 100%;
/*border-bottom: 1px solid black;*/
box-shadow: 0 4px 3px -3px black;
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
The 5-value box-shadow shorthand you're using sets the following properties:
offset-x | offset-y | blur-radius | spread-radius | color
Your spread radius is set to -3px. This diminishes the "height" of the shadow to 0, since the height of your separator is 3px.
The shadow will display if you increase the spread radius. Try this instead:
box-shadow: 0 4px 3px 0px black
Somehow the box-shadow property in that situation need some minimal height render a shadow. I've managed to find a solution. See snippet below.
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 10%;
top: 95%;
/*border-bottom: 1px solid black;*/
box-shadow: 0 4px 3px -3px black;
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
I have 3 elements, #app, #main-section that is inside #app, and #magazine-detail that is inside #main-section.
How can I position #magazine-detail inside of #magazine-section when the #app is set to position: relative; and #magazine-detail is set to position: absolute;?
This is the css:
#app {
position: relative;
height: 100%;
width: 100%;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
}
Entire html is too big so I am posting just a short version, hope you will get the picture:
<div id="app">
...
<div id="main-section">
...
<div id="main-section">
...
</div>
</div>
</div>
I need to position #magazine-detail 30px from the bottom of the main section.
I have tried to position it with position: absolute like it is suggested to do,like this:
#magazine-detail {
position: absolute;
bottom: 30px;
}
But then the element was position somehow 30px from the top and not bottom?
I guess following is yout html
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
Your #app is relative and main-section is absolute with respect to app. The thing is that in css if you set magazine-detail absolute too, it will be positioned with respect to main-section.
Below is a working sample:
#app {
position: relative;
height: 400px;
width: 200px;
padding: 5px;
border: 2px solid red;
}
#main-section {
position: absolute;
height: 80%;
width: 80%;
padding: 5px;
border: 1px solid black;
top: 15px;
left: 15px
}
#magazine-detail {
position: absolute;
width: 50%;
height: 50%;
border: 1px dotted green;
bottom: 30px;
}
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
Try this :
#app {
position: relative;
height: 100%;
width: 100%;
border:1px solid #eee;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
height:400px;
border:1px solid #ccc;
}
#magazine-detail {
position: absolute;
border:1px solid #ff0000;
width:400px;
bottom:30px;
}
HTML :
<div id="app">
<div id="main-section">
<div id="magazine-detail">
This is the test<br>
This is the test<br>
This is the test<br>
This is the test<br>
This is the test
</div>
</div>
</div>
The position absolute position's the elements as per the parent container's position, so in order to make your #main-section and #magazine-detail position absolute, the #app should be positioned relative.
I'm designing my layout for my Pong game and am having trouble with aligning the elements in the bottom of my page so they're all on the same horizontal line. Underneath the playing arena I have my scoreboard, with the instructions to the left, and a Play button to the right, which should all be on the same line next to each other.
The instructions and scoreboard are fine, but for some reason the Play button is place on the bottom right of the inline display, instead of the middle.
Here is a JSfiddle
and my html:
<body>
<div id="back">
<div id="arena">
<div id="paddleL" class="paddle"><div id="hitZoneL"></div></div>
<div id="paddleR" class="paddle"><div id="hitZoneR"></div></div>
<div id="ball"></div>
</div>
<div id="instructions">
<h3> Instructions: </h3>
<h3> Space to launch </h3>
<h3> Buttons: up/down </h3>
</div>
<div id="scoreboard">
<h1> Score </h1>
<h2 id="leftScore"> 0 </h2>
<h2 id="rightScore"> 0 </h2>
</div>
<div id="loginDiv">
<button id="loginButton" onclick="login()">Play!</button>
</div>
</div>
<script src="./app.js"></script>
</body>
and the css:
body {
background-color: rgba(40, 0, 0, 0.2);
}
h2 {
display: inline;
margin-top: 0;
padding-top: 0;
}
#instructions {
position: absolute;
display: inline-block;
left: 100px;
}
#loginDiv {
position: absolute;
display: inline-block;
right: 250px;
}
#loginButton {
margin: 0;
padding: 0;
height: 50px;
width: 80px;
font-size: 30px;
}
#leftScore {
float: left;
margin-left: 10%;
}
#rightScore {
float: right;
margin-right: 10%;
}
#back {
text-align: center;
width: 100vw;
}
#arena {
width: 1200px;
height: 650px;
background-color: rgba(00, 99, 0, 0.2);
border: 2px solid black;
position: relative;
margin: 0 auto;
}
.paddle {
position: absolute;
height: 90px;
width: 20px;
background-color: black;
}
#paddleR {
right: 10px;
border-bottom-right-radius: 40%;
border-top-right-radius: 40%;
}
#paddleL {
left: 10px;
border-bottom-left-radius: 40%;
border-top-left-radius: 40%;
}
#scoreboard {
border: 4px solid black;
border-top: 1px solid black;
width: 400px;
margin: 0 auto;
background-color: rgba(00, 0, 99, 0.2);
overflow: hidden;
}
As you can see if you zoom out, the play button is in this position:
Is there any way to make it go more towards where the black box is in this picture, so its vertically aligned with the middle of the scoreboard?
You're #scoreboard also needs to be an inline-block.
So position:absolute needs to be in relationship to something; right now, it's aligning things in relationship to the body, but you'd probably be better off putting a wrapper div around #instructions #scoreboard and #loginDiv and positioning against that. Once you've created this wrapper div (I've named it #footer in my CodePen, you'll want to update your CSS with the following :
#footer {
/* This assures that the absolutely positioned child elements will base their positioning off of this div */
position:relative;
/* Styles to match #arena */
margin:0 auto;
width: 1200px;
}
#instructions {
position: absolute;
/* Position in relationship to #footer */
top:0;
left: 100px;
}
#loginDiv {
position: absolute;
/* Position in relationship to #footer */
top:40px;
right: 150px;
}
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
Please see JSfiddle:
http://jsfiddle.net/76yKL/
Is there a way to align "ruler-mark-short" and "ruler-mark-high" divs to the bottom and center of their parents("ruler-mark-container") ?
Since width of "ruler-mark-short" and "ruler-mark-high" can be changed dynamically by JavaScript, I can't use 'margin' or 'left' in pixels.
So, I have to use something like "margin: 0 auto" or "text-align: center", but non of this works.
I'm struggling with aligning ruler-marks to both bottom and center without using additional wrapper container.
Any help is appreciated, thanks.
Code From JSfiddle above:
HTML:
<div class="container">
<div class="ruler">
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
</div>
</div>
CSS:
.container {
border: 1px solid grey;
position: absolute;
width: 700px;
height: 200px;
}
.ruler {
border: 1px solid orange;
position: absolute;
width: 100%;
height: 100px;
bottom: 0px;
}
.ruler-mark-container {
border: 1px solid blue;
position: relative;
width: 30px;
height: 100%;
/*display: inline-block;*/
float: left;
bottom: 0px;
}
.ruler-mark-high {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 50px;
}
.ruler-mark-short {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 25px;
}
text-align:center does not work with absolutely positioned elements. So remove absolute position, and format them using display:inline-block.
Without absolute positioning, they won’t be at the bottom any more of course. To fix that, stop floating the container elements, and display them as table-cell instead, and add vertical-align:bottom to both containers and markers.
http://jsfiddle.net/76yKL/7/
You just need to add the following css:
.ruler-mark-short, .ruler-mark-high{
left: 50%;
margin-left: -1.5px;
}
Working Fiddle
UPDATED: (IE9+)
.ruler-mark-short, .ruler-mark-high{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
/* Add other vendor prefixes here */
}
Working Fiddle