I want to create a footer where in the upper part there is a semi circle on the center with a logo inside of it. I have my sample code here, but the problem with it is that the logo is bound on the height of the footer div.
html,
body,
.container,
.content {
height: 100%;
}
.container,
.content {
position: relative;
}
.proper-content {
position: absolute;
padding-top: 40px;
/* >= navbar height */
}
.wrapper {
position: absolute;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
/* same as the footer */
}
.push {
height: 100px;
/* same as the footer */
}
.footer-logo {
height: 200px;
width: 100%;
position: absolute;
background-image: url("gaslogo.png");
background-position: 10% 100%;
z-index: 999;
}
.footer-wrapper {
position: relative;
height: 200px;
background-color: red;
}
.halfCircleBottom {
position: relative;
height: 100px;
width: 250px;
border-radius: 0 0 100px 100px;
-moz-border-radius: 0 0 100px 100px;
-webkit-border-radius: 0 0 100px 100px;
background: white;
}
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="logo"></div>
<div class="wrapper"></div>
<div class="push"></div>
</div>
<div class="footer-logo">dsad</div>
<div class="footer-wrapper">
<footer>
<center>
<div class="halfCircleBottom"></div>
</center>
</footer>
</div>
I used a :before pseudo element with background image for the circle.
.footer {
background: crimson;
height: 100px;
margin-top: 100px;
text-align: center;
}
.footer:before {
content: "";
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background: crimson url("https://i.stack.imgur.com/Fogjj.jpg") center / cover;
border: 10px solid white;
border-radius: 50%;
box-sizing: border-box;
margin-top: -50px;
}
<footer class="footer"></footer>
I accomplished what you need this way:
Changed your HTML a bit:
<div class="footer-wrap">
<div class="halfCircleBottom">
<img src="insert your image with the same width as the parent div"/>
</div>
<footer>
<center>
</center>
</footer>
</div><!--end footer wreap-->
Then added and changed one of your css declarations:
footer {
background: black;
height: 100px;
}
.halfCircleBottom{
position: absolute;
height: 250px;
width: 250px;
border-radius: 50%;
background: white;
left: 50%;
transform: translate(-50%, -72%);
}
Try this
HTML:
<div class="content">content</div>
<div class="footer"></div>
CSS:
.content{
height: 200px;
text-align: center;
background: #fff;
}
.footer{
height: 100px;
background: #cf9f3f;
position: relative;
text-align: center;
}
.footer:before{
content: '';
width: 100px;
text-align: center;
height: 100px;
border-radius: 50%;
background: #cf9f3f;
border: 4px solid #fff;
position: absolute;
left: 0;
right: 0;
margin: -52px auto 0;
}
Example: https://jsfiddle.net/vc4mvwd2/
Related
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I'm trying to do a container with rounded corners, basically it will have a rounded corner on the top-left of the header(red) and then it should have it on the bottom left of the view that we have....
so what it is hard for me is the following:
the bottom border should be rounded if it is the end of the page
the border should keep straight if it isn't the end of the page.
so what I have is the following, if you see this example, the bottom left corner is rounded because the content (yellow) is not bigger than 100% therefore we show the rounded corner and also we complete the view so the corner is stick to the bottom.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 30px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
the problem is when the content is bigger than the main as you can see, it will always be rounded as the following example and the height of the content is larger than the main so it should continue the line and show the corner only if the user scrolls down
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 900px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I also did some test using the rounder corner on the content, but if the content is smaller it will show the rounded corner in the wrong place.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
overflow-x: hidden;
border: 1px solid violet;
}
.content {
height: 90px;
width: 100%;
background: white;
border-bottom-left-radius: 10px;
border: 1px solid red;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I'm not the best at scss(clearly :P) so I would appreciate your help.
is there a way to achieve this with only css or should I just use javascript?
I have a webpage with following structure:
div: (app)
div: (navbar)
div: (wrapper) {position: relative}
div: (intro)
div: (content) {position: absolute}
div: (footer)
where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.
I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.
I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
position: relative;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
/* align-items: center;
justify-content: center;
display: flex;*/
}
.content {
position: absolute;
top: 250px;
width: 94%;
right: 3%;
left: 3%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 960px;
margin: auto;
min-height: 800px;
background-color: gray;
}
.footer {
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content
Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).
Updated: .contentto span width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
}
.content {
margin: -250px auto auto;
width: 94%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 906px;
min-height: 800px;
background-color: gray;
}
.footer {
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
delete your content min-height. is that what you need?
So I have this code:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
width: 200px;
height: 200px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
background: red;
}
.img-circular1{
background-image: url('/Images/learn.jpg');
}
.img-circular2{
background-image: url('/Images/watch.jpg');
}
.img-circular3{
background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px;
position: relative;
margin-left:auto;
margin-right:auto;
width:70%;
background-color: green;
overflow: auto;
bottom: 0;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>
I have no managed to get 2 of them to show in a green box. But the third (which I duplicated before and after the other 2) will not show for some reason?
Also, they are not equidistant apart - how can I get them an equal spacing apart?
Please help
NOTE: Instead of images there are red circles, just for visibility reasons.
Apply float: left on images themself, not on container:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
/*width: 200px;*/
/*height: 200px;*/
width: 100px;
height: 100px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
}
.img-circular1{
background-image: url('/Imageslearn.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
background-image: url('/Images/watch.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
background-image: url('/Images/practice.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.container1{
left: 15%;
width: 70%;
/* float: left; */
height: 300px;
position: relative;
}
<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>
To answer your second question:
wrap circles in some other div
make their width be some percentage value and float them left
set margin on circles to margin: 0 auto.
Here is prototype for you to study:
#green {
background: green;
padding: 10px;
overflow: auto;
}
#blue {
background: blue;
width: 50%;
float: left;
border: 1px solid #fff;
box-sizing: border-box; /*good for when there is border or padding*/
}
#red {
background: red;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
<div id="green">
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
</div>
I updated your code to use FlexBox. Since you want your circles to be equally spaced across the row, float: left won't help much. I had to add a wrapper div around each circle div so that it could expand to fill the space without distorting the circles.
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap {
flex-grow: 1;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
<div class="wrap">
<div class="img-circular1"></div>
</div>
</div>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>