I have a navbar with a scrollable dropdown item(cart view) to the right side of it.
The problem is that if there are more than one item in the cart, the top part of the dropdown it is not visible anymore.
Could you please tell me where is the problem?
This is the html:
<body>
<div id="root">
<div class="App">
<nav>
<div class="links">
Something, something
</div>
<div class="asd">
bla
</div>
<div class="grand-parent">
<div class="bro">
bla
</div>
<div>
</div>
<div class="dropdown">
<div class="dropdown-content">
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
And this is the CSS:
.App {
padding: 0;
margin: 0;
color: #1D1F22;
}
nav {
display: flex;
position: fixed;
justify-content: space-between;
z-index: 9990;
top: 0;
width: 100%;
background-color: white;
font-size: 1.2rem;
margin-left: 70px;
height: 80px;
}
.links {
justify-self: flex-start;
position: relative;
}
.asd {
align-self: center;
position: relative;
}
.grand-parent {
right: 100px;
text-align: center;
position: relative;
height: 90vh;
}
.bro {
position: relative;
padding: 0;
height: 3px;
width: 6px;
margin-right: 170px;
margin-top: 30px;
}
.dropdown {
position: absolute;
display: inline-block;
height: 90vh;
}
.dropdown-content {
margin-top: 0px;
display: flex;
flex-direction: column;
position: absolute;
right: 0;
width: 325px;
z-index: 9999;
border: 1px solid black;
justify-content: center;
align-items: center;
max-height: 90vh;
overflow-y: auto;
background-color: white;
overflow-x: hidden;
}
The project is done in ReactJS, but I think that this is not so important.
Thank you!
You centered vertically your elements in .dropdown-content with justify-content: center;
To fix it, you need to change it to justify-content: flex-start; and normally it'll works.
Related
I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this.
For example I have this image
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.
If you know the width of the div, it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; (10% is calculated by this formula: (100% - widthOfDiv) / 2)
body {
background: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationinfo {
align-self: flex-start;
margin-left: 10%;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
remove the flex direction, here's it
display: flex;
justify-items: flex-end;
align-items: flex-end;}
You can do it by positioning applicationinfo since you haven't styled it.
you can add parent position: relative; then child to absolute; then give child top: 0; left: 0;
.container {
display: flex;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
position: relative;
background: #222;
border: 1px solid yellow;
}
.applicationinfo {
width: 80%;
top: 0;
left: 0;
border: 1px solid green;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid blue;
}
.settings {
display: flex;
width: 80%;
height: 80%;
background-color: white;
align-self: center;
}
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
Expected result - the third blue box should be a little towards the right
i am unable to use left functon after doing position relative in the userated div . im trying to say that instead of moving right, it is just increasing in size . Below is a picture to help you understand what i am saying . after that i wrote all the html and css code.
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
ul.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 100%;
top: 30px;
align-items: center
}
.bar {
height: 100px;
width: 100%;
justify-content: left;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
}
.link1 {
margin-left: 30px;
text-decoration: none;
color: black;
font-size: 20px
}
.signin {
background: linear-gradient(to right, blue, rgb(20, 196, 255));
height: 38px;
width: 120px;
position: relative;
text-align: center;
font-size: 18px;
border-radius: 20%;
;
left: 200px;
top: -10px
}
.sign {
top: 15%;
position: relative;
color: white;
text-decoration: none
}
.introbox {
width: 700px;
height: 200px;
background-image: url('wal.jpg');
opacity: 0.75;
left: 25%;
position: relative;
background-position: center;
top: 10px;
border-radius: 5px;
font-weight: 600;
box-shadow: 0px 2px 5px;
}
.new {
font-size: 30px;
left: 6%;
position: relative;
font-weight: 400
}
.box1 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600;
}
.lnlink {
text-decoration: none;
color: black;
}
.lightnovel1 {
display: flex;
flex-direction: row;
position: relative;
height: 580px;
width: 900px;
background: red;
left: 5%;
}
.ww {
margin: 20px;
height: 260px;
width: 180px;
font-size: 20px;
font-weight: 600
}
.pic2 {
height: 80%;
width: 100%
}
.ranki {
font-size: 15px
}
.ranktitle {
position: relative;
left: 5%;
font-size: 30px;
font-weight: 400
}
.ranking {
height: 580px;
width: 900px;
background: yellow;
display: flex;
flex-direction: row;
position: relative;
left: 5%;
}
.topview {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
background: blue;
}
.li {
float: left;
}
.newtrends {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: 5%
}
.userrated {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: -5%
}
<div class="bar">
<! me might not come for 2 month here or disc>
<nav>
<ul class="navlist">
<li><img src="background.png"></li>
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
<li>
<div class="signin"><a href="#" class='sign'>Sign In</a></div>
</li>
</ul>
</nav>
</div>
<div class="introbox">
<h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
<p2>Your fictional stories hub</p2>
<br>
<p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author is
updated instantly on the Light Novel Pub and notification service is provided to the readers.
</p3>
Start reading now to explore this mysterious fantasy world.
</div>
<br>
<br>
<div class="release">
<div class="title1">
<h3 class="new">New Ongoing Release</h3>
</div>
<div class="lightnovel1">
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="ranktitle"> Ranking </div>
<div class="ranking">
<div class="misc">
<h2>Trending</h2>
<div class="topview" id="topviewid">
</div>
</div>
<div class="misc1">
<h2>most viewed</h2>
<div class="newtrends">
</div>
</div>
<div class="misc2">
<h2>User Rated</h2>
<div class="userrated">
</div>
</div>
</div>
float: right or left is causing this result
Your .userrated and .newtrends classes are both positioned in relation to their normal position. If you move the second div by 5% it overlaps with the third. If you now move the third by 5% you would moved them both by the same distance so they won't show a gap.
If you want the same gap between the second and the third div you need to set the third's left value to 10%.
I have a problem. In my angular project I have the following code:
.portfolio-summary-container {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
.portfolio-summary {
display: inline-flex;
position: relative;
width: 100%;
height: 100%;
}
.portfolio-summary .section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
border: #c2c2c2 solid 1px;
}
.portfolio-summary .section-operator {
position: absolute;
left: calc(25% - 17px);
margin-top: 23px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: #b9b9b9 solid 1px;
color: #808080;
font-size: 1.8rem;
background-color: white;
}
.portfolio-summary .section .price {
font-size: 1.3rem;
font-weight: bold;
}
.portfolio-summary .section .description {
font-size: 1rem;
color: #808080
}
<div class="portfolio-summary-container">
<div class="portfolio-summary" *ngIf="portfolio">
<div class="section">
<div class="price">$10.00</div>
<div class="description">AVAILABLE</div>
</div>
<div class="section-operator">+</div>
<div class="section">
<div class="price">$12.31</div>
<div class="description">TOTAL ALLOCATED </div>
</div>
<div class="section-operator">+</div>
<div class="section">
<div class="price">$0.73</div>
<div class="description">PROFIT</div>
</div>
<div class="section-operator">=</div>
<div class="section">
<div class="price">$23.04</div>
<div class="description">EQUITY</div>
</div>
</div>
</div>
But I am trying to put the <div class="section-operator">+</div> between every section, so it would look like this:
I read that I need to give the parent: position: relative;, so thats why I created the portfolio-summary-container. The container is sticking to the bottom and the inner div has the position: relative; property, but this isn't working for some reason??? How can I get the result from the photo?
You can position each operator separately. I added z-index for the operators to be in the foreground.
.portfolio-summary {
display: inline-flex;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
.portfolio-summary .section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
border: #c2c2c2 solid 1px;
}
.portfolio-summary .section-operator {
position: absolute;
margin-top: 23px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: #b9b9b9 solid 1px;
color: #808080;
font-size: 1.8rem;
background-color: white;
z-index: 2;
}
.portfolio-summary .section .price {
font-size: 1.3rem;
font-weight: bold;
}
.portfolio-summary .section .description {
font-size: 1rem;
color: #808080
}
#op1 {
left: calc(25% - 17px);
}
#op2 {
left: calc(50% - 17px);
}
#op3 {
left: calc(75% - 17px);
}
<div class="portfolio-summary" *ngIf="portfolio">
<div class="section">
<div class="price">$10.00</div>
<div class="description">AVAILABLE</div>
</div>
<div class="section-operator" id="op1">+</div>
<div class="section">
<div class="price">$12.31</div>
<div class="description">TOTAL ALLOCATED </div>
</div>
<div class="section-operator" id="op2">+</div>
<div class="section">
<div class="price">$0.73</div>
<div class="description">PROFIT</div>
</div>
<div class="section-operator" id="op3">=</div>
<div class="section">
<div class="price">$23.04</div>
<div class="description">EQUITY</div>
</div>
</div>
I wrote a simple code to have two boxes center aligned with different dimensions
and now I would like to add a third one based on the dimensions of the second one (grey) and to start outside of the second one.
The second one (grey) is the core and the third one that I want to be the coil around the core but with it's own dimensions.
That's why I want to be based on the dimensions of second.
Please could you help me to make it?
Thank you very much in advance!
Kind Regards,
George
Here is the code:
<html>
<head>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius:20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius:5px
}
</style>
</head>
<div id="container">
<div class="box1">
<div class="box2">
<div></div>
</div>
</div>
</div><!-- end #container -->
</html>
So considering the grey as the core and the red border around it as the coil. Is this how you wanted it to be done?
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius: 20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius: 5px;
position: relative;
}
.box2:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid red;
border-radius: 5px;
}
<div id="container">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
<!-- end #container -->
I'm not quite understanding what rule of stacking context I am not understanding here. I have a 'divider' line ('divider-line') that I want to put behind a box div ('block').
Here is the HTML:
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>
Here is the CSS(w/ scss nesting):
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -100px;
z-index: 10;
height: 200px;
width: 475px;
.icon {
font-size: 9rem;
}
.text {
display: block;
}
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
}
The HTML context, having 'divider-line' child come before it's sibling 'block' should put it behind no? The z-index of 10 on 'block' doesn't do anything, and I've tried putting a z-index of -1 on 'divider-line' as well (to no avail).
Any advice or direction would be great,
Without the z-index in you example, adding a background colour to the block shows that the divider is behind the block.
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
}
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #FFF;
top: -100px;
height: 200px;
width: 475px;
}
.icon {
font-size: 9rem;
}
.text {
display: block;
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>