I want to remove the padding from just the status bar and have the padding on the text.
I added manual padding: 0; to the status bar but it didn't have any effects on it.
.list {
padding: 20px 0 20px;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
display: inline-block;
}
<div class="list">
<span class="status-bar"> </span>Test 1
</div>
You can use this code
HTML:
<div class="list">
<span class="status-bar"> </span>Test 1
</div>
CSS:
.list {
padding:0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding:20px;
display: inline-block;
height:100%;
}
https://jsfiddle.net/bfktcehb/11/
Add another span and put padding in class
<div class="list">
<span class="status-bar"> </span>
<span clsss="l1"> Test 1 </span>
</div>
.l1{
padding: 0px 115px 0px 0px;
}
Remove the padding from list:
https://jsfiddle.net/bfktcehb/8/
Related
Hello i am trying to make an footer it have an image so i am not able to properly intent my webpage please help... I want to achieve something like this::
CodePen link :https://codepen.io/Sherrinford03/pen/yGKaQb
What i want
how far i have come
<div class="footer">
<div class="part">
<div class="body_of_part">
<img src="images/brochure.jpg" align="bottom">
</div>
</div>
<div class="part">
<div class="body_of_part">
<span class="Title_of_departments">ADDRESS</span>
<span class="Body_of_cap">SOMEADD</span>
</div>
</div>
<div class="part">
<div class="body_of_part">
<span class="Title_of_departments">Contact us</span>
<span class="Body_of_cap">
Email<br>
SOMEMAIL
</span>
</div>
</div>
</div>
...CSS
.footer{
display: table;
text-align: center;
margin:20vh 0vw 0 0 ;
padding:0 0 0 0;
background: #222222;
}
.part img{
vertical-align: middle;
display: table-cell;
width: 20vw;
}
.footer .part{
height: 40vh;
border-left: 1px solid #353535;
display: inline-block;
width:20vw;
}
.part .Body_of_cap{
font-size: 18px;
}
Can u please help me ! i have been looking for a solution for about 2 hours ... PLease help!
remove
inline-block
from
.footer .part{
and it should work
I think I got it, I modifierd 3 css classes:
.footer{
/*display: table;*/
text-align: center;
margin:20vh 0vw 0 0 ;
padding:0 0 0 0;
background: #222222;
height: 300px
}
.footer .part{
height: 40vh;
border-left: 1px solid #353535;
/*display: inline-block;*/
width:20vw;
/*display:table-cell; vertical-*/
display: inline-block;
align:top;
}
.Title_of_departments{
display:block;
font-family: "Sofachrome" !important;
font-size: 20px;
/*padding:20vh 0vh 5vh 0vh;*/
text-align: center;
color: #E50000;
}
https://codepen.io/lolpez/pen/zyWoxL
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 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?
I am trying to create 2 column table like structure without using <table> , Here in 2nd column , When the text overflows I want it to stay on the right side.Here is my code so far - https://jsfiddle.net/a49vuup1/
<div class="mainbox">
<span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
<div class="myhr"></div>
<span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>
</div>
and my css
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
}
hr {
border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
display: inline-block;
}
.myhr {
border-bottom: 1px solid #293A42;
}
.rightbox {
font-size: 16px;
min-width: 150px;
}
You could use display: table for this
example:
<div class="table">
<div class="table-row">
<div class="cell">
text 1
</div>
<div class="cell">
text 2
</div>
</div>
<div class="table-row">
<div class="cell">
text 3
</div>
<div class="cell">
text 4
</div>
</div>
</div>
css:
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid black;
}
https://jsfiddle.net/41vpjpuy/
I wasn't sure what the <hr> and .myhr was for so I guessed that it was to span both columns. I used display: table-cell for .leftbox and .rightbox and made the .mainbox display: table of course and added table-layout: fixed so your lengths can make more sense.
Reference
Fiddle
Snippet
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
display: table;
table-layout: fixed;
border-spacing: 3px;
border-collapse: separate;
}
hr {
border-top: 3px solid rgba(44, 44, 44, 1);
width: 200%;
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
display: table-cell;
}
.myhr {
border-bottom: 2px solid #000;
display: table-row;
width: 200%;
min-height: 30px;
padding: 5px;
}
.rightbox {
font-size: 16px;
min-width: 150px;
display: table-cell;
}
<div class="mainbox">
<span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
<div class="myhr">
<hr/>
</div>
<span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>
</div>
Additionally, try this also. I eddited your css and html
<div class="mainbox">
<div class="row">
<span class="leftbox">State</span>: <span class="rightbox">TAMILNADU TAMILNADUTAMILNADU TAMILNADU</span>
</div>
<div class="row">
<span class="leftbox">Phone</span>: <span class="rightbox">landline</span>
</div>
</div>
CSS:
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
display: table;
}
.row {
display:table-row;
}
{
border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
word-wrap: break-word;
display: table-cell;
width:25%;
}
.myhr
{
border-bottom: 1px solid #293A42;
}
.rightbox {
/* word-wrap: break-word; */
font-size: 16px;
min-width: 150px;
display:table-cell;
}
This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.
The HTML:
<html>
<head>
<link rel="stylesheet" href="prototype.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
</div>
</div>
</div>
</body>
<html>
The CSS:
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
}
I appreciate any help.
Try: http://jsfiddle.net/dYz9k/1/
.tab {
border: 1px solid black;
border-top: 0;
margin-left: 5px;
padding: 3px;
display: inline-block
}
I set display: inline-block, and removed the margin-top and border-top.
display: inline-block allows the padding to work as you're expecting.
Hm..not 100% certain if that'a what you're asking, but try setting padding:0 on .tab class
Have you considered using a list, better for Accessibility
Example here http://jsfiddle.net/hdhkn/
HTML
<html>
<head>
</head>
<body>
<div id="container">
<div id="content">
<ul id="tabs">
<li id="tab0" class="tab">
No Circuit
</li>
<li id="tab1" class="tab">
Digital Inputs
</li>
</ul>
</div>
</div>
</body>
<html>
CSS
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
list-style:none;
height:40px;
}
.tab {
border: 1px solid black;
border-top:none;
margin-left: 5px;
padding: 3px;
float:left;
display:block;
}
Is this what you want to accomplish? Or do you want your tabs(.tab) to be on top of #tabs?
I've added overflow: hidden to #tabs and changed the margin-left to margin-right.
You're putting padding on inline elements (the tabs), that always causes unexpected results.
Cleaned it up a bit for you.
<html>
<head>
<style type="text/css">
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
width: 868px;
}
#tabs {
border-bottom: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
border-bottom:0px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
float:left;
}
.clear {
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
<span class="clear"></span>
</div>
</div>
</div>
</body>
<html>