There is a white border surrounding the banner of the website and it's really annoying me. It is like some sort of border about a width of 10px and white. This takes place at the top of the website.
I would have uploaded a picture, but it won't let me.
Anyways, this is all of the code for the banner:
.image{
padding:0;
margin:0 auto;
width:100%;
}
Is there any possible way I can remove this white border?
Edit:
I solved it by changing the image into a div and making the image the background of the div and positioned it to left by 0 and top by 0.
try adding border: 0 !important;
First thing first check image outer element if have any sort of padding margin or border, if yes then remove it otherwise jus give image width of 100vw instead of 100% .
Related
You can view the page in question here: http://www.envisionlocal.com/
Underneath the blue, you'll see where there's a blank white space before the grey area starts. I believe it's this code:
<div class="bottom_part"></div>
Which uses this CSS:
#banner .bottom_part {
clear: both;
padding: 167px 0 0;
}
But when I remove that from the HTML, I still get the same white space on the page. Does anyone know what I need to change to remove it?
You should inspect your page.
body {
background: url("../images/body_bg3.jpg") repeat-x scroll left 0 #F3F4F4;
}
This is the image: http://www.envisionlocal.com/images/body_bg3.jpg
Your background is one whole image, that gives the impression that there is white space when you remove your div.
Change your background-image:'body_bg3.jpg' in body element
Drip was right, need to fix background image on body.
To fix the issue replace file images/body_bg3.jpg with this
http://i.stack.imgur.com/sTwFE.jpg
and remove dev with class "bottom_part" from html
It's part of the background image here: http://www.envisionlocal.com/images/body_bg3.jpg
When you zoom in you can see a 1px wide image that is repeated horizontally with this style:
background: #F3F4F4 url(../images/body_bg3.jpg) repeat-x left 0px;
You can crop the blue part out of the image or mimic the image with a div structure and styling.
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
I have a website that one half is white and the other half it dark gray. I am using a wrapper now that gives it a defined width and centers it like this: margin: 0px auto 0px auto;.
If you look at the website here (link removed), you will see the dark bar has stopped and is confined to that width. What would be my best bet in order to achieve this?
You can look at my stylesheet here (link removed).
Thanks in advance!Coulton
To extend the dark gray background from div.right_bar all the way to the right side of the screen, you can remove the width from the parent element div.wrapper. For example:
.wrapper { width: 100%; }
When the width on div.wrapper is specified, it doesn't fill all of the horizontal space of the page, and the white from the body element shows through.
Done this a few times.
Create a LOOOONG horizontal line of that grey color as an image. Make it like 1200px wide (1px in height). Then in CSS set it as the body background with something like this:
background:url("urlToLongHorizontalLine.png") repeat-y scroll 52% 0 transparent;
the 52% will position it so that it only begins at about the center (you may have to adjust it slightly), and repeat-y will tile it vertically.
Let me know if you have any questions.
Perhaps inside your main div, create two more divs - left and right. Then in CSS define their size/position, etc.
I have an image and a border on the bottom of the div that contains it. The problem is that I want the border to be directly on the bottom edge of the image. Instead, there seems to be some natural padding on the bottom that I want to get rid of. How can I do this?
You need to set the images vertical align to top in your CSS :)
img { vertical-align: top /* can be baseline */ }
Hope that helps!
To put border on image
img{
border:1px solid #000;
}
Please share your code to solve your padding issue.
Why don't you apply the border directly to the IMG tag instead of its container DIV?
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.