im having a problem regarding using background property with url('location') value with a div element. All browsers do not show the background image for any content written within the div tag.
code:
HTML:
body has a div tag with the class = slide. this div tag contains some content and links.
CSS:
div.slide {
margin: 0 auto;
background: url(images/btnslide.gif);
}
please help me identify the error. maybe i have misused div tag. please point out the solution for the above problem
thanks in advance
You either haven't set the height for your .slide element, or you haven't cleared the floats for the elements inside .slide. Try setting a height or adding overflow: auto if you want to clear the floats inside your <div>.
This code should work by default, as everybody said something else is wrong.
Either the height is wrong or the image does not exist.
Which browsers are failing exactly?
If you like you can try writting the CSS with full syntax:
background: url(..) top left repeat;
Related
I am trying to center this JS/jquery/ajax app screen here, such that no matter what size the user's screen is, it will all remain centered. Right now it is all left-aligned:
http://www.funtrivia.com/html5/indexc.cfm?qid=361927
No matter what I try, it simply does not center. When I do manage to center the outermost div, all of the inner stuff gets messed up.
your html is built wrong. everything seems to be positioned absolute and has a left/top defined. It does not help that your body tag has width: 790px;
This can be solved with just css. Try removing all the positioning styles from the markup and set #game to be margin: 0 auto (the centering trick)
Remove the width settings on your body tag
Use "margin: 0 auto" on your gameheader and game divs
and set your gameheader div and game div to use position:relative
A quick Google Search reveals How to Centre a DIV Block Using CSS
Use the following CSS where #content is the id of your main div element
#content {
margin-left: auto ;
margin-right: auto ;
}
The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.
jsFiddle
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
I have a background image pulling in but it is taking the height of the text not the image, I will eventually do a text-indent: -99999px but I have tried every CSS property to get the whole image to appear. Can anyone help with this, my website is: http://yesiamshow.biz/ it is the buttons under the slideshow, you can see I have the image for previous pulling but it does not show the whole height. All my CSS properties have a height of 60px and nothing is happening.
The button is actually the right height, but your .window class is cutting off it off. Looks like you can change it to 410px and it will fix:
.window {
height:410px;
}
You should also give the button a display:block or inline-block since you're giving it a width and height.
I took a quick look at your CSS and it seems that you are wrapping your link with a span element. You can still do that, however you need to make sure that you are applying all of your styling to the links.
Example. If your HTML was something like.
<a span="prev_btn">Previous</span>
You would have to style like so.
span.prev_btn a { }
And it should look something similar to the following.
span.prev_btn a {
background: [your url];
display: block;
height: [height];
width: [width];
text-indent: -9999px;
}
Hope that helped.
I'm sure the answer is obvious, but I haven't been working with html/css that much...
There is a gap of white space in between the top of the browser and the first div. I don't really get why the gap is there. I didn't use margin-top or padding-top or border-top in the css, so why is there a gap?
Thanks!
While it would be extremely helpful if you actually posted some code or a link to the site, I would assume it's just the default padding. Most browsers have default styles for things like body that you may want to clear. Try something like this:
html, body{
padding: 0;
margin: 0;
}
If that doesn't fix it you'll need to give more information.
Without seeing anything I'd imagine you either need to clear the default padding on the body element or you have a heading tag in that div that is adding some extra goodness.
Are you using a reset? http://meyerweb.com/eric/tools/css/reset/
if the page is wrapped with a wrapper, use:
#wrap{
margin:0 auto;
padding:0
}
Once again, some context would be nice but if these solutions aren't cutting it, then there's a good change your a victim of collapsing margins. Try setting the overflow property of the body to auto
I had the same problem. Floating the upper divs solved it.
I had the same problem. It was fixed when I added 30px of padding to my div container. I used
.top-container {
padding-top: 30px;
}
My problem happened after I set some images to an absolute position in my div (which had a position of relative.) For some reason that gap appeared, but setting the padding worked for me.
I know this is 9 years old but...
body { margin:0; }
type that in between the Tags and it should work
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content