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>
Related
How would I add the padding across all the lines? It only shows up on the first line.
Here's my code:
code {
color: black;
background-color: darken($background-color, 5%);
border-radius: 4px;
overflow: auto;
padding-left: 5px;
}
Ok, let's say that you have the following code, you will notice that there is no extra space as you wanted in the result.
And I actually noticed that indentation matters check out the snippet below, to see how I wrote it in my editor.
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
}
<pre><code>pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}
</code></pre>
And check this out with some indentation. The result is going to change and two new lines are to be added. One at the top and one at the bottom.
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
/* padding: 20px; */
}
<pre><code>
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}
</code></pre>
The two new lines are called textNode they are added by the browser since there is space in the line. And every space you add is called textNode
I don't understand the process behind it completely but I think it is the reason you are having some extra lines or paddings you didn't even add.
And that's how it looks on the browser
and here is the result after removing the extra spacing.
Edit
Based upon your request.
Here is how the code looks in my editor
and here is how it looks in the browser
To add padding from all sides as I understood from your code all you need to do is to add the following.
/* CSS */
pre code {
border-radius: 4px;
overflow: auto;
padding: 15px;
color: black;
background-color: #eee;
border: 1px solid #999;
display: block;
}
<!-- HTML -->
<pre class="myPre">
<code class="myCode">pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}</code></pre>
Another way to avoid all of this hassle is to use white-space: pre-line; here is how it looks on my editor.
pre code {
border-radius: 4px;
overflow: auto;
padding: 15px;
color: black;
background-color: #eee;
border: 1px solid #999;
display: block;
white-space: pre-line;
}
<pre class="myPre">
<code class="myCode">code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}
</code></pre>
And there you go, the padding is working as expected make sure you are wrapping the code with a pre in order to get it to work correctly.
If that wasn't what you request do please let me know again. I will do my best to help you out.
There is most likely padding in the code for the text in the code blocks. Could you try making that padding 0? I would post the code for it as well for a better chance of finding the issue.
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 have the following code:
<td>
<div>
<span class ="name">Can be long, can be short</span>
<button>Test</button>
</div>
</td>
td{
white-space: no-wrap;
width:175px;
position: relative
}
button{
position:absolute;
right: 15px;
bottom: 5px;
}
What I get is
I want to show name in one line (even if it is outside the cell), but button should be always in cell (on the same line).
If name is short then it should be right after the name, if not then stick to the right of cell.
I used absolute positioning, but in this case button always sticks to the right of the cell. Not what I need for short names.
So, picture for long name is what I need, but for short name I want yellow button to show near name, not stick to the right side.
Working jsfiddle: https://jsfiddle.net/8kchkucv/
Is it possible to do this with CSS?
Andrew what you are asking is not possible with having only one css for both the buttons, either you can have something like this jsfiddle
https://jsfiddle.net/rohts76/8kchkucv/1
.but
{
cursor: pointer;
padding: 2px 5px;
margin: 5px 0px 0px 5px;
border-radius: 5px;
font-family: 'Pacifico', cursive;
font-size: 10px;
color: #FFF;
text-decoration: none;
background-color: #F2CF66;
border-bottom: 1px solid #D1B358;
text-shadow: 0px -2px #D1B358;
position:absolute;
//right: 15px;
bottom: 5px;
}
.cell{
white-space: nowrap;
width:175px;
position:relative;
}
.cell div{
margin: 0;
padding: .35em;
float: left;
width: 100%;
height: 100%;
}
tr{
background-color: #8db4e3;
background-size: 100% 100%;
}
This code will give you correct thing..
How do you fix the grey border line so that it comes right down to the bottom of the green highlight instead of cutting off halfway?
I have provided my code below at codepen.
Thanks in advance for your help :)
html
<div id="status_bar">
<div class="admin_status_box">
<ul>
View & Delete posts
View & Delete members
</ul>
</div>
</div>
css
#status_bar {
width: 700px;
height: 60px;
background: #efefef;
float: left;
}
.admin_status_box {
background: #efefef;
height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box ul {
margin: 0px;
padding: 0;
}
.admin_status_box li {
text-decoration: none;
}
.admin_status_box a {
text-decoration: none;
padding: 0 30px 0 30px;
text-align: center;
height: 60px;
float: left;
line-height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
.admin_status_box a:hover {
background: #fff;
}
First, your HTML should be valid by actually using <li> tags. Next, you need to know, that borders meet at an angle and the corners are interpolated. A nice example is
div.test {
height: 200px;
width: 300px;
border-radius: 40px;
border-width: 20px 0 5px 0;
border-color: #000;
border-style: solid;
}
So, in order to fix your problem, you need to assign the borders to different elements. If you insert the <li> tags you have two elements to work with. See the demo for the following code.
.admin_status_box li {
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
You need li elements to be the first child of a ul element. If you put each a element inside of a li element, you can then set the border on the li element and the border have the desired result. After this is done, make sure you remove the 1px border from .admin_status_box
It may take a bit of CSS to get them positioned exactly how you would want them.
See this edited codepen
EDIT Typo
You will have to add a separate div to act as the bar. You can't tell the side border to shorten because that's the behavior it's set. Best bet is to use the div you have commented out as green_box.
I just corrected the html, displayed the li's inline-block and added the border bottom to the li's instead of the link. http://codepen.io/anon/pen/hvcBI
I just need a little help with my CSS:
I As you can see in here http://jsfiddle.net/5crwu/ I have some space between span and ul elements, and I can't find how to lift ul up, closer to the span. I thought margin: 0; will do this, but looks like I'm missing something.
.app-technologies {
width: 200px;
padding-left: 10px;
border: 1px solid black;
}
.app-technologies span {
position: relative;
display: block;
left: 0;
font-size: 17px;
margin: 0;
border: 1px solid black;
}
.app-technologies ul{
list-style: circle;
padding-left: 18px;
margin-top: 0;
border: 1px solid black;
}
If you don't want to remove the <br>, you can give your and NEGATIVE margin. It would be margin:0px 0px -20px 0px;
The negative bottom margin on the span will pull it up.
I just removed the BR after the SPAN, and the "position: relative" from the span styledef. No more space-between.