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 ;)
Related
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.
Actually I am creating a border around my website in TYPO3 (version 7.6.14). I am creating this whith three border pictures (one for top, one for bottom and one for the left and right side) and it still workes fine at "normal" pages.
Only the border for the left and right side is created by css and the two others in the template. The whole page is surroundet the div "website".
Now I added a "Grid Element" to the main page. This is also in the website div included. Only the border is not shown at the Grid Elements part and non of my tries workes.
My css code is the following one:
div#website {
width:1200px;
text-align:left;
position: relative;
background-image:url(images/border_lr.jpg);
background-repeat:repeat-y;
background-position:left;
}
I know that the pixel methode is not the best way, but it should not be the problem, I even changed this and tryed to resize the other content, but it did not helped. The border is not in the background, it is just not created at the Grid Elements part of the website.
Why not use the :before and :after pseudo-elements?
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;
}
Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.