I have a css where I defined a class for the top div with these properties
.topbluebar {
margin:0;
height:19px;
width:100%;
background-image:url('../../Images/top_blue.gif');
clear:both;
}
Here is the simple Html page
<link href="~/Content/Style.css" rel="stylesheet" />
<div class="topbluebar"></div>
<div>Foo foo</div>
Image is appearing but not with the top of browser but with little margin from top which I don't want.
In simple words I want to implement it like Stackexchnage topbar class but it doesn't seems to work for me at all.
I have read many answers but none of them worked for me yet.
Try adding the following in your stylesheet.
body { margin:0;padding:0 }
http://jsfiddle.net/z18Lpy99/
Also, to avoid these kind of issues, it is a good idea to use CSS Resets. Try reading up on http://cssreset.com/
A really simple solution would be to add the following css (below) to the top of your file. This essentially resets the margins to 0.
Here is a link to the updated JSFiddle: https://jsfiddle.net/r58hvuzp/
*{
margin: 0;
}
Try this
* {
margin: 0;
padding: 0;
}
Basically lots of things in html has default styles which include default values for padding and margins.
Related
I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
I'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
I am having trouble removing the margin from the top of my container in codeigniter it is something to do with the default css but do not know where would remove it from.
https://carrarawebsitesolutions.com/
You can have a look at the top and see what I mean. I have tried may ways and now think it is something to do with the codeigniter default css I in command area some where.
I have tried do add
body {
margin: 0px !important;
padding 0px !important;
}
And still nothing
Try adding margin: 0; to .header h1
That should fix it. Hope this helps and I would suggest starting off with the Eric Meyer Reset.
I have a page with a image. I want set it top of page.
<HTML>
<HEAD>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</HEAD>
<BODY style="background-color:#3baa35;" >
<IMG border=0 src="home.PNG" ></p>
</BODY>
</HTML>
But there is one line of space between the top of the page and the body.
How to set image top of page?
Put some styles:
p { margin: 0; padding: 0; }
This is because each browser has its own default CSS values. You can use Eric Meyer's reset CSS to have the same display on all the browsers :)
Link to Reset CSS
Don't forget to put border: none; as well
IMO, your css properties are okay .
as
Margin is on the outside of block elements
We use padding for inside of block elements .
By default, images align their bottom edges with the baseline of the text.
just use to get rid from this
img { /* Or a suitable class, etc. */
vertical-align: bottom;
}
Hope it will help.
Here is a hack to your answer.
Your p tag inherits the font-size from the a tag and thus assigns the margin to a size of 1em which is the size of the letter M of the parent elemt i.e THE a tag
So if you set the font-size of a to 0 then the font-size of p will be 0 and hence the margin too.
Sounds pretty cool right? Here's a working fiddle...
FIDDLE
a{
font-size:0pt;
}
WARNING: This is just for Demo purposes and should not be used in actual working code.
I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).