I made a leftsided navigation bar that works very well, but I still can’t add any icons inside the buttons properly. Here is the code of the navigation bar in CodePen
codepen.io/Eduardo-Trindade/pen/MWXMZvb
I tried adding the icons to the buttons, but it appears at the corner of it, not centered, and I couldn’t center it there.
The main reason behind this is that you are inserting the icons inside the span element. Insert the icons inside the tags and you are good to go.
The element span has the class toolkit making the icons appear at the corner. Try to have the icons, not inside the tooltip (span) class but instead inside the element. Use the flex property to get the image in the centre of the buttons.
Related
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I'm using a trick to change text color when it's over other content using position:fixed elements inside position:absolute elements with the clip attribute.
It's working on other parts of the page but on the image gallery the menu won't stick to the top to the browser window instead it sticks to the top of the parent container even though it has position:fixed and top:0.
Here's a link to the page. The gallery appears when you click one of the square images.
And a picture:
Hello all!
I have a svg image which I want to put in a navbar from bootstrap.
I have some issues with the size of the picture. I would like that its behavior is the same as button with class btn.
Here an image, here flags are inside buttons and I want flags are same height as buttons and don't inside button but inside <a>.
Thanks for your help
I have a basic table js fiddle, the icons are obvi font awesome, you can see here that as the right hand side grows with text the icons always stay in the enter, well I want them to stick to the top with a padding of 10 px's.
I am, although not here, using bootstrap. So is there a class to do this? .table in bootstrap will pull the icons to the top - but it also adds a top border which I don't want, I could go in and remove that, but I would rather not.
So is there a bootstrap class that will cause all icons to jump to the top of the tr element they are in? - or better yet, is there some simple css I could do to make the icon "stick" to the top of the containing tr element they are in?
Add this css-property to the TD of the icon:
vertical-align:top;
This makes sure the icon stays at the top. You could change the position with padding ;)