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;
}
Related
So, I have a main container that shows like the following:
I want to be able to adapt the parent div to the number of child's it receives. Let's say we remove div2. The result should be something like this:
Instead, the parent div does not stretch to the width of the div child's
Here's my code:
HTML:
<div class="main-container">
<!-- Card container -->
<div class="card-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
</div>
<!-- Footer container -->
<div class="footer">i am a footer</div>
</div>
CSS:
.main-container {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
}
.card-container {
color: #3B3D3D;
height:105px;
float: left;
width: 100%;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
float: left;
width: 100%;
}
.card {
width:100px;
float:left;
}
What am I doing wrong here? I've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.
Any help will be precious.
Thanks in advance.
Try this https://jsfiddle.net/2Lzo9vfc/136/
You can try to remove one .card on click and see what hapens here https://jsfiddle.net/2Lzo9vfc/138/
CSS
.main-container {
position: fixed;
margin: 0 auto;
left: 50%;
bottom: 0;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
display: inline-block;
transform: translateX(-50%);
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
width: 100%;
}
.card {
width:100px;
height:105px;
display: inline-block;
}
HTML
<div class="main-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="footer">i am a footer</div>
</div>
Here you go: http://codepen.io/n3ptun3/pen/PPgWNb
You don't need to use display: inline-block.
I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.
On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.
Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.
Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
}
.card {
width: 100px;
float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.
I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
display: flex;
}
.card {
width: 100px;
// float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
I'm using a pseudo element (before) to put a border on top of a container inside a two column layout. I want the border on top of just one container.
Shouldn't the width of the pseudo element (being set to 100%) make it the width of the container it's inside?
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>
the problem is you are using position:absolute
From MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used
A fix is to add this to your CSS:
.articleWrapper {
position:relative;
}
and change top:0; in .articleWrapper:before to any negative value you like best.
here is a snippet
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper {
position:relative;
}
.articleWrapper:before {
content: "";
position: absolute;
top: -30%;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>
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.
I'm having trouble with a simple layout for a navigation bar. The icons of the bar are supposed to be both horizontally and vertically centred in their cell.
http://jsfiddle.net/digorydoo/j2v5m7gr/
I just can't figure out what's wrong with my layout.
HTML:
<div class="outer-frame">
<div class="nav-frame">
<div class="nav-cell">
<div class="nav-icon">🏠</div>
</div>
<div class="nav-cell">
<div class="nav-icon">💊</div>
</div>
<div class="nav-cell">
<div class="nav-icon">🎫</div>
</div>
</div>
</div>
CSS:
/* box around everything */
.outer-frame {
position: relative;
/* origin for absolute pos'ed children */
margin-left: auto;
margin-right: auto;
margin-bottom: 12pt;
width: 200px;
height: 190px;
border: 1px solid #f0f0f0;
background-color: #fafafa;
}
/* grey area to the left */
.nav-frame {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
width: 36px;
height: 100%;
background-color: grey;
}
/* the outer container of the icon */
.nav-cell {
position: relative;
display: block;
box-sizing: border-box;
width: 36px;
height: 38px;
background-color: yellow;
margin-top: 4px;
}
/* the inner container of the icon */
.nav-icon {
display: block;
background-color: white;
border: 1px solid orange;
width: 8px;
height: 8px;
margin:auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
This is one of the ways to center it vertically and horizontally, you need to position it absolutely, set the margin to auto and all four sides to zero (or an offset, but you need to define it):
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
See it here: http://jsfiddle.net/j2v5m7gr/7/
The icons of the bar are supposed to be both horizontally and vertically centred in their cell.
Here you go: http://jsfiddle.net/j2v5m7gr/10/ The same approach from above.