How can I make Atom display a vertical line after the line numbers, so that I know where the lines start?
Here's how it looks now:
Here's how I want it to look:
Add the following to your Atom Stylesheet:
.gutter-container {
border-right: 1px solid #555;
}
.scroll-view {
margin-left: 6px;
}
.vertical-scrollbar {
margin-right: 6px;
}
Result:
Related
I am trying to make a paragraph to fit the width of a text however, I am getting this white space on line breaks. I am looking for any solution that wouldn't affect text and wouldn't require JavaScript (that could cause a reflow). Doesn't have to be inline-block.
* {
margin: 5px;
padding: 5px;
}
div {
background: gray;
}
p {
background:white;
border-bottom: 1px dotted black;
display: inline-block;
max-width: 130px;
}
<div id=container>
<p>technique and statement a landscape or discovery a injection or fic</p>
</div>
Demo Fiddle
Is there any way that I can make paragraph width match the width of the longest line?
Here is the expected and current result:
* {
margin: 5px;
padding: 5px;
}
div {
background: gray;
max-width: 130px; // you can ignore this if you dont need to be 130 px
}
p {
background:white;
border-bottom: 1px dotted black;
display: inline-block;
width:100%;
}
As #skyline3000 mentioned:
"match the longest line" - as #James said, there is only one line. You are artificially making line wraps with the max-width. You either need to put real line wraps into the text, or continue to adjust the max-width.
You need to manually specify line breaks which work for me - handling line breaks is rather an easy job for regular users.
body {
background: gray;
}
#container {
background: white;
display: inline-block;
}
span {
border-bottom: 1px dotted black;
max-width: 130px;
background: white;
}
<div id=container>
<span>technique and<br>statement alandscape<br> ordiscovery ainjectn or
fic i</span>
</div>
JsFiddle
Also, I have decided to move to the span element and wrap it into display: inline-block to achieve this result. I don't know if this result is satisfying to you, I'm not sure if I was trying to fight HTML/CSS spec here. Real line breaks are probably the only solution.
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
I am new to CSS and have looked for answers to this question, but whilst I have found similar ones nothing matches my circumstances.
I want to draw lines of various lengths after some text to a specific point in a block
This works with the number after the indent right class being the %age of padding=right applied to extend the border bottom:
<span class="kimmeridgedescription1841">County of<span class="italic"><span class="kimmeridgenameinsert">D</span><span class="indentright46">orset</span></span></span>
<span class="kimmeridgedescription1841">Hundred, Wapentake, Soke or Liberty of<span class="italic"><span class="kimmeridgenameinsert">H</span><span class="indentright01">asilor</span></span></span>
There are ten of these lines however each with different lengths, so whilst works it reflects my lack of detailed knowledge.
The web page is http://www.c5d.co.uk/descriptionkimmeridge1841.php and if you were to look at that, I guess it becomes obvious what I need. Incidentally the word Purbeck is intended to be beyond the extent of the line
Thank you
.kimmeridgedescription1841 span.borough { font-style:normal;line-height:0; display:block; text-indent:25px;text-align:left;}
.kimmeridgedescription1841 {margin:auto; font-style:normal;line-height:3;display:block;}
.kimmeridgedescription1841a {margin:auto; font-style:normal;line-height:5;display:block;}
.kimmeridgedescription1841div {margin-left:auto; margin-right:auto; width:450px;}
.kimmeridge1841bracket {
float: right;
font-size: x-large;
margin-right: 25%;
font-weight: 200;
margin-top: -5px; }
.kimmeridgedescription1841hr {
width: 33%;
border-bottom: black;
margin-top: -2px;
margin-right: 50%;
}
.kimmeridgenameinsert {
border-bottom: 1px solid black;
padding-left:2%
}
.indentright01 {
border-bottom:1px solid black;
}
.indentright2 {
padding-right:2%;
border-bottom:1px solid black;
}
I'm working on my school newspaper's wordpress website, and I'm trying to indent the content of the rotating tweets widget by 15px. I've tried adding the following code to the wordpress theme editor's style.css sheet, but it hasn't made any noticeable changes:
.rotatingtweet{padding-left: 15px;}
When I add the same line of code in google Chrome in developer mode, it has the desired effect, but I just can't get it to work by editing the website's main style.css file in the "Voice" wordpress theme.
Thanks for your time!
-John
The tweets are displayed with position: absolute within their container, so they ignore the padding.
Put the padding on the outer div instead, then adjust the header:
.widget_rotatingtweets_widget {
padding-left: 15px;
}
.widget_rotatingtweets_widget h4 {
margin-left: -15px;
}
EDIT: The above, with additional tweaks to borders and such, will work, but there may be a slightly easier solution.
Instead of using padding, give the rotating tweets container a left margin. In your style.css file (probably line 102), there is a selector:
#content .rotatingtweets,
#content .norotatingtweets {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
margin-bottom: 3%;
}
If you change this to:
#content .rotatingtweets,
#content .norotatingtweets {
margin-bottom: 3%;
margin-left: 15px;
}
and move the borders to the elements just before and after the rotatingtweets container:
.sidebar .widget_rotating_tweets .widget_title {
border-bottom: 1px solid #DDD;
}
.widget_rotating_tweets .follow-button {
border-top: 1px solid #DDD;
}
This seems to accomplish what you want.
I tried the following code css3 style for 5 px wide horizontal line
<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />
but I am getting 5px wide red rectangle.
Please advise me with a proper CSS3 style code.
As long as the element has the right width, a simple:
border-bottom:5px solid red;
Will do the trick.
You should use width and height properties instead of border:
width: 5px;
height: 1px;
color: red;
http://www.sovavsiti.cz/css/hr.html
Just use the "border-width" property and set it to 5px.
<hr style="border-width: 5px !important;">
Get rid of the top-padding, and use the border-bottom suggested above... http://jsfiddle.net/ZdLfJ/
My CSS for HR Line Styling;
.line_height { height:4px; }
.line_width { width:100%; }
.line_hcenter { margin-left: auto; margin-right: auto; }
.line_vcenter { margin-top: 10px; margin-bottom: 10px; }
.line_color { color:black; }
.line_bgcolor { background-color:black; }
.line_bordercolor { border-top: solid black; border-bottom: solid black; }
Add these classes to the hr tag.
All three color ( color , bgcolor, bordercolor ) classes are needed to get a solid colored line across.
Classes .color and .bgcolor needed for browser cross compatibility or else you just get double lines.
Dont use any other thing after border property just make 5px instead of 1 px in border.
I.e