I have an issue with the line-height. Is there a way to reduce the line-height and move the i-elements closer so at least the petrol-background touch since it's not possible to use a negative value for line-height?
JS Fiddle
HTML:
<i>Nummer eins</i><br>
<i>Nummer zwei</i>
CSS:
#import url(http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);
i {
font-family: "Lora", serif;
font-size: 0.8em;
font-weight: normal;
line-height: 0em;
padding: 0px 3px;
color: white;
background-color: #406A76;
}
Thanks in advance!
check if this resolve your issue jsfiddle
html
<i>Nummer eins</i> // iremoved the br tag
<i>Nummer zwei</i>
css
i { // line height removed
font-family: "Lora", serif;
font-size: 0.8em;
font-weight: normal;
padding: 0px 3px;
color: white;
background-color: #406A76;
float: left; //added float left here
clear: both; //added clear both
}
If your goal is to eliminate the white bar between the two lines, it might be a good solution to put them both in a <div> or <span> (I used a span)
JSFiddle
html
<span>
<i>Nummer eins</i><br>
<i>Nummer zwei</i>
</span>
css
#import url(http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);
i {
font-family: "Lora", serif;
font-size: 0.8em;
font-weight: normal;
line-height: 0em;
padding: 0px 3px;
color: white;
background-color: #406A76;
}
span {
background-color: #406A76;
}
Related
I am trying to style the Angular2 ng2-date-picker (link) component and would appreciate any guidance.
I cannot find any documents regarding the styling of this component online, and there is only one similar question on stackoverflow, which does not help me much.
I would like to style the actual `<input >` element inline with the below CSS:
.af-input {
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
border-radius: 15px;
border: solid 1px $af-brownish-grey;
background-color: transparent;
color: $af-brownish-grey;
}
This is my setup in my HTML/View:
<div class="date-picker">
<dp-date-picker theme="dp-material" [(ngModel)]="selectedDate" mode='daytime' [config]='config'></dp-date-picker>
</div>
These are the CSS attributes I see when inspecting the element in the browser:
dp-date-picker.dp-material .dp-picker-input {
box-sizing: border-box;
height: 30px;
width: 213px;
font-size: 13px;
outline: 0;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
This is the HTML code when inspecting the ng-date-picker element:
<div _ngcontent-oyd-c55="" class="date-picker">
<dp-date-picker _ngcontent-oyd-c55="" theme="dp-material" mode="daytime" ng-reflect-theme="dp-material"
ng-reflect-mode="daytime" ng-reflect-config="[object Object]" class="dp-material ng-valid ng-dirty ng-touched"
ng-reflect-model="Fri Jun 19 2020 13:50:18 GMT+0">
<div ng-reflect-ng-class="[object Object]" class="dp-open">
<div class="dp-input-container"><input type="text" class="dp-picker-input ng-pristine ng-valid ng-touched"
ng-reflect-is-disabled="false" ng-reflect-model="2020-06-19" placeholder=""></div>
</div>
</dp-date-picker>
</div>
Thank you in advance!
It doesn't seem like this component allows configurations styling-wise.
You'll need to manually override existing styling with css. Just inspect the element and find the required selectors you want to override.
As this is an external component, make sure to wrap your styles with ::ng-deep { ... }, so that your styles get placed at the top of the DOM tree and can override initial styling.
As per Berk Kurkcuoglu's answer, I solved my styling challenge using ::ng-deep { ... }.
This is my specific implementation to style the <input >:
.date-picker {
::ng-deep {
input {
&:last-child {
font-family: $af-default-font;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
border-radius: 15px;
border: solid 1px $af-brownish-grey;
background-color: transparent;
color: $af-brownish-grey;
}
}
}
}
*See also this answer for more details.
I hope this helps someone else!
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.
I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:
If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.
If I wrote it with a space between them, none of them get bigger.
My question is: is there a way to get the " only to be bigger?
Here is the html code I used: <div class="pullquote-right">"this is a test</div>
The css:
.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size:115%;}
.pullquote-right::first-letter {font-size: 200%;}
Thanks.
An option would be to use the ::before and ::after pseudo elements.
.quote::before,
.quote::after {
content: "\0022";
font-size: 2em;
font-weight: bold;
color: green;
vertical-align: -.3em;
}
<p class="quote">This is a great quote</p>
The first-letter pseudo class refers to the first letter and the punctuation directly preceding it. Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
I think the easiest way to do what you want might be to put a span tag around the punctuation you want to make bigger and style that from the css.
Or you can check out this work-around: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
I ended up combining the two answers to be able to use the div tag and not neet to add extre <p></p>as follows:
.pullquote-left {
display: inline-block;
max-width: 350px;
float: left;
padding: 20px;
margin-left: 15px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size: 110%;
background-color: white;
box-shadow: 5px 5px 5px #888888;
text-align: center;
}
.pullquote-left::before {
font-size: 2em;
font-weight: bold;
content: "\201C";
}
<div class="pullquote-left">This is the final result.</div>
Help a CSS newbie out here. What I'm trying to do is very simple.
As I said in the image, I want the text to be in the same line. I tried everything i could think of.
Here is the index.php:
http://pastebin.com/9LVVFgUZ
Here is the style.css:
http://pastebin.com/v8Eius2A
Thanks.
Original code:
.box_con a {
color: #111111;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Remove the float, make the a element block-level and add a left margin like so:
.box_con a {
color: #111111;
display: block;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
margin-left: 150px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Result:
Adding to .box_con a these rules: float: left and width: 470px seems to get what you asked for in your image.
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}