Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Can anyone help me with this?
I am currently struggling with understanding relative positioning and whether or not it is good practice to use absolute positioning. During my trials, I did this with my code and I am completely unaware of whether or not this code is even doing anything
/* Parent Styling */
.center {
width:333px;
position:relative;
margin-left:auto;
margin-right:auto;
}
Here is my HTML and full CSS as well
/* Parent Styling */
.center {
width: 333px;
position: relative;
margin-left: auto;
margin-right: auto;
}
/* Center 404 Styling */
.c-main-text {
animation: broken 3s;
animation-fill-mode: forwards;
animation-delay: 1s;
width: 333px;
position: absolute;
left: 0px;
right: 0px;
margin-top: 400px;
margin-left: auto;
margin-right: auto;
color: #2B2C30;
font-family: 'Oswald', sans-serif;
font-size: 200px;
}
#keyframes broken {
100% {
transform: rotate(5deg);
margin-top: 410px;
}
}
/* Center Top text Styling */
.c-top-text {
width: 302px;
position: absolute;
left: 0px;
right: 0px;
margin-top: 400px;
margin-left: auto;
margin-right: auto;
color: #2B2C30;
font-family: Helvetica;
font-weight: bold;
font-size: 20px;
}
<div class="center">
<p class="c-top-text">Uh oh... something went wrong!</p>
<p class="c-main-text">404</p>
</div>
I strongly recommend you read this well-written tutorial on Mozilla about position.
Ask for your code, The .c-main-text and c-top-text will adjust their positions base on the .center class because absolute is positioned relative to its closest positioned ancestor which is .center
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
This post was edited and submitted for review 10 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I created an animate Android logo bot using HTML, CSS and JavaScript, which is 100% in place in zoom mode, but by resizing the web page, everything falls apart and disappears.
Although in CSS I used percentages for positions, not pixels
Some tags, such as bot's eyes and ears, were added and removed to reduce the size of the code
body {
display: flex;
}
.hand-leg {
box-sizing: border-box;
position: relative;
width: 25px;
height: 75px;
border-radius: 50px;
background-color: rgb(147, 221, 50);
}
#body {
box-sizing: border-box;
position: relative;
width: 100px;
height: 100px;
top: 40%;
left: 32.2%;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background-color: rgb(147, 221, 50);
}
#head {
box-sizing: border-box;
position: relative;
top: 32%;
left: 25.7%;
width: 100px;
height: 50px;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
background-color: rgb(147, 221, 50);
}
<div class="hand-leg" id="right-hand">
</div>
<div class="hand-leg" id="left-hand" style="transform: rotate(0deg); transition: all 2s ease 0s;">
</div>
<div class="hand-leg" id="right-leg">
</div>
<div class="hand-leg" id="left-leg">
</div>
<div id="body">
</div>
<div id="head">
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm new to front integrations with images.
How could I create one of the two panels in the following picture that would keep texts, buttons and headings at the right position when the user stretches the window ?
I thought about different approaches to accomplish it:
Using a single picture as a background and relatively positioning texts for heading, content and clickable area of the panel as absolute divs.
Or cutting heading, button and panel images and make them divs with their respective background-image and position the div themselves with text inside them.
Here is a picture of the result I would like to achieve:
Images I got:
Full panel:
And I have also the banner, the background and the button separately.
Maybe there's another way to integrate I didn't think about ?
Every approaches is welcome :)
Thanks for your help !
I took your image and added a header, description and a button. The positioning can be done very easily. The container with flex is for the responsive design (the divs wrap). Run code snippet and resize the window to see:
/* Padding: 0; for no padding in the edges */
* {
padding: 0;
}
#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
background: #654321;
}
/*
This content is for the mobile version START
*/
.image {
position: relative;
text-align: center;
margin: 1em;
}
.imageHeader {
position: absolute;
top: 1%;
left: 50%;
transform: translate(-50%, -50%);
}
.imageText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.imageButton {
position: absolute;
left: 50%;
bottom: 1.5%;
font-size: 20px;
background: none;
border: none;
transform: translate(-50%, -50%);
cursor: pointer;
}
img {
height: auto;
}
/*
This content is for the mobile version END
*/
/*
media only screen with min-width for mobile first!
The code below is for the Computer Version!!!
*/
#media only screen and (min-width: 800px) {
.image {
position: relative;
text-align: center;
margin: 1em;
}
.imageHeader {
position: absolute;
top: 3%;
left: 50%;
transform: translate(-50%, -50%);
}
.imageText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.imageButton {
position: absolute;
left: 50%;
bottom: 3.5%;
font-size: 20px;
background: none;
border: none;
transform: translate(-50%, -50%);
cursor: pointer;
}
img {
height: 500px;
}
}
<div id="container">
<div class="image">
<h2 class="imageHeader">Header</h2>
<img src="https://i.stack.imgur.com/vHqR7m.png">
<p class="imageText">Description</p>
<button class="imageButton">Buy $2.99</button>
</div>
<div class="image">
<h2 class="imageHeader">Header</h2>
<img src="https://i.stack.imgur.com/vHqR7m.png">
<p class="imageText">Description</p>
<button class="imageButton">Buy $2.99</button>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I found a nice codepen and started playing with it:
http://codepen.io/georgehastings/full/xgwxgo
The problem is that I can't seem to make the black background-color of my div appear so that the glowing stays BEHIND the div and not ontop of it.
My current situation:
http://codepen.io/anon/pen/xgavRb
What have I done wrong ?
I am looking for an effect similar to this:
http://assets.razerzone.com/eeimages/products/25594/firefly-cloth-tech-bg.jpg
You need to use another element instead of the :after, see this as an example:
body {
background: black;
}
.homeTitle {
z-index: 14;
position: relative;
text-align: center;
color: #252B37;
background-color: black;
color: white;
font-size: 50px;
margin-top: 20vh;
width: 100px;
margin-bottom: 7vh;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: gamers;
border-radius: 20px;
/* animation: textColor 10s ease infinite;*/
}
.homeTitleBack {
position: absolute;
content: "";
left: 40%;
top: 17px;
z-index: -1;
height: 47%;
width: 20%;
margin: auto;
transform: scale(0.75);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background-size: 200% 200%;
animation: animateGlowing 10s ease infinite;
}
#keyframes animateGlowing {
0% {
background: #FF0000;
}
33% {
background: #7e0fff;
}
66% {
background: #0053FF;
}
100% {
background: #FF0000;
}
}
#keyframes textColor {
0% {
color: #7e0fff;
}
50% {
color: #0fffc1;
}
100% {
color: #7e0fff;
}
}
<div class="homeTitleBack"></div>
<div class="homeTitle">Test</div>
z-index of a child element will always be higher than the z-index of its parent, despite what you set in the CSS.
You can use a :before pseudo element in front of the :after pseudo element however.
Just use one div for the effect and another for the black box
<div class ="homeTitle">
<div style="background: black">Test</div>
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I created a burger menu in pure CSS, but the problem is that for some reason it's centred by its left side, not middle. I don't really understand why.
Markup:
<section id="header">
<a href="#menu" class="box-shadow-menu" id="navTrigger">
<div class="navicon">
</div>
</a>
</section>
CSS:
#header {
width: 100%;
height: 45px;
background-color: #4dc1df;
position: fixed;
z-index: 100;
}
.navicon {
position: fixed;
height: 45px;
left: 50%;
margin-left: -17.5px;
}
.box-shadow-menu {
position: relative;
display: block;
height: 45px;
}
.box-shadow-menu:before {
content: "";
position: absolute;
top: 10px;
width: 35px;
height: 4px;
background: white;
box-shadow: 0 10px 0 0 white, 0 20px 0 0 white;
}
Demo: http://jsfiddle.net/jLhnr12p/1/.
Any help to centre this properly would be appreciated!
Your code:
.navicon {
position: fixed;
left: 50%;
right: 50%;
}
You can't center like this, you can do it by setting left property to 50% and setting negative margin-left (half of the navicon which is 17.5px);
.navicon {
left: 50%;
margin-left: -17.5px; // or transform: translateX(-50%);
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have to do the integration of a mockup. But I am wondering if there is a way to do it only in CSS.
We have a (diagonal) triangle section separator, and I don't know how to make them in CSS (except with image or svg). And if this is even possible?
My separator looks like this:
.
(It's a huge rectangle triangle at the top of the section).
I'm speaking of the part at the top of the blue line here:
.
Do you know if it's possible to do it with CSS rules?
And if so, how can I do this?
Something like this should do. Using vw (viewport-width) to span the entire container.
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 100vw;
border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>
You can attach this to a :before pseudo-selector on your container.
You will have to do some work for cross-browser compatibility however. See the caniuse on this for more information and updates on supported browsers.
Here's a CSS3 method:
JSFIDDLE
HTML
<section class="diagonal">
CSS
body {
background: #333;
margin: 0px;
}
section {
position: relative;
margin-top:100px;
}
section:before {
position: absolute;
content:'';
}
.diagonal {
background: teal;
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
Use an absolutely positioned border offset off the top of your container:
https://jsfiddle.net/Levde3kj/1/
HTML:
<div class="container">
<div class="triangle"></div>
</div>
CSS:
.container {
float: left;
width: 400px;
height: 200px;
margin-top: 25px;
background-color: blue;
position: relative;
}
.container .triangle {
position: absolute;
top: -25px;
left: 0;
border-style: solid;
border-width: 0 0 25px 400px;
border-color: transparent transparent blue transparent;
}