I think I must be missing something simple here. Is it possible to align the glyph content / glyph itself to the bottom of a parent element?
Given this example, how can I keep all the icons to the bottom, no matter the icon?
Here's an image to better illustrate what I want:
Obviously I can have a different line-height property per icon, but I'm wondering if there's a more generic approach to this issue. Or if font-awesome ships with some helper classes similar to the fixed width approach (by using fa-fw).
I did some digging around in Font Awesome and it didn't look like there were any solutions to a fixed glyph height. What I would do is add the following CSS and position each glyph out manually.
Happy coding!
.icon-elem {
position: relative;
}
.fa-user {
top: 7px;
}
.fa-cloud-upload {
top: 15px;
}
Just had to figure this out so adding a very late answer. In Fontawesome 5 icon height is more standard, but if you want to move icons around within their box you can use power-transforms.
Example:
<i class="fas fa-upload" data-fa-transform="down-4"></i> would move the upload icon closer to the bottom.
Related
I’m currently trying to wrap my head around solving this layout with Ionic and CSS:
This is the result I achieve even after spending quite some time with it:
I've recreated the basic setup on the home page: here
The layout consists of a navbar, a fullscreen image and text-content below that. The gradient is constructed using a ::after attribute in CSS as I don't want to hard embedd the gradient in the image file with Photoshop and the likes. I had to construct the fullscreen image using a ‚position:absolute‘ attribute:
.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }
because for reasons beyond my knowledge, not using ‚position:absolute’ results in the image not being displayed in fullscreen but being 2 or 3 pixels smaller than the total width and thus leaving a slim border of background color around the image:
Once I do use the ‚position:absolute’ attribute however my layout becomes a complete mess because the text content is being placed all over the image content.
This is where I'm struggling to come up with a solution that tidly places the text content below the fullscreen image. Using padding is, to my understanding, not possible as quick fix as I need the layout to be independent from the image content:
if I use padding based on the height of portrait sized images, the content gets too much offset when for landscape sized images and vice versa. I could try to target landscape and portrait images using different .css classes for each and setting and matching padding, I do however feel that using padding is not the best solution.
Can someone point me to my error or a robust, content-independent solution here that keeps Image and text content tidly in order while maintaining the layout?
According to your example, the border around the image is happening because of the padding attribute in the ion-content tag, here:
If you remove that padding the image will have no space around.
By the way, the position:absolute; did the trick, because it makes the image get out of the page flow, and so, it acted as a child of the body, which doesn't have any padding/margin around.
Edited
Also, you need to remove the position:absolute from your image and add padding:0; to the tag above it, as it is adding a little space around from padding.
And from what I understood, the image and text will behave as you wished.
I want to develop the next thing.
See example image: Overlapping div with text and background-color with a smaller width than the text
How can I achieve this? I'm using the Visual Composer in Wordpress. You can see what I made here: http://glashelder.id-buro.nl/hometest/. This is not how I want it.
add this to your css:
.wpb_single_image.vc_align_left {
text-align: left;
position: relative;
z-index: 1;
}
You can make an image by merging white and sky color portion and set that image as background-image of that div. Then select row layout(probably 2/3+1/3
is good as per image) in the visual composer.
Or you can do this via CSS by giving absolute position one of the
div and set some margins to get same design as per image but you will need to do some more design and write css for responsiveness. So I think first option is better. :)
I want to have my UL have half triangles as their background. I would really like to use only CSS shapes for this project. I have used some code form this site, however I need some additional help. I am unable to have the text centered in the shapes. What can I adjust to accomplish this?
Code: http://jsfiddle.net/akAh9/
Swapping
right: 6em;
... for ...
right: 50%;
... seems to do the trick (with this you effectively move the lower point of that CSS triangle to the middle of the .diamond element).
I am having a problem with this specifically on macs, and most recently I was having a bolder font problem with only macs as well, but that had been fixed via CSS.
Problem: I have 10 anchor tags absolute positioned, and when on hover (green background-image), there isn't any overlap problems on a PC, but on a Mac in almost every browsers, the background-image overlaps a little into the next sentence.
CSS for above (hover):
.homeText a:hover {
background-image: url('/cont-img/on-hover-span_background-partial-solid.jpg');
color: White;
cursor: pointer;
background-position: center;
background-repeat:repeat;
margin-right:-5px;
font-style: italic;
}
The CSS absolute positioning of each element has plenty of space between the sentences, so that isn't an issue. Also, the period at the end is a sprite of 2 different images, a white period on hover, and a grey period off hover. For this, I append a css class to the span tag at the end of the anchor tag that sets the background-position for the sprite in the span tag.
Any thoughts?
make sure you have padding:0; margin:0; and make sure the <a> does not contain a space or something after the period. also, why are you using a background image? can't you just set the background-color:green?...which you might want to try just to see if it's any different.
I believe it's just a font issue. When I visit your site in Linux, the links have much more space between them than in Windows.
By the way, maybe a bit off topic, but your site doesn't handle non-white background colours very well. You may want to set the background color yourself, rather than rely on the user's default.
Since I have a span tag inside of each anchor, I realized that I had to, with the help of Timmerz, remove padding and margin-right from each case. The most significant reason I was getting more background-image overlap than expected is because the width of the span was unnecessarily big for the amount of pixels the period only takes up, creating more space for overlapping.
After setting the spans to a width proportional to the picture in the sprites, I added a little padding right so the background-image didn't tug too close to the sprite. Also, I had to adjust my absolute position on the right cases because of the adjustments stated above.
Thanks for everyone's contribution.
I'm currently redesigning a website and have run into an issue with some elements in the header. The header contains a logo, some text and a navigation bar. Between the bottom of the logo and the top of the navigation bar there is a relatively thick gap, shown in this screenshot:
I don't want the gap, I don't know where it's come from and I don't know how to get rid of it :(
I can reduce it down to a single pixel by setting the line-height property of the div containing the logo down to 0.0, but it seems hacky and still doesn't fix the issue.
The work-in-progress version can be viewed live here, if anyone with more HTML/CSS experience can identify any silly mistakes I've made.
add the following css class
.logo img
{
vertical-align:bottom;
}
The space comes from descenders which allow y and g characters to fully fit vertically.
display:block; or vertical-align:bottom; should equally work.
img { display: block; }
The gap is there because images are inline elements aligned at the text baseline by default. It's where descenders would go if you had text with descenders in the same line.
It looks like you're getting some spacing from both the <div class="logo">, and from the <a href="#"> which wrap your logo. You can fix this using the display:block; or vertical-align:bottom; as mentioned above.
Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
The <a> containing the element should have display:block; position:relative and the image should have position:absolute. Works here.