Click to See Complete Forum and Search --> : help me with background-image for nested divs
ludacruzz
05-14-2009, 03:50 AM
I made a parent div and put inside the children ones , and I gave those children the background images using css,
the problem is that I don't neither see the children divs nor their backgrounds.
anyhelp!
thank you!
themarty
05-14-2009, 05:38 AM
without code or an online example, no one will be able to help you
ludacruzz
05-14-2009, 09:30 AM
here is what I've done before,
<div id="header">
<div id="logoposition"></div>
<div id="banposition"></div>
<div id="menu"></div>
</div>
and these are the CSS
#header{
border:groove 1px;
width: 1000px;
height: 229px;
border-bottom-color: #6699FF;
border-collapse:collapse;
border-color: #6699FF;
border-left-color: #6699FF;
border-right-color: #6699FF;
margin-left: 75px;
margin-top: none;
visibility: inherit;
background-color: #768B8C;
position: absolute;
}
#logoposition{
height:119;
width:170px;
background-image:url(images/logo.gif);;
float: inherit;
position: relative;
visibility: visible;
margin-left:76px;
z-index: none;
}
#banposition{
height:120px;
width:660;
position: relative;
visibility: visible;
float:inherit;
left: 200px;
top: 18
background-image:url(images/ban.gif);
}
#menu{
height:30;
width:1000;
position:relative;
background-image:url(images/homemenu2.gif);
visibility: visible;
margin-left: 75px;
margin-top: 75px;
float: inherit;
}
This is what I've done , I am not yet familiar with the CSS stuffs, so try to help me.
thank you
themarty
05-16-2009, 12:58 AM
There are a lot of conflicting stylecodes in your css. I couldn't really tell you which ones don't belong there since i don't know what you're trying to accomplish. The best way to approach a problem like this is to start basic:
html:
<div id="header">
<div id="logoposition"></div>
<div id="banposition"></div>
<div id="menu"></div>
</div>
css:
#header{
width: 1000px;
height: 229px;
background-color: #768B8C;
}
#logoposition{
height:119px;
width:170px;
background-color: blue;
}
#banposition{
height:120px;
width:660px;
background-color: red;
}
#menu{
height:30px;
width:1000px;
background-color: green;
}
Now you should be able to see something. Start adding small changes from here and look what kind of effect they have.
ludacruzz
05-19-2009, 03:41 AM
Thank you Thermaty,
Let me try it this way, but tell me if you use a background-image instead of background that it will works, because I want to put and positioning the images inside those DIV. Thank you!
themarty
05-19-2009, 05:45 AM
If everything is positioned correctly and has the right dimensions it will also work with background-images instead of background-colours. It won't have any effect on the position and dimensions of your divs