it's me again, as im trying to learn I got to a frustrating part. First theres extra space enter image description here at the top with every browser.
I alredy tried body {overflow:auto;} in the css but aparently only works till certain point and desapeared the extra space at the right but not at the top. I already tried resetting the margins and paddings in my css but with no luck.
Also for some reason the cover image isn't showing.
Any sugestions?
You can check the prokect here: https://github.com/flukec777/MarsLandpage
You need to remove .col class from <div class="col span-1-of-2 bg"> on line 26.
Editing the .col port in css file can have effect in your other tags as well, as you have used that class elsewhere in the document too.
The extra space is being caused by the .col class in Grid.css. The .col class contains:
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
One solution to this problem is to remove or edit the margin property located in the .col class. You can do this dynamically through JavaScript, of course.
The reason behind extra space on the top is the div with class .col.span-1-of-2.bg inside header we can remove this space using margin.
html, body {
overflow: initial;
}
header .col.span-1-of-2.bg {
margin-top: 0;
}
Related
I am having an issue with around 20px of whitespace at the top of my webpage. It is hard to see but when you inspect element you can see the little gap at the top.
www.craigengland.co.uk
I have adopted
* {
margin: 0;
padding: 0;
}
but to no avail
Any suggestions?
I have tried "normalize" locally and it still doesn't fix the problem.
svg tag content after the body tag and before the header tag is causing that. Remove that whitespace issue will be fixed or if you want to do this using CSS, Add the following code to your css file.
svg{display:none;}
Add style="display: none" to your svg element and it should work.
Remove margin-top from header.
header {
margin: 14% 0 0; /* remove this from main.css */
}
well, while inspecting your web page. its show this whitspace in the header because of the margin you have given to it in the css
margin: 14% 0 0% 0%;
when I disable the margin you have given, the white space is no more to be seen . Header tag looks fine without that margin setting you gave.
I don't see any other error!
I have all all my divs end with a space. This also affects the menu div which I do not want to have the additions padding at the end.
I tried to implement a NoEm style and use it, but of course it does nothing. As soon as I wrote it I relaised it would not affect the div. the code is here:
div {
margin-bottom: 1em; /* Adjust depending on your text's line-height */
}
div .NoEm {
}
So the question is:
How can I have ALL divs end with a margin except for one?
NO jquery or Js wanted.
EDIT: HTML
<div class="navbar navbar-inverse NoEm ">
EDIT: 2
JSFiddle
http://jsfiddle.net/jufb09m1/
COMMENT
Lol, so many down votes for not realising a CCS question required me to show a html markup of <div></div>
Set the margin-bottom for .NoEm
div {
margin-bottom: 1em; /* Adjust depending on your text's line-height */
}
.NoEm {
margin-bottom: 0;
}
IkoTikashi's answer is correct based on the information available when they posted it; before the fiddle was available.
Now that we can see your HTML code, we can see the additional problem: In addition to not explicitly setting the margin-bottom to 0 in your .NoEm class, your navbar div contains OTHER divs. All those divs also have a margin-bottom of 1em.
You need to use the fix IkoTikashi provided of explicitly setting margin-bottom in .NoEm to 0 and you need to use that class on all the divs used to create the navbar.
I'm trying to remove the white spaces. I've research and finaly remove the white spaces on .side and .main but i cant remove the white space on top and below(when zoomed out).
Here's my FIDDLE. I appreciate any help.
What i want is (see image below). I'm tyring to create it like that, even when zoomed out there's no white space.
The another solution is to add this to .top and doesn't affect the other elements (That means, other elements' padding and margin will keep the same):
margin:0px;
display:inline-block;
Please notice that only add it to .top. Do not do this:
* {
margin:0px;
padding:0px;
}
Because it will also affect other elements.
Ok, take a look at this: http://jsfiddle.net/EH83H/
I've added a few things like
* {
margin: 0;
padding: 0;
}
to remove paddings and margins by default, i've added a position fixed to the container, and height: 100% to the main and left divs. Also main and left divs have a container div named bottom
I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/
See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to
img {
margin:0!important;
padding:0!important;
border:0!important;
}
to overwrite every possible causes for the margin, with no success.
Where is the margin coming from and how to remove it?
Just put to those imgs :
display: block;
UPDATE:
Some explanations: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.
Have you tried: vertical-align: middle
I have Deeply inspected the Issue, its a bit of haystick needle kind of thing.
1) Amazon Image box - Issue is with the td tag which creates a all sides padding of 6.71667px , This is FORCEFULLY created by the td,th padding which is set to 0.5em
th, td {
border-spacing: 3px;
//Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
padding: 0.5em;
border: 1px solid #CCC;
}
You should be able to find and edit from line 183 of the above css theme from wp-content/themes/ar2-2-b-2-fixed/styles.css
2) Coming to the second issue with WLAN Radios Pic , This image is pushed in due to the DIV tags Padding all set to 4px which is acting on the WLAN Radio pics.
Here are the Issue Pics:
Amazon Image Issue Solved Pic
Hope this Helps :)
Check for your line-height on the img elements, and set it to 1. You must have a line height > 1 on a parent element.
You can also change the display of those img to 'block' (to avoid line spacing).
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.