I'm trying to make a stem filling with a color and with circles for steps along the stem.
This is an example of what I'm currently aiming for: https://codepen.io/nicklassandell/pen/ztGac
This is currently what I have: https://codepen.io/TheOshika/full/xxRRVNb (the design is similar to the above code but I wrote the code from scratch)
I'm using a scrollspy script in order to trigger a filling animation in the circles. However I'm not satisfied with it because the offset for the trigger is too difficult to set for a responsive design. I'm now thinking about removing the javascript part and instead having a stem filling the circles with the scrolling, but no animation.
This is what I'm looking for, except I don't know how to make the background color in the stem fill the circles:
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
border: solid 3px black;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
}
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
}
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
<div class="color-change one"></div>
</a></li>
<li data-index="1"><a href="#step-two">
<div class="color-change two"></div>
</a></li>
<li data-index="2"><a href="#step-three">
<div class="color-change three"></div>
</a></li>
<li data-index="3"><a href="#step-four">
<div class="color-change four"></div>
</a></li>
<li data-index="4"><a href="#step-five">
<div class="color-change five"></div>
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
It should be possible to get the required 'filling' effect using just CSS.
We add a pseudo before and a pseudo after element to each of the li elements. These have a radial-gradient background which has a transparent 'bite' out at the position of the circles containing the a (anchor) element. Behind the whole thing we put a fixed element which has the 'fill' color in the top half and the darker (non-filled) color in the bottom half. This is done by giving it a background image which is a linear gradient.
The inner divs (inside the anchor elements) are not now needed.
Here is a snippet to show the idea. CSS variables have been introduced to make it easier to change dimensions if required. (Note: there is redundant CSS in here which could do with tidying up.)
* {
margin: 0;
padding: 0;
--stemw: 5px; /* the width of the stem */
--circled: 40px; /* the diameter of the circles */
--lih: 300px; /* the height of each list item */
--nolis: 5; /* the number of items in the list */
--halfstemw: calc(var(--stemw) / 2);
--circler: calc(var(--circled) / 2); /* the circle radius */
--halflih: calc(var(--lih) / 2);
}
div.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to top, #1f2933 0%, #1f2933 50%, #bed0f7 50%, #bed0f7 100%);
overflow: hidden;
}
#my-awesome-nav li {
position: relative;
}
#my-awesome-nav li::before, #my-awesome-nav li::after {
position: absolute;
transform: translateX(calc(-100% + var(--circler)));
width: calc(50vw - var(--halfstemw));
height: var(--lih);
top: calc(var(--halflih) * -1);
content: '';
z-index: -1;
}
#my-awesome-nav li::before {
left: 0;
background: radial-gradient(circle at calc(100% + var(--halfstemw)) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
#my-awesome-nav li::after{
left: calc(50vw + var(--halfstemw));
background: radial-gradient(circle at calc(var(--halfstemw) * -1) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
width: 40px;
height: 40px;
border: solid 3px black;
border-style: none;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
background-color: transparent;
}
/*
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
background-color: transparent;
}
*/
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="bg"></div>
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
</a></li>
<li data-index="1"><a href="#step-two">
</a></li>
<li data-index="2"><a href="#step-three">
</a></li>
<li data-index="3"><a href="#step-four">
</a></li>
<li data-index="4"><a href="#step-five">
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
Footnote: on retina screens I've occasionally seen a faint line between the pseudo elements - I think it's where the positioning calculations come at part of a CSS pixel (which on a high res screen may mean a screen pixel is 'left behind'). It's probably necessary to make the pseudo elements 1 CSS pixel higher to overlap the next one to give a continuous effect to the background.
Related
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
You can see my carousel on my Github page.
https://ionianthales.github.io/playground.github.io/
I set .carousel to position: absolute; which is ul tag.
and when I click the .right-btn, the slide effect works. But I use the dual monitor and when I expanded the web browser window horizontally over the full width of a monitor, I could see other images are shown in a slide too.
( To check this issue, I should decrease the size of web browser horizontally and then refresh the page and then expand the web browser horizontally )
I tried to fix it on my own. But It didn't work well.
also, I will include my codes here.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Bowlby+One+SC|PT+Sans+Narrow&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav-container">
<div class="logo">
LogoShop
</div>
<ul class="menu-container">
<li class="menu-item">shirt</li>
<li class="menu-item">pants</li>
<li class="menu-item">uniform</li>
<li class="menu-item">contact</li>
</ul>
</nav>
<div class="carousel-container">
<div class="carousel-wrapper">
<ul class="carousel">
<li class="slide active"><img src="images/freestocks-org-_3Q3tsJ01nc-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/jonathan-francisca-HY-Nr7GQs3k-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/tamara-bellis-0C2qrwkR1dI-unsplash.jpg" alt=""></li>
</ul>
</div>
<button class="btn left-btn"><img src="images/left-arrow.svg" alt=""></button>
<button class="btn right-btn"><img src="images/right-arrow.svg" alt=""></button>
<div class="carousel-nav">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
css
html{
/* border: 1px red solid; */
height: 100%;
}
body{
height: 100%;
margin: 0;
}
nav{
/* border: 1px red solid; */
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
ul{
list-style: none;
}
.logo{
/* border: 1px blue solid; */
font-family: 'Anton', sans-serif;
font-size: 30px;
}
.menu-container{
/* border: 1px red solid; */
display: flex;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 25px;
padding: 0;
}
.menu-item{
/* border: 1px red solid; */
margin: 0 15px;
}
li a{
text-decoration: none;
color: black;
}
/* carousel */
.carousel-container{
position: relative;
/* border: 1px red solid; */
width: 100%;
height: 500px;
}
.carousel-wrapper{
/* border: 1px red solid; */
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel{
/* border: 1px red solid; */
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transition: 300ms transform ease-in;
}
.slide{
position: absolute;
/* border: 1px red solid; */
margin: 0;
width: 100%;
height: 100%;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
/* opacity: 0; */
}
.btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 40px;
background-color: transparent;
border: none;
cursor: pointer;
}
.left-btn{
left: 0;
}
.right-btn{
right: 0;
}
.carousel-nav{
position: absolute;
/* background-color: dodgerblue; */
width: 100%;
height: 50px;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dot{
border-radius: 50%;
width: 20px;
height: 20px;
background-color: grey;
opacity: 0.5;
margin: 0 20px;
cursor: pointer;
}
.dot.active{
background-color: grey;
opacity: 1;
}
javascript
const carousel = document.querySelector('.carousel');
const slides = [...carousel.children];
const nextBtn = document.querySelector('.right-btn');
const previousBtn = document.querySelector('.left-btn');
const slideWidth = slides[0].getBoundingClientRect().width;
console.log(slideWidth);
function positionSlides(slides){
for (let i=0; i<slides.length; i++){
slides[i].style.left = slideWidth * i + 'px';
};
};
nextBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling;
const position = nextSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
nextSlide.classList.add('active');
});
previousBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const previousSlide = currentSlide.previousElementSibling;
const position = previousSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
previousSlide.classList.add('active');
});
positionSlides(slides);
Thanks for reading my question. : )
You can modify the CSS rule as below:
.slide {
position: absolute;
border: 1px solid red;
margin: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
or
.slide {
width: 100vw;
}
I found a snippet of CSS somewhere on the Internet that re-creates the cool PayPal spinner, and I made a fiddle out of it:
https://jsfiddle.net/55s5oxkf/5/
It works great but I can't figure out how to place text right in the center of that spinner, something like "Loading...". I've tinkered and tried but can't get anything to work.
Here's the CSS:
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: 35%;
left: 45%;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
And the HTML:
<div id="divSpinner" class="spinner loading"></div>
Placing text in between the opening and closing div elements does nothing. Any ideas?
<center> is no longer supported (center deprecated in html5) so use a class like this:
.centered {
text-align: center;
}
Then use calc to get the correct position for the loading text:
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
$("#btnLoadRecords").click(function() {
$("#divSpinner").show();
setTimeout(function() {
$("#divSpinner").hide();
}, 10000);
});
.centered {
text-align: center;
}
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: calc(50% - 45px);
left: calc(50% - 45px);
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="centered">
<div id="divSpinner" class="spinner loading">
<div class="loading-text">Loading ...</div>
</div>
<button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button>
</div>
</body>
For the HTML:
<div id="divSpinner" class="spinner loading" style="display: none;">
<span>Loading…</span>
</div>
For the CSS, in addition to what you have:
.spinner.loading::before{
// Remove position, top, and left properties
margin: -15px auto -65px auto;
display: block (or flex);
}
This will make it work with your existing code, but what you’ve got is pretty hacky. If you want text to be inside your spinner, you should not use a ::before element. But given what you have, this will work.
this should center the content
html
<div id="divSpinner" class="spinner loading">
<p>hello</p>
</div>
css
.spinner.loading {
display: none;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: 0;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
Add this in your css:
.loading {
position: relative;
text-align: center;
line-height: 140px;
vertical-align: middle;
}
And then just add text in loading div between span, for example:
<div id="divSpinner" class="spinner loading">
<span class="text">Loading..</span>
</div>
And because loading has 8px border add this for text class:
.text {
margin-left: 15px;
}
I think something like this should get you going.
How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:
I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.
You will need to play with exact height and size, but this is a possible take on your problem
.menu {
background: darkgray;
padding: 1rem 0;
margin: 5rem;
text-align: center
}
.menu::after {
content: '';
background: darkgray;
border-radius: 50%;
padding: 5rem;
}
<nav class="menu"></nav>
You can try it with flexbox... I don't know, perhaps you have to build a little bit on it...but it's possible
.nav {
width: 100%;
height: 35px;
display: flex;
justify-content: center;
background-color: grey;
margin-top: 100px;
}
.logoContent {
height: 130px;
width: 130px;
border-radius: 130px;
background-color: grey;
margin-top: -50px;
}
<div class="nav">
<div class="logoContent"></div>
</div>
try this
html
<div id="rect">
<div id="cir">
</div>
</div>
css
#rect {
width: 500px;
height: 50px;
background: green;
margin: 100px;
}
#cir {
width:150px;
height: 150px;
background: green;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -50px;
}
see this https://jsfiddle.net/9rtoqpjc/
If you just trying for shape, then you can use gradients.
div{
width: 400px;
height: 100px;
color: #333;
background-image: radial-gradient(circle, currentColor 50px, transparent 0),
linear-gradient(transparent 30%, currentColor 30%, currentColor 70%, transparent 60%);
}
<div></div>
Working Fiddle
You should first of all get in confidence width css properties of div.
I suggest you to look here: w3schools.com
Anyway this is an example of code on what you can start working:
div{
background-color: gray;
}
#rectangle{
margin-top: 100px;
width: 500px;
height: 40px;
}
#circle{
position: relative;
width: 200px; /* radiant*2 */
height: 200px; /* radiant*2 */
border-radius: 50%;
left: 150px; /* rectangle_width/2 - radiant */
top: -80px; /* rectangle_height/2 - radiant */
}
#logo{
position: relative;
top: 36px; /* radiant - img_heigth/2 */
left: 36px; /* radiant - img_width/2 */
}
<div id="rectangle">
<div id="circle">
<img id="logo" src="http://findicons.com/files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
</div>
</div>
try this
html
<div class="header-area">
<div class="header-main">
<div class="menu-left">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
</ul>
</div>
<div class="logo">
<img src="#" />
</div>
<div class="menu-right">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
<li class="menu-3">Menu 3</li>
</ul>
</div>
</div>
</div>
css
.header-area {
width: 100%;
margin: 34px 0px;
}
.header-main {
width: 100%;
height: 60px;
position: relative;
background-color: #272727;
}
.menu-left {
width: 40%;
float: left;
}
.logo img {
width: 100%;
position: relative;
top: 38px;
vertical-align: middle;
}
.header-main ul li {
display: inline-block;
padding: 5px;
text-align: center;
}
.header-main ul li a {
color: #fff;
}
.logo {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: #272727;
color: #fff;
margin-left: auto;
margin-right: auto;
top: -27px;
float: left;
}
.menu-right {
width: 40%;
float: left;
}
see this https://jsfiddle.net/onn3b9z7/
You can try and use border-radius: 70% in your css file on a rectangular div and see if that works.
So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.
Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>
Add image after one and two. And .list-menu li float:left; display:block;