PDA

View Full Version : some basic problem....


nits4u
09-15-2009, 12:35 PM
hey guys here i m, again to disturb you....

there are two things that i have to ask.
firstly: i apply border to whole of the "wrapper" div, but it shows only to the header.
secondly: as my main content blk's height incs. with the content. is there any way that the height of right side i.e menu side also incs. itself with main content.

here is the code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bhangayni Mata</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function changeClass(targetID, classA, classB){
var node = document.getElementById(targetID);
var currentClasses = node.className.split(' ');
var currentFirstClass = currentClasses[0];
if(currentFirstClass == classA){
currentClasses[0] = classB;
}else if(currentFirstClass == classB){
currentClasses[0] = classA;
}

node.className = currentClasses.join(' ');
}
</script>
</head>

<body>
<div id="wrapper">
<div id="header">
<img src="images/hdrmod.gif" /></div><!--header-->
<div id="rtside_bg">
<div class="rtside">
<div id="nav">
<a href="index.html" title="home">Home</a>
<a href="history.html" title="history">History</a>
<a href="festivals.html" title="festivals">Festivals</a>
<a href="places of interests.html" title="nearby places" class="holder">Nearby Places</a>
<a href="accomodation.html" class="holder" title="accomodation">Accomodation</a>
<a href="gallery.html" title="media">Media</a></div><!--navigation-->
<div id="news"><script type="text/javascript" src="display.js"></script></div><!--news (news scroller)--></div><!--rtside (right side)-->
</div><!--rtside_bg-->
<div id="content_bg">
<div id="maincontent">
<div id="locator"><h3></h3></div>
<div><!--text-->
</div><!--main content-->
</div><!--content_bg-->
</div><!--wrapper-->
</body>
</html>
CSS:
@charset "utf-8";
*{
margin:0px;
padding:0px;
}
body{
background-attachment: fixed;
background-image: url(images/sidebar3.gif);
font-family:Verdana, Geneva, sans-serif;
text-align:left;
}
#wrapper {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 95%;
background-color: #EA7500;
width:791px;
margin-left:auto;
margin-right:auto;
border:#500 5px groove;
border-right: #500 5px ridge;
border-bottom: #500 5px ridge;
}
.rtside {
font-family:Georgia, "Times New Roman", Times, serif;
background-image: url(images/side.JPG);
padding-top:15px;
border-left:thin #E8C604 solid;
width:181px;
float:right;
}
.rtside #nav{
margin-top:20px;
}
.rtside #nav a{
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
display:block;
text-align:right;
padding-right:7px;
text-decoration:none;
color:#B00;
border-bottom:dotted 1px;
line-height:25px;
}
.rtside #nav a:hover{
background:url(images/nav.gif) no-repeat;
background-position:left;
padding-left:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
display:block;
padding-right:7px;
text-align:right;
text-decoration:none;
color:#FF0;
border-bottom:dotted 1px;
line-height:25px;
}
#content_bg{
width:608px;
background-image:url(images/bgcontainer_copy.gif);
background-repeat:repeat-y;
float:right;
}
#maincontent{
width:608px;
float:left;
background:url(images/hang.gif) no-repeat;
background-position: top center;
margin-top:-17px;
}
#maincontent #locator{
font-family:Georgia, "Times New Roman", Times, serif;
color:#9D0000;
font-size:.9em;
font-style:italic;
margin-top:38px;
margin-left:35px;
text-decoration:underline;
letter-spacing:.5em;
}
#maincontent p {
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
color: #000;
text-align:justify;
margin-left: 30px;
padding-top:10px;
width:550px;
}
.leftImg {
float: left;
border: inset thin #620000;
border-right:outset thin #620000;
border-bottom:outset thin #620000;
padding: 2px;
margin:5px 15px 5px 10px;
}
.rightImg {
float: right;
padding:2px;
margin:5px 10px 5px 15px;
border: inset 1px #620000;
border-right:outset 1px #620000;
border-bottom:outset 1px #620000;
}

coloeagle
09-15-2009, 01:36 PM
Try adding overflow:hidden; to your #wrapper

nits4u
09-15-2009, 04:35 PM
yuppy....
first problem is solved.
now can you suggest the soln. for second one
Secondly: as my main content blk's height incs. with the content. is there any way that the height of right side i.e menu side also incs. itself with main content.


thanks a lot....:smile:

coloeagle
09-16-2009, 01:21 AM
Are you talking about where the menu side doesn't increase equally with the content?
If so, then you can accomplish this by using a background image simulating both areas. As one div grows it will give the affect of the other div growing as well.