My anchor link is in the footer, and when it's clicked, scrolls to an anchor in the middle of the page. The problem is that even though I've added padding to the anchor, the anchor is still flush with the top of the browser. The padding just isn't gripping anything, if that makes sense. I can see the padding expand beyond the div the anchor is contained in when I "Inspect".
What am I missing?
CSS
<style>
.anchor-link {
margin: -90px 0 0;
padding: 90px 0 0;
display:block;
}
</style>
HTML
<div class="anchor">
<h2>
<a name="A" class="anchor-link">This is the anchor</a>
</h2>
</div>
You know, it happens that as soon as you seek out help, you find the answer. I really do appreciate your contribution and help though, guys.
In short, the div that surrounded the anchor was set to "overflow-y:hidden;". I changed this to "overflow-y:visible" and the padding for the anchor works now.
I've included a fiddle that shows the problem area: https://jsfiddle.net/uj9bfysk/1/
Check your margin and padding... is there a reason they seemingly cancel each other out? One is 90, the other is -90.
.anchor-link {
margin: -90px 0 0;
padding: 90px 0 0;
display:block;
position:relative
}
Try this one :
.anchor-link {
margin: 0;
padding: 0;
display: inline-block;
}
If you want to add padding above and below link just set padding on h2 tag.
.anchor h2 {
padding: 10px 0;
}
Hope it works..
Related
In this site http://rgdev.realtyguard.com/ In "Find your dream home!" section I am having problem with dropdown which is cut down when I click on it.
I would like to see the div above the main div.
Find out the following attachment
Please help.
Thanks.
There is a padding and margin on ul.chosen-results which means that the items dont reach the edge. To remove this all you have to do is add this to your css:
.chosen-results {
padding: 0;
margin: 0;
}
You can set margin-right: 0 to:
#ihf-main-container ul,
#ihf-main-container ol {
margin-top: 0;
margin-bottom: 10px;
margin-right: 0;/*add margin right 0*/
}
If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).
html:
<div class="pad0">
<h1>Text</h1>
</div>
<div class="pad1">
<h1>Text</h1>
</div>
css:
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.
This is due to the margin collapsing
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
You can find further information also on w3c site.
Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]
So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.
It's to do with the default CSS applied to Heading1 element. It already has a padding/margin applied to it.
If you reset it, you can see the result you're after: http://jsfiddle.net/68LgP/8/.
h1 { padding: 0; margin: 0; }
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Please see the updated CSS here
.pad0 {
background-color: #E9E9E9;
padding: 0px;
margin: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
margin: 0px;
}
h1
{
padding: 0px;
margin: 0px;
}
set h1 margin to 0
h1 {
margin: 0;
}
It is now keeping the margin of the h1 within the DIV. The h1 has default top and bottom margin of around 21px, so when you add 1px padding to the DIV, it now looks like 22px
<div> is a block element, which means that it both starts and ends with a line break. I beleive that this is contributing to your problem - you may want to swap to <span> tags, although I'm not sure if this will solve the problem.
You could use CSS Reset which resets all CSS settings, including this kind of problems. Recommended for any site.
How can CSS Reset file solve your problem? As you can see, in the first paragraph, h1 is included, and it's given margin:0 which is needed for reducing the difference in problems like yours.
I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:
It has like a 8px white border around it, and this is what I want it to look like:
Without the 8px white border around it.
I am using this code for it:
.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}
I can using this:
margin-left:-8px;
margin-right:-8px;
margin-top:-8px;
And put width to 102%, but then it gives me scrollbars on the bottom.
This may be confusing, but I am a beginner, and I need help.
If you can help me, I will appreciate it a lot!
Thanks.
You have to set the margin on your body to 0 like this:
body
{
margin:0;
}
Your body tag comes with margins. That is your problem.
Do:
body { margin: 0px; }
I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try
body
{
margin: 0px;
}
Hope that helps
set your html and body to:
body, html {padding: 0; margin: 0;}
This will reset all browsers and remove the border.
This will declare on the entire page not just to the Body.
* {
padding: 0;
margin: 0;
}
http://jsfiddle.net/cornelas/gwM4X/2/
User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like
body {
margin: 0;
}
Else you can also use a * universal selector like
* {
margin: 0;
padding: 0;
}
DEMO HERE
For a proper stylesheet reset, use CSS RESET STYLESHEET
With HTML and CSS I have this vertical space between a p tag and an image. It looks like this:
See that extra vertical space between the hello and the image? How do i remove that? I know I can absolutely position the image closer up to the hello but I would like to know what's causing the space.
My code:
HTML:
<div class="Box">
<p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50" SRC="pic.jpg">
</div>
CSS:
.Box //this is the parent div
{
background-color:red;
width:60px;
margin:0px;
margin-bottom: 0px;
padding:0px;
}
.contextimg //this is for the image
{
position:relative;
margin:0px;
padding:0px;
line-height:0px;
}
Note: I've also tried to set the body's margin and padding to 0 but it didn't work.
It's common for browsers to give paragraphs a default margin. So just take it away.
Give the <p> a margin of 0:
.Box p{
margin: 0;
}
Check it here: http://jsfiddle.net/aG27X/
That's the default padding/margin of p element, try using
.Box p {
margin: 0;
padding: 0;
}
You should reset browser defaults before designing any webpage, if you want a quick solution than using
* {
margin: 0;
padding: 0;
}
Will suffice your needs, you can also google out for CSS reset stylsheets, these stylesheets will reset each elements precisely
Set the padding and margin top/bottom of the <p> tag to 0. <p> tags automatically have a default padding/margin set, in case you dont overwrite it by something else.
p {
margin: 0;
padding: 0;
}
p stands for paragraph. the paragraph automaticly adds space like this: Fiddle
and you can remove it like this: fiddle
I can't tell you what your problem is, but from this fiddle: http://jsfiddle.net/u6C9E/
p { margin: 0; padding: 0; }
works.
If you have any image above and/or bottom of the paragraphs, make the paragraphs in two class.
HTML:
<p> class="first">Your 1st Paragraph</p>
<p> class="second">Your 2nd Paragraph</p>
The CSS :
p.first {
text-indent: 2em;
margin-bottom: -5%;
}
p.second {
margin-top: -5%;
text-indent: 2em;
}
Use "%" to let it still looking good in responsive web...
I have built several web sites and now i am having newbie problem that is driving me nuts...
Here's my code:
<body>
<div id="page">
<div id="page_wrapper">
<div id="header">
<h1>Heading 1</h1>
<div class="clear_both" /> </div>
</div><!-- end #header -->
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </div>
</div><!-- end #main_menu -->
<div id="left">
</div><!-- end #left -->
And here's my CSS
First i have a CSS Reset template from here:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
and then on another file:
body, html {
font: 10pt Verdana,Arial,sans-serif;
background: #fff;
margin: 0;
padding: 0;
text-align: left;
color: #333;
}
div {
line-height: 1.4em;
}
#page {
}
#page_wrapper {
}
#main_menu {
}
#left {
}
div.clear_both {
margin: 0;
padding: 0;
font-size: 0;
height: 0;
line-height: 0;
clear: both;
}
And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)
There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it?
I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S
Unexplainable DIV space
I've finaly found the problem thanks to all of You but especialy thanks to Notepad++
The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.
I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.
div {line-height: 1;}
h1, p {margin: 0;}
don't use units for your line height, see: Unitless line-heights for more information,
if you simply put 1.4 then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example
JSFiddle : HERE
In top of your CSS file just paste this
* {
margin: 0; padding: 0;
}
Hope this helps.
<div class="clear_both" /> </div>
This is creating you a white space between Heading 1 and Here goes the main menu...
DIVs comes one below other if you have them "display: block", so even if this div don't have text, it has empty space " "...
If you delete this, all other will be like text below...
Sorry if I understand something wrong... ;)
div {line-height: 1.4em;} should be the culprit.
on your DIV or image use:
.div
{
display: inline-block;
padding:0;
margin:0;
}
and on body use:
body
{
padding:0;
margin:0;
}
I had the same problem and this worked just fine for me I just got it fixed! Hope this helps anyone searching for an answer.
Div comes with blank spaces whenever used.
In order to remove them
Use
margin-top: -10px
or whatever is convenient to your page setup.