Hi guys,
Once again thanks for replying. I’ve never actually seen a forum with this kind of response (or response times) to support requests. Just great.
Quote from: AMDbuilder at Mar 10, 2008, 04:58 PM
Try applying the background to the nav div and see if that gets it.
AMDbuilder
I couldn’ get the nav thing to do the trick.
Quote from: sottwell at Mar 11, 2008, 01:09 AM
If you have a container with elements inside of it that are floated, as is common in the case of menus, the outer container won’t stretch down to include the area taken up by the floated elements, so if that outer container has a background image the background is never shown. You either have to float the outer container itself, or have an extra element at the bottom set to "clear" the floats in the CSS to pull the bottom of the outer container down.
Since I’m pretty new with CSS, maybe you could help me as to how to accomplish this? I’ve posted my template and CSS below.
Thanks a bunch!
This is my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/bfound_horizontal/bfound.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>[(site_name)] | [*pagetitle*]</title>
</head>
<body>
<!-- start wrap -->
<div id="wrap">
<!-- start header -->
<div id="header"></div>
<!-- end header -->
<!-- start front image -->
<div id="frontphoto">
<img id="frontphoto" src="assets/templates/bfound_horizontal/images/front.jpg" width="760" alt=""/>
<!-- end front image -->
</div>
<!-- start navigation -->
<div id="nav">
[[Wayfinder? &startId=`0` &level=`4` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd`]]
</div>
<!-- end navigation -->
<!-- start left sidebar -->
<div id="left_sidebar">Left sidebar</div>
<!-- end left sidebar -->
<!-- right sidebar -->
<div id="right_sidebar">Right sidebar </div>
<!-- end right sidebar-->
<!-- start content -->
<div id="content">[*content*]</div>
<!-- end content -->
<!-- start footer -->
<div id="footer"><p>© 2008 <a href="mailto:[(emailsender)]">[(site_name)]</a> - Website af <a href="http://www.bfound.dk/">Bfound</a></p> </div>
<!-- end footer -->
</div>
<!-- end wrap -->
</body>
</html>
This is my CSS:
/* CSS Document */
Screen layout: */
body{
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#f4f4f4 url(images/bg.gif) top center repeat-y;
color:#303030;
}
/*TEST*/
#nav{
background: url(images/nav.jpg) repeat-x;
}
#wrap{
background:#ffffff;
color:#303030;
margin:0 auto;
width:760px;
}
#header{
clear:both;
margin:0 0 0 0;
padding:0;
height:8px;
}
#header h1{
width:250px;
margin:5px 20px 0;
float:left;
}
#header p{
width:500px;
float:right;
text-align:center;
color:#a0a0a0;
margin:0 0 10px 0;
font-size:0.8em;
line-height:1.2em;
background-color:inherit;
}
#frontphoto{
margin:0 0 0 0;
border:0;
}
#left_sidebar{
clear:left;
float:left;
width:120px;
margin:20px 0 10px 0;
padding:0;
font-size:0.9em;
line-height:1.5em;
}
#right_sidebar{
clear:right;
float:right;
width:120px;
margin:20px 0 10px 0;
padding:0;
font-size:0.9em;
line-height:1.5em;
}
#right_sidebar p{
margin:0 0 1.5em 0;
}
#content{
margin:30px 130px 20px 160px;
border-left:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
padding:0 10px 0 10px;
line-height:1.6em;
text-align:left;
}
#content h2{
font-size:1.5em;
margin:0 0 0.5em 0;
}
#content img{
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;
}
h3{
font-size:1.3em;
margin:0 0 10px 0;
}
a{
text-decoration:none;
color:#286ea0;
}
a:hover{
text-decoration:underline;
color:#286ea0;
}
a img{
border:0;
}
#footer{
clear:both;
margin:0 auto;
padding:10px 0 20px 0;
border-top:4px solid #f0f0f0;
width:760px;
text-align:center;
color:#808080;
font-size:0.9em;
}
#footer a{
color:#808080;
text-decoration:none;
}
#footer a:hover{
text-decoration:underline;
}
.announce{
margin:10px 0 10px 0;
padding:10px;
width:530px;
color:#505050;
background-color:#f4f4f4;
line-height:1.3em;
}
.left{
margin:10px 10px 5px 0;
float:left;
}
.right{
margin:10px 0 5px 10px;
float:right;
}
.textright{
text-align:right;
}
.center{
text-align:center;
}
.small{
font-size:0.8em;
}
.bold{
font-weight:bold;
}
.hide{
display:none;
}
This is my menu CSS:
/* CSS Document */
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
background: url(images/nav.jpg) repeat-x;
border:0px solid #fff;
width:760px;
margin:0;
margin:0 0 0 0;
position:relative;
z-index:100;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
background: url(images/nav.jpg) repeat-x;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
background: url(images/nav.jpg) repeat-x;
text-align:center;
text-decoration:none;
width:106px;
height:30px;
color:#000;
border:10px solid #fff;
border-width:0 1px 0 0; /* her ændres border rundt om menukasserne*/
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background: url(images/nav.jpg) repeat-x;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
background: url(images/nav-hover.jpg) repeat-x;
position:absolute;
/*top:31px; */
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background: url(images/nav-hover.jpg) repeat-x;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background: url(images/nav-current.jpg) repeat-x;
color:#FFF;
}