modifying the line height does not help as it cuts away the part from the top of the text.
any way to align the text at the bottom vertically ? ( vertical-align: text-bottom; does not work )
is there a way to get rid of the whitespace below Discover.
html is:
<div class='leftSideNews'> <span class='t1'>Discover</span> <span class='t2'>s world !</span> </div>
.leftSideNews {
font-size: 20pt;
/*line-height: 100px;*/
/*vertical-align: text-bottom;*/
}
.leftSideNews .t1 {
font-size: 60pt;
color: #368FD8;
vertical-align: baseline;
}
.leftSideNews .t2 {
font-size: 40pt;
color: #EA3B3B;
}
lefSideNews covers both texts. t1 represents the selected text 'Discover' and t2 represents the other red text
EDIT 2: The font i have importated, which is also used in that span is a .toff file, not a .woff file which I am guessing is the root of the problem, as it is not rescaling properly. thanks for your answers.
thanks
.leftSideNews .t1 {
font-size: 60pt;
color: #368FD8;
vertical-align: baseline;
display: inline-block;
line-height: 55px;
background: gray;
}
http://jsfiddle.net/dolours/zvMKH/332/
Is this are you looking for I'm not sure.
Related
I've got 2 <div>s that each gather their text from some JS that I've written.
But I want the end-result to look like in the following image. And I can't figure out how to do that.
I can consolidate them into a single but then I have the issue of needing to apply two different weights to a single <div>, which also wracks my brain.
So basically I want text with 2 different font-weights to be underlined with no interruption.
I've tried the following, and a lot of googling:
div.parentDiv {
text-decoration-line : underline;
}
Is this what you are after?
div {
font-weight: 700;
text-decoration: underline;
}
div span {
font-weight: 400;
}
<div>
Good Reviews
<span>(30)</span>
</div>
Its hard to know with your current question, could you add your HTML and JS so we can see the whole example.
I guess you wanted to both the div text to be underlined.
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
.parent {
display: flex;
flex-direction: row;
text-decoration: underline;
font-weight: 600;
}
.child1 {
color: red;
}
.child2 {
color: green;
}
<div class="parent">
<div class="child1">Good Reviews</div>
<div class="child2">(30)</div>
</div>
However to achieve the result you want you can use .
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
.child1 {
text-decoration: underline;
}
<div>
<span class="child1">Good Reviews (30)</span>
</div>
It can be done by making the underline apply to both the .parentDiv and to its child <div>s, as in this example:
div.parentDiv,
div.parentDiv>div {
text-decoration-line: underline;
}
div.div1 {
display: inline-block;
font-weight: bold;
}
div.div2 {
display: inline-block;
}
<div class="parentDiv">
<div class="div1">
Good reviews
</div>
<div class="div2">
(30)
</div>
</div>
Note that in some browsers the underline may not cross through the bottom of the parenthesis the way it does in your example image. If you absolutely need that, then that can't easily be achieved using regular text formatting CSS; you'd need to add extra elements (or pseudo-elements) with custom border formatting.
To style the two parts individually you need to have at least one of them in its own element.
This snippet wraps the parts in spans and puts the underline under the whole containing element.
Note that to get a continuous underline like in the image given in the question you need to set underline position as well, otherwise, in some browsers, there will be a break in the line when it comes across a descender (in this case the brackets).
If you need the line to cut across the descenders in all browsers you will need to abandon underline and paint in the line using linear-gradient background on the containing div.
div {
text-decoration: underline;
text-underline-position: under;
}
span:nth-child(1) {
font-weight: bold;
}
<div><span>Good Reviews</span><span>(30)</span></div>
I'm using attempting to make a quote with :before open-quotes and :after close-quotes. The closing quotes are wrapping to a new line all by themselves in some instances. I'd like to make it so the last word and quotes break together, wrapping correctly. Any thoughts on how to do this in a way that would work across varying content? I'm using this in Drupal and this quote element is used in many articles with different content.
CSS:
p.quote {
background-color: #f0f0f0;
font-family: $didot-font;
font-size: 25px;
font-weight: 400;
padding: 2rem 2.5rem;
-webkit-text-stroke: 0;
letter-spacing: 0.02px;
line-height: 35px;
color: $gray4-color;
#extend %left-align;
text-transform: none;
font-style: italic;
#extend %magin-position;
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
}
Twig:
<div class="col-12">
<p class="quote" cite="">{{ content.field_quote }}</p>
</div>
Trying adding the display:inline-block; to the elements. This will arrange them in one line.
You can also use position: absolute; then use the top and left properties.
I suspect the whitespace inside the handlebars tag is inserting whitespace between your quote elements and the text itself. Run the following snippet and observe how the addition of whitespace before the end of the <p> element allows a word-break before the closing quote.
.content {
width: 600px;
}
.quote {
background-color: #f0f0f0;
font-size: 25px;
font-weight: 400;
padding: 2rem 2.5rem;
letter-spacing: 0.02px;
line-height: 35px;
font-style: italic;
}
.quote:before {
content: open-quote;
}
.quote:after {
content: close-quote;
}
<html>
<body>
<div class="content">
This one fits:
<p class="quote">This content should appear between quotes, and they are required to "stick" to the words, not wrap.</p>
This one is just a tiny bit wider:
<p class="quote">This content should appear between quotes, and quotes are required to stick to the words, not wrap.</p>
This one has LWS inside the <p> elements that separates the quotes from the text:
<p class="quote">
This content should appear between quotes, and quotes are required to stick to the words, not wrap.
</p>
</div>
</body>
</html>
See the example code:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
I'm assuming the extra space is "built-in", but is there a way to remove it somehow?
I'm trying to left-align some huge page titles with the much-smaller subtitles underneath.
This has no correct way, because, it is the font that displays that way. Consider the below example:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
.serif2 { font-family: Times; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
<br>
<span class="serif2">Done</span>
The above image has different layout if it is a serif in my computer. So, it is a trial and error basis and you have to make sure what you are doing is fine in all computers and browsers. The Times font fits perfectly and the serif font has some space. This is why I said it is a trial and error method.
The only hacky solution is to use a negative margin for the content, based on the font and you cannot generalize it.
You could add a minus margin-left. See here: https://jsfiddle.net/mna56yf9/5/ But if you're planning on having a background color, you might have to apply it to a wrapping div.
span{
margin-left: -20px;
}
I assigned a background image for a <div> in the CSS of my HTML code, i assigned the width and height and also add contents to the <div> but the bg still not shown, this is what I've tried:
CSS:
#order_list {
position: absolute;
width: 25%;
height: 100%;
z-index: 2;
left: 75%;
top: 35px;
color: #F33;
background:url(img/ItemList.png)
display: inline-block;
alignment-adjust: central;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size-adjust: inherit;
grid-rows: inherit;
list-style: upper-alpha;
word-spacing: inherit;
word-wrap: break-word;
vertical-align: central;
}
HTML:
<div id="order_list">
<div id="confirm" class="buttonClass">
<div align="center">Confirm</div>
</div>
<div id="total" class="totalClass">
<div align="center"></div>
</div>
</div>
screen shot:
It might depend on how your browser interprets it, but you forgot a semicolon at the end of
background:url(img/ItemList.png)
Without it, browsers won't show the image. Thanks to #Leeish for noting that in this case, a semicolon is absolutely neccessary.
; is missing at the end of background:url(img/ItemList.png) which is why you are not getting the background image.
Semicolon is needed to separate the declarations from one another.
It can be omitted from the last declaration in a CSS rule, but it is recommended so that later if you want to add more declarations, you won’t need to remember to add it in there.
I've made a wrapper div with a text div and a image div floating to the right. A simple task, yes, but not for me tonight it seems. I am unable to make it work and stuck.
Here's how it looks right now: http://bit.ly/RNinCm
CSS:
introwrapper {
width: 938px;
background-color: white;
margin-bottom: -20px;
padding-left: 5px;
}
.introtekst {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
}
.gammeltbilde {
float: left;
}
HTML:
<div id="introwrapper">
<div class="introtekst">
<p>Some text here.</p>
</div>
<div class="gammeltbilde">
<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken"/>
</div>
</div>
Change your CSS like so:
.introtekst {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.gammeltbilde {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}
The picture is larger than the container, try setting dimensions on the image:
<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken" width="800" />
(800 makes it fit, but you may want to change that as needed.)
You could place a width="800px" tag on the img, but I would recommend actually staying away from that whenever possible and actually sizing down the images in Photoshop or some similar program. If you have a page with lots of images that you've sized down using the width tag, your page load times can get pretty big.
You could just remove <img src="bilder/kjiptbilde.jpg" alt="bilde fra parken">