I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below:
How can I achieve this?
You can do something like this:
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<div id="contenedor">
<div class="left">
<h2>Nice Work</h2>
<p>We possess within us two</p>
<p>winds. So far I have written</p>
<p>only of the conscious mind.</p>
</div>
<div class="right">
<i class="fa fa-search"></i>
</div>
</div>
CSS:
#contenedor {
font-family: 'Roboto', sans-serif;
width: 500px;
height: 500px;
background: #FFF;
float: left;
display: block;
}
.left {
float: left;
margin-right: 20px;
text-align: right;
}
.left h2 {
font-weight: bold;
}
.left p {
line-height: 18px;
color:#BDC3C7;
}
.right {
padding-top: 20px;
}
.right i {
background: #1DCFD1;
padding: 20px;
border-radius: 30px;
color:#FFF;
}
Working Demo
Related
There are several messages concerning this subject, but I cannot solve this problem. As here:
How to reverse the order of elements in responsive mode
I don't understand why is the order of my elements changing? Why my elements to right are not Deposit then Paidout? As in the image below.
It is possible to solve this problem without flex?
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
margin: 0;
padding: 0;
}
.txt10 {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: red;
}
.header{
display: inline-block;
width: 100%;
background-color: aqua;
height: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
.header-items-left{
float: left;
padding-left: 20px;
}
.left{
margin-left: 150px;
}
.header-items-right{
float: right;
padding-right: 10px; /*espacement entre les deux lignes à droite */
}
.right{
margin-right: 50px;
}
<div class="header">
<div class="left">
<div class="header-items-left"><i class="far fa-calendar"></i>138 running days</div>
<div class="header-items-left"><i class="far fa-envelope"></i>admin#superbtc.biz</div>
</div>
<div class="right">
<div class="header-items-right"><i class="fas fa-angle-right"></i> deposit</div>
<div class="header-items-right"><i class="fas fa-angle-right"></i> paidout</div>
</div>
</div>
Use float: right on the container instead and display: inline-block for the two items.
.right {
float: right;
}
.text {
display: inline-block;
padding-left: 20px;
}
<div class='right'>
<div class='text'>first</div>
<div class='text'>second</div>
</div>
I've built the front-end HTML/CSS code for a site which now needs transferring onto Wordpress. I'm using the html5blank theme as this was recommended for such purposes. I've watched a tutorial by Chris Lam and it all seems quite straightforward.
However, I'm having quite a few issues with my stylesheets - some rules seem to be applying correctly and some don't which is very strange. As per the tutorial all I've done is delete the styling code in the style.css file and replace it with my own.
Why would some rules apply and not others? Do I need to add something to another file (function.php?) that will allow my styling rules to work?
By way of an example, here's how my header and top section looks in my front-end home page -
And here's the (horrific looking) Wordpress version -
I've re-set the background image to include the link for the Wordpress version -
section#home {
height: 400px;
background: url("http://localhost:8888/wp-content/uploads/2017/07/homepagemain.jpg") center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
But it doesn't seem to want to appear.
On the nav bar, I've had to replace the tags with the following code as per the requirements in the header.php file -
<nav>
<?php html5blank_nav(); ?>
</nav>
Just wrapping the php code within an tag has no effect.
I've read that some themes require child/parent themes but that this shouldn't apply to the HTML5blank theme as its effectively an empty shell.
The same code has been transferred across into the style.css file. Do I have to delete the normalise.css files also? I was using reset.css for the front-end version. Any assistance would be appreciated.
/* GENERAL */
#import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header { background:white; width:50%; float:left; height: 100px; }
.right-header { background:white; width:50%; float:right; height: 50px; }
.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }
.right-header-bottom { background: white; float: left; width: 100%; height: 100%; }
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
/* HOME PAGE */
section#home {
height: 400px;
background: url(../images/homepagemain.jpg) center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
#agencyimage {
position: absolute;
margin: 0;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.showreel {
height: 50px;
max-width: 100%;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between;
}
.showreel, .showreel > div.seemore {
display: flex;
align-items: center;
justify-content: flex-start;
flex:1;
}
.showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
.showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
padding-left: 10px;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore {
margin-left: 30px;
}
.seeour i {
margin-right: 30px;
}
<html>
<head>
<meta charset="utf-8">
<title>Feature Media</title>
<meta name="description" content="Video technology and production">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="images/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="images/phone.png">
<p>0113 220 5265</p>
<img src="images/email.png">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
<section id="home">
<img src="images/AGENCY-BUSINESS.png" id="agencyimage" style="width: 150px; height: 250px;">
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</section>
it happens when your style-sheet is not properly added to your homepage.
You are giving this path, but this is not including the stylesheet, because the path is not correct.
<link rel="stylesheet" href="css/reset.css" />
try to add this code before your css directory
<?php bloginfo('stylesheet_directory')?>
So, it will be like that
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/css/reset.css" />
It will gives the base url of the site, so this code becomes
www.xyz.com/css/"your css file"
Do this for all link attribute for css, and make sure that all css files put up in that css folder.
I'm trying to add some top padding only to the font awesome icon, but if I set padding-top:10px or margin-top:10px to the i element, it also adds padding to the text before it.
Can someone help?
jsFiddle
i {
font-size: 30px;
padding-top: 10px;
}
.block {
background-color: #ccc;
padding: 10px;
max-width: 400px;
text-align: center;
}
.block-number {
background-color: #000;
color: #fff;
padding: 10px;
display: inline-block;
font-size: 20px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="block">
<div class="block-number">2 to 4</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
Since both of .block-number and font awesome <i> elements are set to inline block, so vertical-align will take effects, you can change the default value from baseline to top etc.
.block-number, i {
...
vertical-align: top;
}
i {
...
padding-top: 10px;
}
There is another way by using position and top to adjust <i> element individually.
i {
position: relative;
top: 10px;
}
I'm not sure if it's possible to do it with other method, but what I would do in your case is positioning the icon absolutely.
i {
font-size:30px;
position: absolute;
padding-top: 8px;
padding-left: 10px;
}
.block {
background-color:#f1f1f1;
padding:10px;
max-width:400px;
text-align:center;
position: relative;
}
.block-number {
background-color:#000;
color:#fff;
padding:10px;
display:inline-block;
font-size:20px;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
<div class="block-number">
2 to 4
</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
I didn't get your answer yet, but if you just want to center the text and icon vertically, use following code:
i {
font-size:30px;
}
.block {
background-color:#f1f1f1;
padding:10px;
max-width:400px;
text-align:center;
}
.block-number {
background-color:#000;
color:#fff;
padding:10px;
display:inline-block;
font-size:20px;
}
.block > * {
vertical-align: middle;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
<div class="block-number">
2 to 4
</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
I have an app that switches between stylesheets when the user rotates their tablet. There is a container div which holds everything. Inside the container div there is 2 divs. The one div holds the math problem and the other div holds a chalkboard.
In landscape mode the math problem and chalkboard are next to each. THIS WORKS RIGHT.
Example: ([Math Problem] [Chalkboard]) --- Side-by-side
In portrait mode the math problem should be above the chalkboard. RIGHT NOW, their just stacked on top of one another.
Example: ([Math Problem]
[Chalkboard]) --- Chalkboard sits below math problem
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>quiz</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="quiz.css" rel="stylesheet" />
<script src="quiz.js"></script>
</head>
<body>
<div class="container">
<div class="mathSide">
<!-- QUIZ STATS -->
<div id="quizStats">
<p class="alignLeft" id="statQuestionDiv"></p>
<p class="alignCenter" id="statTimerDiv"></p>
<p class="alignRight" id="statScoreDiv"></p>
</div>
<div style="clear: both;"></div>
<!-- QUIZ STATS -->
<!-- MATH EQUATION -->
<div class="mathEquation">
<div class="line1Num" id="line1NumDiv"></div>
<div class="line2">
<div class="line2Ope" id="line2OpeDiv"></div>
<div class="line2Num" id="line2NumDiv"></div>
</div>
<div class="line">
<div class="result"></div>
</div>
</div>
<!-- MATH EQUATION -->
<!-- ANSWERS -->
<!-- Multiple choice -->
<div class="center">
<div id="multipleChoiceDiv">
<button class="multipleChoice" id="btnChoice1"></button><br />
<button class="multipleChoice" id="btnChoice2"></button><br />
<button class="multipleChoice" id="btnChoice3"></button><br />
<button class="multipleChoice" id="btnChoice4"></button>
</div>
</div>
<!-- Multiple choice -->
<!-- Fill in the blank -->
<div class="center">
<div id="fillBlankDiv">
<input class="textBox2" id="userAnswer" type="text" />
<button class="fillBlank" id="btn7">7</button>
<button class="fillBlank" id="btn8">8</button>
<button class="fillBlank" id="btn9">9</button><br />
<button class="fillBlank" id="btn4">4</button>
<button class="fillBlank" id="btn5">5</button>
<button class="fillBlank" id="btn6">6</button><br />
<button class="fillBlank" id="btn1">1</button>
<button class="fillBlank" id="btn2">2</button>
<button class="fillBlank" id="btn3">3</button><br />
<button class="fillBlank" id="btn0">0</button>
<button class="fillBlank" id="btnNeg">+/-</button>
<button class="fillBlank" id="btnOk">OK</button>
</div>
</div>
<!-- Fill in the blank -->
<!-- ANSWERS -->
<!-- (IN)CORRECT -->
<div class="center2">
<div id="checkDiv"></div>
</div>
<!-- (IN)CORRECT -->
</div>
<!-- CANVAS -->
<div class="canvasSide">
<canvas id="can1" width="500" height="600" style="border:2px solid #fff; background-color: #026236;"></canvas>
</div>
<!-- CANVAS -->
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abErase', label:'Erase', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abPause', label:'Pause', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abHome', label:'Home', icon:''}" type="button"></button>
</div>
</body>
</html>
My CSS:
body {
background-color: #00522c;
}
.container {
width: 820px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center ;
}
.mathSide {
width: 300px;
float: left;
}
.canvasSide {
width: 500px;
float: left;
margin-left: 20px;
}
/* QUIZ STATS */
.alignLeft {
float: left;
width: 33%;
text-align: left;
font-size: 125%;
font-weight: bold;
}
.alignCenter {
float: left;
width: 33%;
text-align: center;
font-size: 125%;
font-weight: bold;
}
.alignRight {
float: left;
width: 33%;
text-align: right;
font-size: 125%;
font-weight: bold;
}
/* QUIZ STATS */
/* MATH EQUATION */
.mathEquation {
width: 300px;
}
.line1Num, .line2 {
width: 100%;
text-align: right;
display: table;
font-size: 400%;
}
.line1Num {
float: right;
font-size: 400%;
}
.line2Ope {
width: auto;
float: left;
}
.line2Num {
width: auto;
float: right;
}
.line {
width: 100%;
text-align: right;
border-top: 4px solid black;
border-color: white;
}
/* MATH EQUATION */
/* ANSWERS */
.multipleChoice {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
}
.multipleChoiceRed {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: red;
}
.multipleChoiceGreen {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: green;
}
.textBox {
}
.fillBlank {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 10px;
font-size: 150%;
}
/* ANSWERS */
/* (IN)CORRECT */
.center2 {
text-align: center ;
font-size: 300%;
}
/* (IN)CORRECT */
.textBox2[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: #026236;
}
.textBox2A[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: red;
}
.textBox2B[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: green;
}
#media screen and (-ms-view-state: snapped) {
}
#media screen and (-ms-view-state: fullscreen-portrait) {
.mathSide {
width: 300px;
position: absolute;
}
.canvasSide {
width: 500px;
position: absolute;
}
}
What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working
Here is my code:
HTML
<div id="row">
<div class="document-date"><?php the_time('d-m-Y') ?></div>
<div class="document-category"><img src="/images/icon.png" /></div>
<div class="document-title">My link
<p>some description</p>
</div>
And the CSS
#row {
position: relative;
width: 700px;
padding: 5px 0 5px 10px;
display: block;
float: left;
}
#row:hover {
background: #fbf5d8;
}
.document-date{
float: left;
color: #1b6392;
font-size: 12px;
margin-right: 10px;
line-height: 35px;
}
.document-category{
float: left;
margin-right: 10px;
line-height: 35px;
}
.document-title {
width: 350px;
float: left;
color: #020100;
font-size: 12px;
font-weight: normal;
margin-top: 1px;
text-decoration: none;
}
.document-title a{
width: 350px;
float: left;
color: #020100;
font-size: 14px;
font-weight: bold;
margin-top: 1px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.document-title a:hover{
color: #fff;
}
Any suggestion?
Assuming when you say li, you mean div#row
CSS:
#row:hover {
cursor: pointer
}
JavaScript (using jQuery):
$('#row').click(function() {
// do something
// example:
$(this).find('a:first').click();
});
<div id="row" onclick="alert(1)">
<div class="document-date" >12-08-2014</div>
<div class="document-category" ><img src="/images/icon.png" /></div>
<div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
This would do the trick.
Or if you want the divs separately
<div id="row">
<div class="document-date" onclick="alert(1)">12-08-2014</div>
<div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
<div class="document-title" onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>