Solved

problem in css

Posted on 2011-03-15
1
173 Views
Last Modified: 2012-05-11
hi
           i have a problem in css.

in the following code apart from header and footer

i need 4 divisions in the mid part

menu (already done - left)
dynamically loaded content(already done-middle)
right side 2 division tags each  of the height half of the dynamically loaded content.(WHICH IS WHERE MY PROBLEM IS)



Html part:

<!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>Untitled Document</title>


<link href="../ss.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript" src="user.js">

</script>



</head>

<body >
<div id="bod">

<div id="header2">
<div class="logo">
  <img src="../images/logo.jpg" width="209" height="242" alt="logo" id="img1"/></div>
  <div class="topmid">
  <h1 align="center">Blazing Cops</h1>
  <h4 align="center">Helping People Every Millisecond...</h4>
 
  </div>
<div id="topright">
</div>
</div>



<div class="Menu">
  <div class="importantlinks">
    <h3 align="center">Navigation</h3>
  </div>
  <ul class="subnav">
    <li> <a href="#">Home</a><br/>
      <br/>
      <a href="#">RTI act</a><br/>
      <br/>
      <a href="#">Recruitment</a><br/>
      <br/>
      <a href="#">Complaint Registration</a><br/>
      <br/>
      <a href="#">Feedback</a> <br/>
      <br/>
      <a href="#">Suggestions</a><br/>
      <br/>
      <a href="#">News And Events</a><br/>
      <br/>
      <a href="#">About us</a><br/>
      <br/>
      <a href="#">Contact us</a><br/>
    </li>
  </ul>
</div>
<div class="content-to-replace"></div>
<div id="midright"></div>
<div id="footer">
  <p align="center">Site designed by <a href="http://www.ajitah.com">Blazing Cops Team</a> <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">&nbsp;&nbsp;&nbsp;XHTML</abbr>  </a>| <a  href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a>  </p>

</div>
</div>


</body>
</html>









CSS part:

@charset "utf-8";
/* CSS Document */

#bod
{
      
      border:dashed;
      width:100%;
      clear:both;
}


#img1
{
      height:165px;
      width:160px;
}

.topmid
{
      position:relative;
      float:none;
      height:153px;
      width:670px;
      padding-top:10px;




}


 .logo
{
      

      background-repeat:repeat-x;
      float:left;
      width:160px;
      height:158px;
      background-position:center;
      
}

.message
{
      padding-left:10px;
      width:510px;
      height:120px;
      font-size:14px;

      
}


.Menu
{
      position:relative;
      float:left;
      width:17%;
      height:58%;
      border-color:#F00;
      background-color:#FFF;
      border:groove;
      top:2%;
      overflow:auto;

      
}

.subnav {
      margin: 0px;
      padding: 10px 10px;
      padding-top:30px;
      list-style-type: none;
      
      
}
.subnav li {
      display: block;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-bottom-color: #D8D3B9;
      padding-left:10px;
}

#footer {
      
      width:100%;
      background-repeat: repeat-x;
      background-color: #ffffff;

      padding-right: 25px;
      
      border:groove;
      background-color:#FFF;
      clear:both;
      min-height:50px;


      

}
      
      

#topright
{
      position:absolute;
      background-image: url(images/topright.jpg);
      background-position:center;
      width:267px;
      right:4px;
      clear:both;
      height:163px;
      top:4px;

}

#header2{
      position:relative;
      
      background-image:repeat-x;
      height:25%;
      background-color:#DDDD44;

width:100%;
      border:groove;
      clear:both;
}      


.importantlinks
{
      background-color:#F00;
      color:#FFF;
      width:auto;
}

#img2
{
      position:relative;
      top:10px;
      left:250px;
      width:180px;
}


#img3
{
      position:absolute;
      top:70px;
      left:20px;
}


.content-to-replace
{

       min-height:110%;
      width:58%;
        margin-left: 22.1%;
        /*change this also*/
        border: 1px solid #000000;
      
      position: relative;
      display:inline-table;
      
      

}

#midright{
      width: 23%;
      margin-left: 80.2%;
      height:39%;      
      border: 1px solid #000000;
      position:relative;


      clear:both;
      
}










Pls help
thanks in advance!
0
Comment
Question by:manikandan689
1 Comment
 
LVL 4

Accepted Solution

by:
dwkd earned 500 total points
ID: 35139612
4 with the menu or 4 extra?
i recommend you put the menu inside a container and add 3 more mid contet divs .. and float all 4 left or display as inline:block or display as table-cells or however you wanna do it
if u float left remember to clear:left  :)
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question