I'm always stuck when it comes to float. In my grid project, I want to have my buttons in the left and my table in the middle, like in the shown example. And my footer should be bottom but i don't know for what reason is not https://codepen.io/coderBoyNaN/pen/wprOMX. Can anyone help? Exemple of how it should look like, i wanna make it more responsive: https://codepen.io/Soheevich/pen/VybrOo.
Just erase float: left from div#menu
https://codepen.io/anon/pen/zpEXdP
Related
I got 2 different menus (left aligned and right aligned) I wanted to center them, the theme support didn't help me. This is my first post, I am sorry if I make any mistakes. As I can imagine a css code should fix it, I tried to add it by myself but the code isn't changing anything.
Thanks for helping!
greetings
Webpage Image
Not sure how you structure the nav area, but you can try these two ways:
Make an upper div include the logo and two nav lists around the logo, and in its CSS, set the width and put margin: auto.
If I get it right, you will have three divs under your nav, one for your logo, and two for the nav lists around the logo. In this scenario, try to put below lines into your nav css:
display:flex;
justify-content:center;
I need to center the block (the one with red background) that contains all menu items inside the screen.
To better understand, please take a look at this fiddle: https://jsfiddle.net/dforce/mf9h78vn/3/
The css instruction:
margin:auto;
Seems not working.
Thanks a lot in advance for your help!
Try this way then, and tell us if it's what you wanted :)
ul.main-menu {
display: table;
margin: auto;
}
I have a problem with this menu https://jsfiddle.net/dforce/mf9h78vn/15/
Once this menu is displayed on resolution higher than 979px it look centered, than if I shrink the browser window an I click on a menu item, when I enlarge again the menu, it looses the alignment at center and it goes aligned left.
How is this possible?
I have tried to use the instruction:
display:inline-block
You can see an example here: http://www.piedicosta.com/joomla3/it/
http://jsfiddle.net/sWceL/
I am trying to horizontally center a loader gif next to a button. The only way I can figure out how to do it, is by floating the gif and moving it all over. Is there a better way?
In my example, the loader on the left is what I want, without float if possible.
You will want to use vertical-align: middle; without float: left.
Note that you will need to change the order of the elements in the HTML if you want to put the gif on the left side of the button.
Here's a working fiddle.
Check this:
http://jsfiddle.net/sWceL/3/
note: leave the one loader you need
http://elastichosts.darkgreener.com/cloud-support/index.html
Please could anyone explain why the table (#support-table) is being pushed down to align with 'Submit a ticket', rather than following straight on from the first paragraph?
I don't understand why the table is being pushed down, but the header and paragraph are displaying just fine inline alongside the right-hand gray block.
I assume it must be something to do with the display property of the table - I've tried setting it to display:inline, but it doesn't seem to help.
Thanks.
It's because of float: left in extra.css line 135. Remove that or change it to float: none and it scoots up to the paragraph.
You're unnecessarily floating your table left. (float:left;)
Removing this property will restore the table to the right location.
As the other answers pointed out, you have the float: left. The reason that this was causing problems is because of the clear:right that you have on the button to the right. The button is cleared to the right and the flow of the document continues fromt that point and so the table is floated to the left even with that button.
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.