I'm having trouble removing a margin in CSS .
I am working in a MVC .NET project and have implemented the summernote editor.
It uses the following CSS files:
summernote.css
font-awesome.css
bootstrap.css
as well as the default css files for an MVC application.
I have inspected the page and it states I have a margin to the right on the .note-editor class. I have then set the margin to 0 for that div (and class), but so far it has been impossible to remove it.
Here is the link to my screenshot (since I require 10 reputation to post images):
http://imgur.com/gallery/cNlqLTi
I would be more than grateful if someone could help!
It is not the margin it is just the empty space inside the container .col-md-10 which is shown in screenshot. For better understanding I created this fiddle
Here the parent element .container has some max-width and it is aligned center and the inner element .inner-container has max-width: 90%; and there is a remaining space of 10%. If you inspect it you will see it as orange same as your example, which you thought it as margin.
In your scenario, the parent element .col-md-10 has some width and the inner element .note-editor has max-width:95%. Here, there is a remaining space of 5% which you assumed it as margin.
To remove it, remove max-width or if you give max-width:100% or width: 100%, your issue will be resolved.
Ok so I found what the problem was. The .note-editor was displaying as a block.
I changed its styling to display:inline-block and width:95%. This fixed it nicely. Thanks to everyone for helping out!
The following css worked for me.
.note-editor{
display: inline-block;
border: none;
}
Try in Site.css file or try directly to type style="margin 0 0 0 0" or try to apply another class to current.
Related
So i have build quite complex website but it's all based on standard bootstrap template without any changes done to bootstrap.css
The thing is, for some reason navbar is always 15px wider than rest of the website. While on PC you cannot see the difference, on mobile there is this weird white space next to the container. Why is that? How do i limit navbar?
i tried overriding max-width of .navbar to calc(100%-15px) but it doesn't make any difference.
Did you use the col command on the div below the navbar? If yes remove it. Of it still doesn't work, try clear: both command for the div under the navbar (not the white one). Hope that helps!
PS: It would be a lot more helpful if you post the CSS code (and HTML if necessary) so it will be easier to debug.
Change from position fixed to absolute.
.navbar-fixed-top, .navbar-fixed-bottom { position: absolute; }
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
I have tried the following approaches but they do not seem to work for me (I'm sure I am doing something wrong - I need help in figuring out what it is). The image is in the HTML header section (not body).
I have bootstrap in the HEAD section (before the image and it gets picked up from the browser cache so hopefully it gets used for the image in the header)
I have tried adding the following to the CSS for the image (and when it did not work, I tried adding a div around the image and assigned the class to the div):
display:inline;
text-align:center;
margin:auto;
I also tried the following in the CSS when option 2 did not work:
display:inline;
margin:auto;
horizontal-align:center;
I tried display:block in place of display:inline as well. Any thoughts on fixing this (specially without relying on bootstrap would be quite welcome). Thanks in advance!
General css properties for centering elements:
{
display:block;
margin: 0 auto;
}
First, you can't set a margin on an element that is set to display:inline.
Here is a great guide that you should read:
http://www.tipue.com/blog/center-a-div/
Place the image in a div, and then put text-align:center on the div. That's it.
http://cdpn.io/aDBhq
I have a white (actually, body color, ghostwhite) strip at the top of my HTML page, even though all margins, paddings, etc. etc. are set to 0.
URL: (edit: removed, because it's outdated)
I've thoroughly investigated everything I could think of, and I'm officially out of ideas what's causing this. The really strange thing is that I've copied the CSS from a test page and it works properly there, so I suspect any of boilerplate, modernizr, etc. that I use on the live page, but I've checked everything I could think of there and couldn't find a reason.
Firebug shows me that apparently the entire body is offset by exactly 2em. If I add a "top: -2em" to the CSS, it aligns perfectly with the top of the page. But that's at best a workaround and I'd like to understand what's going on here.
The issue is with the #logo DIV and the H1 element. Both have margins which (cumulatively) produce this white strip.
Remove the margin from the #logo element, and use padding for the H1.
Update:
Another way would be to:
remove margin from #logo
add padding to #logo
set margin:0 on H1
remove line-height:0.5em from #logo
Result:
Btw I recommend you to include YUI CSS Reset (or some other reset sheet) to your page.
You have a top margin on the h1 element.
h1 { margin: 0 0 10px; }
just add this to header class in css.
header {overflow: hidden;}
On this site:
http://stmc.modulemedia.co.uk/HossIntropia
I have code that's generated by a CMS, I have stripped things back as much as possible, removing the .net code and things generated by the CMS, but still cannot see why the text (that starts Hoss Intropia...) is overlapping.
There are basically two DIVS LeftCol and RightCol, that I have moved from being side-by-side to LeftCol being above RightCol.
This is a project I'm taking over, so I'm limited as to what can be changed.
Thanks for your help!
I think you just need to increase the height of the div inside #LeftCol that is containing stuff.
Try changing the height on .menu to height: 480px. Or perhaps even remove the height.
div.Menu has a height property, and since the content is spilling out beyond that height, it overlaps the div#RightCol content.
if you remove the height from div.Menu, it works
settting the margin of the right cols should solve the problem:
#RightCol {
margin:120px 0 0 0 !important;
}