www.webdeveloper.com
Results 1 to 3 of 3

Thread: Small bit of CSS help please

  1. #1
    Join Date
    Oct 2008
    Posts
    16

    Small bit of CSS help please

    Hello, could somebody have a quick look at my css code for me please, and help me with this problem. What i am trying to do, is have my content box (content area) the same height as my menu. At the moment the content area expands when you put text or data in, I would like it to be a set size, matching up with the bottom of my menu.

    The header and the contentarea boxes also stretch and shrink to fit the page, depeding on the screen size. That is fine, but i would like it to be a set size for height.

    Hope i am explaining this correctly. Here is a screen shot of my page, note the small contentarea box, as it has no data in..... need it to match up with my menu. CSS attached also. Thanks

    http://img399.imageshack.us/my.php?image=webpageiu5.jpg


    Code:
    /***** General ************************************************************************/
    a:link {
    	color: #000000;
    }
    
    a:visited {
    	color: #000000;
    }
    
    a:hover {
      text-decoration: none;
    }
    
    a.pagelink:visited {
      color: #CCFFFF;
    }
    
    body {
      background-color:#CCCCCC
      font-family:Arial, Helvetica, sans-serif;
      margin: 0 0;
      padding: 18px 28px;
    }
    
    p {
      text-align: justify;
      margin: 0 0;
    }
    
    p.noheight {
      line-height: 1.12em;
    }
    
    p.return {
      text-align: right;
    }
    
    span.uline {
      text-decoration: underline;
    }
    
    ul {
      text-align: justify;
    }
    
    /* Note: Compensates for IE acronym dotted underline bug */
    acronym {
      border-bottom: 1px dotted #000000;
      cursor: help;
    }
    
    div#top {
      position: absolute;
      top: 0;
    }
    
    /***** Header *************************************************************************/
    div#header {
    	background-color:#FFFFFF;
    	border: 3px solid #000000;
    	padding: 5px 10px 10px 0;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	width: auto;
    }
    
    /* Note: Optional Ad Banner Area (remove if not using banner image at all) */
    div#header img{
      border: 0px solid #000000;
      float: right;
      margin: 5px 0 0 10px;
      /*width: 468px;
      height: 60px;*/
    }
    
    div#header h1 {
    	color: #0072BC;
    	cursor: default;
    	font-size: 40px;
    	margin: 5px 0 0 5px;
    	width: auto;
    	font-family: Arial, Helvetica, sans-serif;
      /*width: 365px;*/
    }
    
    div#header h2 {
    	color: #414141;
    	cursor: default;
    	font-size: 25px;
    	margin: 5px 0 0 5px;
    	/*width: 365px;*/
      width: auto;
    	font-family: Arial, Helvetica, sans-serif;
    }
    div#header h3 {
    	color: #414141;
    	cursor: default;
    	font-size: 15px;
    	margin: 5px 0 0 5px;
    	/*width: 365px;*/
      width: auto;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    apDiv1 {
    	color: #0072BC;
    	cursor: default;
    	font-size: 40px;
    	margin: 5px 0 0 5px;
    	width: auto;
    	right:auto;
    }
    
    /***** Side Bar (general) *************************************************************/
    .topgap {
    	margin-top: 10px;
    	border-top-width: 3px;
    	border-right-width: 3px;
    	border-bottom-width: 3px;
    	border-left-width: 3px;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    	text-decoration:none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000000;
    }
    
    .btmgap {
    	margin-top: 2px;
    	border-top-width: 3px;
    	border-right-width: 3px;
    	border-bottom-width: 3px;
    	border-left-width: 3px;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    	text-decoration:none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000000;
    	
    }
    
    div.separator {
      margin-top: 6px;
    }
    
    /***** Left Side Bar ******************************************************************/
    div#lsidebar {
    	font-family:Arial, Helvetica, sans-serif;
    	float: left;
    	width: 185px;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    	border-top-width: 3px;
    	border-right-width: 3px;
    	border-bottom-width: 3px;
    	border-left-width: 3px;
    }
    
    div#lsidebar p {
      text-align: left;
    }
    
    /***** Nav Menu (position at top of either side bar) **********************************/
    div.nmenu {
    	font-size: 13px;
    	font-weight: bold;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    	border-top-width: 3px;
    	border-right-width: 3px;
    	border-bottom-width: 3px;
    	border-left-width: 3px;
    }
    
    div.nmenu span {
    	background-color:#000000;
    	border: 3px solid #000000;
    	color: #FFFFFF;
    	cursor: default;
    	display:block;
    	text-decoration: none;
    	padding: 6px 16px;
    	width:auto;
    }
    
    div.nmenu a {
    	background-color: #FFFFFF;
    	border: 3px solid #000000;
    	display: block;
    	padding: 3px 10px;
    	width: auto;
    }
    
    div.nmenu a:visited {
      color: #00478D;
    }
    
    div.nmenu a:hover {
      background-color: #0072BC;
      border-color: #000000;
      color: #FFFFFF;
    }
    
    /***** Side Info (position at bottom of left side bar or anywhere on right side bar) **/
    div.sidenews {
      background-color: #c0c0c0;
      border: 1px solid #00478D;
      font-size: 13px;
      padding: 3px 10px;
      width: auto;
    }
    div.sideinfo {
      background-color: #FFFFFF;
      border: 1px solid #00478D;
      font-size: 13px;
      padding: 3px 10px;
      width: auto;
    }
    
    
    /***** Content Area *******************************************************************/
    div#contentarea {
      padding-left: 195px;
      padding-right: 0px;
      padding-bottom: 700px;
    }
    
    div.title {
      background-color: #FFFFFF;
      border: 1px solid #00478D;
      color: #00478D;
      font-family: sans-serif, "Times New Roman", Times, sans-serif;
      font-size: 13px;
      font-weight: bold;
      padding: 3px 10px;
      margin-top: 10px;
     
    }
    
    div.content {
    	margin-top: 10px;
    	background-color: #FFFFFF;
    	padding: 6px 10px;
    	border: 3px solid #000000;
      
    }
    div.img {
      border: 0px solid #000000;
      vertical-align: middle;
      margin: 5px 0 0 10px;
      width: 468px;
      height: 60px;
    }
    img.displayed {
        display: block;
        margin-right: 0px;
        padding:10px
    }
    #footer {
    	position:absolute;
    	background-color: #FFFFFF;
    	padding-left: 150px;
    	padding-right: 0px;
    	border: 3px solid #000000;
    	z-index:1;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    Why don't you just set a height for div#contentarea?

  3. #3
    Join Date
    Oct 2008
    Posts
    16
    Yep, got it ... I set the height in div.content.

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles