I have some problems with my css background-image property. According to the syntax i saw when studying my syntax would be true. I checked and the image is in the right folder.
Here is my code
HTML:
<div class="left"></div>
CSS:
.left {
width:240px;
background-image: url(img/sos-logo.png);
}
Why is it not working? Help please.
You need to add a height attribute to the div to get it to show up. By default, an empty <div> is has a height of 0px.
see pen http://codepen.io/JustH/pen/EavXZO
Related
http://jsfiddle.net/gvBM8/
Whenever you scroll over an image and it grows to the desired effect there is a white border that grows along the bottom as well. Is there anyway to stop this from happening?
Also, I am new to using CSS3 across multiple browsers, how would I set it up to be moz/IE compatible?
Thank you
HTML
<div class="col4 grow"> <img src="http://www.placecage.com/200/300" width="100%">
Apply img this css property:
img {
display: block;
}
Instead of giving to the tag, add a class to those img elements. that would be better.
Working Fiddle
Here is my code:
<style>
#defCalTree
{
overflow: scroll;
overflow-x: hidden;
}
</style>
and
<div class="defCalTree">
<div id="treeboxbox_tree" style="width:80%; height:100%;background-color:#f5f5f5;border :1px solid Silver; "></div>
</div>
and
to the treeboxbox_tree I attach a dhtmlx tree. But, the scroll bar which is shown I think doesn't refer to the tree. If the tree consists of many items, the div is getting bigger. It should remain the same size, and by using the scroll we will get to every item. What am I doing wrong?
In css you are using # which is selector for id and in html you are using class. so how your css will work. is this your problem or some thing else check it.
Try to either:
Amend <div class="defCalTree"> to <div id="defCalTree">
OR
amend #defCalTree to .defCalTree
You need to specify the height of the #defCalTree div. As it is now, it is growing in size to wrap its contents, which is the intended behaviour.
I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.
I'm having some troubles with my HTML and CSS, in that the HTML on my siet isn't doing what I've put down in the CSS.
I'm trying to make a block of text have width: 50, but it doesn't seem to be working.
Here's a code snippet:
<div id="welcome">
<h2>Welcome!</h2>
hello, this is some text.
<p>
text before that text down there. v
<p>
we have some text here.
<p><img src="images\halo.jpg" width="250" height= "250" alt="Master Chief" /><p>
</div>
This is from the site. I've put some rules down in the CSS to make this DIV, and other DIVs on seperate pages, have a width of 50%, but it just isn't working. Here's the CSS rule:
#welcome, #about, #contact {
width: 50%;
}
All my other CSS is working, and the HTML is correctly linked to the CSS. What am I doing wrong?
I've tried force-reloading, only having the rule for one DIV, and everything like that. If you can help me, thanks!
EDIT: Solved, thanks to ob. Cheers again.
-Tim
try adding this to your page styles:
html, body, form { width:100% }
The style definition seems OK.
Do you have any other style defined for div?
Is it working on some browsers and not on others?
You can easily diagnose the problem with web-developer tool or firebug.
This kind of problem often is the result of 50% width combined with 1px border. It's 50% + 1px, and therefore more than 50%.