PDA

View Full Version : Please help me fix this css please?



zoe20
Oct 12th, 2009, 07:31 AM
am making a layout and my maincontnet is collapsing from the layout. plz some one help me fix this please.

Regards
zoe


Here's the Live Demo Of the page:
Live Demo (http://hook4adesign.com/vjs/zoee.htm)

Here's the mark up:


<!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>~~Lorem Ipsum~~</title>
<link href="css/raja.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="topheader">
<div id="logo"><img src="images/logo.png" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="4,6,240,110" href="#" title="ABB" />
</map></div>


<div id="search">
<input name="search" type="text" class="search" />
<input name="search-button" class="search-button" value="Search" src="images/go.png" type="image" />
</div> </div>

<div id="topnav">
<div id="home"><a href="home.htm" title="Lorem Ipsum"></a></div>
<div id="who"><a href="who.htm" title="Lorem Ipsum"></a></div>
<div id="what"><a href="what.htm" title="Lorem Ipsum"></a></div>
<div id="contact"><a href="feedback.htm" title="Lorem Ipsum"></a></div>


</div>



<div id="adv1">
<div id="sidenav">
<ul>
<li><a href="" title="Lorem Ipsum">Lorem Ipsum</a>
</li>
<li><a href="" title="Lorem Ipsum">Lorem Ipsum</a>
<ul>
<li><a href="item1.htm" title="Lorem Ipsum ">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>


</ul>
</li>
<li><a href="" title="Lorem Ipsum">Lorem Ipsum</a>
<ul>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>


</ul></li>
<li><a href="" title="Lorem Ipsum">Lorem Ipsum</a>
<ul>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li></ul>

</li>


<li><a href="" title="Lorem Ipsum">Lorem Ipsum</a>

</li>
<li><a href="" title="Lorem Ipsum">Lorem Imsum</a>
<ul>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Lorem Ipsum">Lorem Ipsum</a>

</li>
</ul>

</li>

<li><a href="" title="Lorem Ipsum">Lorem Ipsum</a>

</li>
</ul>
</div>
<div class="img2"></div>

<div id="sideadv1">
<div class="valuetext">Lorem Ipsum doler sit </div>
<div class="maintext2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>


</div> </div>


<div id="footer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="footertext">Services</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="footertext">Links</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="footertext">Site Map</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="footertext">Work For Us</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="footertext">Contact Us</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="footertext">Terms &amp; Conditions:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Private policy&copy;2009 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;All Rights Reserved.</span></div> </div>

</div>
</body>
</html>

Here's the CSS:



html,body{
background: #B256A1 0px 0px;
margin: 0px;
}
#wrapper{
background: transparent url(../images/bg.png) repeat-y;
width: 971px;
margin: 0px auto;
overflow: auto;
}
#topheader{
height: 133px;
width: 943px;
margin-right: 14px;
margin-left: 14px;
}
#logo{
height: 116px;
width: 245px;
position: relative;
top: 8px;
float: left;
clear: left;
}
#search{
float:right;
padding:0;
margin-top: 50px;
margin-right: 2px;

}
.search{
background:transparent url(../images/search.png) repeat scroll 0;
color:#8a8a8a;
float:left;
height:32px;
margin:0;
padding:0;
width:158px;
font: 10px/30px "Trebuchet MS";
border-style: none;
border-width: 0px;

}
.search-button{
background:transparent url(../images/go.png) no-repeat scroll 0;
float:left;
height:32px;
margin:0;
padding:0;
width:38px;
clear: right;

}
#topnav{
background: transparent url(../images/top_nav.png) no-repeat;
height: 40px;
width: 943px;
margin-right: 14px;
margin-left: 14px;
margin-bottom: 5px;
}
#home{
height: 40px;
width: 159px;
float: left;
margin-left: 20px;
}
#home a {
display: block;
height: 40px;
width: 159px;
background: transparent url(../images/home1.png) no-repeat 0px 0px;
}

#home a:hover{
background: transparent url(../images/home1.png) no-repeat 0px -40px;
}

#who{
height: 40px;
width: 159px;
float: left;
margin-left: 75px;

}
#who a{
display: block;
height: 40px;
width: 159px;
background: transparent url(../images/who1.png) no-repeat 0px 0px;
}

#who a:hover{
background: transparent url(../images/who1.png) no-repeat 0px -40px;
}
#what{
height: 40px;
width: 159px;
float: left;
margin-left: 75px;
}
#what a{
display: block;
height: 40px;
width: 159px;
background: transparent url(../images/what1.png) no-repeat 0px 0px;
}

#what a:hover{
background: transparent url(../images/what1.png) no-repeat 0px -40px;
}
#contact{
height: 40px;
width: 159px;
float: right;
margin-right: 20px;
}
#contact a{
display: block;
height: 40px;
width: 159px;
background: transparent url(../images/contact1.png) no-repeat 0px 0px;
}

#contact a:hover{
background: transparent url(../images/contact1.png) no-repeat 0px -40px;
}
#saying{
background: transparent url(../images/saying_nav.png) no-repeat;
height: 47px;
width: 943px;
margin-right: 14px;
margin-left: 14px;
margin-bottom: 5px;
}
.sayingtext{
font: bold 20px/45px "Trebuchet MS";
color: #6F388C;
text-align: center;
}
.tmtext{
font: 18px "Arial MT";
color: #000000;
}
#adv{
height: 312px;
width: 971px;
margin-bottom: 5px;

}
#adv1{
height: 720px;
width: 971px;
margin-bottom: 5px;

}
#sidenav{
background: transparent url(../images/nav.png) no-repeat;
float: left;
height: 312px;
width: 238px;
margin-left:14px;
}
#sidenav ul{
list-style: none;
padding: 0px;
margin: 25px 0px 0px;

}
#sidenav ul li{
margin: 0px 0px 2px;
padding: 0px;
}
#sidenav ul li a{
background: transparent url(../images/nav_btn.png) no-repeat left top;
font: bold 13px/33px Verdana, Arial, Helvetica, sans-serif;
color: #6f388c;
display: block;
height: 33px;
width: 238px;
padding: 0px;
text-indent: 12px;
text-decoration: none;


}
#sidenav ul li a:hover {
background: transparent url(../images/nav-btn1.png) no-repeat;
color: #B256A1;
}
#sidenav ul li{
position:relative;/* reference point for absolute positioning*/
line-height:0;/*stop IE messing up*/
}

#sidenav ul ul {
display: none;
margin-top: 0px;
position: absolute;
left: 236px;
top: 0px;
background: url(../images/bg1.png) repeat;
width: 238px;
}

#sidenav ul li:hover ul
{
display:block ;
}/* display only on hover*/

#sideadv{
background: transparent url(../images/adv.png) no-repeat;
float: right;
height: 312px;
width: 699px;
margin-right:14px;
}
#sideadv1{
background: transparent url(../images/side_main.png) no-repeat;
float: right;
height: 720px;
width: 699px;
margin-right:14px;
margin-bottom: 2px;
}
#maincontent{
background: url(../images/main.png) no-repeat;
height: 402px;
width: 943px;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
}
.img1{
float: left;
height: 234px;
width: 276px;
margin-top: 10px;
margin-left: 10px;
margin-right: 15px;
}
.img2{
height: 235px;
width: 200px;
margin-left: 15px;
margin-top: 5px;
}
.maintext {
font: 15px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-top: 10px;
margin-right: 11px;
float: right;
text-align: justify;
width: 630px;
}
.maintext2{
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-left: 10px;
text-align: left;
}
.maintext li{
font: 15px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
list-style: url(../images/dot.gif);
}
.maintext1{
font: italic bold 13px "Arial MT";
color: #6F388C;
text-align: justify;
margin-top: 10px;
text-indent: 12px;
}
.adv2{
height: 132px;
width: 276px;
float: left;
clear: left;
margin-top: 15px;
margin-left: 10px;
text-align: center;
position: relative;
overflow: auto;
}
#footer{
background: url(../images/footer.png);
height: 43px;
width: 943px;
margin-right: auto;
margin-left: auto;
clear: both;

}
.footertext{
font: bold 10px/40px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
.footer a:link{
font: 12px/40px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;

}
#footer A:hover
{
text-decoration: underline;
}
.feed{
width: 450px;
padding-left: 65px;
text-align: left;
padding-top: 30px;
font: bold normal 15px/30px Arial, Helvetica, sans-serif;
color: #333333;
border: 1px dotted #660099;
float: left;
margin-left: 50px;
margin-right: auto;
margin-top: 10px;
}
.valuetext{
font: bold 22px "Trebuchet MS";
color: #6F388C;
text-decoration: underline;
margin-top: 7px;
margin-left: 10px;
margin-bottom: 3px;
}

Excavator
Oct 12th, 2009, 08:36 AM
Hello zoe20,
Just for fun, remove that img2 from your markup to see what happens.
Like this:
</li>
<li><a href="" title="Latest News">Lorem Imsum</a>
<ul>
<li><a href="item1.htm" title="Press Releases">Lorem Ipsum</a></li>
<li><a href="item1.htm" title="Governance Articles">Lorem Ipsum</a>

</li>
</ul>

</li>

<li><a href="" title="FAQ's">Lorem Ipsum</a>

</li>
</ul>
</div>
<!--<div class="img2"></div>-->

<div id="sideadv1">
<div class="valuetext">Lorem Ipsum doler sit </div>
<div class="maintext2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesen


You can go back and edit your post to add
so your code will be in a scroll box. Makes your post a LOT easier to read.

zoe20
Oct 12th, 2009, 10:45 AM
Thanks a lot and what i if i want to add a image below the navbar? shall i use<br /> tag and add that div container <div class="img2"></div>

Excavator
Oct 12th, 2009, 03:19 PM
Give img2 a size and float it, you shoul be able to position it how you like.