SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2col difficulties

    I have been trying to apply some of the lessons learned from this group and elsewhere, specifically in using to templates
    kindly provided by Paul O'B. I have ben working with
    http://www.pmob.co.uk/temp/3columnflexibleheader.htm
    and
    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Here is the point I've reached with the two column design.

    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>Associated Valve</title><!-- this is adapted from pauls 2colfixedtest_4.htm -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="pauls2c-style.css"/>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    </head>
    <body>
    <div id="outer">
      <div id="sidecol">
    				<br/>
    	<br/>
    				<div id="internal-nav">
    			<h2>Apollo<br/>Valve Products</h2>
    <div class="sidenav">	
    			 			<li><a href="#">Ball Valves -- Bronze</a></li>
    	**** **** <li><a href="#">Ball Valves -- Two Piece</a></li>
    	**** **** <li><a href="#">Ball Valves -- Three Piece</a></li>
    	**** **** <li><a href="#">Ball Valves -- ANSI Flanged</a></li>
    	**** **** <li><a href="#">Ball Valves -- Union End</a></li>
    	**** **** <li><a href="#">Ball Valves -- Three Way</a></li>
    	**** **** <li><a href="#">Ball Valves -- Steam Prep</a></li>
    	**** **** <li><a href="#">Ball Valves -- Specialty</a></li>
    	**** **** <li><a href="#">Top Entry Valves</a></li>
    	**** **** <li><a href="#">Butterfly Valves</a></li>
    	**** **** <li><a href="#">Engineering</a></li>
    			</div>
    		</div>
    		<div id="fignos-nav">
    			<h2>How to Order Apollo Valves</h2>	
    			<h3>Figure Number Construction</h3>
    			</div>
    				<div id="suppliers-nav">
    			<h2>Other Valve Manufacturers</h2>
    	**** **** <ul>
    	**** **** **** <li><a href="#">Amri</a></li>
    	**** **** **** <li><a href="#">Apollo</a></li> <!-- drop this one on Apollo page -->
    	**** **** **** <li><a href="#">Daniel</a></li>
    	**** **** **** <li><a href="#">Descote</a></li>
    	**** **** **** <li><a href="#">Douglas-Barwick</a></li>
    	**** **** **** <li><a href="#">DVC</a></li>
    	**** **** **** <li><a href="#">Formweld</a></li>
    	**** **** **** <li><a href="#">HBE</a></li>
    	**** **** **** <li><a href="#">Jenkins</a></li>
    	**** **** **** <li><a href="#">Kitz</a></li>
    	**** **** **** <li><a href="#">KPC</a></li>
    	**** **** **** <li><a href="#">KTM</a></li>
    	**** **** **** <li><a href="#">PBM</a></li>
    	**** **** **** <li><a href="#">RP&ampC; Bonney Forge</a></li>
    	**** **** **** <li><a href="#">Saunders</a></li>
    	**** **** **** <li><a href="#">Schroedahl</a></li>
    	**** **** **** <li><a href="#">Stockham</a></li>
    	**** **** **** <li><a href="#">SWI</a></li>
    	**** **** </ul>
    	</div>
      </div>
      <div id="clearheader"></div>  <!-- to clear header -->
    	<div id="centrecontent">
    	<br/>
    	<br/>
    	<h1> Valve Manufacturers </h1> <!--this needs to be moved left, made bolder, and given some colour OR turned into a breadcrumb trail-->
    		<div id="main-content1">	 
    						<img src="images/apollo-bronze1.gif" style="float: right; margin: 10px;" />
    		<h1>Apollo Valves</h1>
    		<h2>Company/Brand Profile</h2>
    		<p>Apollo is the showcase brand for one of the world's best-known manufacturers.
    			 The Consolidated Brass Company (Conbraco) blah, blah, blah
    			 You can count on Conbraco for top quality ApolloŽ bronze and steel ball valves in all sizes and shapes, and with all the connections and options you need. Whether you need valves for hydronic systems, irrigation, instrumentation, or tough industrial process flow, one of our ball valves is sure to fit your purpose. We have Two Piece, Three Piece, Unibody, Flanged, Three-Way, Union End, Steam Prep, Specialty, Top Entry and Barstock valves for every need you can possibly imagine. ApolloŽ ball valves deliver world-class performance for a universe of applications.
    	</p>
    
    	</div>
    	
    	<div id="main-content2">	 
    						<img src="images/apollo-bronze1.gif" style="float: right; margin: 10px;" />
    		<h3>Featured Product from Apollo Valve #1</h3>
    		<h2>Top Entry 22-5</h2>
    		<p>  Copy </p>
           <p>Associated Valve is an established and reliable source for industrial, sanitary and specialty valves and related products.  Our company was incorporated in 1984, and is owned by Canadian Erectors of Toronto.
    Associated Valve serves customers in Canada and worldwide from our head office in Edmonton, Alberta.
    We have sales offices in Edmonton and Calgary.</p>
           <p>Associated Valve is an established and reliable source for industrial, sanitary and specialty valves and related products.  Our company was incorporated in 1984, and is owned by Canadian Erectors of Toronto.
    Associated Valve serves customers in Canada and worldwide from our head office in Edmonton, Alberta.
    We have sales offices in Edmonton and Calgary.</p>
    	</div>
    		<div id="main-content3">	 
    						<img src="images/apollo-bronze1.gif" style="float: right; margin: 10px;" />
    		<h3>Featured Product from Apollo Valve #2</h3>
    		<h2>Butterfly Valve 27-18</h2>
           <p>Associated Valve is an established and reliable source for industrial, sanitary and specialty valves and related products.  Our company was incorporated in 1984, and is owned by Canadian Erectors of Toronto.
    Associated Valve serves customers in Canada and worldwide from our head office in Edmonton, Alberta.
    We have sales offices in Edmonton and Calgary.</p>
           <p>Associated Valve is an established and reliable source for industrial, sanitary and specialty valves and related products.  Our company was incorporated in 1984, and is owned by Canadian Erectors of Toronto.
    Associated Valve serves customers in Canada and worldwide from our head office in Edmonton, Alberta.
    We have sales offices in Edmonton and Calgary.</p>
    	</div>	
    	
    	  </div>
      <div id="clearfooter"></div>  <!-- to clear footer -->
    </div><!-- end outer div -->
    
    <div id="footer">
    <br/>
    <br/>
        <p>MAIN OFFICE:   7314 - 99 St.    Edmonton, AB  T6E 3R8
    Tel: (780) 436 9030	Toll Free:  (800) 661-7363	Fax: (780) 436-9036</p>
    <!--Footer - | <a href="2colfixedtest_3.htm">Left column longest</a>
      | <a href="2colfixedtest_2.htm">Centre column longest</a> | <a href="2colfixedtest_4.htm">No
      Column Longest</a> | - Footer
      <p></p>-->
    </div>
    
    <div id="header">
    	<ul id="topnav">
    	<li><a href="link1.html">Contact Us</a></li>
    	<li><a href="#">Sitemap</a></li>
    		</ul>
    	<img alt="Associated Valve logo" src="images/header for website2-3.jpg" style="margin: 5px 0 5px 0;" />
      <div id="mainnav">
    		<ul id="nav">
    	<li><a href="link1.html">Home</a></li>
    	<li><a href="#">Suppliers</a>
    		<ul>
    			<li><a href="#">Amri</a></li>
    			<li><a href="#">Apollo</a></li>
    			<li><a href="#">Daniel</a></li>
    			<li><a href="#">Descote</a></li>
    			<li><a href="#">Douglas-Barwick</a></li>
    			<li><a href="#">DVC</a></li>
    			<li><a href="#">Formweld</a></li>
    			<li><a href="#">HBE</a></li>
    			<li><a href="#">Jenkins</a></li>
    			<li><a href="#">Kitz</a></li>
    			<li><a href="#">KPC</a></li>
    			<li><a href="#">KTM</a></li>
    			<li><a href="#">PBM</a></li>
    			<li><a href="#">RP&ampC-BonneyForge</a></li>
    			<li><a href="#">Saunders</a></li>
    			<li><a href="#">Schroedahl</a></li>
    			<li><a href="#">Stockham</a></li>
    			<li><a href="#">SWI</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Products</a>
    		<ul>
    				<li><a href="#">Ball Valves</a></li>
    				<li><a href="#">Butterfly Valves</a></li>
    				<li><a href="#">Diaphragm Valves</a></li>
    				<li><a href="#">Float Valves</a></li>
    				<li><a href="#">Gate Valves</a></li>
    				<li><a href="#">Globe Valves</a></li>
    				<li><a href="#">Check Valves</a></li>
    				<li><a href="#">Plug Valves</a></li>
    				<li><a href="#">Special Application &amp Critical Services</a></li>
    				<li><a href="#">Valve Automation</a></li>
    		</ul>
    	</li>
    	<li><a href="#">How to Order</a>
    	</li>
    </ul>
    	 </div>		
    </div>
    </body>
    </html>">
    CSS:
    Code:
    html, body {height:100%}
    body {
    	padding:0;
    	margin:0;
    	font family: verdana, arial, helvetica, sans-serif;
    	/*text-align: center;*/
    	background-color: #e0e0e0;
    	color: #000000;
    }
    
    #outer{
    	height:100%;
    	min-height:100%;
    	margin-right:250px;
    	/*background:#F8E7EC;*/
    	/*border-left:1px solid #000;
    	border-right:1px solid #000;*/
    	margin-bottom:-52px;
    	background-color:#a3adcb;
    	color: #000000;
    	/*clear: both;*/
    }
    
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    
    #main-content1 {
    background-color: #ebde93;
    padding: 10px;
    float: left;
    margin-left: 2%;
    margin-top: 35px;
    width: 90%;
    }
    #main-content2 {
    background-color: #ebe4ba;
    padding: 10px;
    float: left;
    margin-left: 2%;
    margin-top: 35px;
    width: 90%;
    }
    #main-content3 {
    background-color: #fff490;
    padding: 10px;
    float: left;
    margin-left: 2%;
    margin-top: 35px;
    width: 90%;
    }
    /*.divider1 {
    width:100%;
    height:5px;
    overflow:hidden;
    background:#fff;
    position:relative;
    border-bottom: 1px solid #e6e6e6;
    }*/
    
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:120px;
    	text-align: center;
    	/*background:#FF0000;*/
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	/*overflow:hidden;*/
    	background-color: #cfd4e6;
    	color: #000000;
    }
    /* topnav, topnav ul and topnav li imported from amalgam711 */
    #topnav, #topnav ul {
    	padding: 3px;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    	display: inline;
    }
    #topnav li { 
    	float: right;
    	width: 10em; /* width needed or else Opera goes nuts */
    }
    
    #mainnav {
    width:100%;
    height: 30px;
    background-color: #cfd4e6;
    /*background-color: #f5f5f5;*/
    /*border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;*/
    position:relative;
    z-index:2;
    }
    
    #mainnav a {
    font-size: 1.3em;
    }
    #nav, #nav ul {
    	float: left;
    	height: 26px;
    	/*width: 36em;*/
    	padding: 0;
    	margin: 0 0 0 8em;
    	list-style: none;
    	/*line-height: 1.5;*/
    	/*background: white;*/
    	background-color: #fff490; /*#fff8e6;*/
    	font-weight: bold;
    	/*border: solid #eda;
    	border-width: 1px 0;*/
    	/*margin: 0 0 1em 0;*/	
    }
    #nav a {
    	display: block;
    	width: 10em;
    	w\idth: 6em;
    	color: #7C6240;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    /*#nav a.daddy {
    	background: url(rightarrow.gif) center right no-repeat;
    }*/
    
    #nav li {
    	float: left;
    	width: 10em;
    	padding: 0;
    	list-style: none;
    }
    #nav li ul {
    	position: absolute;
    	/*background-color: #ebde93*/
    	/*width: 10em;*/
    	left: -999em;
    	height: auto;
    	/*width: 14.4em;
    	w\idth: 13.9em;*/
    	width: 10em;
    	w\idth: 6em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;	
    }
    /*#nav li ul ul {
    	margin: -1em 0 0 10em;
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    	left: -999em;
    }*/
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul , #nav li li.sfhover ul {
    	left: auto;
    	font-weight: normal;
    }
    #nav li:hover, #nav li.sfhover {
    	/*background: #eda;*/
    	background-color: #ffde80;
    }
    #sidecol {
    	position:relative;/*ie needs this to show float */
    	width:250px;
    	/*float:left;*/
    	float:right;
    	margin-right:-249px;/*must be 1px less than width otherwise won't push footer down */
    	padding-top:122px;/*needed to make room for header*/
    }
    #sidecol p, h2 {
    	padding-left:2px;
    	padding-right:3px;
    	text-align: center;
    	}
    .internal-nav {
    	width:90%;
    	position:relative;
    	float: left;
    	text-align : left;
    	margin: 0px;
    	padding-left: 10px;
    	padding-right: 10px;
    }	
     .sidenav {
    	color: #000000;
    	list-style: none;
    	margin:0px;
    	padding:2px;
    	line-height : 20px;
    	white-space: nowrap;
    	/*width:200px;*/
    	display:block;
     }
     
     .sidenav a {
    	color: #000000;
    	text-decoration: none;
    	margin:0px;
    	padding:2px;
    	line-height : 20px;
    	/*white-space: nowrap;*/
    	/*width:200px;
    	display:block;*/
     }
     .sidenav a:link{
    	color: #000000;
     }
     .sidenav a:active{
    	color: #000000;
     }
     .sidenav a:visited{
    	color: #D97B53;
    }
    .navbutton a:hover{
    	color: #000000;
    	background-color: #D2DBFF;
    	text-decoration: none;
    }
    
    
    
    
    #footer {
    	width:100%;
    	clear:both;
    	height:50px;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	background-color: #f5f5f5;
    	color: #000000;
    	text-align:center;
    	position:relative;
    }
    * html #footer {/*only ie gets this style*/
    	\height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    }
    #clearheader{height:122px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    Paul, I would love to read a description of how this one works.
    Looking at the html, I supposed that there was a full width #outer containing #centrecontent and #left, but the definitions for those DIVs in the CSS left me bewildered. "Left" exists outside the margins of #outer, #centrecontent apparently has no characteristics which need to be defined in the CSS file -- yet it works!
    I feel bound to defend myself to this point: I went through the detailed "hows and whys" in Paul's paper "Three Column Layout with Equalizing Header and Footer", much of which applied to the 3columnflexibleheader.html layout. As I began to populate it with content, I understood why things were happening the way they were. Somehow I missed the boat when it came to understanding the 2 column design.
    All that said, I'm not sure that any of the following problems relate to the puzzlement I've just described ...

    First, because my editor (HTML-Kit) is attuned to IE6, this looks better in Explorer than in either Opera or Firefox. The main differences are in the dropdown menu. It's adapted from Son of Suckerfish. I felt bound to try this
    and would very much like it to work, but it's getting increasingly difficult to justify the time. Solutions, anyone?

    Next, I can't see why I'm not getting Arial/Sans Serif fonts. It seems clear that I am asking for them in the wrong place (though I thought I did this in similar fashion to a related 3-column page where I have the fonts I want).

    If you compare what you see on the page with what's in the CSS file, you will realize that I have been trying unsuccessfully to style the lists in the right hand column. It seems I'm applying my efforts at the wrong level(s). Can someone narrow that down a bit, please. I have used classes for the sidenav divs becuae I want to apply the styling traits to another list further below in the same column. I'll be grateful for any assistance and/or other comments.
    regards, Cam

    PS: Should I just assume that the vBulletin people are aware of difficulties in using this forum within Opera7, or can someone suggest where I might make a report.

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

    You have the incorrect definition for font-family - you have missed out the hyphen so the style isn't recognised,

    You have set your list up starting with a div instead of ul e.g. <div><li></li></div>. So therefore your styles are not being applied and the code is not valid.

    You have also styled your other list as #nav ul when you should have styled ul#nav.

    The 2 column layout works in the same way as the 3 column layout but with one column missing The only way for an element to stretch another element is for that element to be inside of it. Therefore the column starts off life inside a container and then is dragged wide away from its parent (all save for 1 pixel). Therefore when the column expands it will also stretch the parent which is now to its side and imitate the equalising column effect.

    The outer container has a margin to the side to allow room for the side column element to be dragged wide. The background of the column is then the background of the parents parent which is usually the body. Its quite a simple concept really

    The centrecontent is just another container thats not really needed except to cure some bugs in ie and as a way to add padding to the inner container if necessary. It can also be floated to cure a problem with firefox1.0 if necessary.

    Heres some of your code tidie up but I haven't had time to do it all

    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>Associated Valve</title>
    <!-- this is adapted from pauls 2colfixedtest_4.htm -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body {
     padding:0;
     margin:0;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size:small;
     /*text-align: center;*/
     background-color: #e0e0e0;
     color: #000000;
    }
    * html body{font-size:x-small;f\ont-size:small}/* for ie6 and 5.5. which are one size out*/
    #outer{
     height:100%;
     min-height:100%;
     margin-right:250px;
     /*background:#F8E7EC;*/
     /*border-left:1px solid #000;
     border-right:1px solid #000;*/
     margin-bottom:-52px;
     background-color:#a3adcb;
     color: #000000;
     /*clear: both;*/
    }
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #main-content1 {
    background-color: #ebde93;
    padding: 10px;
    float: left;
    margin-left: 2%;
    margin-top: 35px;
    width: 90%;
    display:inline;/* ie double margin bug on floats*/
    }
    #main-content2 {
    background-color: #ebe4ba;
    padding: 10px;
    float: left;
    margin-left: 2%;
    margin-top: 35px;
    width: 90%;
    display:inline;/* ie double margin bug on floats*/
    }
    #main-content3 {
    background-color: #fff490;
    padding: 10px;
    float: left;
    margin-left: 2%;
    margin-top: 35px;
    width: 90%;
    display:inline;/* ie double margin bug on floats*/
    }
    /*.divider1 {
    width:100%;
    height:5px;
    overflow:hidden;
    background:#fff;
    position:relative;
    border-bottom: 1px solid #e6e6e6;
    }*/
    #header{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:120px;
     text-align: center;
     /*background:#FF0000;*/
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     /*overflow:hidden;*/
     background-color: #cfd4e6;
     color: #000000;
    }
    /* topnav, topnav ul and topnav li imported from amalgam711 */
    #topnav, #topnav ul {
     padding: 3px;
     margin: 0;
     list-style: none;
     line-height: 1;
     display: inline;
    }
    #topnav li { 
     float: right;
     width: 10em; /* width needed or else Opera goes nuts */
    }
    #mainnav {
    width:100%;
    height: 30px;
    background-color: #cfd4e6;
    /*background-color: #f5f5f5;*/
    /*border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;*/
    position:relative;
    z-index:2;
    clear:both;
    }
    #mainnav a {
     font-size: 1em;
    }
    ul#nav {
     padding: 0;
     margin: 0 ;
     list-style: none;
     width:45em;
     margin:auto;
     height:39px;
     background-color: #fff490; /*#fff8e6;*/
    }
    #nav li {
     float: left;
     /*width: 36em;*/
     padding: 0;
     margin: 0;
     height:39px;
     list-style: none;
     background-color: #fff490; /*#fff8e6;*/
     /*line-height: 1.5;*/
     /*background: white;*/
     font-weight: bold;
     /*border: solid #eda;
     border-width: 1px 0;*/
     /*margin: 0 0 1em 0;*/ 
    }
    #nav a {
     display: block;
     width: 10em;
     w\idth: 6em;
     color: #7C6240;
     text-decoration: none;
     padding: 0.25em 2em;
    }
    /*#nav a.daddy {
     background: url(rightarrow.gif) center right no-repeat;
    }*/
    #nav li {
     float: left;
     width: 10em;
     padding: 0;
     list-style: none;
     position:relative;
    }
    #nav li ul {
     position: absolute;
     /*background-color: #ebde93*/
     /*width: 10em;*/
     left: -999em;
     height: auto;
     /*width: 14.4em;
     w\idth: 13.9em;*/
     width: 10em;
     w\idth: 6em;
     font-weight: normal;
     border-width: 0.25em;
     margin: 0; 
    }
    /*#nav li ul ul {
     margin: -1em 0 0 10em;
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
     left: -999em;
    }*/
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul , #nav li li.sfhover ul {
     left: auto;
     font-weight: normal;
    }
    * html #nav li:hover ul,* html  #nav li li:hover ul,* html #nav li.sfhover ul ,* html #nav li li.sfhover ul {
    left:0;}
    #nav li:hover, #nav li.sfhover {
     /*background: #eda;*/
     background-color: #ffde80;
    }
    #sidecol {
     position:relative;/*ie needs this to show float */
     width:250px;
     /*float:left;*/
     float:right;
     margin-right:-249px;/*must be 1px less than width otherwise won't push footer down */
     padding-top:122px;/*needed to make room for header*/
    }
    #sidecol p, h2, ul {
     padding-left:2px;
     padding-right:3px;
     text-align: center;
     }
    .internal-nav {
     width:90%;
     position:relative;
     float: left;
     text-align : left;
     margin: 0px;
     padding-left: 10px;
     padding-right: 10px;
    } 
     .sidenav {
     color: #000000;
     list-style: none;
     margin:0px;
     padding:2px;
     line-height : 20px;
     white-space: nowrap;
     /*width:200px;*/
     display:block;
      text-align:left;
     }
     
     .sidenav a {
     color: #000000;
     text-decoration: none;
     margin:0px;
     padding:2px;
     line-height : 20px;
     /*white-space: nowrap;*/
     /*width:200px;
     display:block;*/
     }
     .sidenav a:link{
     color: #000000;
     }
     .sidenav a:active{
     color: #000000;
     }
     .sidenav a:visited{
     color: #D97B53;
    }
    .navbutton a:hover{
     color: #000000;
     background-color: #D2DBFF;
     text-decoration: none;
    }
     
    
    #footer {
     width:100%;
     clear:both;
     height:50px;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     background-color: #f5f5f5;
     color: #000000;
     text-align:center;
     position:relative;
    }
    * html #footer {/*only ie gets this style*/
     \height:52px;/* for ie5 */
     he\ight:50px;/* for ie6 */
    }
    #clearheader{height:122px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    </head>
    <body>
    <div id="outer"> 
      <div id="sidecol"> <br/>
    	<br/>
    	<div id="internal-nav"> 
    	  <h2>Apollo<br/>
    		Valve Products</h2>
    	  <ul class="sidenav"> 
    		<li><a href="#">Ball Valves -- Bronze</a></li>
    		<li><a href="#">Ball Valves -- Two Piece</a></li>
    		<li><a href="#">Ball Valves -- Three Piece</a></li>
    		<li><a href="#">Ball Valves -- ANSI Flanged</a></li>
    		<li><a href="#">Ball Valves -- Union End</a></li>
    		<li><a href="#">Ball Valves -- Three Way</a></li>
    		<li><a href="#">Ball Valves -- Steam Prep</a></li>
    		<li><a href="#">Ball Valves -- Specialty</a></li>
    		<li><a href="#">Top Entry Valves</a></li>
    		<li><a href="#">Butterfly Valves</a></li>
    		<li><a href="#">Engineering</a></li>
    	  </ul>
    	</div>
    	<div id="fignos-nav"> 
    	  <h2>How to Order Apollo Valves</h2>
    	  <h3>Figure Number Construction</h3>
    	</div>
    	<div id="suppliers-nav"> 
    	  <h2>Other Valve Manufacturers</h2>
    	  <ul>
    		<li><a href="#">Amri</a></li>
    		<li><a href="#">Apollo</a></li>
    		<!-- drop this one on Apollo page -->
    		<li><a href="#">Daniel</a></li>
    		<li><a href="#">Descote</a></li>
    		<li><a href="#">Douglas-Barwick</a></li>
    		<li><a href="#">DVC</a></li>
    		<li><a href="#">Formweld</a></li>
    		<li><a href="#">HBE</a></li>
    		<li><a href="#">Jenkins</a></li>
    		<li><a href="#">Kitz</a></li>
    		<li><a href="#">KPC</a></li>
    		<li><a href="#">KTM</a></li>
    		<li><a href="#">PBM</a></li>
    		<li><a href="#">RP&ampC; Bonney Forge</a></li>
    		<li><a href="#">Saunders</a></li>
    		<li><a href="#">Schroedahl</a></li>
    		<li><a href="#">Stockham</a></li>
    		<li><a href="#">SWI</a></li>
    	  </ul>
    	</div>
      </div>
      <div id="clearheader"></div>
      <!-- to clear header -->
      <div id="centrecontent"> <br/>
    	<br/>
    	<h1> Valve Manufacturers </h1>
    	<!--this needs to be moved left, made bolder, and given some colour OR turned into a breadcrumb trail-->
    	<div id="main-content1"> <img src="images/apollo-bronze1.gif" style="float: right; margin: 10px;" /> 
    	  <h1>Apollo Valves</h1>
    	  <h2>Company/Brand Profile</h2>
    	  <p>Apollo is the showcase brand for one of the world's best-known manufacturers. 
    		The Consolidated Brass Company (Conbraco) blah, blah, blah You can count 
    		on Conbraco for top quality ApolloŽ bronze and steel ball valves in all 
    		sizes and shapes, and with all the connections and options you need. Whether 
    		you need valves for hydronic systems, irrigation, instrumentation, or 
    		tough industrial process flow, one of our ball valves is sure to fit your 
    		purpose. We have Two Piece, Three Piece, Unibody, Flanged, Three-Way, 
    		Union End, Steam Prep, Specialty, Top Entry and Barstock valves for every 
    		need you can possibly imagine. ApolloŽ ball valves deliver world-class 
    		performance for a universe of applications. </p>
    	</div>
    	<div id="main-content2"> <img src="images/apollo-bronze1.gif" style="float: right; margin: 10px;" /> 
    	  <h3>Featured Product from Apollo Valve #1</h3>
    	  <h2>Top Entry 22-5</h2>
    	  <p> Copy </p>
    	  <p>Associated Valve is an established and reliable source for industrial, 
    		sanitary and specialty valves and related products. Our company was incorporated 
    		in 1984, and is owned by Canadian Erectors of Toronto. Associated Valve 
    		serves customers in Canada and worldwide from our head office in Edmonton, 
    		Alberta. We have sales offices in Edmonton and Calgary.</p>
    	  <p>Associated Valve is an established and reliable source for industrial, 
    		sanitary and specialty valves and related products. Our company was incorporated 
    		in 1984, and is owned by Canadian Erectors of Toronto. Associated Valve 
    		serves customers in Canada and worldwide from our head office in Edmonton, 
    		Alberta. We have sales offices in Edmonton and Calgary.</p>
    	</div>
    	<div id="main-content3"> <img src="images/apollo-bronze1.gif" style="float: right; margin: 10px;" /> 
    	  <h3>Featured Product from Apollo Valve #2</h3>
    	  <h2>Butterfly Valve 27-18</h2>
    	  <p>Associated Valve is an established and reliable source for industrial, 
    		sanitary and specialty valves and related products. Our company was incorporated 
    		in 1984, and is owned by Canadian Erectors of Toronto. Associated Valve 
    		serves customers in Canada and worldwide from our head office in Edmonton, 
    		Alberta. We have sales offices in Edmonton and Calgary.</p>
    	  <p>Associated Valve is an established and reliable source for industrial, 
    		sanitary and specialty valves and related products. Our company was incorporated 
    		in 1984, and is owned by Canadian Erectors of Toronto. Associated Valve 
    		serves customers in Canada and worldwide from our head office in Edmonton, 
    		Alberta. We have sales offices in Edmonton and Calgary.</p>
    	</div>
      </div>
      <div id="clearfooter"></div>
      <!-- to clear footer -->
    </div>
    <!-- end outer div -->
    <div id="footer"> <br/>
      <br/>
      <p>MAIN OFFICE: 7314 - 99 St. Edmonton, AB T6E 3R8 Tel: (780) 436 9030 Toll 
    	Free: (800) 661-7363 Fax: (780) 436-9036</p>
      <!--Footer - | <a href="2colfixedtest_3.htm">Left column longest</a>
      | <a href="2colfixedtest_2.htm">Centre column longest</a> | <a href="2colfixedtest_4.htm">No
      Column Longest</a> | - Footer
      <p></p>-->
    </div>
    <div id="header"> 
      <ul id="topnav">
    	<li><a href="link1.html">Contact Us</a></li>
    	<li><a href="#">Sitemap</a></li>
      </ul>
      <img alt="Associated Valve logo" src="images/header for website2-3.jpg" style="margin: 5px 0 5px 0;" /> 
      <div id="mainnav"> 
    	<ul id="nav">
    	  <li><a href="link1.html">Home</a></li>
    	  <li><a href="#">Suppliers</a> 
    		<ul>
    		  <li><a href="#">Amri</a></li>
    		  <li><a href="#">Apollo</a></li>
    		  <li><a href="#">Daniel</a></li>
    		  <li><a href="#">Descote</a></li>
    		  <li><a href="#">Douglas-Barwick</a></li>
    		  <li><a href="#">DVC</a></li>
    		  <li><a href="#">Formweld</a></li>
    		  <li><a href="#">HBE</a></li>
    		  <li><a href="#">Jenkins</a></li>
    		  <li><a href="#">Kitz</a></li>
    		  <li><a href="#">KPC</a></li>
    		  <li><a href="#">KTM</a></li>
    		  <li><a href="#">PBM</a></li>
    		  <li><a href="#">RP&amp;C-BonneyForge</a></li>
    		  <li><a href="#">Saunders</a></li>
    		  <li><a href="#">Schroedahl</a></li>
    		  <li><a href="#">Stockham</a></li>
    		  <li><a href="#">SWI</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">Products</a> 
    		<ul>
    		  <li><a href="#">Ball Valves</a></li>
    		  <li><a href="#">Butterfly Valves</a></li>
    		  <li><a href="#">Diaphragm Valves</a></li>
    		  <li><a href="#">Float Valves</a></li>
    		  <li><a href="#">Gate Valves</a></li>
    		  <li><a href="#">Globe Valves</a></li>
    		  <li><a href="#">Check Valves</a></li>
    		  <li><a href="#">Plug Valves</a></li>
    		  <li><a href="#">Special Application &amp; Critical Services</a></li>
    		  <li><a href="#">Valve Automation</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">How to Order</a> </li>
    	</ul>
      </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul...
    It's like those sprinklings of alum in the murky test-tubes of elementary science classes of yore (and mine ).
    I note that in the css you provided, you appear to have two id divs called #nav li
    Code:
    #nav li {
     float: left;
     /*width: 36em;*/
     padding: 0;
     margin: 0;
     height:39px;
     list-style: none;
     background-color: #fff490; /*#fff8e6;*/
     /*line-height: 1.5;*/
     /*background: white;*/
     font-weight: bold;
     /*border: solid #eda;
     border-width: 1px 0;*/
     /*margin: 0 0 1em 0;*/ 
    }
    #nav a {
     display: block;
     width: 10em;
     w\idth: 6em;
     color: #7C6240;
     text-decoration: none;
     padding: 0.25em 2em;
    }
    /*#nav a.daddy {
     background: url(rightarrow.gif) center right no-repeat;
    }*/
    #nav li {
     float: left;
     width: 10em;
     padding: 0;
     list-style: none;
     position:relative;
    }
    I'm supposing this must be a typo, and that one of the other of those defining sets should be called something else ... but what, pray tell?
    That dropdown looks much better. Id like to fiiddle with the width, so that the "How to Order" box fits on one line. I am slightly deterred by this bit of code:
    Code:
    width: 10em;
     w\idth: 6em;
    Is that a constant ratio, (i.e. 5/3) or does it remain a gap of 4?

    I'm beginning to feel just the tiniest bit guilty about using my "frequent free rider" card so, well, frequently on this forum. Paul, I note on your website that you do contract work. Any objection if I contact you off-list?
    regards,
    Cam

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

    I'm supposing this must be a typo, and that one of the other of those defining sets should be called something else ... but what, pray tell?
    Those styles can be merged. You had styled ul #nav which was styling only the nested list and it didn't need styling really anyway so I changed it to the #nav li.

    The different em widths are probably for ie5.# but you should refer to the suckerfish site for a full explanation. With these suckerfish menus I've found best results if you dont' make the drop downs wider than the parent and you don't centre the text either.

    This version I did here works on ie5 - ie6 and most modern browsers form NN6.2 upwards. (It even works on ie5 mac). The reason being that I kept it within the parameters mentioned above and it works very well.

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    Heres another mock up with a different slant but doesn't work in quite so many browsers.

    http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm

    The suckerfish menus can be a pain to get right as even the simplest change can put it right out. Refer to my first example above and view source to see whats going on.

    Paul


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
  •