I'm trying to center both horizontally and vertically a text block above an image. I've reviewed other posts but they don't seem to resolve my problem.
Here's the code:
<body>
<div id="top-of-page">
<img src="images/etudes.png">
<div id="text-block">
<h1>Title</h1>
</div>
</div>
#haut-de-page {
position: relative;
margin: 10px;
}
#top-of-page img {
width: 100%;
}
#text-block {
position: absolute;
top: 5px;
margin: 0 auto;
background-color: rgba(0, 0, 0, .5);
color: white;
padding-top: 20px;
padding-left: 20px;
}
Even though I've set the div "text-block" position:absolute the text keeps appearing under the image.
Do you have ideas ?
Try This:
.image {
position: relative;
width: max-content;
height: max-content;
}
#text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: rgba(0, 0, 0, .5);
color: white;
}
<div id="top-of-page">
<div class="image">
<img src="https://www.mooreseal.com/wp-content/uploads/2013/11/dummy-image-square.jpg">
<div id="text-block">
<h1>Title</h1>
</div>
</div>
</div>
Related
I want to place a button on a border of a div that is clipped through the clip-path property. i have been able to clip the border but can't seem to place the button on the curved border. i have tried everything but can't seem to figure it out. Any help would be appreciated. Thanks in advance. I have posted the code below. Please check it out! Thanks.
.learningSection {
width: 100%;
height: auto;
background: linear-gradient(90deg, #6a0bf5 -0.87%, #2461ed 100%);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
padding: 65px;
}
.freeTrialBtn {
width: 217px;
height: 35px;
background: #11ee92;
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
border-radius: 25px;
align-items: center;
border: 0;
}
#media only screen and (max-width: 490px)
.learningSection {
content: "";
position: relative;
clip-path: ellipse(400px 100% at top);
}
<div class="learningSection">
<div class="learningSectionTextandBtn">
<h1 class="learningHeading">Start Learning</h1>
<p class="learningText">
Learn 12 different languages in just ten minutes a day.
</p>
<form action="/enternumber" id="enternumber" method="POST">
<input type="hidden" name="pckg" id="daily" value="jazz-sku-1-day" />
<button class="freeTrialBtn" style="margin-top: 20px;">
<p style="text-align:center;margin: 0;">Start Free Trial!</p>
</button>
</form></div>
I want the result the image to be like this
but the result is this
I hope you know what you are doing with Clip-path but remember that clip-path , CLIPS all its container so every element will get removed so you can't use elements on its border because they will get clipped so you need to use another container to use elements on it. Here is the code with clip-path.
body {
margin: 0;
padding: 0;
}
.container {
background-color: green;
width: auto;
position: relative;
height: 450px;
}
.parent {
width: 100%;
height: 420px;
overflow: hidden;
position:relative;
margin:0 auto;
clip-path: ellipse(1000px 100% at top);
}
.backgroundContainer {
width: 100vw;
height: 500px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
}
.content {
background-color:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
width: 50vw;
}
.btn {
position:absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="parent">
<div class="backgroundContainer"></div>
<div class="content">
<p>Lorem</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
<button class="btn">Click Me</button>
</div>
hope i explained it well
I did it without the clip-path so if you must use clip-path you can change some of it .
i used the border-radius and position absolute to make a backGround and then placed the button where i wanted it
body {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 420px;
overflow: hidden;
position:relative;
background-color:yellow;
}
.backgroundContainer {
width: 120vw;
height: 400px;
background-color: blue;
position: absolute;
left: -10%;
top: 0;
border-radius: 0% 0% 50% 50%;
}
.content {
background-color:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
width: 50vw;
}
.btn {
position:absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="backgroundContainer">
</div>
<div class="content">
<p>Lorem</p>
<p>Lorem, ipsum dolor.</p>
</div>
<button class="btn">Click Me</button>
</div>
I made my text over my image correctly, but the problem is I can't figure out how to make the text in its fixed place without moving when resizing the window.
Here is my code:
img {
height: 100%;
width: 100%;
box-shadow: 0 0 10px black;
}
h1 {
font-family: 'Courier', monospace;
font-size: 1rem;
}
.container {
height: 100vh;
width: 50vh;
position: relative;
text-align: center;
}
.firstName {
position: absolute;
top: 0;
left: 3em;
}
.secName {
position: absolute;
top: 1em;
left: 5em;
color: rgb(200,0,0);
}
<div class="container">
<img src="https://i.pinimg.com/564x/ee/84/e5/ee84e597b90f4b6d827f4c73506e700d.jpg">
<div class="firstName">
<h1>Eren</h1>
</div>
<div class="secName">
<h1>Yeager</h1>
</div>
</div>
You see, when you resize the window the text pop out from the image box.
To make your text linked to the specified position on the image you may set text positioning in percentage. Here is the way that can solve it:
img {
height: 100%;
width: 100%;
box-shadow: 0 0 10px black;
}
h1 {
font-family: 'Courier', monospace;
font-size: 1rem;
}
.container {
height: 100vh;
width: 50vh;
position: relative;
text-align: center;
}
.firstName {
position: absolute;
top: 0;
left: 40%;
transform: translateX(-50%);
}
.secName {
position: absolute;
top: 1em;
left: 60%;
transform: translateX(-50%);
color: rgb(200,0,0);
}
<div class="container">
<img src="https://i.pinimg.com/564x/ee/84/e5/ee84e597b90f4b6d827f4c73506e700d.jpg">
<div class="firstName">
<h1>Eren</h1>
</div>
<div class="secName">
<h1>Yeager</h1>
</div>
</div>
I have two div the container to create an overlay 100% in the screen and the second one in the center of the screen whit some text.
I want that when the page is resized the text stay in the center of the screen. I showing and hiding the container on some event.
#container
{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100%;
width: 100%;
z-index: 999;
position: absolute;
}
#text
{
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
}
<div id="container">
<div id="text">some text here</div>
</div>
If you are looking for vertical align purpose. Go for display: table property
#container {
background-color: rgba(0, 0, 0, 1);
display: table;
height: 100%;
width: 100%;
position: absolute;
}
#text {
text-align: center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
}
<div id="container">
<div id="text">some text here</div>
</div>
Here your code..
HTML:
<div id="container">
<div id="text">some text here</div>
</div>
CSS
#container
{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100vh;
width: 100vw;
z-index: 999;
position: absolute;
}
#text
{
font:10px;
color:white;
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
}
Jquery:
$("body").click(function(){
$("#container").css("display","block");
});
#text {
position: absolute;
display: inline;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="text">some text here</div>
</div>
set position to 'absolute' and then left and top to 50% to locate div center of screen.
(if you don't want to locate div center of screen vertically then remove top: 50%).
then your div's left top corner will be center of browser.
To locate center of screen exactly move the div left the amount of half of its size and move to top half of its height.
Use display flex property.
#container{
display:flex;
align-items: center;
height:100%;
}
#text{
width:100%;
text-align:center;
}
Hope it'll help you out.
Hope this helps you.
jQuery(document).ready(function($) {
$("button").click(function(event) {
$("#container").show();
});
});
#container{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100%;
width: 100%;
z-index: 999;
position: absolute;
}
#text{
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="container">
<div id="text">some text here</div>
</div>
<button>Show popup</button>
Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.
Does anyone see why this isn't placing correctly?
This is the problematic code:
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
header {
width: 100%;
max-width: 100%;
height: 100px;
position: relative;
border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
width: 90%;
height: 100%;
margin: auto 5%;
}
#header-logo {
width: 200px;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-buttons {
width: 30px;
height: auto;
float: right;
margin: 30px 40px 0 50px;
cursor: pointer;
}
.header-buttons:first-child {
margin-right: 0;
}
#pending-order-button {
position: relative;
}
#pending-button-notification {
border-radius: 15px;
background: #09afdf;
height: 25px;
width: 25px;
position: absolute;
color: #FFF;
font-size: 1.3rem;
top: 5px;
left: 5px;
text-align: center;
}
<header>
<div id="header-wrap">
Logo
<img src="images/menu.png" class="header-buttons" alt="Pending Orders">
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
</div>
</header>
It's your float:right on .header-buttons which is causing the problem.
I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.
#pending-order-button {
position: relative;
float:right;
}
<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>