I want to make a vertical menu with submenu's and the submenu have to go next to the parent div.
Hope you guys know how to do that, I did a look on google but only found results like 2 divs next to eachother. But I need that the child div have to get next of it.
My code for now:
HTML
<div id="menuCont">
<div class="menuItem">
Applicatie Ontwikkeling
<div class="subMenuCont">
<div class="subMenuItem">HTML</div>
<div class="subMenuItem">CSS</div>
<div class="subMenuItem">jQuery</div>
</div>
</div>
<div class="menuItem">
Netwerk Beheer
</div>
<div class="menuItem">
Server Beheer
</div>
</div>
CSS
#menuCont {
width: 17.5%;
text-align: center;
}
.menuItem {
width: 100%;
padding: 1em;
background-color: #ffffff;
color: #000000;
font-family: Lato;
font-size: 125%;
border: 1px solid #7266ff;
border-bottom: 0;
cursor: pointer;
}
.menuItem:first-child {
border-top-left-radius: 1.5em;
}
.menuItem:last-child {
border-bottom: 1px solid #7266ff;
border-bottom-right-radius: 1.5em;
}
.menuItem:hover {
background-color: #7266ff;
color: white;
}
.subMenuCont {
/*display: none;*/
position: relative;
/*left: 100%;*/
/*width: 90%;*/
}
.subMenuItem {
border: 1px solid #7266ff;
border-bottom: 0;
}
.subMenuItem:last-child {
border-bottom: 1px solid #7266ff;
}
Do you need any more info, please say it. for now I don't know what to give as more info.
In your CSS Code I changed the position element to absolute, that allows you to place the element exactly where you want:
.subMenuCont {
position: absolute;
top:0;
left: 17.5%;
width: 17.5%;
}
Related
I would like to create an alignment along a div container with the following structure. There are 3 buttons and one span element but this could be replaced with other elements if needed.
I started creating this
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
and tried to add float: right to the buttons on the right side but they didn't stick to the right side.
How can I achieve it? (A solution using display: grid would be fine too)
I have edited your code and here is what you expected , please have a look
I have used position style to make it right aligned by placing two button in one div<div class="pushRight"> and added styles for that div
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
position: relative;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.pushRight{
position: absolute;
right:0
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
We can achieve this using float, check the sample code.
Here added floating instead display:flex
For right alignment added a class
.pull-right{
float:right;
}
and it will be called in
<button class="btnTodoAction pull-right">D</button>
<button class="btnTodoAction pull-right">E</button>
So I am coding my final project for HTML and when formatting pictures, I accidentally put it too far to the right and it extended my web page horizontally and now that I have fixed the image there is a lot of extra space on the right side. The same thing happened vertically but I just set my height to 100% for my body tag and it took care of it, I tried doing this with width but it just shrinks my content while not changing the physical size of the web page. I would appreciate any help you guys could provide. Here is picture of the web page enter image description here
Here is code
<html>
<title> Bodybuilding </title>
<head>
<style>
.image1 {
z-index: -1;
}
.active {
background-color: #000000
}
.image2 {
position: absolute;
right: 26px;
top: 10px;
}
.title {
position: relative;
top: -250px;
border-style: solid;
border-color: #0E878A;
font-size: 49.5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
top: -245px;
background-color: #333;
border-top: 2px solid #bbb;
border-left: 2px solid #bbb;
border-bottom: 2px solid #bbb;
border-radius: 10px;
}
li {
float: left;
border-right: 2px solid #bbb;
}
li a {
display: inline;
color: #0E878A;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 35px;
}
li a:hover {
background-color: #111;
}
h2 {
position: relative;
top: -797px;
}
p {
position: relative;
top: -797px;
font-size: 30px;
}
.arnold {
position: relative;
left : 1130px;
top: -235px;
}
body {
background: linear-gradient(#939FA0,#41858B);
height: 100%;
width: 98.27%;
}
h3 {
position: relative;
top: -765px;
</style>
</head>
<div class="image1">
<img src="bbifbb.png" width="359" height="250">
</div>
<div class="image2">
<img src="bbphil.jpg" width="359" height="250">
</div>
<div class ="title">
<center>
<h1> Bodybuilding </h1>
</center>
</div>
<body bgcolor="#939FA0">
<body>
<ul>
<li><a class = "active" href="bbfinal.html">Home</a></li>
<li>Famous Bodybuilders</li>
<li>Mr. Olympia</li>
<li>Steroids</li>
<li>Modern Bodybuilders</li>
<li>Competitions</li>
<li>Find Competitions</li>
<li>Contact Me</li>
</ul>
<div class ="arnold">
<img src="bbarnold.jpg">
</div>
You are doing the following in your code:
.arnold {
position: relative;
left : 1130px;
top: -235px;
}
Since the position is relative, the left property sets the left edge of all elements with class 'arnold' to be 1130 pixels to the right of their normal position. That results in the extra scroll space to the right.
I have a pill / tab navigation menu, and I need to connect the menu to the rest of the body and the underline of the divs in order to make the menu look nice.
I need to color the space between the black and yellow and connect the underlined divs
.tab {
display: inline-block;
text-align: center;
border-bottom: 1px solid white;
width: 75px;
}
.selected {
border: 1px solid white;
border-bottom: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(0,0,0,1);
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
If you meant to the small gap between your selected tab and the menu, you can't make its border-bottom: none;.
Instead, I suggest you just override the tab preferences, so the bottom-border of the selected tab is black:
.selected {
border: 1px solid white;
border-bottom: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(0,0,0,1);
}
This might get you closer to the result you need , before replacing these codes pls remove .selected from css.
.billingNav {
padding: 5px;
background-color: #444;
}
.tab {
display: inline-block;
margin-bottom: 5px;
text-align: center;
width: 75px;
color: #fff;
}
.tab:hover {
border-bottom: 2px solid #fff;
}
To connect the tabs together (no gap between tabs) you can see this question. there are several methods like as remove the whitespace in the HTML between the inline-block elements (no new line between of prev item and of next item). You may also use negative letter-spacing for parent and reset it to normal on cild (tab) elements.
The small white gap below the menu items are produced by the .tab {... border-bottom: 1px solid white;} style you set for tabs but border-bottom: none; on selected tab. to remove that space simply remove the border-bottom from tab.
Here is a working sample:
.billingNav {letter-spacing: -1em;}
.tab {
display: inline-block;
text-align: center;
letter-spacing: normal;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 75px;
/*border-right: 1px solid white;
background-color: rgba(200,200,200,1);*/
}
.selected {
/*border: 1px solid white;*/
/*border-bottom: none;*/
background-color: rgba(0,0,0,1);
color: white;
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
Another appearance could be achieved by adding a background and small right border to (non-selected) tabs:
.billingNav {letter-spacing: -1em;}
.tab {
display: inline-block;
text-align: center;
letter-spacing: normal;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 75px;
border-right: 1px solid white;
background-color: rgba(200,200,200,1);
}
.selected {
/*border: 1px solid white;*/
/*border-bottom: none;*/
background-color: rgba(0,0,0,1);
color: white;
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
Getting rid of the whitespace in between the underlined elements connected their borders
<div id="#createTab" class="tab selected">Create</div><div
id="#editTab" class="tab notSelected">Edit</div><div id="#deleteTab"
class="tab notSelected">Delete</div>
I personally would adjust the vertical-align so that the tabs do not have a gap in-between the values they already have a parent div container so the css would be
.tabSelected {
vertical-align: -4px; // or however many you need so that there is no gap
I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?
I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.
Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
I made my submenu appear when I hover over one option in menu. However when I do it it extends menu height (PIC1). I tried setting menu height on 56px and then it doesn't extend but it ruins my whole layout (PIC2). I also tried putting position:absolute in empty div between menu_option and submenu but then submenu changes sizes and loses attributes (PIC3).
#menu {
margin-bottom: 20px;
background-color: #73818c;
padding: 10px;
}
.menu_option {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
font-size: 16px;
}
.submenu {
text-align: center;
border-bottom: dotted 2px black;
padding-top: 10px;
padding-bottom: 10px;
display: none;
font-size: 13px;
}
.submenu:hover {
background-color: white;
}
.menu_option:hover div {
display: block;
}
.menu_option:hover {
background-color: lightgray;
cursor: pointer;
}
<div id="menu">
<div class="menu_option">Strona główna</div>
<div class="menu_option">Galeria</div>
<div class="menu_option">Reżyserzy
<div>
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="menu_option">Ulubione filmy</div>
<div class="menu_option">Seriale</div>
<div class="menu_option">Kontakt</div>
<div style="clear:both"></div>
</div>
Setting position: absolute on the div that holds the submenus (and position: relative on the menu options) will keep the height of that div (and its contents) from affecting the height of its parent elements.
#menu {
margin-bottom: 20px;
background-color: #73818c;
padding: 10px;
}
#menu, #menu * {
box-sizing: border-box;
}
.menu_option {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
font-size: 16px;
position: relative;
}
/* I've added this class to the div around the .submenus */
.submenu_wrapper {
position: absolute;
background: lightgray;
left: 0;
right: 0;
}
.submenu {
text-align: center;
border-bottom: dotted 2px black;
padding-top: 10px;
padding-bottom: 10px;
display: none;
font-size: 13px;
}
.submenu:hover {
background-color: white;
}
.menu_option:hover div {
display: block;
}
.menu_option:hover {
background-color: lightgray;
cursor: pointer;
}
<div id="menu">
<div class="menu_option">Strona główna</div>
<div class="menu_option">Galeria</div>
<div class="menu_option">Reżyserzy
<div class="submenu_wrapper"> <!-- new class -->
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="menu_option">Ulubione filmy</div>
<div class="menu_option">Seriale</div>
<div class="menu_option">Kontakt</div>
<div style="clear:both"></div>
</div>
add to the end of your CSS
menu_option:hover > div{
position:absolute;
top:10px;
}
.menu_option
{
position:relative;
}
Here is an Example
add an id named main_bx to the div that holds all divs with class .submenu and
.main_bx{
display:none;
}
.menu_option:hover .main_bx {
display: block;
position:absolute;
}
#menu {
margin-bottom: 20px;
background-color: #73818c;
padding: 10px;
height: 40px;
overflow: visible;
}
see snippet below (The window is small so you are going to find some wrapping in this snippet)
#menu {
margin-bottom: 20px;
background-color: #73818c;
padding: 10px;
}
.menu_option {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
font-size: 16px;
}
.submenu,.main_bx {
text-align: center;
border-bottom: dotted 2px black;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.submenu:hover {
background-color: white;
}
.main_bx{
display:none;
}
.menu_option:hover .main_bx {
display: block;
position:absolute;
}
.menu_option:hover{
background-color: lightgray;
cursor: pointer;
}
#menu {
margin-bottom: 20px;
background-color: #73818c;
padding: 10px;
}
<div id="menu">
<div class="menu_option">Strona główna</div>
<div class="menu_option">Galeria</div>
<div class="menu_option">Reżyserzy
<div class="main_bx">
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="menu_option">Ulubione filmy</div>
<div class="menu_option">Seriale</div>
<div class="menu_option">Kontakt</div>
<div style="clear:both"></div>
</div>