How do I have a bigger font size for only a single character in a sentence?
For a example: All characters except - in "Click - sign" should be font size 13. And only - should be font size 55. The sentence should look normal.
See Fiddle. The - sign is higher than the rest of the text.
<div class="aa">
Click <span Style="font-size:30px; line-height:45px;">-</span> sign
</div>
aa {
font-size: 13px;
}
EDIT:
Here you can use position: relative; for hyphen:
span {font-size:30px; position: relative; top: 3px;}
https://jsfiddle.net/fLvtjwcw/1/
use this css
* {
margin: 0;
padding: 0;
}
p {
font-size: 13px;
}
p span.hlt_txt{
font-size: 55px;
line-height: 0;
vertical-align: top;
}
HTML
<p class="aa">
Click <span class="hlt_txt">-</span> sign
</p>
Related
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
<div id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<br />
<div id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
In MS IE:
However, in Chrome or MS Edge:
the html looks like:
The layout in IE is what I expect/want.
However, when I change to the Japanese chars to other language chars (English, Chinese, Korean, etc.).
They all look right.
How can I format the Japanese chars correctly in this case
Why Japanese chars are so special in this case in different browsers provided that they are all UTF-8 encoded?
Why Japanese chars are so special in this case in different browsers
provided that they are all UTF-8 encoded?
They are special because they use different font and therefore are taller than Latin characters. You can see the same result if you use Latin text, but increase the font-size for that specific value span.
However the main problem is that your wrapper div elements are basically non-existent and not forcing child elements to be in rows and therefore each element is trying to be next to its sibling. If you removed the br element you would see that there is only one row.
A better solution is to use css to order your elements into rows and remove the br completely. Simple way to do that is to use flex on your wrapper elements. Also you should fix the height of rows to get a more consistent appearance (I added line-height to counter that).
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
.row {
display: flex;
line-height: 9pt;
margin-bottom: .3em;
}
<div class="row" id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<div class="row" id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
I am editing the template of an Anki deck, which uses HTML and CSS. What I would like to do here is on the front side, vertically aligning the Japanese character to the middle and the hint to the bottom. I tried manually spacing everything with <br>, but then it doesn't work in different resolution windows (and is just a dirty solution) Front example.
On the back side I would like to make the stroke diagram always snap to the top, the Japanese character with keyword and mnemonic in the middle, and the rest on the bottom. If I tried spacing this with <br> I would get the same problem as on the front page, plus the mnemonic is sometimes 1 line, but can also be 5+ lines so it would have to be aligned dynamically to work even if the window size was always the same Back example with arrows.
I already found this question which seems to somewhat answer my question, but as I know practically nothing about CSS/HTML I don't know how to apply it in my case. If you could help me I would greatly appreciate it as I spend a lot of time with this deck and it keeps annoying me, I would also share the improved version for other people to use.
Here is the code for the front
<div class="front" lang="ja">
<span class="large japanese">{{kanji}}</span>
<br>
<hr>
{{hint:Memory palace}}
back
<div class="back" lang="ja">
{{strokeDiagram}}<br> <br>
<hr>
<span class="medium">{{keyword}}</span>
<br/><br/>
<span class="large japanese">{{kanji}}</span>
<br>
<span class="medium">{{myStory}}</span> <br><hr>
<span class="tiny"> Memory palace: {{Memory palace}}</span>
<span class="tiny"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}</span><br/>
<!-- Uncomment for Heisig Story
<hr>
<span class="medium">{{heisigStory}}</span>
{{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->
<!-- Uncomment for koohi Story
<hr/>
<span class="medium">{{koohiiStory1}}</span>
-->
<hr/>
<br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
<span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny">Constituents: {{constituent}}</span><br/><br/>
{{#readingExamples}}<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>
and the styling,
div.front, div.back {
text-align: center;
font-family: sans-serif;
font-size: 16px; /* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {font-size: 16px;}
span.small {font-size: 24px;}
span.medium {font-size: 32px;}
span.large {font-size: 96px;}
span.italic {font-style: italic;}
.win .japanese {font-family: "Meiryo", "MS Mincho";}
.mac .japanese {font-family: "Hiragino Mincho Pro";}
.linux .japanese {font-family: "Kochi Mincho";}
.mobile .japanese {font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";}
Front
div.front,
div.back {
width: 100%;
text-align: center;
font-family: sans-serif;
font-size: 16px;
/* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {
font-size: 16px;
}
span.small {
font-size: 24px;
}
span.medium {
font-size: 32px;
}
span.large {
font-size: 96px;
}
span.italic {
font-style: italic;
}
.win .japanese {
font-family: "Meiryo", "MS Mincho";
}
.mac .japanese {
font-family: "Hiragino Mincho Pro";
}
.linux .japanese {
font-family: "Kochi Mincho";
}
.mobile .japanese {
font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";
}
/* Positional */
.bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: block;
position: absolute;
left: 0;
right: 0;
/* I want a better way to do the below! */
top: 50%;
transform: translateY(-50%);
}
.top {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="front" lang="ja">
<span class="large japanese center">{{kanji}}</span>
<hr>
<span class="bottom">{{hint:Memory palace}}</span>
Note that the <hr> is unstyled.
Back
div.front,
div.back {
width: 100%;
text-align: center;
font-family: sans-serif;
font-size: 16px;
/* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {
font-size: 16px;
}
span.small {
font-size: 24px;
}
span.medium {
font-size: 32px;
}
span.large {
font-size: 96px;
}
span.italic {
font-style: italic;
}
.win .japanese {
font-family: "Meiryo", "MS Mincho";
}
.mac .japanese {
font-family: "Hiragino Mincho Pro";
}
.linux .japanese {
font-family: "Kochi Mincho";
}
.mobile .japanese {
font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";
}
/* Positional */
.bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: block;
position: absolute;
left: 0;
right: 0;
/* I want a better way to do the below! */
top: 50%;
transform: translateY(-50%);
}
.top {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="back" lang="ja">
<div class="top">{{strokeDiagram}}</div>
<hr>
<div class="center"><span class="medium">{{keyword}}</span>
<span class="large japanese">{{kanji}}</span>
</div>
<div class="bottom">
<span class="medium">{{myStory}}</span> <br>
<hr>
<span class="tiny"> Memory palace: {{Memory palace}}</span>
<span class="tiny"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}</span><br/>
<!-- Uncomment for Heisig Story
<hr>
<span class="medium">{{heisigStory}}</span>
{{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->
<!-- Uncomment for koohi Story
<hr/>
<span class="medium">{{koohiiStory1}}</span>
-->
<hr/>
<br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
<span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny">Constituents: {{constituent}}</span><br/><br/> {{#readingExamples}}
<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>
</div>
One problem with this technique is that, if there is insufficient space, they will draw over each other.
I have a website www.weardenali.com. A part of the site has an image banner which I want to be overlayed by a Colored Box and some text, just like how Bellroy.com has theirs.
This is what I have, a failed code which isn't responsive :
Wear Denali (my site):
Bellroy:
This is the code i am using now :
.image-banner-content.content-left {
padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
bottom: 80% !important;
}
a.link:hover,
a.link:active {
text-decoration: underline;
color:#F03E3E !important;
}
<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
<h3>
<span style="color: #0e3559;">
Designed by Urban Adventurers
</span>
</h3>
<h4>
<a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
> SHOP NOW
</a>
</h4>
</div>
I appreciate any advice/pointers.
Assuming your image banner was done in a kinda sorta ok way... This should work:
<!--- code for the image banner --->
<div class="MyAdvertisement">
<h3>Designed by Urban Adventurers</h3>
<a href="http://weardenali.com/">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
SHOP NOW
</a>
</div>
<!--- end code for the image banner --->
Note that I added Font Awesome code for the > you had in there. Using glyphs the way you did is annoying for non-sighted users. Google Font Awesome. It's nice.
I'm not sure what you want to do exactly. I'll give you css for pixel values, but if you want responsive as is 'scales with the browser', use percentages.
.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}
If you can't put your code where I suggested, you are going to have to tell us more about your site code before anyone can help you in any meaningful way.
Good luck & have fun.
Html noob here. I'm trying to make a division that contains some ordinary text and a download button. I've got a paragraph for the normal text and an anchor with an image for the button. For some reason, the button wants to take the same alignment as the paragraph. I have this code:
p {
color: #fff;
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
}
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
<div id="downloadText">
<p>In the meantime, would you like to download a fun bubbles game for Linux?</p>
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
</div>
Both the paragraph and the anchor end up aligned left. Why would this be? (note: if I change paragraph to align right, both will align right.) thanks in advance!
It's a bit unclear..
Run this snippet, hope it helps you:
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
p {
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
display: block /* Set display block, the element will move */
}
<div id="downloadText">
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</div>
The anchor is an inline element, which means its box is as large as its content. The box is positioned to the left because of the paragraph's style. The anchor's content might still be positioned to the right, but it doesn't matter because its width is as large as its content.
You've got a few options:
set a { position: absolute; right : 0 } in the style. Not great, imo
set the width of the anchor to 100% a { width : 100%; text-align : right } I also do not favor this option.
the most correct one css-wise is to wrap the anchor in another block-level element, e.g. another paragraph:
.installer-container {
text-align : right;
}
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
</p>
<p class="installer-container">
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
I need help on some HTML/CSS styling. I have a cart widget on my website that shows the items in the users cart, and it displays the item quantity, the name, the price, and a button to remove the item. This is what it looks like. Now, what I want is for it to only display the quantity, the item name, and the price on the far right, and I want the word "remove" to appear whenever the user hovers over the item, replacing the price on the far right. So, I want there to normally be just the quantity, the name of the item, and the price. When the user hovers over the cart item, I want the price to be replaced with the word "remove". Here's the html of the widget:
<div id="modal" style="width: auto; height: auto; top: 178px; left: 542.5px; display: block;"><div id="content">
<!--dynamic-cached-content-->
<li class="cart_item empty" style="display: none;"><span class="edd_empty_cart">Your cart is empty.</span></li>
<li class="edd-cart-item">
<span class="edd-cart-item-quantity"> 1 </span><span class="edd-cart-item-separator"> - </span><span class="edd-cart-item-title">The Grant</span>
<span class="edd-cart-item-price"> $2.00 </span><span class="edd-cart-item-separator">-</span>
remove
</li>
<li class="cart_item edd-cart-meta edd_total" style="">Total: <span class="cart-total">$2.00</span></li>
<li class="cart_item edd_checkout" style="">Checkout</li>
<!--/dynamic-cached-content-->
</div><a id="modal-close" href="#"><i class="fa fa-times-circle-o"></i></a>
</div>
And here's the CSS that I have:
body,
button,
input,
textarea {
color: #55b6fb;
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.75;
word-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
And for the remove button:
a.edd-remove-from-cart {
color: #666;
}
a.edd-remove-from-cart:hover {
color: #e56363;
}
I'm sorry if this isn't enough information. If you need more CSS or HTML, tell me what you need and I can copy and paste it. Thank you all so much!
For this type of question, it's best to provide a live example.
I suspect you can do this pretty easily with CSS :hover pseudo class.
You may find help on easy digital downloads forum as well.
Looks like you are missing parent UL tag :/
This should do the trick.
#modal #content li.edd-cart-item {
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
position: relative;
}
a.edd-remove-from-cart {
color: #666;
display: none;
position: absolute;
width: 100%;
background: #fff;
left: 0;
top: 0;
}
#modal #content li.edd-cart-item:hover a {
display: inherit;
}