This is the site link. The footer is the bootstrap's .well. It has some default margin-bottom you can see that with inspect element option. Now I have tried everything that I knew to remove the margin bottom ( Except editing the original bootstrap file I don't think I would need to do that ). For example:
footer.well { margin-bottom: 0px !important; }
I've also tried doing inline css but no use. Can anyone help me?
Note: If I remove the margin with the inspect element tool, it gives me the exact result I want.
One of parent divs have relative position and "top: -30px;" defined, if you remove that all comes to order
This is the line:
<div style="position: relative; top: -30px;" class="nav_wrapper padding">
Just redefine this to top: 0; and there you have it. Rest of padding is footer actual padding which you can remove with:
footer.well { margin-bottom: 0px !important; }
You need to do there changes to fix this.
1) Indeed remove the bottom margin AND the 1px bottom border:
footer.well {
margin-bottom: 0px;
border-bottom: none;
}
No need for !important here though
2) The element will still be shifted to the top because its parent element forces it to do so. Cancel that rule by removing it. Change:
<div style="position: relative; top: -30px;" class="nav_wrapper padding">
to simply
<div class="nav_wrapper padding">
3) Once removed at the top there will be a 30x gap because you just recreated it to clear the bottom. Here is a much cleaner way to recreate it without modifying the bottom:
#header {
margin-bottom: 30px;
}
All CSS rules must be declared after the bootstrap CSS file rules. Preferably from another file loaded after.
Adding margin-bottom: 0px; to footer.footer-home within custom.css should solve your problem.
Related
On my site http://richardclifford.net/, whenever a user clicks the one-page #id elements it goes to the very first piece of content the and ignored all the container padding and h2 margin-top to look like this
I'd want it to scroll to include the padding or have an offset like this.
I've add an offset on my scrollspy but that is not fixing it and not sure how I can fix this.
add margin-top: -50px;padding-top: 50px; to target id it works
#work,#about,#contact,#copyright{
margin-top: -50px;
padding-top: 50px;
}
You can use margin-top and padding-top for this with out affecting to the front side of the website. Try to add -50px to margin top and 50px to padding top. This will fix your issue.
One common way is to add invisible pseudo elements to the original target elements of the links via CSS, like this:
#work::before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
pointer-events: none;
}
This will "extend" the element with that ID in a way which causes the anchor to be 60px above the main element (can be any value), without causing any other visible changes.
So, here is the html code:
<div class="bottom_block">
<a class="logo" href="#">
<img src="img/logo_uniqa.jpg" height="90px" width="100px" alt="logo">
</a>
</div>
And here is css:
.bottom_block {
background-color: blue;
height: 50px;
width: 100%;
}
.logo {
display:block;
padding-bottom: 10px;
}
.logo img {
display: block;
margin:0 auto;
}
So, I used margin-top:-10px but it moves whole container, not only image.
It is due to the margin-collapsing rule. To fix it, you can simply use a transparent border on the element:
.logo img {
border: 1px solid transparent;
margin-top: -10px;
display: block;
}
What is margin collapsing?
I already linked to the documentation page of MDN for what margin collapsing is. Here's the quick look:
Now, why adding border aborts the margin-collapsing rule?
This is not the only way prevent margin-collapsing; there are other ways too such as adding padding to the element.
Why does this prevent collapsing of margin? Because it (the element) is separated from the box layout. I mean to say that the padding or border doesn't separate the element physically from one another, but margin separates each physically.
Okay, lets discuss how border, padding, or overflow techniques prevent a collapsing margin. To clear up things to you, I have made this picture of magnets. You may know the rule of opposite pole magnets if one is shifted the other would also shift instead of stitching with one-another.
Look at the pictures to know how margin collapse is prevented:
The rule of margin collapsing may not be exactly as the opposite pole of magnet rules. But to clear things up this is just enough I hope.
TLDR: this codepen works fine in Chrome, but the alignment is off in Firefox.
I'm building a jQuery plugin which modifies a text input to give it a dropdown button on the left. In order to get the positioning right, I add a wrapper div, which is the same height as the input, so the button can be absolutely positioned on top of the input, and yet still have the same height:
#wrapper {
position: relative;
}
#overlay {
position: absolute;
top: 0;
bottom: 0;
width: 30px;
}
This works fine until the input has vertical margin: then the container grows to include the margin, and so the dropdown button grows with it. My solution to this was margin collapsing: I gave the input display:block which meant that the container ignored it's margin. All good.
input {
margin: 20px 0 40px; /* testing */
display: block;
}
But now the problem is that by default, inputs are inline elements e.g. you might want to have a submit button next to the input. So I wrapped the whole thing in a container div with display:inline-block, so another inline element like a button can happily sit next to it.
#container {
display: inline-block;
}
This works fine in Chrome, but has weird alignment issues in Firefox when there's any vertical margin on the input. Below I've added the final markup. There's also a codepen link at the top.
<div id="container">
<div id="wrapper">
<input>
<div id="overlay"></div>
</div>
</div>
<button>Submit</button>
Edit: the point is that this is a plugin and I'm trying to work with the user's existing markup and CSS e.g. they have this markup:
<input><button>Submit</button>
and their existing CSS has vertical margin on the input, and I want them to be able to just initialise my plugin on the input and it just work, without forcing them to change their markup/CSS. Now because the plugin needs to add lots of markup around the input (for the overlay and the dropdown list), I wrap it all up in a container div. This container div is the limit of our reach (and does not include the button element, or anything else they choose to put next to their inputs).
To fix this, you'll need to define a line-height in your parent div#test2. Without it, different browsers will give it different values. This will cause Firefox to cause this weird result.
Now, the line-height isn't the only problem, also the vertical-align's baseline value will generate a different result for inline elements than it is for inline-block elements that have a different height than the surrounding inline content. To fix this, change the value to top for the #container element (since that's the inline-block element).
The final result would have the following changed (only pasting the parts that changed):
#test2 {
background-color: green;
line-height:70px;
#container {
// replicate the inline nature of the input
display: inline-block;
vertical-align:top;
}
//the rest of the #test2 nested code
}
That would look like this.
Reply to comment
I've made something that does work by the requirements set. Since you said the extra code (so the divs around the input) are made by the plugin itself, I've taken the liberty of changing that a bit to make this work.
The way it can work quite easily is just not using inline-blocks at all, and sticking with the inline elements. This would change the styles to the following:
#container {
// replicate the inline nature of the input
display: inline;
}
#wrapper {
display: inline;
position: relative;
}
input {
// you'll want to make sure the typed text doesn't appear behind the overlay
padding-left:35px;
}
#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
Notes:
I didn't bother making the overlay cover the full height of the input, since your plugin would just make it a flag anyway. To make it cover the full height, just set negative top and bottom styles on the overlay, equal to the computed padding-top and padding-bottom (resp.) on the input. In this case, you'd have to change them to top:-5px;bottom:-5px;. (you can get the computed style via jQuery's $(input).css('padding-top'))
You could actually also remove the whole #container from it, since the only style it has now is display:inline which really doesn't add anything to the whole thing.
I've added a padding-left to your input, because otherwise you'd have to type behind the overlay, which is just silly.
Is the HTML generated by the plugin and it needs to stay exactly the same? I'm not sure I can figure out exactly why the second example is not working, but you seem to have too many div elements there. You could make since simpler:
HTML
<div id="test1">
<div id="wrapper">
<input>
<div id="overlay"></div>
<button>submit</button>
</div>
</div>
SCSS
input, button {
border: 1px solid black;
padding: 5px;
}
input {
display: inline-block;
padding-left: 35px;
}
#test1 {
background-color: yellow;
padding: 20px 0 40px 0;
#wrapper {
position: relative;
#overlay {
position: absolute;
top: 1px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
}
}
Codepen example
I've removed the margin, and instead used padding on the parent, it achieves the same thing. You'll also want some padding-left on your input field so the entered text doesn't disappear behind your overlay div.
EDIT: In case you are unable to change the markup:
SCSS:
#test2 {
background-color: green;
#container {
// replicate the inline nature of the input
display: inline-block;
padding: 20px 0 40px 0;
}
#wrapper {
// this is just here to be display:block and ignore the margin on the input
display: block;
position: relative;
}
input {
// tell parent to ignore margin
//display: block;
margin: 0;
}
#overlay {
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
}
codepen demo
Removed the block and margin declarations from the input field, and moved the spacing to padding of the #container element.
"Disclaimer": Let me just start by saying that I did not find exactly what is causing the problems in Firefox, but I did think of an alternative way you could do it.
The way this works in both Firefox and Chrome is just to use the exact same HTML as you used for your #test1, but on top of that, also using the CSS :before pseudo-element (instead of using the #container and #wrapper). The code I used was:
#test2 {
background-color: green;
position:relative;
&:before {
content:"";
display:block;
position:absolute;
left:1px;
top:1px;
bottom:1px;
margin:20px 0 40px 0;
width:30px;
background:#00C2FF;
}
}
demo
The way this works is to simply position the :before overlay on exactly the same place as the divs previously were. As you can see, I've used most of the same styles as you did, but instead, I've put them on the :before pseudo-class.
Other answers don't know why it doesn't work on Firefox. Well, I think that Firefox has the right behavior and it's a Chrome problem.
In short, you want to align an input with a button. But the input is inside a wrapper. Then, you can use vertical-align to control the vertical aligning between the wrapper and the button, but not between the input and the button.
Here you can see an screenshot with different vertical-align:
See the code.
If you want to align the input and the button (last case in the image), you have a problem, because any of the keywords you can use with vertical-align does that. Only in case that input's top margin and bottom margin are equal, then vertical-align: middle works.
But in general, you have have another solution: vertical-align also accepts a <length> value.
And, to get a perfect alignment, you should use the formula
vertical-align: -(input bottom margin)
Or, if you want to align them even if the button has a bottom margin, then
vertical-align: -(input bottom margin) + (button button margin)
The code formula above works with inline-block <div>, but not with <buttons>.
The formula must be fixed to
vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6
In your example
(Input bottom margin) = 40px
(Input offsetHeight) = 31px
Then, you need
vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6
Demo
I could achieve it with the following.Codepen You will have to know the css applied to input and apply it to button as well
button{
position:absolute;
margin-left:5px;
}
input, button {
display: inline-block;
margin: 20px 0 40px 0;
}
please update below in your code.
input, button {
border: 1px solid #000000;
margin: 20px 0 40px;
padding: 5px;
vertical-align: top;
}
hope it will work
http://codepen.io/anon/pen/Isycu
Now after several hours, I am still stuck at this problem; I am trying to make this box relatively positioned so that the results do not overlap my footer. I tried to achieve this via javascript and that did not work and now I am not sure how to make this relatively aligned.
Here is the jsfiddle: http://jsfiddle.net/Lp2kV/1/
I am sure the problem can be solved if I change content from absolute to relative but after that I am not able to align it the same way as now.
This is the part, where I think I need to edit positioning.
.content {
position: absolute;
top: 28px;
left: 0;
background: #eee;
right: 81px;
min-height: 200px;
padding: 20px;
border: 1px solid #ccc;
height:auto;
}
If you only want the result contents to be contained inside the DIV area and have a scrollbar at the right side, you can add the following property inside your .content selector. This is if you want the height to stay the same.
overflow: auto;
But if you want the height to be flexible, then you should implement this approach..
First, remove the height property.
<div id="results_1">
<div style="clear: left; height: 0; margin: 0; padding: 0;">
will become
<div id="results_1">
<div style="clear: left; margin: 0; padding: 0;">
Before the closing tag of <div class="content">, you should add <div style="clear: both;"></div>. This will automatically expand the gray container height depending on content.
Maybe what you'll have to do next is have a javascript code to compute height of the contents box then adjust the top margin of your footer via javascript so they won't overlap.
I highly suggest just use a jquery plugin instead to create a tabbed box and disregard my solutions. This will solve your positioning problems. The only way you were able to overlap .content boxes is because they are absolutely positioned.. and absolute positioned elements do not add up to the size of their parents. So the moment you change absolute to relative, the tabs will scatter because each tab will expand to the size of their child elements. You can't achieve tabbed boxes and not overlap the footer with your current approach, unless you use javascript, or apply overflow: auto; on the .content selector.
Hope this helps.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.