I have some ads I need displayed as rows of three within a div #ad-720.
I had it working then something changed and now they are all in a column. The footer is also cut off instead of being fullwidth. I've tried adding display: inline-block and a few other suggestions I've found here thru search but nothing is working.
I'd appreciate any guidance I can get. I'm mostly a graphics guy who gets asked to solve code problems here and there! ;)
http://www.cavallino.com/
Right now the CSS for the div is set to:
#ad-720 {
display: inline-block;
text-align: center;
padding-top: 10px;
padding-bottom: 0px !important;
}
For starters the display setting for the is set to block. Try setting it to inline. If that doesn't handle it, post the relevant HTML/CSS here and we will help you out.
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
In the screenshot below, you can see that at the end of my posts, there is a lot of space left over in the block. I am trying to find a way to cut off the remaining space and shift up the post that is below it.
I am currently using the 2022 Wordpress theme, and I edited it with the following css.
ul.wp-block-post-template {
display: flex;
flex-wrap: wrap;
}
li.wp-block-post {
background-color: #eee;
flex-basis: 200px;
margin: 10px;
padding: 0px 20px;
flex: 1;
}
If there is a WordPress plugin that could do this, that would be wonderful. Otherwise, I would love to have some CSS that could do this for me.
I tried finding a WordPress plugin, but I found mostly plugins that display the content in an even grid with a "read more" button, which isn't what I want. Unfortunately, what I am trying to do seems to be rather uncommon, making it hard to find any plugins or resources on how to do it.
Hey there as i know you want to same height as well as cover the extra space left by the post. As i see in screenshot it's confirmed that you don't need to change any height elements. But for extra space you can define text overflow. By this you can enjoy extra text will be hidden. CSS property for it-
text-overflow: ellipsis;
After this code output like-
Text here.....
Sorry for i couldn't test it with your WordPress code. Hope you like my answer.
Have tried a lot of different things, and still having a lot of trouble centring this navbar:
http://www.miriammedical.co.uk/miriam2012
If I follow the advice here...
Editing Nav Menu - How Do I Wrap display:block, float:left to have a Centered Menu?
... which is to add a fixed with and use margin 0 auto, all that happens is the list appears off-centre.
And then there's this, which suggests using margin-left: auto and margin-right: auto...
CSS Issue Centering NavBar
... but the same thing, it's off-centre
There are other tutorials suggesting using float: left, but any time I add floats (to either the list itself, or the list and its container), I either get the list appearing on the very left of the screen, or I just get everything split gaps appearing in the container instead of the list being on one line.
I know this is an oft-covered topic, but the same old advice isn't working for me. I'm obviously missing something, so help would be appreciated. Hopefully some illumination with clarify the core coding issues at play, as opposed to all the other answers on the net, which just seem to make the same basic suggestions. Thanks.
It's not an ultimate solution, but in that specific case it works
ul#nav {
font-size: 12px;
width: 666px;
margin: auto;
alignment-baseline: central;
}
Element which have any width , with margin:auto; will get centered position relatively to it's parent
You could use this:
div.navbar_wrapper { text-align: center; }
ul#nav { display: inline-block; width:auto; }
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459
Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?
Anyway, here's the problem. Check out the following page in both IE and Firefox:
http://www.lolstrategies.com/test/button_sample.html
I'm using this file to put together the button.
(http://www.lolstrategies.com/test/composite__V153767378_.png)
Obviously this button is centered in only IE.. what gives?!
I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.
So, what can I do to get this span centered in Firefox?
Thanks in advance.. please let me know if there you have any questions about this that I can help answer!
Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.
P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.
Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd
after that change display: block; to display: inline; from .spriteButton span.button_label
OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;
You might notice some "defect" in the ending image though...