I'm designing a website, I'm trying to get a simple coloured div across the top of the browser, I've tried simply using:
div{
width:100%;
}
but noticed there's white space on either side and on top of the screen.
I'm looking for something similar to the blue header on Facebook that fills the entire screen.
Any suggestions how to accomplish this?
There is always some margin and padding in all browsers for the body. So, try doing the following and recheck the results:-
*{margin: 0; padding: 0;}
The above code will remove all the extra margins and paddings from all the tags!
You should use normalize.css for a kick-start designing of your applications though.
did the body have margin?
Try adding:
body {
margin: 0;
padding: 0;
}
or use a reset for styles like: http://necolas.github.io/normalize.css/
It's because of default styles of your browser, use this to reset it:
* {
margin: 0;
padding: 0;
}
Demo
Besides that, I'd suggest you take a look at css reset which give you a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
Related
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
I'm having a problem with a fixed position element in mobile Chrome. A little gap between the fixed top element and top of the viewport appears when I swipe up and down without reloading the page.
To replicate this bug the easiest way is to try the bootstrap example https://getbootstrap.com/examples/navbar-fixed-top/ in mobile Chrome. Swipe up and down without reloading page and after few tries you should see a gap.
The most common answer on Chrome rendering issue. Fixed position anchor with UL in body does not work for me:
#element {
-webkit-transform: translateZ(0);
}
Check if your body and html do not have any margin or padding. Also inspect to check if any of the div have any negative margin or paddings
body, html { margin: 0; padding: 0 };
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
Try setting margin-top and padding-top to 0px for the fixed element and the body and html tags
You have margins set on your div#navbar ul.nav.navbar-nav --- set your margin to 0.
see if setting your margin and padding are set to auto, in this case, the margin should automatically adjust accordingly.
body, HTML
{
margin:auto;
padding:auto;
}
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
On my website, the header is a div tag with a coloured background. The only problem is that it doesn't reach the "edges" of the window (Please see http://manpoints.uk.to/).
Any ideas of how to solve this?
Thanks, Josh.
This is a browser default css.
Add this to the head
<style>
body{
margin:0;
padding:0;
}
</style>
Or add it to a style sheet.
Try what #KP is suggesting, plus add #header{ width:100%; } to your stylesheet. What's happening is that your header does not have a defined width, and it's taking te maximum width of the content inside.
You may want to consider using a CSS reset technique to clear all browser-set styles. Your issue is that body by default has margin and padding.
In your stylesheet be sure to clear them by:
body
{
margin: 0;
padding: 0;
}
See this question for relevant CSS reset stylesheets: https://stackoverflow.com/questions/116754/best-css-reset
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.