I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Related
I'm not able to position the dot to the center of the page, does anyone know why? Thanks.
This is my code:
.dot{
height: 10px;
width: 10px;
background: #FFFFFF;
border-radius: 50%;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
<span class="dot"</span>
search up positioning in css, and learn all about it.
Put the code position: absolute;
height: 10px;
width: 10px;
background: red;
color: red;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
add code position: absolute
http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color
Need help on how to put an arrow on each side of a box pointing outward.
I have the box and the basic CSS for an arrow I saw on another stack question.
Need help creating four arrows in that box
Im a java developer so this is not my cup of tea
Box:
#myBox {
width: 150px;
height: 150px;
background-color: grey;
border: 1px solid black;
}
/*Chevron*/
.Chevron {
position: relative;
display: block;
height: 50px;
/*height should be double border*/
}
.Chevron:before,
.Chevron:after {
position: absolute;
display: block;
content: "";
border: 25px solid transparent;
/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before {
top: 0;
border-top-color: #b00;
/*Chevron Color*/
}
.Chevron:after {
top: -50px;
/*adjust thickness*/
border-top-color: #fff;
/*Match background colour*/
}
<div id="myBox"></div>
<i class="Chevron"></i>
Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.
.box {
height: 150px;
width: 150px;
background: lightgray;
position: relative;
}
.wrap {
position: absolute;
top: 0;
left: 25%;
height: 25%;
width: 50%;
overflow: hidden;
}
.touch {
position: absolute;
top: 0;
left: 50%;
height: 200%;
width: 200%;
transform: rotate(45deg);
transform-origin: top left;
background: gray;
cursor: pointer;
}
.wrap:nth-child(2) {
transform: rotate(90deg);
transform-origin: top left;
top: 25%;
left: 100%;
}
.wrap:nth-child(3) {
transform: rotate(180deg);
transform-origin: top left;
top: 100%;
left: 75%;
}
.wrap:nth-child(4) {
transform: rotate(-90deg);
transform-origin: top left;
top: 75%;
left: 0;
}
.touch:hover {
background: tomato;
}
<div class="box">
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
</div>
i have used the nth-child in order to position the arrows correctly. I have also needed to used a wrapper div like in this answer as the border-hack won't work on a hit-test.
Use Css triangle. Do you need something like this?
For each side, use the code below to make a triangle:
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;
Here is a working demo.
I have managed to do this with 3 elements using CSS transforms and positioning. Is that what you were trying to achieve?
.container {
width: 100px;
height: 100px;
background: grey;
position: relative;
}
.container .triangles {
width: 70px;
height: 70px;
background: yellow;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 15px;
}
.container .triangles .box {
width: 50px;
height: 50px;
background: blue;
transform: rotate(-45deg);
position: absolute;
top: 10px;
left: 10px;
color: white;
}
<div class="container">
<div class="triangles">
<div class="box">
text
</div>
</div>
</div>
So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think?
This is the code I currently have:
.container{
position: relative;
height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
}
#round-image{
position: absolute;
left: 35%;
top: 30%;
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
}
I don't see any problem with using absolute positioning in this case, if it meets your needs, it's just okay to use it.
However it seems the third DIV #round-image is not aligned properly at the middle, because of using a mix of absolute length px and percentage for sizing/positioning the box.
Considering the following markup, the issue can be fixed by:
1. using negative margins on on the third DIV.
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
2. Or using calc() function:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
3. Or using CSS transform:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
transform: translate(-50%, -50%); /* vendor prefixes ommited due to brevity */
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
It's worth noting that the two last methods are only supported on IE9+.
You want the circle in the middle I would imagine?
If you don't care for validation then you can simply put center tags and the div you want in the middle between them tags or you can use the "Margin" aspect of CSS to align it in the center
The only thing, I think is in a need of improvement is the way you center positioned the circle element. Giving it 50% absolute positions and half-width negative margins would ensure it would be in a good place whatever the dimensions are.
.container{
position: relative;
height: 700px;
width: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: black;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: grey;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
border-radius: 50%;
background: pink;
}
<div class="container">
<div id="top-div">
</div>
<div id="round-image">
</div>
<div id="bottom-div">
</div>
</div>
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}