I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}
Related
So I know there are multiple ways to center a child element. This is a purely theoretical question. I am just wondering if there are any other ways to center an element.
I created an overview of the multiple techniques for centering elements at the bottom of this post. The problem is based on the first example.
gif-reference of the question
overview of the solutions already provided:
figure {
position: relative;
width: 23vw;
height: 23vw;
overflow: hidden;
margin: 0 auto;
}
.optie0 img {
width: 150%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.optie1 img {
position: absolute;
width: 150%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.optie2 img {
width: 120%;
position: absolute;
left: -50%;
right: -50%;
top: -50%;
bottom: -50%;
margin: auto;
}
.optie3 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.optie3 img {
width: 150%;
}
.optie4 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.optie5 {
display: grid;
grid-template-rows: 23vw;
grid-template-columns: 23vw;
}
.optie5 img {
width: 120%;
justify-self: center;
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>problem:</p>
<figure class="optie0">
<img
src="https://images.unsplash.com/photo-1606225472150-0b700e620ef5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="flower"
/>
</figure>
<p>solution1:</p>
<figure class="optie1">
<img
src="https://images.unsplash.com/photo-1606225472150-0b700e620ef5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="flower"
/>
</figure>
<p>solution2:</p>
<figure class="optie2">
<img
src="https://images.unsplash.com/photo-1606273789302-5ca427ba2253?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
alt="cart"
/>
</figure>
<p>solution3:</p>
<figure class="optie3">
<img
src="https://images.unsplash.com/photo-1606156114499-f44bbb400363?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80"
alt="cart"
/>
</figure>
<p>solution4:</p>
<figure class="optie4">
<img
src="https://images.unsplash.com/photo-1606038188414-ab55f710a8b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="cart"
/>
</figure>
<p>solution5:</p>
<figure class="optie5">
<img
src="https://images.unsplash.com/photo-1606252255805-c4fab737286b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="cart"
/>
</figure>
</body>
</html>
EDIT:
Where it is possible to determine the width of the child element. As you can see in the video reference. The code of the first example works in all direction but only when you scale the child bigger as it's parent. It is not able to center horizontal.
PLEASE: IF there is a solution to the question, don't provide one of the other solution already in my example. I understand how it works. I like the first solution and it works great in all directions except for going left if the child is bigger than it's parent.
using 0px wide absolute parent element and display: flex;
.parent{
width: 100px;
height:100px;
margin: auto;
border: 1px solid;
position: relative;
}
.container{
position:absolute;
top:10px;
left: 50%;
width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.content{
border: 1px solid;
padding:20px;
white-space: nowrap;
background: rgba(100,100,100,0.4);
}
<div class="parent">
<div class="container">
<div class="content">
Your content of text or image.
</div>
</div>
</div>
Old-fashioned way wit transform -50%.
<div class="a">
Wrapper
<div class="b">
Centered
</div>
</div>
.a {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
margin: 300px auto;
}
.b {
position: absolute;
height: 300px;
width: 300px;
border: 1px solid blue;
color: blue;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
Example: https://codepen.io/vovchisko/pen/BaLBGEZ
Just update the container css class with this.
You'll get the required component working efficiently.
.container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
display: flex;
align-items: center;
justify-content: center;
}
Is it possible to center (horizontally) an absolute element that is
bigger than its parent without using negative values?
Yes. But you don't need to use position: absolute.
You can straightforwardly achieve this effect by adding:
display: flex
justify-content: center
to the smaller parent container.
Working Example:
body {
display: flex;
justify-content: center;
}
.smaller {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 180px;
height:180px;
background-color: rgb(213, 35, 30);
border-radius: 50%;
box-shadow: 0 0 12px rgb(255, 0, 0);
}
.smaller::before {
content: '';
position: absolute;
top: 30px;
left: 30px;
display: block;
width: 120px;
height: 120px;
background-color: rgb(255, 255, 255);
border-radius: 50%;
}
.longer {
z-index: 6;
height: 36px;
padding: 8px;
color: rgb(255, 255, 255);
line-height: 36px;
text-align: center;
font-size: 32px;
font-weight: 700;
font-family: sans-serif;
text-transform: uppercase;
background-color: rgb(0, 24, 163);
}
<div class="smaller">
<div class="longer">Underground</div>
</div>
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
Ok I am trying to build a website design. What I need to do is have two colored background divs and then float a white box in front of them. I have used z-index 0 for the background blocks and then z-index 5 for the block I want to float on top. I have also used position: relative. Does anyone know why this doesn't work. Here is my code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="white_box_outer">
float on top
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
min-width: 320px;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
position: relative;
z-index: 0;
}
#grey_block_left
{
width: 40%;
background-color: #333333;
min-height: 700px;
float: left;
position: relative;
z-index: 0;
}
#purple_block_right
{
width: 60%;
background-color: #9966cc;
min-height: 700px;
float: left;
position: relative;
z-index: 0;
}
#footer
{
width: 100%;
background-color: #111111;
min-height: 250px;
float: left;
position: relative;
z-index: 0;
}
#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: relative;
z-index: 5;
float: left;
background-color: #ccc;
}
#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}
Set your white_box position to absolute and then adjust it's height and width, according to your goals.
I can't seem to get my footer div to go to the bottom. It is always at the bottom of my container div but my container div is always height:0. I tried setting overflow to hidden in the container div but the height was still 0 and it made all my other divs dissapear. What is wrong? Here is my css and html.
Thanks.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body background="images/bg.png">
<div id="contentcontainer">
<div id="header">
<img src="images/banner.png" />
</div>
<div id="nav">
</div>
<div id="form">
<!--This is where the form goes-->
</div>
<div id="content">
<!--This is where the content goes-->
</div>
<div id="submission"></div>
<div id="footer">
<p id="footertext">Copyright © 2013 me.com. All rights reserved.</p>
</div>
</div>
</body>
</html>
CSS:
#charset"utf-8";
/* CSS Document */
#submission {
width:500px;
height:175px;
position:absolute;
left:320px;
top:225px;
}
#header {
width: 820px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
}
#nav {
width: 820px;
height: 50px;
position: absolute;
left: 0px;
top: 150px;
}
#form {
background-color: #FFFFFF;
width: 820px;
height: 175px;
position: absolute;
left: 0px;
top: 200px;
border-bottom: 1px;
border-bottom-color: #666666;
border-bottom-style: dashed;
}
#content {
border: hidden;
background-color: #FFFFFF;
width: 820px;
position: absolute;
left: 0%;
top: 376px;
min-height: 1200px;
height: auto;
}
#footer {
background-color: #666666;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}
#footertext {
color: #FFF;
text-align: center;
position: absolute;
}
#contentcontainer {
height: 100%;
width: 820px;
position: relative;
top: -10px;
background-color: #FFF;
left: 20%;
}
The height of your container div is zero because all of the children are positioned as absolute. If you could achieve the same without absolute positioning, you'll notice that the container div actually takes some space.
Its not a good idea to make everything absolutely positioned.
I've scoured StackOverflow for an answer, but nothing I've tried has worked.
I have a container div with three inner divs stacked vertically with varying heights. When my browser window is maximized, it looks fine. When I make the window smaller and scroll right horizontally, there is a section of white space. How can I get rid of it? Thank you all in advance!
body {
min-width: 100%;
}
div#outer {
display: block;
position: absolute;
min-width: 100%;
}
div#top {
left: 0;
top: 0;
height: 100px;
width: 100%;
position: relative;
display: block;
}
div#middle {
left: 0;
top: 0;
height: 600px;
width: 100%;
position: relative;
display: block;
}
div#bottom {
left: 0;
top: 0;
height: auto;
width: 100%;
position: relative;
display: block;
}
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="big">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</body>
In the body, there are some default margins. You can remove everything like this:
body {
min-width: 100%;
margin: 0;
padding: 0;
}
If you only want the sides' margin removed:
body {
min-width: 100%;
margin-left: 0;
margin-right: 0;
}
Does that work?
html,body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}