I want to place two font icons one above the other. So I can use it as:
<span class="icon1-on-icon2" />
Is it possible to define CSS class(es) to achieve this? It's not permitted to use another elements inside a span i.e. something like that:
<span class="stack">
<span class="icon1"/>
<span class="icon2" />
</span>
Sure, why not use :after and :before pseudo-selectors?
CSS
.font-icon {
height: 40px;
width: 20px;
}
.font-icon:after, .font-icon:before {
color: white;
content: '';
display: block;
font-family: 'your-font-icon';
height: 20px;
position: relative;
width: 20px;
}
.font-icon:before {
background: red;
content: 'h';
}
.font-icon:after {
background: blue;
content: 'g';
}
HTML
<span class='font-icon'></span>
Codepen sketch here: http://cdpn.io/lehzr
UPDATE
To place them on top of each other, simply change the position to absolute, put a relative on the container element, and set top and left to 0 for both the after and before.
Example: http://cdpn.io/lehzr
Hope that helps!
Related
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
This is the example:
I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?
UPDATE:
#profile_name_header {
background-color: #006400;
font-family: Century Gothic;
color: #FFFFFF;
font-size: 20px;
padding-bottom: 12px;
padding-top: 12px;
padding-left: 10px;
}
<div id="profile_name_header">
<img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
<?php echo $fullname; ?>'s Profile
</div>
Thank you.
Use vertical-align on the img since it's adjacent inline content.
img {
vertical-align: middle;
}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.
div {
display: flex;
align-items: center;
}
<div>
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
</div>
There is a CSS Property called vertical align, which can be used to align several html elements in respecr to the text baseline. I'd suggest you set it to center, but try and see what fits best.
(Some further reading about the conflicts among devs.)
Assign one class name to the image. For e.g.
<img class="backgroundImg" src="images/bg.jpg" />
Then use these css properties:
.backgroundImg {
position: relative;
top: 5px; // or 10px
}
Based on your text leveling, just adjust the "top" value.
Note:You can also use "id" and assign the same css properties.
Try this code with proper HTML Markup......
*{
margin: 0;
padding: 0;
}
figure{
width:620px;
display: block;
margin:0 auto;
}
figure img{
display: block;
width: 100%;
height: auto;
}
figcaption{
text-align:center;
}
<figure>
<img src="https://unsplash.it/600/280" alt="">
<figcaption>
<small>Image Caption goes here</small>
</figcaption>
</figure>
I'm working on a project for a client that involved using the existing code they have while also transitioning the files into another location. The files being transitioned include images that can't be moved yet, so in an attempt to make the code future proof, I used CSS to define the image src's by embedding them in the "a" tag.
.iconWriting::before { content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
Unfortunately, the images will only display correctly when the CSS style defining their location is in the Head of the document. I need to be able to house these styles in an External CSS file, but when I move the previously working CSS to the External file, it breaks. Instead of images, I just get the alt text, in all browsers. I tried adding ":before" to the class specification, but this didn't work, either.
Here's a Fiddle of the working code: JS Fiddle
Thanks to #Mr Lister for his help with this; the solution is to target the "a" tag when specifying the image src using the "content" property.
/*Weekly Activity Styles*/
.activityWrapper {
width: 96%;
overflow-x: hidden;"
}
/*Upper Right Icons*/
.iconExpand::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/V2/icon/sm_expand.png");
}
.iconAcademic::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/academic_research_policy.png");
}
.iconWriting::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
.iconExpand, .iconAcademic, .iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
/*Dropbox & Waypoint Icons*/
.iconDropbox {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Dropbox_small.png");
border: none;
}
.iconWaypoint {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/waypoint_smaller.png");
border: none;
}
.iconWaypointLg {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Waypoint_image1.png");
border: none;
}
padding: 15px 20px 5px 15px;
}
}
<div class="activityWrapper">
<div class="subParaDisc">
<a target="_new" href="javascript://;" class="iconLink iconExpand" onclick="this.href=document.location"></a>
<a class="iconAcademic" target="_new" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Academic.htm"></a>
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
<h1>
The Icons above only work when the style defining their img content is in the head of the HTML doc.</h1>
</div>
</div>
Reference this Fiddle for the sample: https://jsfiddle.net/1gxmqnjy/21/
I am trying to display text under my image but it wont work. My image displays but not my text.
The textarea appears but it has no text and I cannot click and write on it. Although if I Ctrl+F it says the words are there but I cant see them nor are they highlighted
<div id = "folderlist">
<a href="">
<image src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
</div>
My CSS is as follows:
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
#folderlist a {
margin: 15px;
border: 8px solid transparent;
display: inline-block;
opacity: .8;
color:black;
}
#folderlist a:hover {
opacity: 1;
border-color: red;
}
.captionText {
display: block;
position: relative;
width: 100px;
height: 20px;
text-color:black;
border: 2px solid red;
}
I have tried different variations by removing placeholder using an input area and even just using <p> tags.
Any help would be much appreciated.
I have tried also the following:
<a style='text-decoration: none; color: orange;'>
<img src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px">
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
The problem is with
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
Setting the font-size to 0 tends to make text invisible :)
The code is fine. Just do one thing.
Put # in the anchor tag.
<a href="#">
<image src="cool.jpg" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
else there is no problem in code
A textarea is a form input. It's not something you use for just displaying text. Use a 'p' tag instead
Joshua Comeau is correct - the markup doesn't make sense.
<a> is an anchor tag. It is only allowed to contain certain things. Form elements, such as <input>, <select>, and <textarea> are not among them.
Textareas are the large text editing areas that you expect in a mail system. You don't use them to display text.
You can just put that text there not wrapped in anything at all. That's probably what you want.
If you just need something to attach style rules to, use a <span>.
If what you're trying to do is to get a rectangular area to put text into, you want a <div> instead.
<textarea> within <a> is not legal, and will never work in a compliant browser.
The code in your "I have also tried" is actually perfectly valid, and what you want to do.
I have a small problem with these <span> elements in a <div>.
http://jsfiddle.net/kkzLW/179/
Here is the section of CSS code that I'm working with:
.rightRapper {
border-style: dotted;
margin-left: 105px;
margin-top: 0px;
height: 90px;
width: 100px;
display: block;
}
.leftRapper {
border-style: dotted;
margin-left: 0px;
height: 90px;
width: 100px;
display: block;
}
Here is the HTML section:
<div id="battleBox">
<span class="leftRapper">
<span id="buttonColumn">
<span id="container3" class="topButton">
+
</span>
<span id="container4" class="bottomButton">
-
</span>
</span>
</span>
<span class="rightRapper">
<span id="buttonColumn">
<span id="container" class="topButton">
+
</span>
<span id="container2" class="bottomButton">
-
</span>
</span>
</span>
</div>
I'm trying to get the <span> .leftRapper and .rightRapper to be side by side in the <div> battleBox. However, when I set the CSS display property to inline, the <span>s get squished into a smaller shape for some reason. When I set the display to block, it turns them into the size I want but it doesn't display them the way I want, because they're not displayed inline.
What is causing the <span>s to have a smaller size?
Add or replace the properties below in the following CSS classes/selectors:
#battleBox {
width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/
}
.rightRapper {
margin: 0px; /* remove all margins to fit two divs in the container */
display: inline-block; /* display block elements in one line */
}
.leftRapper {
margin: 0px;
display: inline-block;
}
Example
You could/should add a float: left to .leftRapper.
Other options are e.g. adding a negative right margin to .leftRapper.