I am trying to get two font-awesome icons to always display over a series of divs.
When the user hovers over the main details, I can get the details to be surrounded by a border with a different background. However, this does prevent the the icons from being displayed correctly.
I understand that this requires the use of the z-index, but all of my attempts to display the icons correctly have failed. I have searched SO & Google, but still cannot solve this simple issue.
This is what I am attempting to achieve:
This is what I currently have:
Here is my JSFiddle example.
I would really appreciate some assistance solving this issue.
Just some code to display the jsfiddle:
<div id="id_membership_details_resume_template" class="live_preview_wrapper noselect resumeStyleWrapper10" dir="ltr" style="direction: ltr;">
Remove this
#id_resume_detail_content {
position: relative;
}
Edit: and update this also for the X button ( just changed top and right according to jsfiddle provided template )
.resume_details_unselect {
position: absolute;
right: 15px;
top: 45px;
visibility: hidden;
}
Related
I use font awesome icons and everything was aligned in the middle as it should in staging. Once the site went live, all the font awesome icons moved up to the top and I can't figure out why. I compared the css being used on chrome developer tools but so far I can't see any difference.
Here's the link to the homepage. http://studyusa.com/en/ You can see that the magnifying glass on the top navigation, all of the social network buttons under the slider, and menu icons next to "Browse Schools by Degree Level" all moved up.
Hope I can get any hints.
-- update
Wow, thanks for all the answers! However I must apologize to everybody because I checked the site today and it looks the way it should without me changing any code. Now I'm curious as to why something like this is possible.
iam not sure about this, hope this is because of various line-heights used.. but try update the class ".fa" below. Hope this will fix your issue..
.fa {
line-height: inherit!important;
}
Try to add this:
.fa {
transform: translate(0, -50%);
top: 50%;
position: relative;
}
Don't alter .fa CSS, this is needed for every icon and will break every other icon you have!
Instead, add this to your css:
.search-trigger {padding:15px;}
I tested that in Chrome and it worked fine.
Try:
.toggle-make a {
display: inline-block;
float: none;
}
I have played with Chrome Inspector and it seems that floating has something to do with it. As far as I can see, you are using display: block; with width but no height.
You need to add this code
.fa-twitter:before{
position: relative;
top: 8px;
}
This might be a totally silly question. Here is my problem - I have a message box displayed in HTML (using Bootstrap) to show various user alerts. It has an information icon (using bootstrap glyphicons) and associated message. Everything looks fine unless the message is too long. Then the second line will wrap under the icon. I want the multiple lines to wrap starting where the first line starts.
So this would be wrong:
(i) This is an incorrect
format of the message
And this would be right:
(i) This is the correct
format I want
My HTML/CSS is very simple:
<div class='alert alert-info'>
<span class='glyphicon glyphicon-information'></span>
  my message comes here.
</div>
But I looked at couple of sites including css-tricks and all the solutions seemed really complicated. So I am posting here to see if there is a quick and easy way to do this.
You can play with CSS positioning, what you need to do is, push the entire element to the left using margin-left: 30px; and than, assign position: relative; to the container element so that we make sure that the absolute positioned element doesn't flow out in the wild.
Now we use position: absolute; for your glyph icon and use negative left value and a positive top value to set the icon correct, please tweak these values according to your requirements, rest stays the same
.alert {
margin-left: 30px;
width: 50px;
position: relative;
}
.alert .glyphicon {
position: absolute;
left: -15px;
top: 2px;
}
Demo
what about wrapping your message inside it's own span and styling it to have a margin-left of 15px or whatever width the information icon is? are you unable to do that? if so, you can set the style on the
.alert .alert-info {
margin-left:15px;
}
and subsequently set the margin on the span to 0
div .glyphicon glypicon-information{
margin: 0;
}
I have created the following website http://www.nabresco.com from an html based theme.
Im definitely no expert in coding bit i figured my way out in order to edit it to my needs.
The website is up and running now and is looking good.
There is only one problem left that i cannot seem to figure out.
The pictures in the galleries are acting as if they are black and white and become coloured only when the cursor is on the actual selected picture. This is happening on some coputers and on others im viewing it normally (weird?).
I want to change them to all be colored all the time without having this black and white effect.
The code on the html for these pictures is as follows (showing first pic in the gallery code):
<div class="preloader">
<a class="bwWrapper single-image plus-icon" href="images/projects/al-rawi/5.png" rel="folio">
<img src="images/projects/al-rawi/5.png" alt="" >
</a>
This shows the pictures whith a plus sign that you can click on.
The css code is as follows:
/* -------------------------------------------------- */
/* Images
/* -------------------------------------------------- */
.single-image {
position: relative;
display: block;
margin-bottom: 15px;
}
.bwWrapper {
position: relative;
overflow: hidden;
display: block;
im quite lost now as i dont know if there is something that i need to change from the CSS file or not.
Thank you,
Rashed
Try it with
.BWfade{
display:none!important;
}
Should work. (tested in Firefox)
I'm creating my portfolio site on Bootstrap 4. I've implemented a sliding javascript caption (tweaked from a source online) to overlay the thumbnail images. That all works fine (except for the caption box extending too far out..), but when I started using that, the left edge of where my thumbnails start has moved to the right and I can't figure out what's causing the problem. I've been trying to figure it out for hours.. whatever's causing it is not caused by my custom CSS, because I tried removing it all and it was still weirdly aligned there.
Another thing that I'm trying to do is have the thumbnails tiled up right up against each other, but I can't figure out how to get rid of their margins/padding...
Here's a link to make it easier to check it out. Thanks so much in advance, it would really mean a lot to me if I could get this to work.
SO sorry for the messy code, I'm going to clean it up once I get this stuff working.
EDIT: I don't know why, or how.. but the alignment problem was caused by the UL class. I changed it to a div and now it works perfectly.
Look at your code. You have defined width twice. use width:97%;
#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%; ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%; ********
}
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.