so I'm trying to keep the code down to a minimum is there a way I can add a margin to the text of this href without moving the font awesome icon down also. The only way I can see to do it would be to wrap a span tag around it and setting that to have a margin.
<a id="btn" class="green-btn"><i class="social fa fa-share fa-2x"></i>Share</a>
If you want space betweeen the icon and the text try this:
.green-btn .fa-share{
margin-right:5px /*or your custom value*/
}
or
#btn .fa-share{
margin-right:5px /*or your custom value*/
}
Related
I have a div with an image and text. I only want to style the text from this div. With an image you can only style the image with .content img{ }, can you do this with text as well?
<div class="footer">
<div class="telefoon"><img src="images/media/telefoon.png" width="30">06-123456</div>
<div class="mail"><img src="images/media/mail.png" width="30">example#gmail.com</div>
<a class="instagram" href=https://www.instagram.com/example/><img src="images/media/instagram.png" width="30">#example</a>
</div>
In this case I want the text to have margin-bottom: 15px; and the images not.
Or when someone has a different solution for the whole problem because basically my telephone, mail and instagram information is at the bottom of the icon instead of the middle.
to style your text, insert your text in a p tag for example and with the css use .content p {}
Assuming there is no block element around the text (e.g. p, span, h1-h6, etc), try using :not for the image - although I don't see how the img would inherit any typography styling
Add a span tag for the text and style the span tag that shd solve your problem
I'm having trouble getting the right selector.
Let me try to explain the best way I can:
I'm working on a project that I cannot change HTML and Javascript, it has some dynamic HTML and other reasons.
On the project, there is an image on a <img> tag.
However, I need to change colors between two layouts, and as you can see on the HTML/CSS the only way I got that to work is to hide th <img> tag and set a background to the anchor, that has a title.
So, now, when I change the layouts, the image changes, however there is also something else, this image on click hides the menu and changes the image one more time.
Now, I need to hide the background on the anchor when the title on the image changes.
Here is the HTML BEFORE clicking the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="images/ico_hidemh.png" width="16" height="16">
</a>
</li>
</ul>
And here is the HTML AFTER I click on the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="images/ico_showmh.png" width="16" height="16">
</a>
</li>
</ul>
THE CSS
I HIDE THE ORIGINAL IMAGE, USED ON THE OTHER LAYOUT
#ul-icone-mh li a img {
visibility: hidden !important;
}
AND SET THE NEW IMAGE
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
}
And when I click it, the image stays the same, but I need to hide that image when the title changes and add another image.
Any ideas what I can do?
You need a bit more than just the right CSS selector. The problem there is the old stumbling block that there is no parent selector.
A bit more thought and work is required.
img { height:50px; width:50px }
ul {padding: 0; list-style:none;}
.icones a::after {
content: '';
height:50px; width:100px;
background-image: linear-gradient(to right, #00FF00 50%, #0000FF 50%);
display:inline-block;
}
.icones a {
height:50px; width:50px;
display:block;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
.icones a img[title='Esconder menu horizontal'] {
margin-left: -50px;
}
.icones a img[title='Exibir menu horizontal'] {
margin-left: -100px;
}
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="http://placehold.it/200/ff0000" width="16" height="16">
</a>
</li>
</ul>
</div>
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="http://placehold.it/200/990000" width="16" height="16">
</a>
</li>
</ul>
</div>
Here I've increased the images to 50x50px from 16x16px to make them a bit easier to see but the principle is just the same.
For the two images referenced by the HTML, I've used two blocks that are different shades of red.
For the two CSS overlay images, for simplicity I've used a linear gradient making a block that's the height of the image and twice the width. The left half is green and the right half blue. You would use a sprite for the two images you want to display. The left half of the sprite would contain the "Esconder ..." replacement image and the right half of the sprite would contain the "Exibir ..." replacement image.
I've also shown both cases together rather than switching between them on click, again for simplicity.
The idea is that the left margin of the image is made negative to shift it out of the a element. The pseudo element that follows contains the sprite and is shifted into that space, either by the width of the image, or twice the width of the image to show different contents for the two cases.
Hence we get a green box for the "Esconder ..." case and a blue box for the "Exibir ..." case.
So if I understand correctly, then the title is "esconder", you want to hide the default image and inject your own. And otherwise you want to show the original (when the title is "exibir".)
You have correctly identified how you would target the a tag based on the title: a[title="Esconder menu horizontal"]. What you then need to do is only exclude the image when it is inside of this tag, and then replace it with your own image. You then also need to give it an explicit size, and declare the a tag which now directly has the background image with some size. Like so:
a[title="Esconder menu horizontal"] img { display: none; }
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
display:inline-block;
}
You will notice I added a few lines to your existing styling:
display:inline-block tells the browser that this element should follow the flow like an inline element, but should have block-type semantics. By default, an anchor tag is an inline element, which means it doesn't have explicit size or width -- just what is enforced by its children. Since you've delcared that the child is not to be seen, the anchor tag effectively collapses to be of 0x0 size.
height:16px; width:16px tells the browser the size you want for this image. I guessed at these dimensions based on the background-size property you had set. Since we've told the browser using the display property that this element has explicit size, we now tell it what that size is.
It's not very clear what you're trying to accomplish, but if you're trying to change the anchor based on the image, this is simply not possible using CSS alone.
You can target child elements based on their parents, but you can not target parent elements based on their children in CSS (currently).
The only way to do this would be to affect how the HTML renders the two options, or using Javascript.
There are a few different suggested specs for such a selector, but none have yet been implemented.
Since the img tag is what has the dynamic title, that is the only thing you will be able to target with your CSS. If you cannot accomplish your task by targeting the img then it can't be done within the constraints you stated.
Selectors:
https://www.w3.org/TR/CSS2/selector.html
Support for the proposed spec for a parent selector:
https://caniuse.com/#feat=css-has
When I use
<button id="kh_send_comment">
<i class="material-icons">done</i>
Save
</button>
the position of the word Save is on the bottom of the button. I would like it to be in the middle of it. How can I do this without changing the font size?
https://jsfiddle.net/ba3vg9k8/
Use this CSS:
button i { vertical-align: middle }
https://jsfiddle.net/bgr3a1oL/1/
The reason for this is the button wraps around the larger icon, which increases the button's height and leaves the text hugging the bottom.
You can give the vertical-align for the icon a set pixel value to get the text exactly where you want it.
button i { vertical-align: -7px }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<button id="kh_send_comment"><i class="material-icons">done</i> Save</button>
Add vertical-align: middle; to the i element.
I ran into a situation where I have a link that is set as a display:block. I'm trying to fill the background-color property with a color, but only behind the text; instead, it's filling the entire background of that row, which is logical, but not what I want. How can I fill only the background of the text without being an inline element? Or is this not possible?
HTML:
mylink
CSS:
a {
display:block;
background-color:blue;
}
If you need to keep the link as a block, you can wrap the text in a <span> and apply the background colour to that.
Simple code would be something like this:
<a href="#" style="display: block">
Hello<span style="background: blue; color: white">blue</span>link
</a>
You can then add padding and other style to the span tag.
You can add a ID tag to the span if its a special once off thing for specific styling.
I have a button which I'm using multiple times in my webpage. The buttons styles will be as
Button with Text and Image.
Button with only Image.
Button with only Text.
As shown in the fiddle
http://jsfiddle.net/xzBaZ/4/
I'm using he same css for the button class. I need to align the Text Vertically to center if it is the first case. and no extra alignment is required for other cases.
How can I do this??
vertical-align: bottom on the <img> or make the image and the text equal line heights. The latter requires you to know the image height beforehand.
You should Write the text in span
<button onclick="return false" class="super button"><span>Awesome Button ยป
</span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>
and also specify the css for span
.button span{
float:left;
margin-top:3px;
}