Okay So I made a template with some CSS & HTML. However, if you look between the menubar, there's a bunch of white space. Also the content and sidebar are weird. If you look at the top there's a bunch of padding at the top but I didn't apply any padding anywhere! Help!
Link to site http://techtubecentral.com/demo/
Try this, Hope it will work
<style type="text/css">
ul{
margin:0px;
}
</style>
Padding and margin is specified by default. It is part of what was originally generated by the W3C consortium. All you need is a CSS Reset sheet.
http://www.cssreset.com/
You can attach this to your site as a separate file, for example reset.css. Or you can jsut copy paste the reset code to the top of your styles.css file.
Naveen's solution is correct b/c there is default margin coming from the browser's style sheet. Add
* {margin:0; padding:0;}
as the first line in your style sheet - it's a simple reset of these properties on all elements, and you will have no more trouble with "phantom" paddings and margins cascading down from the browser stylesheets.
When using a tag you will find that the browser will automatically adding a margin and sometimes padding that may not be needed.
Try adding margin: 0px; and padding: 0px; just as good practice.
Related
I wonder how you would remove the space around text, I know this can be achieved by line-height. But space is always kept either above or below the text. Is there some dynamic way to do this? Either plain CSS or SASS works for me.
Thanks in advance :)
Your developer console tells you which property is responsible for the space.
In your case its the margin that is defined on the element. A simple
h1{
margin:0;
}
will fix this.
In case you wonder, where this margin comes from - some of the elements, like headings come with predefined margins & paddings that are applied by the browsers automatically. In this case, the source in the styles section of your webdev console states "user agent stylesheet".
write CSS
h1 {
margin: 0;
}
It will remove the default margin for h1 getting applied from browser.
I want to include normalize.css in a HTML email. However various tutorials advise that all css should be inline, as some email clients ignore linked styles in the head. In such case how can I include normalize.css?
The only reason I want to use normalize.css is so that it takes out the padding around the edge of the browser.
The only reason I want to use normalize is so that it takes out the padding around the edge of the browser.
That's just:
body {
margin: 0;
}
Go read the source code for Normalize, line 19:
https://github.com/necolas/normalize.css/blob/master/normalize.css
You can just inline that one bit, where appropriate.
Put your css in <style> tags.
<style>
body {
padding: 0;
...etc;
}
</style>
I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.
I'm sorry I cannot show you the code, it is currently on my localhost.
I am pretty sure I have correctly typed the code because Netbeans doesn't show any errors. I am making my parents website for their charity, Enough to Spare. When I load the webpage though, there is a white line on all sides (although you can't see the top line because that div is white)
Here is a screenshot.
Anyone have any suggestions?
I would recommend you use a reset.css file before your own.css, so you start with a blank slate.
You could always add -
html { width:100%; height:100%; margin:0 padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
http://www.cssreset.com/ - This is where I look to get my reset.css file
Thank you to Dan Ovidiu Boncut for reminding me to put in margin:0; and padding:0;!
Ninja edit: Have you tried using the Chrome Developer Tools? You can play with the css using that. Right click on an element and click on inspect, there you can add new css styles and edit your current ones. It is a brilliant way to find solutions to your css issues... it also shows you what line in your css file you're at, so when you come to make the changes in file you know where to look straight away! :)
In the CSS, try changing the padding of the container <div> to 0, because anything inside a <div> is also inside whatever padding it has, resulting in space between the padding and the border. Also try changing the margin to 0, because having a margin will result in space between the border and its container.
If you don't have a container <div>, or this didn't fix it, try setting the padding of the <body> tag to 0, because it's the outer-most container and might have default padding.
I also think there might be alternative ways to set background contents to ignore padding. Unfortunately, it's been a little while since I've worked in HTML and CSS, and I don't currently have time to experiment with that. But see what you can do with the above suggestions.
The fact that NetBeans doesn't show errors doesn't mean your presentation is the way you want it to be.
Check your containing divs. Check for any margins and/or paddings that could cause spacing. Borders as well.
If all fails use a CSS reset and check again.
You need to copy and paste the html and css involving your page elements, otherwise no one will be able to help you. Having your code on localhost has nothing to do with that.
The only thing that solved this problem for me was adding
body {overflow-x: hidden;}
to my CSS file. Once this works, I guess you can remove:
html { width:100%; height:100%; margin:0px padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
And also: quick tip for beginners: always use Command + Shift + R for a hard reload instead of a normal Command + R while testing solutions.
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;