I have been tasked with creating this.
I can create the box, font-awesome icon and the non-linking text using a pseudo element content, but I am unable to create the Learn More link (with a span class to include the >).
If I add text directly into the html, it will not fill the box (and spills out below it). I would also be forced to use inline styles to keep it top-aligned with the !.
We want to keep this in the CSS if at all possible. I realize that the real answer is that you can't do it, but I'm looking for a workaround to make it work.
This is the CSS I can use to place the non-linking message:
&:after {
color: #7b7b7b;
margin-top: -43px;
padding-left: 19%;
line-height: 18px;
display: flex;
font-weight: normal;
content: "You are no longer on FPC, you will now be back to your regular contract.";
#media #{$small} {
padding-left: 15%;
margin-top:-37px;
}
}
&:before {
color: #7b7b7b;
margin-left: 10px;
}
And this is the line of HTML:
<i class="fa fa-exclamation-circle"></i>; Learn more <span class="arrow-right"></span>
Does anyone have a solution to help me make this work?
Thanks
Here is a different structure & CSS if you end up going in that direction.
.message {
border: 2px solid #7b7b7b;
border-radius: 2px;
position: relative;
width: 220px;
font-size: 13px;
font-family: Arial;
background: #f7fcff;
padding: 7px 8px 5px 42px;
}
.message>.message-icon {
position: absolute;
color: #7b7b7b;
font-size: 26px;
left: 10px;
}
p {
color: #7b7b7b;
margin: 0 0 3px 0;
}
a {
color: #1464ae;
font-size: 12px;
text-decoration: none;
}
a .action-icon {
margin-left: 3px;
font-size: 10px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="message">
<span class="message-icon"><i class="fa fa-exclamation-circle"></i></span>
<p>You are no longer on FPC, you will now be back to your regular contract.</p>
<a href="">Learn More
<span class="action-icon"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
Related
Simply put, I want to make an icon button with text that downloads a file when the user clicks it, and my html code isn't doing that. The twist is, I have an icon button elsewhere on my page to do that exact same thing, and that one works.
The reason I'm including this ability twice in my page is because I want the user to be able to download this file no matter where they are in the page. The icon-button-with-text is the expected go-to place to get the file because it has an icon and text explaining what the button does. Here's its example code:
button {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
.button1 a {
color: black;
}
.button1 a:hover {
cursor: pointer;
}
.button1 span {
position: absolute;
top: 0px;
left: 42px;
}
.activeState {
display: none;
}
.inactiveState {
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .activeState {
display: inline-block;
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .inactiveState {
display: none;
}
<button class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</button>
However, the icon-button-with-text is part of the body content, and so will scroll up and out of sight as the user goes through the page. So that the user can download the file no matter where they are in the page, I made an icon-button in my fixed top app bar. Here's its example code:
li {
list-style-type: none;
}
.icon {
width: 24px;
height: 24px;
padding-top: 8px;
text-align: center;
}
.inactiveState {
height: 24px;
width: 24px;
top: 16px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.activeState {
display: none;
height: 24px;
width: 24px;
top: 16px;
margin-left: 12px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
li:active .inactiveState {
display: none;
}
li:active .activeState {
display: block;
margin-left: auto;
margin-right: auto;
}
li:hover {
cursor: pointer;
background: none;
outline: 2px black solid;
border-radius: 4px;
}
<li class="icon downloadResume">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
</li>
The icon-button was part of a menu of other links, so I made it a list item instead of an actual button.
Both buttons have the same icons and the same link states for those icons. Aside from the icon-button not having text and being a list item instead of a button proper, I don't see any difference between the two.
And yet, when I click on the icon-button, my file downloads. When I click on the icon-button-with-text, the icon state also changes like it's supposed to, but the file doesn't download. There's not even a snackbar in the corner mentioning the address of the file when I hover over the icon-button-with-text, whereas that happens when I hover over the icon-button.
Why is this happening, and what can I do so that the same file downloads from the two buttons?
Thank you in advance!
You must not wrap an anchor in a button. Both elements are clickable, so behavior is not really consistent accross browsers ¹ ²
Alas, W3C's validator reports an error when nesting those elements, so it simply is not valid HTML.
Error: The element a must not appear as a descendant of the button element.
<button>stackoverflow</button>
Instead, replace your button with a div:
<div class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</div>
And of course change your CSS accordingly:
div.button1 {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
/* ... */
If file's path is files\downloadableFile.pdf then in href="" set the path and in download="" set the file.
<a href="files" download="downloadableFile.pdf">
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
I want to represent a text like below image, how can i do this using CSS and HTML?
Custom Text Representation Image
Note: This is not text input field. I just want to display the text.
please try the below code.
<style>
.text-content{
position: relative;
border: 5px solid;
border-radius: 20px;
padding: 20px 0;
}
.text-content span{
position: absolute;
background: #fff;
left: 25px;
top: -18px;
padding: 0 10px;
font-size: 22px;
}
</style>
<h1 class="text-content">
<span>TV NAME</span>
ANDRIOD TV ROOM 1
</h1>
Try this one also. I think it's perfect for you.
fieldset {
width: 500px;
border-radius: 15px;
border: 5px solid #000000;
}
legend {
font-size: 18px;
font-weight: bold;
color: #000000;
}
span {
display: block;
text-align: center;
padding: 20px;
font-size: 22px;
font-weight: bold;
color: #000000;
}
<fieldset>
<legend>TV NAME</legend>
<span>ANDRIOD TV ROOM 1</span>
</fieldset>
You can use The HTML fieldset element:
<fieldset>
<legend>TV NAME</legend>
ANDRIOD TV ROOM 1
</fieldset>
Am trying to do the same as the photo shows but I don't really know how to do that
So I should be able to have that line with any fontawesome icon in the middle.
Here my initial markup:
<h1>Welcome</h1>
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
}
h1:after {
content: '\f209';
font-family: FontAwesome;
display: block;
}
Here my fiddle
Hope you can help.
By giving your h1 a border-bottom and positioning your :after icon absolute in the center inside it. Also apply a white background to make sure the line gets interrupted.
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
h1:after {
content: '\f209';
position: absolute;
font-family: FontAwesome;
background-color: #FFF;
display: block;
margin-left: 50px;
}
Update fiddle
Well... the accepted answer works fine, but it involves set widths, and will need to be rewritten to cater for longer text in the heading. The following works regardless of width of text (it does, however, involve a little bit more HTML):
https://jsfiddle.net/jx4dv11g/3/
h1 {
font-size: 25pt;
margin: 0 auto;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
text-align: center;
display: inline-block;
}
.headericon {
display: inline-block;
position: absolute;
}
.headericon i {
display: block;
margin-top: -25%;
background: white;
transform: translate(-50%,0);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>Welcome to this page<br><span class="headericon"><i class="fa fa-hand-peace-o"></i></span></h1>
I'll suggest you to use following HTML structure for this:
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
Apply a class on h1 and use pseudo elements :before and :after to draw lines around icon.
This will allow you to have one time generic styling for all similar places in your web page. If you wants to use different icon in some other heading then all you need is just change the font awesome icon in that header.
body {
text-align: center;
margin: 0;
}
.styled-heading {
text-align: center;
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
position: relative;
overflow: hidden;
}
.styled-heading .fa {
display: block;
margin: 0 auto;
}
.styled-heading:before,
.styled-heading:after {
position: absolute;
background: black;
margin-left: 30px;
width: 999px;
height: 1px;
content: '';
bottom: 12px;
left: 50%;
}
.styled-heading:after {
margin-right: 30px;
margin-left: 0;
right: 50%;
left: auto;
}
.orange {
background: orange;
}
.green {
background: green;
}
.blue {
background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
<div class="orange">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-home"></span>
</h1>
</div>
<div class="blue">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-globe"></span>
</h1>
</div>
<div class="green">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-power-off"></span>
</h1>
</div>
I have a CSS circle appearing after a div using the :after pseudo class. I need to insert an arrow inside of that circle, just like this. My problem is putting anything inside the circle. Since I already used :after to create the circle, how can I add something else inside of that?
I need the circle to be pure CSS, but the arrow can be an image.
Here is my code:
http://jsfiddle.net/s7crao4b/
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 (800) 555-5555</div>
</div>
#callus-phone {
color: white;
background: black;
padding: 25px 0px;
text-align: center;
}
.phone-number {
padding-bottom: 10px;
}
#callus-phone:after {
background: red;
border-radius: 50px;
content: "";
display: block;
height: 50px;
margin: auto;
width: 50px;
}
you can use Unicode character \25B6 in content
#callus-phone {
color: white;
background: black;
padding: 25px 0px;
text-align: center;
}
.phone-number {
padding-bottom: 10px;
}
#callus-phone:after {
background: red;
border-radius: 50px;
content: "\25B6";
display: block;
line-height: 50px;
height: 50px;
margin: auto;
width: 50px;
font-size: 22px
}
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 (800) 555-5555</div>
</div>
You can achieve the same result using only CSS with Font Awesome. It does not use the :after you are referring to, but again, its pure CSS, if you don't want to include the font awesome library, you could study their CSS and see how they do it, and go from there to implement your own icon with the :after
In my example, I added a bunch of positioning, and font sizing to try to center the arrow to the best of my abilities, but you can disregard that if you want.
I hope this is helpful.
#callus-phone {
color: white;
background: black;
padding: 25px 0px;
text-align: center;
}
.phone-number {
padding-bottom: 10px;
}
.fa-circle {
color: red;
}
.fa-caret-right {
color: white;
left: 2px !important;
top: -2px !important;
position: relative;
font-size: 40px !important;
}
.fa-stack {
font-size: 30px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 (800) 555-5555</div>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-caret-right fa-stack-1x fa-inverse"></i>
</span>
</div>
After seeing Vitorino Fernandes answer, I wanted to tell you that if you need to stick to the usage of the :after, but if you want a fancier character instead of an ugly character, you can use the code below. You dont need a reference to the Font Awesome CSS library, but you need to include the reference to their icons in your own CSS. (Or you can just include their CSS link tag in your HTML and forget about the #font-face that I added in your CSS).
#callus-phone {
color: white;
background: black;
padding: 25px 0px;
text-align: center;
}
.phone-number {
padding-bottom: 10px;
}
#callus-phone:after {
background: red;
border-radius: 50px;
content: " \f095";
display: block;
height: 50px;
margin: auto;
width: 50px;
font: normal normal normal 14px/1 FontAwesome;
font-size:45px;
text-rendering: auto;
}
#font-face {
font-family: 'FontAwesome';
src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 (800) 555-5555</div>
</div>
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.