I'm trying to apply anchor tags to an image I had already styled in css by pushing it to the right (using text-align: right on its containing div) and resizing it from 400px to 25px:
css:
.instagram-section {
text-align: right;
font-family: 'Life Savers', cursive;
font-size: 1em;
}
.ig-logo {
height: 25px;
}
But I'm finding that all this styling is lost on the image once it's surrounded in <a> tags:
html (before anchor tags applied to image):
<div class="instagram-section">
<strong>... my Instagram</strong>
<!-- <a href="https://www.instagram.com/myinstagram/"> -->
<img src="/img/icons/instagram/instagram-logo-400.png" class="ig-logo">
<!-- </a> -->
</div>
html (after anchor tags applied to image):
<div class="instagram-section">
<strong>... my Instagram</strong>
<a href="https://www.instagram.com/myinstagram/">
<img src="/img/icons/instagram/instagram-logo-400.png" class="ig-logo">
</a>
</div>
I'm a bit new to html/css and haven't been able to find much on the internet apart from using an image already the size I want. This is fine, but I also need the image to appear on the same line as the text and also aligned to the right.
Any pointers would be appreciated.
Playing around a bit, this seemed to work:
.instagram-section {
text-align: right;
font-family: 'Life Savers', cursive;
font-size: 1em;
}
.instagram-section a img.ig-logo{
height: 25px;
display: inline;
}
Don't know if it's the best method, so welcome better answers.
Related
Brand new to coding, just started the META Back-End Certificate on Coursera, and I am having trouble with one of the quizzes. We are provided the HTML, and then we have to write CSS to meet certain criteria. I have listed the Prompt, HTML, CSS, and errors below:
Prompt:
"
Open the styles.css file.
Add a CSS rule for the body element that sets the background color to #E0E0E2.
Add a CSS rule for the h1 element that sets the text color to: #721817.
Add a CSS rule for the h2 element that sets the text color to: #721817.
Add a CSS rule for the center-text CSS class that aligns the text to center.
Add a CSS rule for the HTML element with the id logo. Set its left and right margins to auto and changes its display to a block element.
Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.
Add a CSS rule for the HTML element with the id copyright. Set its top padding to 12 pixels and its font size to 0.75em."
HTML Code that was provided for the quiz:
<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<img src="logo.png" id="logo">
</div>
<div class="center-text">
<h1>Our Menu</h1>
<h2>Falafel <span>NEW</span></h2>
<p>Chickpea, herbs, spices.</p>
<h2>Pasta Salad</h2>
<p>Pasta, vegetables, mozzarella.</p>
<h2>Fried Calamari</h2>
<p>Squid, buttermilk.</p>
</div>
<div class="center-text">
<p id="copyright">
Copyright Little Lemon
</p>
</div>
</body>
</html>
"
CSS code that I wrote:
body {
background-color: #E0E0E2;
}
h1 {
color: #721817;
}
h2 {
color: #721817;
}
.center-text{
text-align: center;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
span {
color: #fa9f42;
font-size: 0.75em;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
}
When I submit, the autograder on Coursera is returning the two error messages:
"Failed - ✗ The 'NEW' labels within tags should have a color of '#fa9f42' (+ 1 related test)"
"Failed - ✗ The element with the ID 'copyright' should have a font-size of 0.75em"
I am not sure why these two tests are coming up as failed, as it appears that the webpage view reflects that the 'copyright' font size is correct, and that the 'NEW' labels within do in fact have that color. Any ideas why this is coming up as wrong?
Thanks anyone and everyone!
The second to last prompt asks to modify span elements that are children of h2 elements, however, your code modifies all span elements.
To fix this, change
span {
color: #fa9f42;
font-size: 0.75em;
}
to
h2 > span {
color: #fa9f42;
font-size: 0.75em;
}
This small change requires all spans to be children of an h2 element in order to be modified, thus, fulfilling the request of the second to last prompt.
I'm working on a custom navbar on a site I'm making but I've run into an issue. I've searched around and have found some similar threads, but nothing that has worked for me. I have a navbar with an image and some text underneath. What I'm trying to accomplish is while hovering over either the text or image, the hover effect for both occurs. The issue is that for the image, the hover effect is done thru an ID and the text hover effect is done thru a class. Here is my markup for one of the sets.
<div class="col-md-2 col-sm-1">
<a href="#Url.Action("Index","Home")" title="HOME" style="margin-left:10px;">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And here is the CSS for the image:
#homenav {
margin: 0 auto;
display: block;
width: 47px;
height: 50px;
background: url('../Images/NAV_ICONS/NAV_HOME.png') no-repeat 0 0;
}
#homenav:hover {
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
And the CSS for the text:
.navtext{
font-family: RobotoCondensed-Bold, 'Arial Narrow', Arial, sans-serif;
color: #00457c;
overflow: hidden;
white-space: nowrap;
}
.navtext:hover{
color: #ee2e24;
}
And just for clarity, I'm simply trying to make both turn the same color red. Any advice will be greatly appreciated.
Could this fit your needs ?
Put both div (#navbar and .navtext) inside a wrapper div, then put your hover styles in those selectors:
#wrapper:hover #homenav
and
#wrapper:hover .navtex
See fiddle here.
But the hover styles come for a hover over the whole wrapper div.
When using css :hover, the property changes will only affect the element being hovered. You would have to use Javascript/JQuery to do this, but it's pretty straightforward.
First, we need to change the :hover css elements into classes like so
.navtextHover{
color: #ee2e24 !important;
}
.homeNavHover {
background: url('http://lorempixel.com/g/400/200/') no-repeat 0 0 !important;
}
We also need to add a new class. This class will essentially mean that they are all tied together when hovered - ie, when one is hovered, all will be treated as hovered. So add that to the HTML (I called it syncedHover)
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;">
<div id="homenav" class="syncedHover"></div>
<div class="navtext syncedHover">HOME</div>
</a>
</div>
Then the javascript merely adds the classes on hover and removes them on exit
$(".syncedHover").hover(
function () {
$("#homenav").addClass("homeNavHover");
$(".navtext").addClass("navtextHover");
},
function () {
$("#homenav").removeClass("homeNavHover");
$(".navtext").removeClass("navtextHover");
}
);
This could be written better by passing data to the JQuery method on hover so you don't have a list of addClass methods, but this isn't too cumbersome for only two elements.
This JSFiddle shows a working example with how it can be done https://jsfiddle.net/bou7mqk3/1/
You just need to put a class on the link instead. As in, the parent a tag that the two elements are nested inside.
In this HTML the only change is the additional class on the link - 'your-class', and I removed the unnecessary syncedHover classes:
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;" class="your-class">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And then update your CSS to this:
.your-class:hover #homenav{
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
.your-class:hover .navtext{
color: #ee2e24;
}
No JavaScript needed at all!
I have some html code generated by Wordpress plugin and I want to center vertically the text on the right.I cannot change the HTML code because it's generated by plugin (I have to check if Im allowed to modify its soruce code). In HTML code only DIV tag can be swapped or modified in any way.
But my idea is if this text can be center vertically only by updating existing CSS class definitions and changing only starting and ending DIVs in HTML code?
jsFiddle demo
HTML code:
<div>
<a class="tptn_link" rel="bookmark" href="http://localhost/wordpress/?p=30">
<img class="tptn_thumb" border="1" style="max-width:100px;max-height:100px;" title="Post for TaxTips" alt="Post for TaxTips" src="http://localhost/wordpress/wp-content/plugins/top-10/timthum…2Ftaxhug%2Fimages%2Ffeatured-taxtips.png&w=60&h=60&zc=1&q=75"></img>
</a>
<span class="tptn_after_thumb">
<a class="tptn_link" rel="bookmark" href="http://localhost/wordpress/?p=30">
<span class="tptn_title">
Post for TaxTips
</span>
</a>
<span class="tptn_list_count">
(14)
</span>
</span>
</div>
CSS code:
.tptn_thumb{
margin-right: 10px;
float: left;
}
/* popular post title*/
.tptn_after_thumb{
}
.tptn_after_thumb:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
If tptn_thumb has a fixed height you can use line-height: 42px; on tptn_title
EDIT:
Sorry, read "vertically" instead of "horizontally". My solution is for a vertical alignment.
EDIT2:
You need to add this css code:
.tptn_title {
line-height: 42px;
}
and remove the line-height from .tptn_thumb{
See the updated FIDDLE
I'm currently learning html and CSS. I'm practicing by making a very basic website but have came across an issue when I added another image on top of my background image (the twitter logo). I tried to move the image using style="top:-90px;"but there was no effect. What ever classes I used to try to move the image nothing happened. I don't know how to target the image via CSS either.
Please help, sorry I know very little because I'm trying to learn.
<!DOCTYPE html>
<head>
<style>
body {
text-align: center;
background: url("LINK");
background-size: cover;
color: white;
font-family: sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
font-weight: lighter;
}
p {
text-align: center;
font-size: 24px;
font-family: sans-serif;
}
</style>
</head>
<body>
<img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px;">
<p>Hello!</p>
</body>
top doesn't do anything to elements with position:static (the default). You should set position to:
position:relative Moves the image 90 pixels up
position:absolute Moves the image so its top edge is 90 pixesl above the top edge of its offset container (<body> in this case)
position:fixed Moves the image to be 90 pixels above the top of the vieport.
In your situation, I'm fairly sure you want position:relative
top works with position: absolute.
Maybe you wanted to set
margin-top: value;
If you are new to html and css then I recommend put your image and link
<img src="xyz"/>
inside of a div (if you aren't using html5), like this
<div id="myImage">
<img src="xyz"/>
</div>
then in your css use
#myImage {
position:relative;
top:-90px
<img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px; position:relative;">
Copy this and paste it on your file.
In style you can do:
#image{
margin-top:90px
}
in html
<div id="image"><img src...........>
This is an example but it will work
I'm trying to create a CSS for these lines, but they are not working in the way I want. There will be several similar lines like this(about 60).
First: all lines will use img src="staticimage.png". Is it possible to set this image as default in CSS(It will handle a link, set in the "a" tag before)?
Second: how can I remove the dimensioning code (width="50" align="right) from this image and put it in the CSS?
Here is my code:
HTML Code:
<div id="whiteborder"><img src="image1.png">Text 1<img src="staticimage.png" width="50" align="right"></div>
<div id="whiteborder"><img src="image2.png">Text 2<img src="staticimage.png" width="50" align="right"></div>
<div id="whiteborder"><img src="image3.png">Text 3<img src="staticimage.png" align="right"></div>
CSS code:
#whiteborder
{
background: white;
margin: 2px 10px 0px 10px;
box-sizing: border-box;
padding: 20px;
text-align: left;
font-weight: bold;
font-size:10px;
}
PS: all texts with numbers will be different. I don't want any Javascript to set these lines.
Thanks in advance!
I'm not entirely clear on what you're trying to build here but to address your individual queries:
You can't set "staticimage.png" as a default in any other way but as a background image using CSS
To remove the "dimensioning code" from the image HTML you can set width:50px; in your CSS and align it to the right with float:right;
You should be able to sort your image alignment out like this:
#whiteborder a img
{
width: 50px;
float: right;
}
However, if you change your a tag to display: block; float: right and set a background-image on it, you can then dispense with the img and set the style for all those a tags in one place.
Working Demo
HTML:
<div id="whiteborder">
<img src="image1.png">Text 1
<img src="image2.png">Text 2
<img src="image3.png">Text 3
</div>
CSS:
#whiteborder a{
background: repeat-x url("staticimage.png");
width: 50px;
height: 10px;
...
}
P.S. you shouldn't use the same id several times, but if you need you can use class instead