I want to have a top arrow for a drawer and to do so used ::after for the menu div. However it appears for all div inside menu div.
I have a div with class drawer and for that added top arrow. within drawer div have details div which contains svg, span and div element.
Now this css in ::after applies to div within details div as well.
How can I fix it? I don't want it to appear anywhere else apart for the menu div.
Below is the code:
.drawer {
display: flex;
flex-direction: column;
position: absolute;
width: 392px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 450px;
margin-left: 16px;
::after {
content: " ";
position: absolute;
bottom: 100%;
left: 83%;
margin-left: -5px;
border-width: 14px;
border-style: solid;
}
}
.item {
display: flex;
flex-direction: row;
font-size: 12px;
padding: 8px;
min-height: 49px;
li {
list-style: none;
}
.details {
display: flex;
flex-grow: 1;
color: #333;
margin-right: 4px;
}
}
<div class="drawer">
<ul>
<li class="item">
<div class="details">
<svg/>
<span>sometext</span>
<div>
<div/><img/>
</div>
</div>
</li>
</ul>
</div>
Related
I have a page that overflows the viewport both horizontally and vertically, and I'd like to sticky a nav so that it is always at the top and horizontally centered.
Right now, I can get sticky top working, but the centering does not work. Can anyone help?
body {
text-align: center;
}
#header {
background-color: yellow;
width: max-content;
position: sticky;
top: 0;
left: 50%;
translate: -50%
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
<div id="header">
I should always be at the top and centered
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
CodePen: https://codepen.io/hbchin/pen/bGjpQLJ
After doing some digging I found this:
Why is my element not sticking to the left when using position sticky in css?
Essentially, it's not sticking because the body is automatically expanding to the width of the size of the very big box.
Putting it in an inline-block container will make the width not auto-expand to children, and thus allow sticking behavior.
So this works:
body {
text-align: center;
}
#header {
background-color: yellow;
width: max-content;
position: sticky;
top: 0;
left: 50%;
translate: -50%
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
#whole-thing {
display: inline-block;
}
<div id="whole-thing">
<div id="header">
I should always be at the top and centered
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
</div>
Unlike position: sticky and vertical positioning, left: 50% isn't a dynamic positioning option; it just sets the initial position. A horizontal scrollbar will still cause it to move, so that it remains "50% from the left edge".
To achieve a fixed left-right position, add a header container with position: fixed around your header, and within that, your header div can get auto margins:
body {
text-align: center;
max-width:100vw;
overflow:scroll;
}
/*added*/
#headercontainer{
position:fixed;
width:100vw;
left:0;
top:0;
}
#header {
background-color: yellow;
width: max-content;
/*left: 50%;*/ /*Removed*/
margin:auto;/*added*/
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
<div id="headercontainer"> <!-- added -->
<div id="header">
I should always be at the top and centered
</div>
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
You mean something like this?:
<div id="header-container">
<div id="header">
I should always be at the top and centered
</div>
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
body {
text-align: center;
}
#header-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
overflow: auto;
background-color: yellow;
}
#header {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: max-content;
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
I am trying to get the links on the navbar to take full width and NOT take any of the area of the background image placed on the following section when the page is displayed on a smaller viewport #media (max-width: 900px).
Why is the hamburger menu icon not displaying?
I am trying to get navmenu items stacked and then a background image to display in full on a smaller viewport.
header {
position: fixed;
z-index: 100;
width: 100%;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--secondary-dark);
color: var(--main-white);
padding: 5px 30px;
height: 90px;
}
.logo {
font-size: var(--fs-600);
margin: 0.5rem;
text-decoration: none;
font-family: var(--ff-nav);
font-weight: var(--fw-400);
letter-spacing: 1px;
}
.navbar-items ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-items li a {
text-decoration: none;
color: var(--main-white);
padding: 1rem;
display: block;
}
.navbar-items li:hover a {
color: var(--blue-primary);
}
.toggle-button a {
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button a .bar {
height: 3px;
width: 100%;
background-color: var(--main-white);
border-radius: 10px;
}
#media (max-width: 900px) {
.toggle-button {
display: flex;
}
.navbar-items {
/* display: none; */
width: 100%;
background-color: var(--secondary-dark);
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-items ul {
flex-direction: column;
width: 100%;
}
.navbar-items li {
text-align: center;
}
.navbar-items li a {
padding: .5rem 1rem;
width: 100;
}
.navbar-items.active {
display: flex;
}
}
/* //////////////////////
Main
/////////////////////// */
.welcome {
position: relative;
outline: 2px solid red;
padding-top: 70px;
height: 700px;
background-image: url("/img/background.png");
background-position: center;
background-size: cover;
}
.welcome p {
position: absolute;
display: block;
bottom: 0;
right: 0;
margin: 20px 50px;
font-size: 3em;
color: var(--clr-section-background);
letter-spacing: 0.5px;
}
<header>
<nav class="navbar">
<div class="logo">
<span>Brand</span>
</div>
<div>
<a href="#">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
</div>
<div class="navbar-items">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
Blog
</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</header>
<!--mission statement------------------------------------------>
<section class="welcome">
<div>
<p>#OnPoint</p>
</div>
</section>
Problem resolved, I just needed to add a z-index on navbar and remove padding on ul in order to have the hamburger menu displaying on full width on smaller viewports.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
.squares {
color: rgb(212, 212, 212);
background-color: #2e2e2e;
width: 40px;
height: 40px;
}
.dropdown-content {
width: 100px;
height: 80px;
background-color: #7e7e7e;
}
#sidebar{
overflow: visible;
width: 40px;
height: 100px;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="squares"></div>
<div class="dropdown-content"></div>
<div class="squares"></div>
</div>
</body>
</html>
How can I make .dropdown-content overflow to the right side of #sidebar without changing size of sidebar? I've tried using floats but that did not work. I've also tried containing the first .squares and .dropdown-content together but that causes the second .squares to be positioned away from the bottom of the first .squares.
You just need to add relative positioning to your .dropdown-content and absolute positioning to the inner sub menu wrapper. And then add top: 0 and left: 100%
Here's the working example for you:
body {
margin: 0;
}
.menu {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #212121;
position: fixed;
overflow: visible;
}
.menu-item {
padding: 10px;
color: #fff;
cursor: pointer;
}
.expandable {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.expandable:hover > .sub-menu {
display: inline-flex;
flex-direction: column;
width: 200px;
}
.sub-menu {
position: absolute;
left: 100%;
top: 0%;
display: none;
width: 200px;
background: #fff;
color: #000;
border: 1px solid;
cursor: pointer;
}
.sub-menu-item {
padding: 10px;
}
.sub-menu-item:not(:last-child) {
padding: 10px;
border-bottom: 1px solid
}
<div class="menu">
<div class="menu-item">Simple Menu</div>
<div class="menu-item expandable">
Hover to Expand >
<div class="sub-menu">
<div class="sub-menu-item">Sub Menu 1</div>
<div class="sub-menu-item">Sub Menu 2</div>
<div class="sub-menu-item">Sub Menu 3</div>
</div>
</div>
<div class="menu-item">Simple Menu</div>
</div>
In my code .expandable is the one that have sub menus in it, on hovering over the element submenus will be opened on the right side of that menu-item.
The position will be depend upon the hovered element.
Also, here's the code pen link if you wish to tinker it:
https://codepen.io/prathameshkoshti/pen/zYBeWEz?editors=0110
In this one I have used multiple of this.
.dropdown-content {
position: relative;
right: -20px;
width: 100px;
height: 80px;
background-color: #7e7e7e;
}
simple version I do not change the container, and I shift it to the right.
If I understood correctly....
* {
margin: 0px;
padding: 0px;
}
#sidebar {
overflow: visible;
width: 40px;
height: 100px;
}
.squares {
position: relative;
border: 1px solid #fff;
color: rgba(212, 212, 212, 1);
background-color: #2e2e2e;
width: 40px;
height: 40px;
}
.dropdown-content {
position: absolute;
left: 40px;
top: 0px;
width: 100px;
height: 80px;
background-color: #7e7e7e;
display: none; /* sub menus will not be visible as a result */
}
.squares:hover > .dropdown-content {
display: block;
}
<body>
<div id="sidebar">
<div class="squares">1</div>
<div class="squares">
2
<div class="dropdown-content">
</div>
</div>
<!-- create another container to house the .dropdown-content -->
<div class="squares">3</div>
</div>
</body>
insert the .dropdown-content into a .square then add display:none to the styling of .dropdown-content and finally on hover change display: none to block
I have the following snippet and am wondering why the spacing between the first three elements is not the same as the spacing between the the 3rd and 4th
.textFMT2 {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
font-size: 1.5vw;
}
.links4 {
width: 100%;
}
.links4 span {
display: block;
background-color: #538231;
text-align: center;
width: 50%;
border-radius: 10vw;
padding: 1vw 0;
margin: 0 auto;
}
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.textFMT2 .arrowsForScroll {
position: relative;
}
.arrowsForScroll {
position: absolute;
bottom: 2vw;
}
.arrowsForScroll {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
a.left, a.right {
text-decoration: none;
font-weight: bolder;
font-size: 32px;
}
.left, .right {
display: none;
}
.sections {
background-color: #b3d7f7;
/* width: 32vw; */
color: #538231;
font-size: 16px;
text-align: center;
position: relative;
height: 100%;
}
.links4 a {
text-decoration: none;
color: white;
}
<div class="textFMT2">
<div class="links4">
<span>Sign up for our<br>Quarterly Newsletter</span>
</div>
<div class="links4">
<span>Attend an<br>Event</span>
</div>
<div class="links4">
<span>Volunteer with<br>SWAG</span>
</div>
<div class="arrowsForScroll">
<a class="left" href="#section2"><!--↑--> </a>
<div class="links4">
<span>Donate to help<br>our work</span>
</div>
<a class="right" href="#"> </a>
</div>
</div>
The different gap size is created because you are setting the position to relative here:
.textFMT2 .arrowsForScroll {
position: relative;
}
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
So you need to explictly set it to static
.textFMT2 .arrowsForScroll {
position: static;
}
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page
EDIT: The entire issue stems from having a flex item set to position: absolute in .arrowsForScroll (which is defined twice by the way), I assume you wrote the selector .textFMT2 .arrowsForScroll to compensate for that. So the layout could also be fixed by simply removing these two selectors entirely:
.textFMT2 .arrowsForScroll {
position: relative;
}
.arrowsForScroll {
position: absolute;
bottom: 2vw;
}
I can't find an answer that is not on a fixed image size so I'm going to ask it.
I have a div with an image in it and that picture could be any size. I need it to auto scale AND auto align. I can scale it fine but vertically aligning it is a bit of a challenge. I need it to be center vertically aligned.
HTML + CSS
<div id="myDiv">
<img src="./img/example.png"></img>
</div>
#myDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
text-align: center;
}
#myDiv img {
height: auto;
width: auto;
max-height: 70%;
max-width: 70%
}
This example forces both horizontal and vertical alignment of an image inside a box; in this specific case, constrained to 130x130px. Change the width and height defined as 130px in 2 separate places each in the css to change the constrained size.
[edit: added simplified example showing minimum required setup]
Simplified example:
html:
<div class="pic">
<img src="/path/to/pic.jpg"/>
</div>
css:
.pic {
display: inline-block;
width: 130px;
height: 130px;
outline: solid 1px #cccce3;
font-size: 0;
text-align: center;
}
.pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.pic img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
Complete example:
Original codepen showing more complex example: http://codepen.io/anon/pen/culvD .
Here's the html:
<ul class="pics">
<li>
<div class="pic">
<img src="/path/to/pic1.jpg"/>
</div>
</li>
<li>
<div class="pic">
<img src="/path/to/pic2.jpg"/>
</div>
</li>
</ul>
and here's the css:
ul.pics {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.pics li {
display: inline-block;
width: 130px;
margin: 4px;
padding: 6px;
background-color: #e6e6ec;
outline: solid 1px #cccce3;
}
ul.pics li .pic {
height: 130px;
font-size: 0;
text-align: center;
}
ul.pics li .pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
ul.pics li img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
to center align an element to the center asign it a width, then margin-left and right to auto.