There is a gap between .heads and .container1 that has something to do with the h1 tag. Tried without h1 and it works, however i need the h1 there though.
How would i go about removing the gap between .heads and .container1?
http://codepen.io/techagesite/pen/Nqxzvg
.heads {
background-color: #FF9000;
padding: 0px 0px 0px 0px;
border: 1px solid #FFC223;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
border-bottom-right-radius: none;
border-bottom-left-radius: none;
}
h1 {
padding: 0;
font-size: 20px;
font-family: Tekton Pro;
color: #71A00E;
}
.container1 {
width: 100%;
border: 1px solid #006699;
background: #0A3D5D;
float: left;
padding-bottom: 4px;
padding-top: 4px;
padding-right: 0px;
padding-left: 4px;
clear: both;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: none;
border-top-left-radius: none;
}
p.normal {
font-size: 21px;
font-family: tahoma;
color: #F7DF57;
}
<div class="heads">
<h1>Some heading in here</h1>
</div>
<div class="container1">
<p class="normal">Some text in here</p>
</div>
You can remove margin from h1 element:
h1 {
margin: 0;
}
Strongly suggest to read about h1 element here and Collapsing margins too.
codepen
The gap is caused by margin collaspsing. In summary, the bottom margin of h1 is collapsed with that of the head element. Note that The top margin is not collapsed because there is a border between the margin of head element and the margin of h1.
You can use various techniques to contain the margin. The simplest one is to use overflow: hidden (in this example you can add a bottom border whose color matches background color).
.heads {
background-color: #FF9000;
border: 1px solid #FFC223;
border-bottom: none;
/* irrelevant rules removed */
overflow: hidden;
}
h1 {
font-size: 20px;
color: #71A00E;
}
.container1 {
width: 100%;
border: 1px solid #006699;
background: #0A3D5D;
float: left;
clear: both;
/* irrelevant rules removed */
}
p.normal {
font-size: 21px;
color: #F7DF57;
}
<div class="heads">
<h1>Some heading in here</h1>
</div>
<div class="container1">
<p class="normal">Some text in here</p>
</div>
Try this, add margin:0; on h1
h1 {
padding: 0;
font-size:20px;
font-family:Tekton Pro;
color:#71A00E;
margin:0;
}
use
*{
padding:0;
margin:0;
}
it will remove all extra padding and margin of all block element.
I just add a display property of inline-block to the h1 or p element and it removes all the div gaps.
Related
In my nav, I am separating my section with some text and a horizontal line. For each section this repeats. I am doing this as shown below:
.navSectionHeader {
font-size: 1em;
color: #fff;
margin-left: 5px;
margin-bottom: 10px;
font-family: "Roboto";
font-weight: 700 !important;
border-bottom: 2px solid #6c6c6c;
}
/*.navSectionHeader::after {
content: ' ';
display: block;
border: 2px solid;
border-color: #6c6c6c;
margin-left: 0px !important;
}*/
The issue is, my text is now pretty much stuck to the left of the parent div. It should be with some margin to the left while keeping the bottom border start from 0px to the left. When I try to move it with margin-left: 5px; it ends up moving the border-bottom as well. I tried this with ::after as shown in the commented bit, adding !important to the end but nothing changes. Am I doing this the wrong way? Sorry, I'm a front-end noob!
Edit: The section header is in a <span> if it makes a difference.
Use padding instead of margin.
.navSectionHeader {
padding-left: 5px;
}
An example to see difference,
div {
display: inline-block;
width: 100px;
height: 20px;
border-bottom: 1px solid black;
background: red;
color: white;
}
.padding {
padding-left: 5px;
}
.margin {
margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</div>
I want to have 3 elements in line.. a round icon for the step number, the title and an optional icon on the far right, separated by a vertical line.
The issue is with the bottom border. Because the bottom border "enlarges" the element, there is a gap in the bottom of the border between the vertical border and the bottom border... (and in fact, in my production code, the border bottom on hover DOES line up with the border-bottom of the container, however, the vertical border still has a gap at the bottom equal to the thickness of the border-bottom of the icon-button.
See the fiddle below:
http://codepen.io/anon/pen/wdvVBX
HTML
<div class="step-container">
<h2 class="step-title">
<div class="round-icon">
3
</div>
<span class="title">Migration</span>
</h2>
<div class="icon-button">
<i class="fa fa-print"></i>
</div>
</div>
CSS
* { margin: 0; padding: 0;}
.step {
}
.step-container {
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.step-title {
display: inline-block;
padding: 2rem 0 2rem 2rem;
}
.round-icon {
display: inline-block;
background-color: black;
color: white;
width: 2rem;
height: 2reml;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
text-align: center;
}
.title {
margin-left: 1rem;
display: inline-block;
vertical-align: middle;
}
.icon-button {
float: right;
padding: 2rem;
border-left: 1px solid #ddd;
font-size: 1.5rem;
height: 100%;
}
.icon-button:hover {
border-bottom: 4px solid black;
}
You can use an ::after pseudo element instead of border.
http://codepen.io/meecrobe/pen/pPoMZo
I resolved it like this: display flex on step-container and margin-left: auto for the icon-button with the height:100% and float:right removed
I created two tables using table,table-cell. But when I increase padding on first cell it also increasing padding on second cell also vice versa. What is the reason and how to solve it.
.desc-one{
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one{
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading{
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 5px;
}
.row-two-one{
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
display: table-cell;
padding-left: 20px;
}
.recent-heading{
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
In CSS code: If I increase padding-top / padding-bottom of my first table cell heading, the second cell elements also taking the padding mentioned in first cell (vice versa)
I have tried your code and found that only the first heading gets the padding top. Maybe you have another bit of code on your page somewhere that is adding this extra padding.
.desc-one {
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one {
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 100px;
}
.row-two-one {
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
display: table-cell;
padding-left: 20px;
}
.recent-heading {
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
Your code works just fine, as the other answers say..
However, in one comment you remark that it works the way you describe if you remove the vertical-align:top from the style of the first cell.
Then why did you have this property in there in the first place? It confuses the matter to people who want to answer.
The answer is, if you don't specify any vertical-align property, it defaults to 'baseline`. That means that both cells align their contents to one another, on the bottom of the first line of text in each of them. That's simply how table cells behave; they work together.
The solution, therefore, is to put vertical-align:top in, which causes the cells to align their contents to their tops.
I want to remove the space between tab and horizontal line displayed. Please find the fiddle http://jsfiddle.net/yy1t6w1f/ .
Sample code to create horizontal line:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
The created tab's should touch the horizontal line and their should be no space between tab and div.Thanks.
Adding
hr { margin: 0; }
will do the trick. The hr tag in HTML has default margins, which are causing that space between those two elements. Note that the above code will remove all margins. If you only want the top margin removed, you can use margin-top instead of margin.
In fact, in your case, you need not use hr tag at all; you can remove it and simply add:
border-bottom: 1px solid #888888;
to your .tabDiv CSS selector; that should also serve your purpose here.
table, table td {
border-spacing: 0px;
padding: 0px;
}
hr { margin: 0; }
http://jsfiddle.net/yy1t6w1f/6/
Unless I’m misunderstanding what you are building, there is a far better way to write this.
See below:
nav a {
display: inline-block;
background-color: #efefef;
border: 1px solid #888;
border-top: 2px solid #888;
border-top-left-radius: 10px 5px;
min-width: 96px;
padding: 0 4px;
text-align: center;
font: 18px impact;
letter-spacing: 2px;
color: #3B0B17;
text-transform: uppercase;
text-decoration: none;
}
<nav>
FirstTab
SecondTab
ThirdTab
</nav>
Ok I am having trouble with a school project where we must create a website with 5 pages, and publish it one of the requirements is a sidebar on every page, but the problem is we are not allowed to use absolute positioning only float and tables can be used to do this.
Here is my External CSS
/* CSS Document */
body{
background-color: #181818;
color: #E60000;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
margin-left: 0.7%;
margin-right: 39%;
padding: 10px 5px 10px 0px;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
margin-right: 0.7%;
margin-left: 65%;
padding: 10px 5px 10px 0px;
text-align: center;
height: 100%;
float: right;
}
p{
line-height: 160%;
font-family: Verdana, Arial, Helvetica, sans-serif;
Padding: 5px 10px 5px 10px;
}
/*Navigation bar*/
ul{
background-color: #000080;
margin: 10px 10px 0px 10px;
list-style-type: none;
padding: 5px 0px 5px 0px;
text-align: center;
border: 5px inset #C0C0C0;
}
ul li{
display: inline;
padding: 5px 20px 5px 20px;
text-align: center;
}
ul li a:link, ul li a:visited{
color: darkred;
border-bottom: none;
font-weight: bold;
}
ul li.selected{
background-color: #181818;
}
and here is my HTML
<div id="body">
<h1 id="header">About me</h1>
<p>some stuff
<br>
<br>other stuff</p>
<h2 style="text-align: center;">Me</h2>
<ol>
<li></li>
<li></li>
</ol>
<p style = "text-align: center;">
stuff<br>
br>Much more stuff</p>
</div>
<div id="sidebar"><h1>Name here</h1>
<p>Even more stuff</p>
</div>
Alright that is all the code I used for this I hope this helps
(sry this isn't codded correctly based on the websites standards but I couldn't get it to work sry)
alright Now Either I can get both #sidebar and #body's divs to appear in the same location; however one of there text will be below the other div container or one div will appear below the other on one side of the page, and I know this isn't very good CSS it's just a rough outline, but this is the biggest problem that stands out to me that will be hard to fix, so if anyone can help I would appreciate it.
I believe this is what you are looking for.
You can set the main content section - i believe you use #body - to have a width of e.g 70% and then the sidebar to have a width of 30%. Then use float: left; on both the elements.
Keep in mind that the 70/30 does not factor in padding or margins, which you will need to account for.
the code could look like this
> #body{ width: 60%; background-color: blue; float: left; height: 200px; }
> #sidebar{ width: 20%; background-color: red; float: left; height: 200px; }
>
>
>
> <div id="body"></div> <div id="sidebar"></div>
So i tried to reproduce your issue in a Fiddle here: DEMO
You have quite a few CSS issues:
if you want to use float for your layout, both can be float left with widths set
you are mixing percentages in your margin (which i converted to width
values) and pixel values in your padding
you can use the universal selector to set the box-sizing to
'border-box' which does not add the padding values to the width
values (* { box-sizing: border-box; }) -- if you don't use this CSS
you need to be careful that your padding doesn't cause your elements
to become wider than 100% of the page (their parent element
Here is your CSS after my modifications.
* {
box-sizing: border-box;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
width: 65%;
padding: 10px 5px 10px 0px;
float: left;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
width: 35%;
padding: 10px 5px 10px 0px;
text-align: center;
height: 100%;
float: left;
}
JS Fiddle demo
CSS
body{
background-color: #181818;
color: #E60000;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
margin-left: 10px;
margin-right: 20px;
float:left;
width:70%;
padding: 10px 5px 10px 0px;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
padding: 10px 5px 10px 0px;
text-align: center;
width:20%;
height: 100%;
float: right;
}
p{
line-height: 160%;
font-family: Verdana, Arial, Helvetica, sans-serif;
Padding: 5px 10px 5px 10px;
}
I'm assuming body is where you're putting your content (not the html body tag with an id of body)
Anyways when you have two side by side containers you will want both with the same float.
Example
#body, #sidebar {
Float: right;
Padding: 2%;
}
#body {
Width: 70%;
}
#sidebar {
Width: 15%;
}
example values just make sure the width + margins + padding don't don't exceed 100% or the parent container max pixel width.
Box-sizing: Border-box;
can help with containers growing with padding or borders.