SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to Get a 3 Col Layout

    I'm trying to get a 3 col layout to work with an existing site i've been given.

    I have to keep the header and footer but the content in the middle i can change. I've decided to use a 3 col layout but am struggling to get it to work with the exisiting layout. Link is below. Can anyone help or give em some sound advice?

    Cheers

    http://www.jmiearthing.com/test/index2.html

    HTML Code:
    <!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>
        <title>Home : FRANKs</title>
        <link href="css/base.css" rel="stylesheet" type="text/css" />
        <link href="css/front.css" rel="stylesheet" type="text/css" />
        <link href="css/bob.css" rel="stylesheet" type="text/css"/>
        <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
        <script src="js/script.alicio.us/lib/prototype.js" type="text/javascript"></script>
        <script src="js/script.alicio.us/src/scriptaculous.js" type="text/javascript"></script>
        <script src="js/common.js" type="text/javascript"></script>
        <script src="js/imagerotator.js" type="text/javascript"></script>
        <script src="js/fader.js" type="text/javascript"></script>
    
       
    </head>
    <body class="bob">
        <div class="outsideContainer">
            <!--top centred section with Quicklaunch, main nav and advert -->
            <div class="centredInnerContainer">
                <!--Main Logo and Navigation Bar -->
                <div id="logoLeftBar">
                    <a href="/">
                        <img src="images.gif" width="115" height="76"  /></a>
                    <div id="logoLeftBarLinkContainer">
                        <ul>
                            <li id="nav-aboutFRANKs" class=""><a href="aboutFRANKs_508.html" accesskey="1" title="Information about FRANKs (Accesss Key: 1)">About FRANKs<span></span></a></li>
                            <li id="nav-ourdivisions" class=""><a href="ourdivisions_509.html" accesskey="2" title="Our Divisions (Access Key: 2)">Our Divisions<span></span></a></li>
                            <li id="nav-csr" class=""><a href="corporatesocialresponsibility_520.html" accesskey="3" title="CSR (Access Key:3)">CSR<span></span></a></li>
                            <li id="nav-newsroom" class=""><a href="newsroom_525.html" accesskey="4" title="Newsroom (Access Key:4)">Newsroom<span></span></a></li>
                            <li id="nav-careers" class=""><a href="careers_528.html" accesskey="5" title="Careers (Access Key:5)">Careers<span></span></a></li>
                            <li id="nav-contactus" class=""><a href="whereweare_533.html" accesskey="6" title="Contact Us (Access Key:6)">Contact Us<span></span></a></li>
                        </ul>
                    </div>
                </div>
                <!-- End of Main Logo and Navigation Bar -->
                <!--Quick Launch bar -->
                <div id="quickLaunchContainer">
                    <div id="quickLaunchHeading">
                        Quick Launch</div>
                    <form method="get" name="quicklinks">
                        <select id="selectDivision" onchange="return selectRedirect(this);">
                           </select> 
                        <input type="image" alt="Go" src="images/go-button.gif" id="companyButton" onclick="return selectRedirect($('selectCompany'), false);" width="20" height="20" />
                    </form>
                </div>
                <!--End of Quick Launch Bar -->
                <!-- Large Banner Image -->
                <div id="bannerImage">
                    <img src="images/home-05.jpg" alt="" name="ri" width="535" height="145" />            </div>
                <!-- End of Large Banner Image -->
            </div>
            <!-- end of top section -->
            <!-- middle info nav bar -->
            <div class="centreMenuBackground">
            </div>
            <!-- end of info nav bar -->
            <!-- main content section with info nav bar at the top -->
            <div class="mainContainer">
                <!--page centred menu bar items -->
                <div class="salesHotline"><a href="#">Contact Our Sales Team on **** ******</a></div>
          </div>
    </div>
            <div class="mainContainer">
              <!--page content goes here -->
    		  
    		  <div id="leftCol">
    		  	
    			<div class="navigation">
    			
    				<div class="navigationHeader"><img src="images/menu-top.jpg" width="181" height="86" /></div>
    				
    				<div class="navigationItem"><a href="#"> Home</a></div> 
    				
    				<div class="navigationSectionOver">
    					<div class="navigationSectionOverItem"><a href="#">653656</a></div>
    					<div class="navigationSectionOverItem"><a href="#">5656356</a></div>
    					<div class="navigationSectionOverItem"><a href="#">563656</a></div>
    					<div class="navigationSectionOverItem"><a href="#">6356</a></div>
    				</div>
    				
    				<div class="navigationItem"><a href="#">543656</a></div> 
    				<div class="navigationItem"><a href="#">563656</a></div> 
    				<div class="navigationItem"><a href="#">654646</a></div> 
    				<div class="navigationItem"><a href="#">ghdhdfh</a></div> 
    				<div class="navigationItemBottom"><a href="#">Contact Us</a></div> 
    			</div>
    		  </div>
    
    </div>
    		  
    		  
    		  <div id="centerCol">
    		  
    		  	<div class="breadcrumbs">
    				<a href="#" class="breadcrumbsItem">Home</a> &gt; <a href="#" class="breadcrumbsItemOver">fsdfd</a>			</div>
    			
    			<div id="centerContent">
    			
    				<p class="mainTitle">fdfdfdfdfsdfdf</p>
    				
    				<p class="subHeadingRed">fdsfsdfsdf</p>
    				
    				<p class="subHeadingBold">fdfsdfsdf</p>
    			</div>
    		  </div>
    		  
    		  <div id="rightCol">
    		  
    		  <div class="salesBox"><img src="images/sales-box.jpg" width="206" height="140" /></div>
    		  <div class="salesBox"><img src="images/sales-box.jpg" width="206" height="140" /></div>
    		  </div>
    	  
            </div>
        </div>
        <div class="outsideContainer">
            <!-- end of main content section -->
            <!-- bottom copper bar acrross page -->
            <div id="bottomBackgroundBar">
                &nbsp;
            </div>
            <!-- end of bottom copper bar -->
            <!-- bottom links and legal -->
            <div class="centredInnerContainer">
                <div id="bottomLinks">
                    <a href="/" title="FRANKs Home (Access Key: 4)" accesskey="4"> Home</a> |  <a href="whereweare_533.html" title="Contact Info (Access Key: 5)" accesskey="5">Contact Info</a> |  <a href="newsroom_525.html" title="News (Access Key: 6)" accesskey="6">News</a> |            </div>
                <div id="bottomDisclaimer">
                    FRANKs Group, Registered Office:  K<br />
                    &copy; Copyright 2005 All rights reserved.
                </div>
            </div>
            <!-- end of bottom links and legal -->
        </div>
        <script language="javascript">
        createImageRotator();
        $('ps1').style.display = 'none';
        $('ps2').style.display = 'none';
        $('ps3').style.display = 'none';
        $('ps4').style.display = 'none';
        $('ps5').style.display = 'none';
        </script>
    </body>
    </html>
    base.css - Exsiting CSS
    Code:
    /***************************************************************/
    /* global structure items */
    body
    {
    	font-family: Sans-Serif;
    	margin: 0px;
    	font-size: smaller;
    	padding-bottom: 20px;
    }
    
    form
    {
    	display: inline;
    	margin: 0;
    	padding: 0;	
    }
    
    a
    {
    	text-decoration: none;
    }
    
    #content a
    {
    	text-decoration: underline;
    }
    
    a:link
    {
    	color: #666666;
    }
    
    a:visited
    {
    	color: #666666;
    }
    
    a:hover
    {
    	color: #ed1a3b;
    }
    
    .outsideContainer
    {
    	width: 100%;
    	margin-bottom: 20px;
    }
    
    .centredInnerContainer
    {
    	margin: 0 auto;
    	width: 720px;
    	clear: both;
    }
    
    .float-right
    {
    	float: right;
    	z-index: 100;
    	position: relative;
    	padding: 1em 0 6px 6px;
    }
    
    .rh-content
    {
    	width: 230px;
    	float: right;
    	position: relative;
    }
    
    .rh-content img
    {
    	float: right;	
    }
    
    .lh-content
    {
    	margin-right: 240px;
    	position: relative;
    }
    
    .clear
    {
    	clear: both;
    }
    
    P
    {
    	line-height: 1.4em;
    }
    
    H1
    {
    	font-size: 1.8em;
    	margin-top: 0px;
    	margin-bottom: 0.2em;
    }
    
    H2
    {
    	font-size: 1.4em;
    	margin-top: 0px;
    	margin-bottom: 0.2em;
    }
    
    .optgroup
    {
    	color: #666;
    }
    
    
    /***************************************************************/
    /* Logo and master menu system */
    #logoLeftBar
    {
    	background-image: url(../images/linpac-logo-background.png);
    	background-repeat: no-repeat;
    	margin-left: -40px;
    	width: 227px;
    	min-height: 262px;
    	float: left;
    	position: absolute;
    	top: 0px;
    }
    
    #logoLeftBarLinkContainer
    {
    	margin-top: 30px;
    	padding-right: 5px;
    	margin-left: 50px;
    }
    
    #linpac-logo
    {
    	border: 0;
    	padding-left: 55px;
    	padding-top: 14px;
    }
    
    #logoLeftBarLinkContainer ul,
    #logoLeftBarLinkContainer li
    {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;	
    	display: block;
    }
    
    #logoLeftBarLinkContainer a
    {
    	position: relative;
    	display: block;
    	width: 124px;
    	padding-top: 22px;
    	overflow: hidden;
    	height: 0;
    }
    
    #logoLeftBarLinkContainer a span
    {
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 22px;
    	width: 124px;
    	background-position: left top;
    	background-repeat: no-repeat;
    	cursor: hand;
    }
    
    #logoLeftBarLinkContainer #nav-aboutlinpac a span { background-image: url(../images/nav-about.gif); }
    #logoLeftBarLinkContainer #nav-ourdivisions a span { background-image: url(../images/nav-ourdivisions.gif); }
    #logoLeftBarLinkContainer #nav-csr a span { background-image: url(../images/nav-csr.gif); }
    #logoLeftBarLinkContainer #nav-newsroom a span { background-image: url(../images/nav-newsroom.gif); }
    #logoLeftBarLinkContainer #nav-careers a span { background-image: url(../images/nav-careers.gif); }
    #logoLeftBarLinkContainer #nav-contactus a span { background-image: url(../images/nav-contact.gif); }
    
    #logoLeftBarLinkContainer a:hover span,
    #logoLeftBarLinkContainer .selected span
    {
    	background-position: left -23px !important;	
    }
    
    /***************************************************************/
    /* Quick Launch bar */
    
    #quickLaunchContainer
    {
    	margin-top: 15px;
    	float: right;
    	background-color: #f2f2f2;
    	padding: 10px;
    	visibility: hidden;
    	width: 514px;
    	position: relative;
    	right: -10px;
    }
    
    #quickLaunchHeading
    {
    	font-size: 1em;
    	font-weight: bold;
    	color: #333333;
    	margin-bottom: 4px;
    	height: 0;
    	overflow: hidden;
    	padding-top: 11px;
    	background-image: url(../images/quicklaunch.gif);
    	background-position: top left;
    	background-repeat: no-repeat;
    }
    
    #quickLaunchContainer input
    {
    	padding-right: 30px;
    	position: relative;
    	top: 4px;	
    }
    
    /***************************************************************/
    /* Right Hand Banner Image */
    #bannerImage
    {
    	float: right;
    	margin-right: -10px;
    	padding-top: 20px;
    	height: 166px;
    	position: relative;
    	z-index: 10;
    }
    
    /***************************************************************/
    
    
    
    
    
    
    /***************************************************************/
    /* classes for the central horizontal copper bar items */
    
    .centreMenuBackground
    {
    	background-image: url(../images/middle-background-menubar.png);
    	background-repeat: repeat-x;
    	height: 45px;
    	width: 100%;
    	top: 270px;
    	clear: both;
    	z-index: -1;
    }
    
    .centreMenuItemsContainer
    {
    	margin-top: -29px;
    	z-index: 10;
    	height: 20px;
    	z-index: 1;
    	position: relative;
    	text-transform: uppercase;
    }
    
    .centreMenuItem a
    {
    	color: #666666;
    	padding-bottom: 5px;
    	background-image: url(../images/arrow-grey.gif);
    	background-repeat: no-repeat;
    	background-position: 9px 0.15em;
    	padding-left: 25px;
    	padding-right: 5px;
    	padding-top: 1px;
    	margin-bottom: 10px;
    	float: left;
    	padding-right: 1.8em;
    	display: block;
    	font-size: 90%;
    	font-weight: bold;
    }
    
    .centreMenuItemsContainer .selected a,
    .centreMenuItemsContainer a:hover
    {
    	background-image: url(../images/arrow-red.gif);
    	color: #cc0000;
    }
    
    /***************************************************************/
    /* Footer section of links and legal */
    #bottomBackgroundBar
    {
    	background-image: url(../images/bottom-background-bar.png);
    	background-repeat: repeat-x;
    	padding-bottom: 10px;
    	height: 16px;
    	clear: both;
    	margin-top: -10px;
    }
    
    #bottomLinks
    {
    	padding-top: 10px;
    	padding-bottom: 10px;
    	border-bottom: dotted 1px #8c8888;
    }
    
    #bottomDisclaimer
    {
    	padding-top: 10px;
    	color: #8c8888;
    	font-size: 0.9em;
    }
    /***************************************************************/
    
    
    
    /***************************************************************/
    /* Classes for content pages */
    
    #backgroundContainer
    {
    	background-image: url(../images/bg_tile.gif);
    	background-repeat: repeat-y;
    	clear: both;
    	padding-top: 0px;
    	padding-bottom: 2em;
    	margin-top: 5px;
    	position: relative;
    	min-height: 45em;
    }
    
    #content
    {
    	margin-top: 2.0em;
    	vertical-align: top;
    	padding-left: 10px;
    	background-color: #ffffff;
    	margin-left: 2em;
    	margin-bottom: 0em;
    	padding-bottom: 2em;
    	position: relative;
    	z-index: 2;
    	margin-left: 180px;
    }
    
    #content.full-width
    {
    	margin-left: -15px;
    	padding-left: 0;
    	background-color: #fff;
    }
    
    * html #content.full-width
    {
    	margin-left: 0;
    }
    
    #content ul
    {
    	margin-left: 1em;
    	padding-left: 0;
    	line-height: 1.4em;
    }
    
    #content dl
    {
    	line-height: 1.4em;
    }
    
    #content dt
    {
    	clear: left;
    	font-weight: bold;
    	display: block;
    	width: 41px;
    	position: relative;
    	top: 1.4em;
    	padding: 0;
    	margin: 0;
    }
    
    #content dd
    {
    	display: block;
    	clear: right;
    	float: right;
    	margin: 0 0 0 40px;
    	width: 480px;
    	padding: 0 0 0 20px;
    	background-image: url(../images/ndash.gif);
    	background-position: 4px 0.7em;
    	background-repeat: no-repeat;
    }
    
    * html #content dd
    {
    	float: none;	
    }
    
    .contentRightFloatingImage
    {
    	float: right;
    	z-index: 100;
    	position: relative;
    }
    
    /***************************************************************/
    
    
    /***************************************************************/
    /* classes for left hand side panel */
    .sideBarContainer
    {
    	width: 175px;
    	float: left;
    	margin-top: 2.0em;
    	padding-right: 20px;
    	margin-left: -18px;
    	position: relative;
    	z-index: 100;
    }
    
    .sideBarContainer h3
    {
    	color: #68c210;
    	font-size: 1.3em;
    	margin: 0 0 0.3em 28px;
    }
    
    .sideBarContent
    {
    	border-top: dotted 1px #8c8888;
    	border-bottom: dotted 1px #8c8888;
    	background-color: #ffffff;
    	margin-top: 0px;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	background-color: #ffffff;
    }
    
    .sideBarContainer ul
    {
    	margin: 0.5em 1em 0.5em 46px;
    	padding: 0;
    }
    
    .sideBarContainer li
    {
    	margin: 0;
    	padding: 0;
    }
    
    .sideBarQuote
    {
    	background-color: #ffffff;
    	padding: 33px 0 0 0;
    	background-image: url(../images/quote-start.gif);
    	background-position: left top;
    	background-repeat: no-repeat;
    	float: left;
    	clear: both;
    }
    
    .sideBarQuote blockquote
    {
    	margin: 0;
    	padding: 0 0 33px 0;
    	background-image: url(../images/quote-end.gif);
    	background-position: right bottom;
    	background-repeat: no-repeat;
    	float: left;
    	clear: both;
    }
    
    .sideBarQuote p
    {
    	border-top: dotted 1px #8c8888;
    	border-bottom: dotted 1px #8c8888;
    	background-color: #ffffff;
    	padding: 5px 0 5px 0;
    	margin: 0;
    	float: left;
    	clear: both;
    	margin-bottom: 0.5em;
    }
    
    /* Image Library classes */
    
    #imageLibraryTransparrentContainer
    {
    	margin-top: 2.0em;
    	vertical-align: top;
    	background-color: #ffffff;
    	padding-left: 0px;
    	margin-left: 2em;
    	margin-bottom: 0em;
    	padding-bottom: 2em;
    	position: absolute;
    	left: 150px;
    }
    
    .imageLibraryTableContainer
    {
    	border: 0px;
    	padding: 5px;
    	position: static;
    }
    
    .imageLibraryImage
    {
    	margin-left: -5px;
    }
    
    .imageLibraryDownloadLink
    {
    	font-weight: bold;
    	color: #666666;
    }
    
    .imageLibraryDownloadDetail
    {
    }
    /***************************************************************/
    
    
    /***************************************************************/
    /* Where we are map classes */
    .worldMapImageContainer
    {
    	float: right;
    }
    
    .worldMapLocationTable
    {
    	position: relative;
    	width: 80%;
    	clear: both;
    	overflow: visible;
    }
    
    .worldMapLocationTable TD
    {
    	padding: 20px;
    	margin: 20px;
    }
    /***************************************************************/
    
    
    
    /***************************************************************/
    /* Press release classes */
    .pressReleaseSummaryDate
    {
    	float: left;
    	font-weight: bold;
    }
    
    .pressReleaseSummary
    {
    	margin-left: 6em;
    	margin-bottom:0.5em;
    }
    
    
    /***************************************************************/
    
    
    
    /***************************************************************/
    /* History  classes */
    .historyDate
    {
    	float: left;
    	font-weight: bold;
    }
    
    .historyItem
    {
    	margin-left: 4em;
    	margin-bottom:0.5em;
    
    	text-indent:-1em;
    	
    }
    
    
    /***************************************************************/
    
    #people-container,
    #gallery-container,
    #news-container
    {
    	margin-top: 20px;
    }
    
    #gallery-container
    {
    	float: left;
    	background-color: #fff;
    }
    
    #people-container h3,
    #gallery-container h3
    {
    	margin: 0;
    	padding: 0;
    	font-size: 110%;
    }
    
    #people-container h4
    {
    	margin: 0;
    	padding: 0;
    	font-size: 100%;
    	color: #999;
    }
    
    #people-container p,
    #gallery-container p
    {
    	margin: 0.5em 0 0.5em 0;
    }
    
    #news-container p
    {
    	margin: 0 0 1em 0;
    }
    
    .person
    {
    	margin-bottom: 20px;
    	clear: both;
    }
    
    .person-image-frame
    {
    	padding: 9px;
    	background-image: url(../images/people-frame.gif);
    	background-repeat: no-repeat;
    	background-position: left top;
    	position: relative;
    	float: left;
    }
    
    .person-image
    {
    	border: 0;
    }
    
    .person-content
    {
    	margin-left: 167px;
    }
    
    .gallery-image-container
    {
    	width: 248px;
    	float: left;
    	margin: 0 0 20px 0px;
    }
    
    .gallery-image-frame
    {
    	padding: 9px;	
    	background-image: url(../images/gallery-image-frame.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    
    .gallery-image-content
    {
    	margin-left: 9px;
    }
    
    .news-item
    {
    	margin-bottom: 20px;	
    }
    
    .news-item h3
    {
    	margin: 3px 0 2px 0;
    	padding: 0;
    	font-size: 110%;	
    }
    
    .item-date
    {
    	color: #999;	
    	font-size: 90%;
    }
    
    .world-map
    {
    	border: 0;
    	float: left;
    	clear: both;
    	background-color: #fff;
    }
    
    * html .world-map
    {
    	float: none;
    }
    
    .locations
    {
    	background-color: #fff;
    	margin: 20px 0 20px 0;
    	display: block;
    	float: left;
    	width: 100%;
    }
    
    .locations h2
    {
    	font-size: 1.1em;
    	color: #666;
    	font-weight: normal;
    	padding: 0;
    	margin: 0;
    }
    
    .location-title
    {
    	border-bottom: dotted 1px #c8c8c8;
    	padding: 0 0 2px 0;
    	margin: 0 0 6px 0;
    	clear: both;
    }
    
    .location-container
    {
    	margin: 0;	
    }
    
    .location
    {
    	width: 136px;
    	_width: 133px;
    	float: left;
    	padding-right: 10px;
    	_height: 130px;
    }
    
    .location p,
    .location h3
    {
    	font-size: 0.8em;
    }
    
    .location p
    {
    	margin: 0 0 1em 0;
    	color: #666;
    }
    
    .location h3
    {
    	font-size: 0.9em;
    	margin: 0;
    	padding: 0 0 2px 13px;
    	background-position: left 3px;
    	background-repeat: no-repeat;
    }
    
    h3.dot-ropack { background-image: url(../images/dot-ropack.gif); color: #ed1a3b; }
    h3.dot-plastics { background-image: url(../images/dot-plastics.gif); color: #65a314; }
    h3.dot-viscount { background-image: url(../images/dot-viscount.gif); color: #000; }
    h3.dot-industrial { background-image: url(../images/dot-industrial.gif); color: #52bce6; }
    h3.dot-allibert { background-image: url(../images/dot-allibert.gif); color: #201b8f; }
    Code:
    /* stylesheet created by Creative Bubbles
    written 30/12/07
    
    Page Classes
    
    	.bob  --   All logtek pages need this in the body
    	
    	
    */
    
    /*  Main Structure Styles */
    
    .bob .centredInnerContainer
    {
    	margin: 0 auto;
    	width: 720px;
    	clear: both;
    }
    
    .bob .mainContainer
    {
    	margin: 0 auto;
    	width: 900px;
    	clear: both;
    }
    
    
    /* Sales Hotline Styles */
    
    .salesHotline
    {
    	margin-top: -29px;
    	height: 20px;
    	margin-left:600px;
    	z-index: 1;
    	position: relative;
    	text-transform: uppercase;
    }
    
    
    .salesHotline a
    {
    	color: #666666;
    	padding-bottom: 5px;
    	background-image: url(../images/arrow-grey.gif);
    	background-repeat: no-repeat;
    	background-position: 9px 0.15em;
    	padding-left: 0px;
    	padding-right: 0px;
    	padding-top: 1px;
    	margin-bottom: 10px;
    	float: left;
    	padding-right: 1.8em;
    	display: block;
    	font-size: 90%;
    	font-weight: bold;
    }
    
    .salesHotline .selected a,
    .salesHotline a:hover
    {
    	background-image: url(../images/arrow-red.gif);
    	color: #cc0000;
    }
    
    
    
    /*  Main Content Styles   */
    
    .bob #leftCol 
    {
    	width: 181px;
    	float:left;
    }
    
    
    .bob #centerCol 
    {
    	width:300px;
    	float:left;
    }
    
    
    .bob #rightCol 
    {
    	width:200px;
    	float:right;
    }
    
    
    /* Navigation */
    
    
    .bob .navigation
    {
    	width:181px;
    }
    
    
    .bob .navigationItem 
    {
    	background:#b93e2e;
    	padding:8px 0 8px 25px;
    	margin:1px 0 1px 0;
    }
    
    .bob .navigationItem a
    {
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    
    .bob .navigationItem a:hover
    {
    	color:#FFFFFF;
    	text-decoration:underline;
    
    }
    
    .bob .navigationSectionOver 
    {
    	background:#860402;
    	padding:8px 0 8px 25px;
    
    }
    
    
    .bob .navigationSectionOver  a
    {
    	color:#FFFFFF;
    	text-decoration:none;
    	font-size:75%;
    }
    
    
    .bob .navigationSectionOver  a:hover
    {
    	color:#FFFFFF;
    	text-decoration:underline;
    	font-size:75%;
    }
    
    .bob .navigationSectionOverItem
    {
    	padding:3px 0 3px 0;
    }
    
    
    .bob .navigationItemBottom 
    {
    	background:url('../images/menu-footer.jpg') no-repeat;
    	width:181px;
    	height:30px;
    	padding-left:25px;
    	padding-top:5px;
    }
    
    
    .bob .navigationItemBottom  a
    {
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    
    .bob .navigationItemBottom  a:hover
    {
    	color:#FFFFFF;
    	text-decoration:underline;
    }
    
    
    /* Center Container Styles */

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is a little difficult because i have no idea how this is supposed to look but it looks to me as though your three colums should be inside the .mainContainer but at present you only have the left col inside it.

    This is what I think you may have intentioned.

    Code:
    <div class="mainContainer">
        <!--page content goes here -->
        <div id="leftCol">
            <div class="navigation">
                <div class="navigationHeader"><img src="http://www.jmiearthing.com/test/images/menu-top.jpg" width="181" height="86" /></div>
                <div class="navigationItem"><a href="#"> Home</a></div>
                <div class="navigationSectionOver">
                    <div class="navigationSectionOverItem"><a href="#">653656</a></div>
                    <div class="navigationSectionOverItem"><a href="#">5656356</a></div>
                    <div class="navigationSectionOverItem"><a href="#">563656</a></div>
                    <div class="navigationSectionOverItem"><a href="#">6356</a></div>
                </div>
                <div class="navigationItem"><a href="#">543656</a></div>
                <div class="navigationItem"><a href="#">563656</a></div>
                <div class="navigationItem"><a href="#">654646</a></div>
                <div class="navigationItem"><a href="#">ghdhdfh</a></div>
                <div class="navigationItemBottom"><a href="#">Contact Us</a></div>
            </div>
        </div>
        <div id="centerCol">
            <div class="breadcrumbs"> <a href="#" class="breadcrumbsItem">Home</a> &gt; <a href="#" class="breadcrumbsItemOver">fsdfd</a> </div>
            <div id="centerContent">
                <p class="mainTitle">fdfdfdfdfsdfdf</p>
                <p class="subHeadingRed">fdsfsdfsdf</p>
                <p class="subHeadingBold">fdfsdfsdf</p>
            </div>
        </div>
        <div id="rightCol">
            <div class="salesBox"><img src="http://www.jmiearthing.com/test/images/sales-box.jpg" width="206" height="140" /></div>
            <div class="salesBox"><img src="http://www.jmiearthing.com/test/images/sales-box.jpg" width="206" height="140" /></div>
        </div>
    </div>
    Your layout has some extraneous closing divs in there also.


Bookmarks

Posting Permissions

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