...

View Full Version : css 2 columns



miranda
08-15-2005, 08:42 PM
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

<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

<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

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;
}

nikkiH
08-15-2005, 09:47 PM
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?

miranda
08-15-2005, 09:55 PM
no, there is no style sheet in the include file, nor is there <html><head>or <body> tags

here is the include file

<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>

doozer
08-15-2005, 10:52 PM
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. :confused:

miranda
08-16-2005, 01:32 AM
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.

rmedek
08-16-2005, 01:55 AM
Can you post a link to the page (or a full screenshot)? I tried your code in FF and got quite a mess...

miranda
08-16-2005, 02:29 AM
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 (http://www.criuniversity.com/newdefault2.asp)

rmedek
08-16-2005, 10:52 AM
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:



<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum