I am making a website where I have a h1 with a large font size. What I am trying to do is to make a superscript that is aligned to the top of the text but no matter I do sup is not aligned properly.
Here is the plunk of what I am working on!
http://plunker.co/edit/gnS915O9PVAe9VKktqFh?p=preview
So in this plunk, I am trying to make "TM" a superscript of ACME. However, it
Mark up is this :
<h1>
acme
<sup>TM</sup>
</h1>
Style is this:
body {
padding: 60px;
font-size: 10px;
}
h1 {
font-size: 12em;
text-transform: uppercase;
line-height: 1em;
}
h1 sup {
font-size: .1em;
vertical-align: super;
}
Set the vertical align and the line height:
h1 sup {
font-size: .1em;
vertical-align: top;
line-height: 35px;
margin-left: -30px;
}
I updated the answer to push the sup to the left with a negative margin.
Plunker: http://plnkr.co/T45y7ob43mdNY3fvC73S?p=preview
The only way I could make this work (at all) in Chromium 24/Ubuntu 12.10, is to use:
h1 sup {
position: relative;
display: inline-block;
font-size: .1em;
top: -2em;
}
(Forked, I think) Plunker demo.
Your extra linebreak after acme is making it wrap to the next line... See your forked PLUNKER
<h1>
acme<sup>TM</sup>
</h1>
Related
I need to align "OUTDOOR" word to center , pls help,
i m new to CSS.
for what i have tried,the "outdoor" is aligned to left , eventhough "Is where life happens" aligns center.
//here is my html part
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main"> outdoor</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
// here is the css parent element
.heading-primary{
color:#fff;
text-transform: uppercase;
margin-bottom: 6rem;
}
here is the child elements
.heading-primary--main{
display: inline-block;
font-size: 5rem;
font-weight: 500;
letter-spacing: 3.5rem;
}
.heading-primary--sub{
display:block;
font-size: 1.6rem ;
font-weight:800;
letter-spacing: 1.35rem;
}
The reason your text is not fully centered is because of the letter-spacing. The letter-spacing property also adds spacing after the last letter, making it so your "Outside" text does not appear centered. I figured this out by highlighting your text and noticing that there is extra spacing after your last letter. To fix this, you can add
margin-right: -YOURLETTERSPACING
to the element with the letter-spacing property to negate the extra space at the end. In your case (as shown below), I added margin-right: -3.5rem since your letter-spacing is 3.5rem for your main class and I did the same for your sub class (with margin-right: -1.35rem). Does that leave you with any questions?
.heading-primary{
color:#000;
text-transform: uppercase;
margin-bottom: 6rem;
text-align: center;
}
.heading-primary--main{
display: block;
font-size: 5rem;
font-weight: 500;
letter-spacing: 3.5rem;
margin-right:-3.5rem;
}
.heading-primary--sub{
display:block;
font-size: 1.6rem;
font-weight:800;
letter-spacing: 1.35rem;
margin-right:-1.35rem;
}
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">outdoor</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
So in the picture you can see that the number "5384" and the number "50" dont float to the same height. I know that the paragraphs both float to the exact top of the line but how do i get them to look like they're on the same height?
I don't want to use "margin-top: some pixels" because that wouldn't scale properly would it?
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings_cents {
font-size: 1.5rem;
margin: 0 0 0 0.3rem;
display: inline;
vertical-align: top;
}
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
This can easily be achieve using sup html tag
Read more about this tag here
p{
font-weight: bold
}
p sup{
font-weight: normal
}
<p class="savings">5.384 <sup>50</sup></p>
You can easily style that using tag or classes
Just add a parent element and use display: flex. You can check both elements height is same. You can use other flex properties to change the alignment if you want.
p{margin: 0;} /*resetting p margin*/
.savings-ctnr {
display: flex;
}
.savings {
font-size: 3rem;
}
.savings_cents {
font-size: 1.5rem;
}
<div class="savings-ctnr">
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
</div>
We can inspire from tag <sup>, make <span> with class savings_cents, wrap it with element with class savings and make something like this:
.up-small {
vertical-align: super; /*make element to be aligned with the superscript baseline of the parent*/
font-size: 50%; /*fits proportions*/
}
Example look into snippet
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings .savings_cents {
vertical-align: super;
font-size: 50%;
}
<p class="savings">5.384<span class="savings_cents">50</span></p>
I have a design below which I have to replicate in HTML/CSS.
The above design is basically a text with arrow button at the left.
I have replicated the text in fiddle (which is extremely simple). I am wondering how can I put the arrow left to the text ?
I tried following this tutorial from w3schools but somehow I wasn't able to replicate the same arrow.
The CSS code for the text (which I have used in the fiddle):
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
Please try the following code. The unicode arrow is not precisely the way you mocked-up but close. If you need the arrow to be precise, you can switch the .share::before rule to use a background image.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share::before {
content: "\27A6";
color:#000;
padding-right:8px;
}
<div class="share">Share This Article</div>
Based on the other answer, this one lays the font entity out right.
As discussed in your comments above, the arrow is not the same exact one you are looking for. You need to cut it out and create an image to add to the image tag, or find the source of the image in text form.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share p::before {
content: "\27A6";
color:#000;
padding-right:8px;
font-size: 25px;
vertical-align: middle;
}
.share p {
vertical-align: middle;
}
<div class="share">
<p>Share This Article</p>
</div>
<div class="share">
<p><img src=""/>Share This Article</p>
</div>
I am trying to vertically align font icons. I have tried vertical-align: middle but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.
div {
font-size: 50px;
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
margin-top: 20px;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
vertical-align: middle;
text-transform: none;
}
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<div>
<span class="icon icon-shopping-cart"></span> Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.
For your shopping cart icon, it seems text-top is most vertically centered.
Example at: https://jsfiddle.net/p3g189bg/
Another nowadays example via Flexbox.
span {
font-family: helvetica, arial, sans-serif;
display: inline-flex;
align-items: center;
padding: 0 1rem;
font-size: 3rem;
line-height: 4rem;
border: 1px solid #ffb0d1;
}
/* target all Font Awesome 5 <svg> tags */
.svg-inline--fa {
padding-right: 1.5rem;
}
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<span>
<i class="fas fa-shopping-cart"></i>
Shopping Cart
</span>
Try using line-height attribute
You can set it to 0.5,1,1.5 etc
You can try for vertical-align:middle;
or line-height:1;
or using padding property you can set icon position
example using vertical:middle; property js fiddle: http://jsfiddle.net/vrcarwrj/
Alternatively to the above, using the span element method you describe, you could relatively position the span tag, relative to its parent div element.
Like:
div{
position: relative;
}
span.icon-shopping-cart{
position: relative;
top: 5px;
}
You can try using valign: middle
and/or then setting the line-height to 1px, 1.5px, etc.
I have two labels in the footer of my mobile website. Sometimes the title of the selected product is large and it comes very close to the price as shown below:
THE HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really really really rea</span>
<div class="stickyPrice">$1142.00</div>
</div>
The styles for both the elements are shown below:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
width: 85%;
}
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
margin-right: 20px;
}
How can I improve it? Wrap it!
This behavior is because you have a total width of the elements of 100% and a margin-right of 20px. It is overflowing.
put the margin-right on the .stickyProductctName;
add display:inline-block; to .stickyPrice
How bout stack them on top of each other for mobile view?
CSS:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
display: block;
text-align: center;
}
#stickyFooter .stickyPrice {
font-weight: bold;
text-align: center;
}
Here is a JSFiddle.
http://jsfiddle.net/shannabarnard/Ls75o3cr/
Firstly, you need to put both elements in a span, it doesn't work well semantically to have one as a span and the other as a div contained within another div.
Change your widths, and give the price both a left and right padding.
HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really re ally reall yreally really re ally really re reall y really really rereally really really re rea</span>
<span class="stickyPrice">$1142.00</span>
</div>
CSS:
.stickyProductctName {
text-transform: uppercase;
float: left;
display:inline;
width:85%;
}
.stickyPrice {
font-weight: bold;
width: 10%;
float: right;
margin: 0 10px;
}
The mistake is that you used margin instead of padding. As long as border-box is being used (It is standard on frameworks), padding eats the inside of containers instead of adding it. All you need to change is:
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
padding-right: 20px;
}
In case you don't have border-box on the site, here is a good article about it. Frameworks usually use a rule like this:
* {
box-sizing: border-box;
}