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>
Related
I want to move my text to the left-hand side from the centre. text-align or float properties don't work.
I know there is a previous question like this but none of the solutions worked. Can anyone see if I am doing anything wrong here? I am using Brackets and here is my code:
.logo {
color: #0000000
float: left;
padding-left: 25px;
font-size: 16px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color: #000000;
}
Here is the .html
<ul class="gws">
<div class="logo">
LOGO
</div>
Here is how the website currently looks
http://prntscr.com/k14jf5
Here is the full coding
http://prntscr.com/k1b1zl and http://prntscr.com/k1b2gn
try this: To move Left side use
{
float:right;
padding-right:50px;
}
To move Right side
{
float:left;
padding-left:50px;
}
Hex colors contain 6 digits, yours has 7, also do not forget to place a semicolon (;) behind the color and the float: left; See if that works.
There are 2 things that I would suggest:
The float is missing the ending semicolon. It should be like this:
float: left;
What's the width of the unordered list class? Make sure it's sufficient to let your logo to align to the left. If it has a fixed width then make it large.
If you could provide more information then I would be able to help better!
To get the desired result you should give anchor tag to.
.logo {
color: #0000000;
padding-left: 25px;
font-size: 16px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color: #000000;
text-align: left;
}
I'm trying to make a headers for the chapters in my short story using a collapsible div. I use two different fonts / styles and three layers of divs to make it look the way I want it to. Unfortunately the text is several pixels too low, and it hurts my eyes when I see it.
I know that inline display doesn't really allow for vertical align (my paddings are ignored). I tried using "inline-block" to no avail. I tried top-padding the left ">" symbol, but that makes the entire construction move downwards. I've been hammering at this for the past 2 hours, I give up :D.
Here is my HTML markup as well as the CSS.
<div class="ShortStoryHeaderDiv" onclick="toggleContentDiv('h1','c1');">
<div class="ShortStoryHeaderCenterDiv">
<div id="h1L" class="ShortStoryHeaderDivLeft">></div>
<div class="ShortStoryHeaderText">Must... align... text</div>
<div id="h1R" class="ShortStoryHeaderDivRight"><</div>
</div>
</div>
CSS:
.ShortStoryHeaderDiv
{
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
height: 3em;
text-align: center;
background-color: #DDD;
cursor: pointer;
}
.ShortStoryHeaderCenterDiv
{
padding-top:0.2em;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ShortStoryHeaderDivLeft
{
display:inline-block;
padding-right: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderDivRight
{
display:inline-block;
padding-left: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderText
{
display:inline;
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
text-align: center;
text-decoration: underline;
color: #00F;
}
You could try and use display:table-cell to vertically-align:middle
or set a height and then set the line height to the same.
e.g. height: 40px; line-height:40px;
Managed to make it work by using this in ShortStoryHeaderText CSS class, thanks to SkelDave for reminding me about vertical align. It is awkward that the padding-top ONLY started to work once that vertical-align: top was specified. It is ignored otherwise.
display:inline-block;
padding-top:3px;
vertical-align:top;
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;
}
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>
I have a navigation bar. Horizontal.
I have an image on the left. Text on the right. Show below:
I want to take the image so it is position slightly underneath the text, so basically the image needs to slide a tiny bit under the left part of the text. Shown below:
My current HTML is:
<p class="menu_text">
<img class="tgss_icon" src="http://www.thegoldservicescholarship.co.uk/images/icon.jpg" alt="TGSS Icon"/>
<a class="menu_links" href="contact_us.php">Contact Us</a>
</p>
My current CSS is:
img.tgss_icon{
height: 30px;
width: 35px;
padding-bottom: 7px;
}
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
p.menu_text{
font-size: 15pt;
/*color: #58595B;*/
}
Thanks in advance! Chris.
You can do this with a negative margin on the link.
a.menu_links { margin-left: -20px; }
Demo