I'm trying to make two squares overlap eachother in a parent div. The squares are using position:inherit. Please note that the number of squares will be dynamic. Also note that the parent div is using margin-left: 30%. Is this possible?
<div style="border: 1px solid Black; width: 300px; height:300px; margin-left:30%;">
<div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div>
<div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div>
</div>
http://jsfiddle.net/AzYUn/1/
Get rid of the position: inherit; and use position: relative;.
Using the top, right, bottom and left properties you can move an element and making it overlap.
CSS
div.parent {
border: 1px solid black;
margin-left: 30%;
height: 300px;
width: 300px;
}
div.parent > div.box {
height:40px;
width:40px;
border: 1px solid black;
}
div.parent > div.box.overlap {
position: relative;
top: -40px;
}
HTML
<div class="parent">
<div class="box"></div>
<div class="box overlap"></div>
</div>
The only way I can think of is to use other position value - relative or even absolute to reach that goal.
Related
I have a parent div that contains a child that is aligned to the bottom right corner of the parent. The child has text within it that I am trying to get to display correctly.
As it is currently set up, the contents of the child has placed the text to the right side instead of within.
CSS:
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
HTML:
<div class="container">
<div class="gradeTriangle">
$25
</div>
</div>
Fiddle:
http://jsfiddle.net/vh7m8gey/1/
Output:
I am trying to get the $25 to be centered in the black triangle that is on the bottom right of the child.
How should i approach this?
I created a container for the amount with absolute position right 3px and bottom -45px.
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
.amountContainer{
position:absolute;
padding:1%;
bottom:-45px;
right:3px;
}
<div class="container">
<div class="gradeTriangle">
<div class="amountContainer">$25</div>
</div>
</div>
Look at this. You need to insert for example span inside gradeTriangle, and position It using css.
.gradeTriangle span {
position: absolute;
bottom: -40px;
right: 0px;
}
HTML:
<div class="container">
<div class="gradeTriangle">
<span>$25</span>
</div>
</div>
You can easily create the triangle as background of the main container:
.container {
background:
linear-gradient(to bottom right,transparent 49.8%,#000 50%) bottom right/50px 50px no-repeat,
red;
height: 200px;
width: 400px;
position: relative;
}
.gradeTriangle {
bottom: 5px;
right: 5px;
position: absolute;
color: green
}
<div class="container">
<div class="gradeTriangle">
$25
</div>
</div>
Need to add some style to get the design, added the following style for gradeTriangle
.gradeTriangle{
position:absolute;
right:0;
bottom:0;
width: 60px;
height: 60px;
border-bottom: solid 30px black;
border-right: solid 30px black;
box-sizing: border-box;
color:#fff;
border-left: solid 30px transparent;
border-top: solid 30px transparent;
}
please check the sample code.
Im trying to center a box 200 by 200. I have tried using left:50% top:50% etc., but this is somehow not really working.
I created a fiddle to recreate my problem: https://jsfiddle.net/8k9o9Lvv/2/
I also tried to center the text from the top as well, with text-align:center and this is also not working.
Any ideas why this is not working?
HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
CSS
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
right:50%;
}
Just margin:0px auto; is enough
#container {
width: 100%;
}
.slider-text {
text-align: center;
margin:0px auto;
height: 200px;
width: 200px;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
<div id="container">
<div class="slider-text">
<h2>Test
</h2>
</div>
</div>
Give the below code a try, centering the #container div horizontally, and the .slider-text div horizontally and vertically within #container.
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border:1px solid red; /* Creates a border around entire element */
margin: auto; /* Centers horizontally */
}
/* This is to center the text vertically within its parent, */
/* remove it if you don't want to do that */
.slider-text h2 {
text-align:center;
position: absolute; /* position: relative; works too */
width: 100%;
top: 30%;
left: 0%;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Let me know if it helps.
* {
margin: 0;
padding: 0;
}
#container{
position:relative;
width:100%;
height: 100vh;
}
.slider-text {
position: absolute;
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
right:50%;
display: flex;
align-items: center;
justify-content: center;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
You need to set the height of the container. In this case I used 100vh which is equal to 1 viewport height. transform: translateX(-50%) translateY(-50%); with top: 50%; left: 50% will make your .slider-text on center.
To center your text. You can use flexbox. Using display: flex will enable you to use align-items and justify-content. With value of center, it will allow your text to flow on center of its parent.
Your HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Modified CSS
#container{
width:100%;
}
.slider-text {
position:relative;
height:200px;
width: 200px;
border:1px solid red;
margin: 0 auto;
}
.slider-text h2 {
width: 100%;
text-align: center;
}
#container{
width:100%;
position: relative;
}
.slider-text {
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
position: relative;
}
/*since slider-text has a fixed height and width, a simple math would do*/
.slider-text h2 {
margin-top: 90px;
}
<div id ="container">
<div class="slider-text"><h2>Test
</h2></div>
</div>
Just a simple calculation would do
You should set height:100% to all elements down to your container. That means:
html, body, #container
{
height:100%;
}
Then to center horizontaly and verically a known-size div inside your #container, you just need to set for that div:
left:50%;
top:50%;
and
margin-left:(MINUS whatever is the half of your div width)
margin-top:(MINUS whatever is the half of your div height)
UPDATED FIDDLE (sorry forgot to "update" it)
edit: i assumed you want to center it to the whole screen.
Assuming you want to center it both X and Y, you're right so far, however there are a few changes. Use this for your .slider-text class:
.slider-text {
text-align:center;
position:absolute; /* Relative was wrong */
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
Relative positioning was incorrect in this instance. absolute is correct. Relative would make it move X amount of pixels from its natural position, whereas absolute will position it in a specific place, relative to the closest parent with position: relative on it.
The transform basically does the same as negative margins, but you don't need to change the margin if the size of the box changes :)
Let me know if you have any questions.
Here is the css code:
.slider-text {
text-align:center;
position:absolute;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
margin-left:-(div width)/2;
margin-top:-(div height)/2;
I've got this shape made:
https://jsfiddle.net/5vue1buj/1/
However, the way I'm doing this is by inserting:
<br /><br /><br /><br />
in between the top and bottom. How do I do this more elegantly?
Remove all inline styling.
DEMO
HTML
<div>
<div id="top">
<div class="triangle-down-right">
<!--empty-->
</div>
<div class="triangle-down-left">
<!--empty-->
</div>
</div>
<div id="bottom">
<div class="triangle-up-right">
<!--empty-->
</div>
<div class="triangle-up-left">
<!--empty-->
</div>
</div>
</div>
Then add this CSS:
#top, #bottom {
float: none;
overflow: hidden;
}
#top {
margin-bottom: 10px;
}
By using css styles margin/padding you can achieve this.
In your case you have to clear the space between the two containers [top and bottom]. By default div elements are left aligned. I have added an empty divwhich will remove the space in between the two container [using clear:both. height and overflow is added for Cross browser compatibility]
please check this Fiddle.
By using minimal of html and css
You can use only two div and two its psuedo elements :after and :before
.bottom {
position:absolute;
width:210px;
top:180px;
}
.upper {
position:absolute;
width:210px;
top:20px;
}
.upper:before {
content:'';
position:absolute;
left:0;
width: 0;
height: 0;
border-bottom: 100px solid #4679BD;
border-left: 100px solid transparent;
}
.upper:after {
content:'';
position:absolute;
right:0;
width: 0;
height: 0;
border-bottom: 100px solid #4679BD;
border-right: 100px solid transparent;
}
.bottom:before {
content:'';
position:absolute;
left:0;
width: 0;
height: 0;
border-top: 100px solid #4679BD;
border-left: 100px solid transparent;
}
.bottom:after {
content:'';
position:absolute;
right:0;
width: 0;
height: 0;
border-top: 100px solid #4679BD;
border-right: 100px solid transparent;
}
<div class="upper"></div>
<div class="bottom"></div>
Here's another way, with much less CSS...
#top, #bottom {
height: 200px;
position: relative;
}
.right, .left {
height: 0;
width: 0;
display: inline-block;
}
#top {
margin-bottom: 10px;
}
.left {
margin-right: 10px;
}
#top .left {
border-top: 200px solid transparent;
border-right: 200px solid #4679bd;
}
#top .right {
border-top: 200px solid transparent;
border-left: 200px solid #4679bd;
}
#bottom .left {
border-bottom : 200px solid transparent;
border-right: 200px solid #4679bd;
}
#bottom .right {
border-bottom: 200px solid transparent;
border-left: 200px solid #4679bd;
}
<div>
<div id="top">
<div class="left"></div><div class="right"></div>
</div>
<div id="bottom">
<div class="left"></div><div class="right"></div>
</div>
</div>
Just for fun, here another example.
It uses pseudo elements and some new css3 properties to minimize the html markup down to only one div. This div is relatively positioned, but could as well be positioned absolutely for easily placing it wherever you like on the page.
A sophisticated jsfiddle can be found here where you can play around if the values easily (using Sass).
#shape{
position:relative;
background:#4679BD;
width:200px;height:200px;
transform:rotate(45deg);
margin-top:50px;margin-left:50px;
overflow:hidden;
}
#shape::before,#shape::after{
content:"";display:block;
position:absolute;
width:300px;height:10px;
background:white;
transform:rotate(45deg);
transform-origin:5px 5px;
left:-5px;top:-5px;
}
#shape::after{
transform:rotate(-45deg);
bottom:-5px;top:auto;right:-5px;
}
<div id="shape"></div>
Size is easily adjustable by adjusting the width of the pseudo elements like: (dim of shape + 5) * 1,414 and the height determines the gap between the triangles.
I'm stuck here with an easy css problem:
The problem is to align "World" text inside the div element at the bottom right.
Here is a fiddle:
http://fiddle.jshell.net/0p6w3x14/2/
<div id="container">
<div id="tableElement">
<table> <!-- this table needs to be here, it's containing more info -->
<tr>
<td>
Hello
</td>
</tr>
</table>
</div>
<div id="element">
World
</div>
</div>
#container
{
width: 200px;
border: 1px solid black;
}
#tableElement
{
border: 1px solid black;
display: inline-block;
}
table
{
border: 1px solid red;
height: 100px;
}
#element
{
display: inline-block;
float: right;
border: 1px solid green;
}
Update your css like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // add this line
}
#element
{
display: inline-block;
position:absolute; //add this line
bottom:0; //add this line
right:0; //add this line
border: 1px solid green;
}
and remove float:right
Working fiddle here
Check this Fiddle.
I didn't use
float: right
and
display: inline-block
But instead I set a defined width, set its Left property to 100% and then use margin to adapt it to the container
#element{
width: 45px;
top:100%;
left: 100%;
margin-left: -45px;
}
This could be simply done by giving #element the styles position:absolute;, bottom:0; and right:0. And then giving #container the style position:relative; like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // Parent needs relative positioning if child will have absolute positioning
}
#element
{
border: 1px solid green;
position:absolute;
bottom:0;
right:0;
}
JSFiddle Demo
I have a div that is at the bottom of my page. It's CSS is:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
background-color: black;
}
And I have the div's content like on the image:
content html:
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
How do I make for my div's content show up something like this:
I can't use line breaks or tables, because the div's position is fixed, and now I don't know what to do...
Something like this JSFiddle should work.
What we do is apply the background-color to the children of the container div. Then we give them some padding, which creates the space between them. Voila!
HTML:
<div id="news-bottom">
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
CSS:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
}
#news-bottom span span,
#news-bottom span img {
background-color: black;
padding: 5px;
}
If you want fixed position, you can make several divs and change their left property to what you like. You can use % positioning so they look almost the same on different resolutions.
But, I'd recommend using float in a fixed container <div>, and combine with #jmeas suggestion of margins. Something like this:
HTML
<div class='container'>
<div class='arrow'></div>
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='arrow'></div>
</div>
CSS
#container {
...fixed...
}
.arrow {
float:left;
width:10%;
}
.item {
float:left;
margin-left:5px;
width:20%;
}