<!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
Related
This question already has an answer here:
How to create uneven rounded sides on a div?
(1 answer)
Closed 10 months ago.
I'm trying to create a web element like this, but am having trouble figuring out how to make a curved border between two divs. I understand the functionality of border-radius (very bad implementation in codepen below), bit wanted to see if anyone had ideas on how to implement the picture above? I thought about having a border-radius with a much larger radius, then hiding overflow, but not sure if that makes sense.
https://codepen.io/unsure-of-name/pen/LYeBdbX
.circle {
height: 100px;
width: 100px;
background-color: #eee;
border-radius: 100px;
box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
display: inline-block;
vertical-align: top;
position: relative;
z-index: 2;
}
.bar {
display: inline-block;
margin-top: 25px;
background-color: #eee;
margin-left: -50px;
padding-left: 50px;
height: 50px;
text-align: center;
positive: relative;
z-index: 1;
}
.bar div:nth-child(1) {
background-color: red;
border-radius: 10px;
}
.bar div:nth-child(2) {
background-color: #bbb;
}
.bar div:nth-child(3),
.bar div:nth-child(4) {
background-color: #eee;
border-right: 1px solid black;
}
.bar div {
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.row {
}
.row > div {
}
<div class='container'>
<div class='row'>
<div class='circle'>
</div>
<div class='bar'>
<div>
Group 1
</div>
<div>
Description
</div>
<div>
Cell 1
</div>
<div>
Cell 2
</div>
</div>
</div>
<div class='row'>
<div class='circle'>
</div>
<div class='bar'>
<div>
Group 1
</div>
<div>
Description
</div>
<div>
Cell 1
</div>
<div>
Cell 2
</div>
</div>
</div>
</div>
Thanks!
That's some very confusing css you have written. The css below will get you what you want. You still have to organize the rest of it. Hope this helps.
.row{
display: flex;
align-items: center;
}
.bar {
display: inline-block;
background-color: #eee;
margin-left: -50px;
padding-left: 50px;
height: 50px;
display: flex;
text-align: center;
positive: relative;
z-index: 1;
}
.bar div{
padding: 0 10px;
width: 100px;
}
.bar div:nth-child(1) {
position: relative;
background: red;
color: black;
height: 50px;
}
.bar div:nth-child(1)::before{
content: '';
width: 20px;
height: 100%;
position: absolute;
bottom: 0;
right: -5px;
background: red;
border-radius: 100%;
}
You can try using ellipse to define the how 'curvy' the side should look
#box1 {
background: red;
width: 10rem;
height: 3rem;
padding: 0.5rem;
clip-path: ellipse(10rem 7.5rem at left);
}
.wrapper {
background: blue;
width: 20rem;
}
<div class="wrapper">
<div id="box1">
</div>
</div>
.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
In my HTML I'm trying to align a Title next to the title's Bullet, so that the first line of the title always is next to the bullet, and the second line (if any) doesn't change the title's position - it just trails to the next line.
JSFiddle:
http://jsfiddle.net/Ebqq8/
HML:
<div class="bullet-container">
<div class="bullet-title-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<p class="bullet-title">Short Title</p>
</div>
<div class="bullet-details-container">
<p>Body Text</p>
</div>
</div>
CSS:
.circle-container {
height: 34px;
display: inline-block;
position: relative;
width: 14px;
border: 1px solid blue;
}
.circle {
border-radius: 50% !important;
width: 12px;
height: 12px;
background-color: red;
display: inline-block;
position: absolute;
top: 0px;
/* width and height can be anything, as long as they're equal */
}
.bullet-title {
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
min-height: 34px;
width: 200px;
margin: 0px;
}
.bullet-title-container {
color: black;
display: inline-block;
position: relative;
width: 250px;
}
.bullet-details-container {
color: black;
}
.bullet-container {
max-width: 600px;
float: left;
text-align: left;
}
What's happening now is that the first line is always too low, and if there are multiple lines, the whole title gets pushed up too high. I thought that aligning two inline-block elements would do the trick, but it doesn't seem to be working. What am I doing wrong?
You could try adding:
position: absolute;
top: 0;
to .bullet-title { }
http://jsfiddle.net/Ebqq8/2/
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>​
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
​
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
​CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
​
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>