Edit Spaces Between Elements - html

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

Related

HTML/CSS: Can't figure out how to get a divider in a box

I'm very new at this, so sorry if my code is a little messy. I'm trying to create a job search page where the results will show a bar like this:
I've kinda got it, except I can't get that divider in between the PREV, 1 to 100, and NEXT. Mine looks like this:
Here's my code:
HTML:
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
CSS:
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
I've tried making a results class for every link, but then I end up getting one big box and 3 little boxes around each link.
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
display:flex;
}
.results a {
color:#000;
text-decoration:none;
font-family:sans-serif;
}
.a, .c {
flex:1;
padding: 5px 0px;
text-align:center;
}
.b {
flex:2;
padding: 5px 0px;
text-align:center;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
}
<div class="results">
<div class="a"><a href="https://gregslist--farahgus10.repl.co/">< Prev<a/></div>
<div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
<div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
</div>
Maybe put this in very simple table. I think it should be good enough solution for your need.
Something like this JSFiddle
<table>
<tr>
<td>
Prev
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >Next</a>
</td>
</tr>
</table>
With CSS with base like this
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
Your case is simple enough, don't no fancy flexbox or anything.
.results {
color: black;
border: 1px solid lightgrey;
/* width: 300px; removed */
display: inline-block; /* Added */
/* padding:5px; moved to the children (<a>) */
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
/* Added */
a {
display: inline-block;
padding: 5px;
text-decoration: none;
}
/* giving the second child left and right border to mimic dividers */
.results>a:nth-child(2) {
border-right: 1px solid lightgrey;
border-left: 1px solid lightgrey;
}
<div class="results">
Prev
1 to 100 of 179
Next
</div>
Your closing tags on the <a> links are wrong. They should look like </a> with the slash before the a. Once you update those, you can place the <a> links into individual divs:
HTML:
<div id="container">
<div>Prev</div>
<div>1 to 100 of 179</div>
<div>Next</div>
</div>
CSS:
div {
float: left;
}
#container {
border: 1px solid lightgrey;
}
#container div {
padding: 8px 24px;
border-right: 1px solid lightgrey;
}
#container div:last-child {
border-right: none;
}
There are many factors that are needed:
Your elements were badly closed
You need to be more specific to what elements you should apply the CSS
These are just the most notable, you need more CSS information. Much success.
.results {
display: flex;
width: 100%;
padding: 5px;
}
.results a {
max-width: 300px;
min-width: 150px;
color: black;
text-decoration: none;
border: 1px solid lightgrey;
padding: 8px;
text-align: center;
}
<div class="results">
Prev
<a href="#" >1 to 100 of 179</a>
<a href="#" >Next</a>
</div>
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>

online div not side by side

I have this code below. I have one container div with 2 inner div. I want the two inner divs to be side by side so I used in-line block on the two divs. Also I want the two divs to be start on top. In the demo below they are stuck on top and I dont know why while in my own project they are side by side but first div starts on top while second div does not start on top.
What is the best css style to make the 2 div in a container start on top while it is side by side?
What is the best way to make two div side by side?
.homissync {
display: block;
height: 100%;
}
.homissync>div {
padding: 27px;
margin: 3px;
display: inline-block;
}
#homissyncbuttons {
height: 100vh;
width: 20%;
margin: 3px;
}
#homissynclist {
height: 100vh;
margin: 3px;
width: 68%;
}
#homissyncbuttons .libuttons {
width: 100% !important;
background-color: #ff0000;
}
.vBorder {
border: solid 1px #ddd;
}
button, input[type=submit] {
padding: 8px 20px;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.35);
background-color: orange;
font-size: 0.9rem;
font-weight: bold;
border-radius: 3px;
border: 0;
outline: none !important;
margin: 3px 0;
cursor: pointer;
transition: background 1s ease-in-out;
}
<div class=" homissync">
<div id="homissyncbuttons" class=" vBorder">
<ul>
<li>
<button class="libuttons">UACS</button>
</li>
<li>
<button class="libuttons">Medicine</button>
</li>
<li>
<button class="libuttons">Non-Drugs</button>
</li>
<li>
<button class="libuttons">Miscellaneous</button>
</li>
</ul>
</div>
<div id="homissynclist" class=" vBorder">
<button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
<button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
<div id="homissynclistresult" class=" vPadding vBorder">
</div>
</div>
</div>
Please try this code instead of the display:inline-block; and just add float:left.
.homissync>div {
display: block;
float: left;
}
you can use float: left; instead of display: inline-block;
.homissync {
display: block;
height: 100%;
}
.homissync>div {
padding: 27px;
margin: 3px;
float:left;
}
#homissyncbuttons {
height: 100vh;
width: 20%;
margin: 3px;
}
#homissynclist {
height: 100vh;
margin: 3px;
width: 65%;
}
#homissyncbuttons .libuttons {
width: 100% !important;
background-color: #ff0000;
}
.vBorder {
border: solid 1px #ddd;
}
button, input[type=submit] {
padding: 8px 20px;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.35);
background-color: orange;
font-size: 0.9rem;
font-weight: bold;
border-radius: 3px;
border: 0;
outline: none !important;
margin: 3px 0;
cursor: pointer;
transition: background 1s ease-in-out;
}
<div class=" homissync">
<div id="homissyncbuttons" class=" vBorder">
<ul>
<li>
<button class="libuttons">UACS</button>
</li>
<li>
<button class="libuttons">Medicine</button>
</li>
<li>
<button class="libuttons">Non-Drugs</button>
</li>
<li>
<button class="libuttons">Miscellaneous</button>
</li>
</ul>
</div>
<div id="homissynclist" class=" vBorder">
<button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
<button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
<div id="homissynclistresult" class=" vPadding vBorder">
</div>
</div>
</div>
display:inline-block have default white space, you need to remove the white space. otherwise you need to relace the display-inline-block with float:left , there is so many options to remove the white space please check the reference link below
Why is there an unexplainable gap between these inline-block div elements?

Submenu placement HTML

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>

show the div inside that div next to it

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%;
}

hide element in another parent

How would i go about hiding or showing an element that is contained in a container, based on another container's hover state?
Here's what i have so far, as an example:
HTML5
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<a href="AppsDashboard" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</div>
</div>
</div>
CSS3
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
div.left-menu-item-first:hover left-menu-item-container.sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
However, that simply does not work. Hovering over the left-menu-item-first div does not show the submenu contained in the left-menu-item-container parent. Do they really and absolutely must be children of the parent for this to work with Pure CSS? I can and already had a JQuery version setup and going but i wanted to do it via CSS only if possible.
You can only alter child elements and sibling elements on hover, never a completely different element.
if you put the submenu right after the first menu element, you can use the sibling selector + as follows:
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
.left-menu-link:hover + .sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<span class="AppsDashboard">
<a href="AppsDashboard1" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</span>
</div>
</div>
</div>
Since there is no CSS parent selector, try altering your html such that the hovered item is a sibling of left-menu-item-container.sub-menu
Try using a CSS sibling selector:
Change:
div.left-menu-item-first:hover left-menu-item-container.sub-menu
to
div.left-menu-item-first:hover + left-menu-item-container.sub-menu
Or
Change:
div.left-menu-item-first:hover left-menu-item-container.sub-menu
to
.left-menu-link:hover + left-menu-item-container.sub-menu