This might have been posted and i apologize if so but, is there a way to, in css repeat a background image by how long something on the otherside is? example: i have a menu on the left which will have items being added and removed. the content area background(to the right of the menu) should be either as long or longer then the menu.
here's a link, for you visual people:
<!-- m --><a class="postlink" href="http://24.21.0.55/csshelp/">http://24.21.0.55/csshelp/</a><!-- m -->
here's the css for my content,footer and menu area:#menu {
position: absolute;
left: 0;
margin: 0;
padding: 0;
border: 0;
width: 198px;
text-align: center;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
border: 0;
}
#menu il{
width: 192px;
margin: 0;
padding: 0;
color: #000;
background: #e0861e;
}
#menu li a{
display: block;
padding: 0;
background-image: url(images/index_04.gif);
background-repeat: repeat-y;
color: #000;
text-decoration: none;
width: 198px;
voice-family: "\"}\"";
voice-family:inherit;
width: 198px;
}
html>#menu li a{
width: 198px;
}
#menu li a:hover{
font-weight: normal;
background-image: url(images/index_04.gif);
background-repeat: repeat-y;
color: #FFF;
text-decoration: none;
}
#menu .twl {
background-image: url(images/index_06.gif);
background-repeat: repeat-y;
}
#menu .gap {
background-image: url(images/index_05.gif);
background-repeat: repeat-y;
height: 54px;
}
#menu .topmenu {
background-image: url(images/index_02.gif);
background-repeat: no-repeat;
height: 26px;
}
#content {
background-image: url(images/index_03.gif);
background-repeat: repeat-y;
padding: 0;
border: 0;
margin-left: 198px;
width: auto;
}
#footer {
clear: left;
padding: 0;
border: 0;
margin: 0;
background-image: url(images/index_07.gif);
background-repeat: no-repeat;
height: 52px;
}I'm using div tags and i have four(header,menu,content and footer).
if you need more info let me knowi know how to fix this issue in tables but i'd rather not use tables...but it is appearing that no one is having a solution to this...The background of a div is cropped by the div.
here's a link, for you visual people:
<!-- m --><a class="postlink" href="http://24.21.0.55/csshelp/">http://24.21.0.55/csshelp/</a><!-- m -->
here's the css for my content,footer and menu area:#menu {
position: absolute;
left: 0;
margin: 0;
padding: 0;
border: 0;
width: 198px;
text-align: center;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
border: 0;
}
#menu il{
width: 192px;
margin: 0;
padding: 0;
color: #000;
background: #e0861e;
}
#menu li a{
display: block;
padding: 0;
background-image: url(images/index_04.gif);
background-repeat: repeat-y;
color: #000;
text-decoration: none;
width: 198px;
voice-family: "\"}\"";
voice-family:inherit;
width: 198px;
}
html>#menu li a{
width: 198px;
}
#menu li a:hover{
font-weight: normal;
background-image: url(images/index_04.gif);
background-repeat: repeat-y;
color: #FFF;
text-decoration: none;
}
#menu .twl {
background-image: url(images/index_06.gif);
background-repeat: repeat-y;
}
#menu .gap {
background-image: url(images/index_05.gif);
background-repeat: repeat-y;
height: 54px;
}
#menu .topmenu {
background-image: url(images/index_02.gif);
background-repeat: no-repeat;
height: 26px;
}
#content {
background-image: url(images/index_03.gif);
background-repeat: repeat-y;
padding: 0;
border: 0;
margin-left: 198px;
width: auto;
}
#footer {
clear: left;
padding: 0;
border: 0;
margin: 0;
background-image: url(images/index_07.gif);
background-repeat: no-repeat;
height: 52px;
}I'm using div tags and i have four(header,menu,content and footer).
if you need more info let me knowi know how to fix this issue in tables but i'd rather not use tables...but it is appearing that no one is having a solution to this...The background of a div is cropped by the div.