Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: css 2 columns

  1. #1
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts

    css 2 columns

    I have a page which has 2 columns, inside another div. The 1st div places the content into the center of the page and is 800px wide. The left column is my navigation menu. It is 150px wide. The right column will then be 650px wide. The page has a different color background than that inside the 1st div, however this color isn't being displayed. I tried to set the background color of menu and content divs to the same color yet the page's background color is showing through. I even tried adding another div and enclosing the menu and content div's in there. How can I fix this so that the body has one background color and the frame id has another?

    the html looks like this
    Code:
    <body>
    <div id="frame">
    	<div id="banner"><img src="images/banner2.jpg" alt="banner" width="800" height="175"></div>
    	<div id="menu">
    		 <!--#include file="../Includes/mainmenu.asp"-->
    	</div>	
    	<div id="content">  
                             <!-- content goes here -->
                 </div>
    </div>
    I even tried adding another div like this to the html
    Code:
    <body>
    <div id="frame">
    	<div id="banner"><img src="images/banner2.jpg" alt="banner" width="800" height="175"></div>
    	<div id="inner">
    		<div id="menu">
    			 <!--#include file="../Includes/mainmenu.asp"-->
    		</div>	
    		<div id="content">  
                                         <!-- content goes here -->
                             </div>
                 </div>
    </div>

    My CSS looks like this
    Code:
    BODY {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	background-color: #adadad;
    	text-align: center;
    }
    #frame{
    	background-color: #fff;
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 10px;
    	padding: 0px;
    	text-align:left;
    	border-left: #485991 double;
    	border-right: #485991 double;
    	border-bottom: #485991 double;
    }
    #menu{
    	width:150px;
    	padding:0px;
    	float:left;
    	background:#c0c0c0;
    	text-align:center;
    }
    #content{
    	position: absolute;
    	text-align: center;
    	width:650px;
    	padding:20px;
    	background:#fff;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12pt;
    }
    #banner{
    	background-color: #adadad;
    	border-top: #485991 double;
    	border-top: #485991 double;
    }
    #inner{
    	background-color: #fff;
    }

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    You don't have css in this file, do you?
    Because CSS is evaluated in the order in which is appears.
    <!--#include file="../Includes/mainmenu.asp"-->

    If that file has CSS it will override the CSS posted here.
    Also, if that page has an html head, body, and such, it will muck everything up. It isn't a full page, is it?

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts
    no, there is no style sheet in the include file, nor is there <html><head>or <body> tags

    here is the include file
    Code:
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="achiever/workshop.asp">Achiever Online Workshop</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="achiever/test.asp">Achiever Certification Test</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="achiever/conferences.asp">Scheduled Achiever Conferences</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="classroom.asp">Scheduled Classroom Training</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="portfolio.asp">CRI's Portfolio of Assessment Tools</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="besthire/">BestHire</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="benchmark.asp">Benchmarking Your Top Performers</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="hrtools.asp">The CRI HR Toolbox</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="ecort.asp">Employment Center Online Recruiting Technology</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="screenfast.asp">ScreenFast Set Up</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="advisor.asp">Career Advisor</a></span><br>
    <span class="menuitem" onMouseOver="this.className=('activeitem')" onMouseOut="this.className=('menuitem')"><a class="menu" href="hottopics.asp">Hot Topics</a></span><br>

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    miranda

    I couldn't find a problem with your code you posted.

    I changed the background color of the frame div to a vivid red and switched off the colors for the other divs in turn and it appeared just fine. Obviously as the code you've posted is written it isn't visible because it is always masked by another div.

    I read and reread your post and I think I may have misunderstood what you are after.

  • #5
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts
    If you look at the picture shown you will see the bottom of the page. The frames div is surrounded by the double border the content div has a white background and even though I set the background to white in the frames div the light blue is showing through. The content div can contain anywhere from a few lines of text to a page full of text. so the height of this div could be larger or smaller than the height of the menu div.
    Attached Thumbnails Attached Thumbnails css 2 columns-css.jpg  

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Can you post a link to the page (or a full screenshot)? I tried your code in FF and got quite a mess...

  • #7
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts
    sheesh in NN and FF it is really a mess. As if it wasn't bad enough in IE. Anyway this is a redesign, i am still playing with differnet banners etc, but the site is located here

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    yowsers...

    Well, I saw it for a sec but then it went 404 so I didn't really get to look at the code. But I took a screenshot and made a quick (mostly) cross-browser layout example for you:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<title>example</title>
    		<style type="text/css">
    
    			*	{
    				margin: 0;
    				padding: 0;
    			}
    
    			body	{
    				font: 1em/1.2em arial, verdana, sans-serif;
    				color: #000;
    				background: #bee7fb;
    				padding: 1em 0;
    			}
    			
    			#wrapper	{
    				width: 800px;
    				margin: 0 auto;
    				background: #fff;
    				border: #000 double 3px;
    			}
    
    			#branding	{
    				border-bottom: solid 1px #000;
    			}
    
    			#branding p	{
    				display: none;
    			}
    
    			#branding h1	{
    				width: 800px;
    				height: 145px;
    				text-indent: -9999px;
    				overflow: hidden;
    				background: url(images/crilogo.gif) no-repeat top left;
    			}
    
    			#content	{
    				float: right;
    				width: 600px;
    				padding: 0 15px 15px 15px;
    			}
    			
    			#nav	{
    				float: left;
    				width: 170px;
    			}
    
    			#nav h3	{
    				display: none;
    			}
    
    			#nav li	{
    				list-style: none;
    				width: 149px;
    				background: #ccc;
    				font: bold .9em arial, verdana, sans-serif;
    				text-align: center;
    				margin-top: -1px;
    				border: solid #000;
    				border-width: 1px 1px 1px 0;
    			}
    
    			#nav li a	{
    				display: block;
    				padding: 10px;
    			}
    
    			* html #nav li a	{ height: 1%; }  /* quick Internet Explorer hack */
    
    			p	{
    				margin: 1em 0;
    			}
    
    			p.moreinfo a	{
    				display: block;
    				text-decoration: none;
    				width: 400px;
    				border: solid 2px #000;
    				margin: 1em auto;
    				text-align: center;
    				padding: 15px;
    			}
    
    			#nav a:link		{ color: #000; text-decoration: none; }
    			#nav a:visited	{ color: #000; text-decoration: none; }
    			#nav a:hover	{ color: #000; text-decoration: none; background: #eee; }
    			#nav a:active	{ color: #000; text-decoration: none; }
    
    			
    		</style>
    	</head>
    <body>
    
    <div id="wrapper">
    	<div id="branding">
    		<h1>CRI University</h1>
    		<p>A Training and Resources Center for the Best Practices HR Solutions</p>
    		<p>powered by Candidate Resources, inc.</p>
    		<p><a href="#nav">skip to navigation</a></p>
    	</div>
    
    	<div id="content">
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Nullam tincidunt, quam et imperdiet faucibus, ligula odio varius risus, ac fermentum velit ante ut libero. Donec consequat nulla sit amet lectus. Maecenas a pede a arcu pretium malesuada. Sed iaculis dapibus lorem. Aliquam arcu dolor, nonummy et, consectetuer id, consectetuer et, enim. Duis blandit suscipit est. Aenean dolor. Sed nibh pede, convallis id, pharetra vitae, fringilla vel, erat. Praesent posuere commodo diam. In purus. Pellentesque neque est, iaculis a, posuere egestas, fringilla at, justo. Quisque eu purus ac urna rutrum rhoncus.</p>
    		<p>Quisque laoreet imperdiet felis. Morbi venenatis, purus quis eleifend sagittis, nulla augue.</p>
    		<p class="moreinfo"><a href="#">click here for resource information</a></p>
    	</div>
    
    	<div id="nav">
    		<h3>Navigation</h3>
    		<ul>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>
    			<li><a href="#">link</a></li>			
    		</ul>
    	</div>
    
    	<div style="clear: both">
    		<!-- clears the floats... admittedly I would normally use some tricky CSS to avoid the extra empty div -->
    	</div>
    
    </div>
    
    </body>
    </html>
    This uses floats to position the content and navigation (the navigation comes last because I'm trying to stay as semantic as possible). The "margin-top: -1px" bit is a quick way to get the border look, but really you'd end up replacing all of this anyhow wth your own border styles.

    It's usually always best to use the most standards-compliant browsers out there to develop your sites (I prefer FF) and then go back and add tweaks and hacks for the not-so-compliant browsers (read IE).

    Hopefully this gives you an idea of how to approach this layout...keep in mind, too, there's always more than one way to skin a cat but this is one of my favorite methods for the two column thing.


  •  

    Posting Permissions

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