Aligning Sidebar links to main content headings
In firefox I can align sidebar links to category headings so that when reading main content a reader is able to see related links in the sidebar....It doesn't aling in internet explorer....also in internet explorer the links indent I don't want them too...can someone please assist
http://www.informationrequested.com/SystemsTrading.html
Thanks for the help
Looks to me like Deja Vu all over again! As I told you before, the problem is still with your duplicated, erratic and often times contradictory CSS code.
Open a New, HTML document. In CODE VIEW, paste the following code. Look Ma, no validation errors!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/**zero out browser defaults on everything**/
* {margin: 0; padding: 0; border: 0; line-height:100%; font-size: 100%;
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #666666;
text-align: center;
color: #000000;
/**MAIN STYLES**/
h1 {line-height:2;
color: #FFF;
font-size: 150%;
font-style: italic;
font-weight: bold;
text-align: center;
h2 {margin: 15px 0 15px 0; line-height:1.5;}
h3 {margin: 12px 0 12px 0; line-height:1.2; font-size:90%}
#sidebar1 h3 {color: #FFF;}
#sidebar2 h3 {color: #F60;}
p {color: #FFF; line-height: 1.5}
a img {border: none}
img {padding: 15px 0 12px 0}
ul,li {
list-style:none;
line-height:1;
font-size: .80em;
/**LAYOUT**/
#container {
width: 780px;
background: #000;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
#header {
background: #000;
border-bottom: medium double #FFF;
#sidebar1 {
float: left;
width: 150px;
padding: 15px 10px 15px 20px;
font-size: 100%;
color: #000;
background-color: #000;
#sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
background-color: #000;
color: #B16D2E;
padding: 0px 10px 15px 20px;
#mainContent {
margin: 0 200px;
padding: 0 10px;
background-color: #000053;
color: #FFF;
#footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
#footer p {
margin: 0;
padding: 10px 0;
font-size: 12px;
color: #000;
/**SIDEBAR LISTS**/
#sidebar1 ul li a {
color: #FFF;
text-decoration: none;
padding: 2px;
display: block;
#sidebar1 ul li a:hover {
color: #FFF;
background-color: #0000FF;
#sidebar2 ul li a {
color: #F60;
background-color: #000;
padding: 2px;
display: block;
#sidebar2 ul li a:hover {
color: #F60;
background-color: #FFF;
/**FLOATS**/
.fltrt { float: right;margin-left: 8px;}
.fltlft { float: left;margin-right: 8px;}
.clearfloat { clear:both; height:0;font-size: 1px; line-height: 0px;}
/**LINKS**/
a:link {color: #FFF;}
a:visited {color:#CCC;}
a:hover {color:#FF9900;}
a:active{color:#CCFF00}
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
body {font-size: 80%}
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: ; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1> COMMODITY FUTURES</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Commodity Futures</h3>
<ul>
<li><a href="index.html" title="Commodity Futures">Home</a></li>
<li><a href="DayTradingFutures.html" title="Day Trading Futures">Day Trading Futures</a></li>
<li><a href="#">Emini Trading </a></li>
<li><a href="#">Forex Trading Online </a></li>
<li><a href="#">Futures Options</a></li>
<li><a href="#">Index Trading</a></li>
<li><a href="#">Managed Futures</a></li>
<li><a href="#">Online Futures Trading</a></li>
<li><a href="SystemsTrading.html" title="Systems Trading">Systems Trading</a></li>
</ul>
<p><img src="images/Choice.jpg" width="148" height="113" alt="Online Futures Trading"></p>
<h3>Futures Trading Strategies</h3>
<ul>
<li><a href="#">Short-Term Trading</a></li>
<li><a href="#">Intraday Trading</a></li>
<li><a href="#">Swing Trading</a></li>
<li><a href="#">Spread Trading</a></li>
<li></li>
</ul>
<h3>Option Trading Strategies</h3>
<ul>
<li><a href="#">Buying Options </a></li>
<li><a href="#">Selling Options </a></li>
<li><a href="#">Option Spreads</a></li>
</ul>
<h3>Tutorials on</h3>
<ul>
<li><a href="#"> Futures Market</a></li>
<li><a href="#">Futures Trading</a></li>
<li><a href="#">Futures Options Trading</a></li>
<li><a href="#">Technical Analysis</a></li>
</ul>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3><img src="images/SystemsTrading.jpg" alt="Systems Trading" width="113" height="170"></h3>
<h3>Systems Trading </h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading"> Advantages </a></li>
<li><a href="#Disadvantages" title="Disadvatages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type">Types of Systems</a></li>
<li><a href="#Design" title="Systems Trading Design">Designing Systems</a></li>
</ul>
<p><img src="images/Advantages.jpg" width="109" height="170" alt="Advantages of Systems Trading"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Types of Trading Systems">Types of Systems</a></li>
<li><a href="#Design">Designing Systems</a></li>
</ul>
<p><img src="images/Disadvantages.jpg" width="113" height="170" alt="Disadvantages of Systems Trading"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Types of Trading Systems">Types of Systems</a></li>
<li><a href="#Design" title="Designing Trading Systems">Designing Systems</a></li>
</ul>
<p><img src="images/Types of Trading Systems.jpg" width="124" height="121" alt="Types of Trading Systems"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Type of Trading Systems">Types of Systems</a></li>
<li><a href="#Design" title="Designing Trading Systems">Designing Systems </a></li>
</ul>
<p><img src="images/Designing.jpg" width="125" height="122" alt="Designing a Trading System"></p>
<h3>Article Contents</h3>
<ul>
<li><a href="#Systems" title="What is Systems Trading">What is Systems Trading</a></li>
<li><a href="#Advantages" title="Advantages of Systems Trading">Advantages</a></li>
<li><a href="#Disadvantages" title="Disadvantages of Systems Trading">Disadvantages</a></li>
<li><a href="#Type" title="Types of Trading Systems">Types of Systems</a></li>
<li><a href="#Design" title="Designing a Trading System">Designing a System</a></li>
</ul>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Actual System</a></li>
<li><a href="#">Constructing a System</a></li>
<li><a href="#">Ask a Developer</a></li>
</ul>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1>Systems Trading</h1>
<p>A Trading System is an automatic implementation of a trading strategy through the use of entry and exit orders based on a set of predefined rules. One major reason trading systems have become so popular is the basic concept that automated systems trading is supposed to takes out the human emotion of trading. These trading systems are also able to deploy complex strategies more easily and efficiently.The use of such trading systems has intensified with the continuous growth in the volume of trade worldwide.</p>
<p>Computerized Systems Trading methods rely on one simple assumption, that price trends may be discerned in the futures markets and speculative risk can be reduced utilizing such trading systems. These trading systems are able to calculate very large mathematical ideas within a very short period of time, thus supposedley giving the edge to the systems trader. </p>
<p>I would like to point out that the by utilizing trading systems it is not the holy grail to trading. Though there are plenty of gurus on the internet that supposedy have found the secret with their trading systems and for a mere x amount of dollars you too can own or lease the their holy grail of trading. It is my intention just to make the buyer of these systems aware that utilizing trading systems is a viable option but is not without the same risk every trader assumes when speculating in the commodity markets.</p>
<p>With that said systems trading has it's definite advantages for certain type's of traders and also has it's drawbacks. In this article I will address some of the advantages, disadvantages, system concepts and alternate recsources for system traders. We also invite you to share some of your insights about systems trading and how it may have helped or hindered you in your pursuit of profits in the marekts.</p>
<h2>Advantages of Systems Trading</h2>
<p>The first advantage for systems trading is that once it is developed, tested and implemented the need for a trader to monitor the markets and implement the trades are no longer necessary. Computers become the trade executioner and manager. Therefore, a trader that does not have the ability to monitor the markets as do professional traders then a trading system might be a good way for this type of trader to participate in the markets.</p>
<p>Another advantage of system trading is that it takes the emotion out of trading, which is often cited as one of the biggest problems traders encounter. By utilizing a trading system a commodity trader need not make any decisions, which in turn will make an automated trading system more consistent in it's entry and exit of trading strategies.</p>
<p>And if you don't have the time or experience to develop your own trading system you could buy or lease a trading system. Some companies sell trading systems that they have created while other companies will give you the signals generated by their trading systems for a fee. You may also have a profitable manual trading strategy that can benefit from automation, but you lack the necessary programming skills. In this instance there are companies that will take your manual strategy and automate it. There are other companies that can audit your trading system or proposed trading system and suggest areas of improvement. which could substantially improve your bottom line results. There are definetley plenty of resources for traders looking at utilizing trading systems.</p>
<h2>Disadvantages of Systems Trading</h2>
<p>Trading Systems can be very complex and typically required a thorough understanding of technical analysis, order entry and risk management. Acquiring these skills can be time consuming and overwhlming for novice and intermediate commodity traders.</p>
<p>Another reality of designing, building and testing a trading system is that it can be very time consuming. A non-professional trader who has other commitments may just not have the time required to develop the trading system and get it online functioning properly.</p>
<p>Another disadvantage system traders encounter is that simulated results sometimes differ greatly from actual results and can be a major problem to implementing the trading system. The reason could be the accuracy of the data, slippage, transaction costs and or commissions. </p>
<p> A commodity trader attempting to design and build a trading system may find themselves frustrated and overwhelmed with the process. Therefore, don't forget it sometimes a systems consultant can be worth the expense in helping get your trading system working properly.</p>
<p>There is no fool proof trading system and there are many type of trading system to choose. There are systems that specialize in certain markets and or designed specifically for day trading or longer-term time frames. Each trading system will have unique characteristics in regard to money management, time in the market and whether it is part of a single or diversified portfolio.</p>
<h2>Types of Trading Systems</h2>
<p>Most trading systems are based upon technical analysis, which is what I will be focusing on. Trading systems are based on technical analysis such as; moving averages, relative strength indicators, chaos theory, fibonacci retracements just to name a few. They can be simple to very complex in how they generate trading signals and can be implemented in several markets or just one.</p>
<p> There are thousands of trading systems that generally operate on one of three time frames or objectives. The times frames are typically intraday, intra-week or intra-month and long term. Each of these time frames can se a commodity trader implement a trend-following system, a countertrend system or a breakout system.</p>
<p>Each system strategy and time frame has advantages and disadvantages and the common denominator within all these systems is that they all are fully automated and do not require constant monitoring of the markets once deployed.</p>
<p>A Trend-Following System is probably the most common method of system trading. In it's most basic form, this trading system simply watis for a significant price movement in one direction and then buys or sells the commodity in that direction. A trading system designed with this concept will utilze such trading models as a moving average crossover. </p>
<p>A Countertrend system is basically the opposite of a trend-following system. The fundamental idea behind countertrend trading systems is to sell when markets are rallying and buy when markets are selling-off. A trading system designed with this basic concept will utilize differenct types of Oscillators that illustrate trend weakness or strength through mathematical calculationssuch as Stochastics or Relative Stregth Indicators.</p>
<p>A Breakout Trading System is based on the theory that if a market establishes a new high or low, the price movement is most likely to continue in the direction of the breakout. An example of a simple breakout system would be if a previous high in a market over a period of days, weeks or months was broken and a buy stop order was deployed would be an example of a very simple Breakout System.</p>
<p>Just like anything in regard to trading there are no magic wands or super secret trading systems that will make you a millionare overnight. Trading is a game of calculated risks in the pursut of profit and the type of methodology you decide to employ whether it is a manual trading system you designed or an automated system designed for you it all comes down to your personal preference. </p>
<h2>Systems Trading Design</h2>
<p>In planning a trading system here are some basic principles that govern the construction of any trading system. A Trading System must be objective, easy to use and must give clear entry and exit signals. Furthermore a Trading System must produce winning trades while not only attempting to limit the risk per trade but also too keep the drawdowns to a minimum.</p>
<p>These are the foundation blocks from which a trading system can be designed, contructed, tested and implemented, though they are not a guarantee of succeess. This artilce has given you a basic understanding of trading systems and the different types of trading systems that are deployed in the commodities market. Be sure to utilize the resources found on this website to help you in all aspects of systems trading. </div>
<!-- Clear floats--><br class="clearfloat">
<div id="footer">
<p>2009 Commodity-Futures All Rights Reserved</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
Similar Messages
-
Inheriting #main-content styling on sidebar a:link
The sidebar keeps "inheriting" #main-content styling on the sidebar links...
What can I do to have different styling for sidebar over 10 or so pages in my site?
Can see site at: artdesignsneed.com/joeldoctor
Sample styling in code for sidebar_right_inner link:
#sidebar_right_inner p a:link {
color: #1A619A;
border-bottom: 1px solid #1A619A;
text-decoration: none;
Thanks ever so much!CSS Pseudo-classes - Link States
You need to define a full set of link states (link, visted, hover, active) for each ID or class name required.
Let's say you want to have red links in your #header and white links in your #footer.
CSS:
#header a {text-decoration:none}
#header a:link {color:red} /**unvisited**/
#header a:visited {color:gray} /**visited**/
#header a:hover, /**on mouse over**/
#header a:active, /**on click**/
#header a:focus /**on tab key**/
{text-decoration:underline}
#footer a {text-decoration:none}
#footer a:link {color:white}
#footer a:visited {color:yellow}
#footer a:hover,
#footer a:active,
#footer a:focus
{text-decoration:underline}
HTML:
<div id="header">
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
</div>
<div id="footer">
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
</div>
For more on CSS pseudo classes:
http://www.w3schools.com/css/css_pseudo_classes.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
How to keep the right sidebar on this website from going under the main content (center) column?
Hi...is there a way to keep the right sidebar on this website from going under the main content (center) column when the browser window is made smaller? It would be great if the middle (main content) column could get smaller instead of the sidebar moving under the text when the window is made smaller. I'm working with a fluid layout and this is the first time I've tried this. Any help would be appreciated. Here is the link to the website:
http://www.elynncohen.com
and here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
line-height: 1.4;
background-image: url(images/background.gif);
background-repeat: repeat;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-left: 15px;
.container .sidebar1 h3 {
padding-left: 0px;
color: #C60651;
font-size: x-large;
h1 strong {
color: #C60651;
font-size: 90%;
font-family: "Binary ITC Bold";
h1 strong em {
a img {
border: none;
a:link {
color:#414958;
text-decoration: underline;
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus {
text-decoration: none;
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C60651;
border-left-color: #C60651;
.header {
padding-top: 40px;
#Quote {
float: right;
clear: left;
margin-right: 1%;
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
margin-top: 40px;
border-top-color: #FFF;
border-left: #FFF;
margin-left: 25px;
background-color: #FFF;
font-family: museo-sans;
arial;
max-width: 200px;
min-width: 180px;
.content {
float: left;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10;
font-family: museo-sans;
arial;
width: 30%;
.container .content p {
padding-top: 0px;
.sidebar2 {
float: left;
width: 30%;
background-color: #D3CCB2;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 5px;
font-family: museo-sans;
arial;
font-size: 90%;
position: relative;
.content ul, .content ol {
padding-top: 0px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 40px;
font-family: museo-sans; arial;
font-size: 100%;
color: #666;
.container .content p {
font-family: museo-sans;
arial;
padding-top: 0px;
padding-left: 17px;
padding-bottom: 0px;
#Quote {
float: right;
clear: both;
ul.nav {
list-style: none; /* this creates the space between the navigation on the content below */
font-family:museo-sans; arial;
line-height: 250%;
.nav {
font-family: museo-sans;
arial;
padding-left: 0px;
ul.nav li {
font-family: museo-sans; arial;
padding-bottom: 10px;
ul.nav a, ul.nav a:visited
display: block;
text-decoration: none;
color: #333333;
background-color: #FFF;
font-family: museo-sans; arial;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 15px;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #C60651;
font-family:museo-sans; arial;
background-color: #FFF;
background-image: url(images/navbar2.gif);
padding-bottom: 10px;
.content img {
.footer {
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
padding-top: 0px;
padding-right: 0;
padding-bottom: 10px;
.fltrt {
float: right;
margin-left: 8px;
.fltlft {
float: left;
margin-right: 8px;
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.container .content {
width: 50%;
font-size: large;
font-family: museo-sans; arial;
#footer { width: 100%;
background-color: #FFF;
.container .sidebar2 h4 img {
padding-left: 20px;
padding-top: 0px;
.sidebar2 p img {
border: medium solid #C60651;
#Insert_logo2 {
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
.container .content p .content strong {
font-family: museo-sans; arial;
.container .content .content {
font-family: museo-sans; arial;
.container .content ul li strong {
font-family: museo-sans;
arial;
font-size: 95%;
line-height: 150%;
list-style-type: disc;
.container .content ul {
test {
font-family: "Binary ITC Bold";
.container .sidebar2 p img {
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-color: #C60651;
border-right-color: #C60651;
border-bottom-color: #C60651;
border-left-color: #C60651;
li strong {
line-height: 130%;
list-style-type: circle;
color: #978980;
.container .content ul {
.container .sidebar1 .nav {
margin-top: 10px;
margin-bottom: 10px;
.sidebar1 .nav li {
padding-bottom: 10%;
.nav li a {
background-image: url(images/navbar2.gif);
background-repeat: no-repeat;
background-position: right center;
left: auto;
right: auto;
clip: rect(auto,auto,auto,auto);
.container .sidebar1 .nav li a {
.container .sidebar1 h6 {
padding: 0px;
color: #000000;
#footer h3 strong {
font-size: 60%;
color: #978980;
.container .content p {
padding-right: 0%;
padding-left: 0%;
font-size: 85%;
.container .sidebar2 p {
padding-right: 8%;
padding-left: 8%;
padding-top: 5px;
#Insert_logo2 #Insert_logo2 {
padding-left: 15px;
.container .content ul {
color: #C60651;
h6 {
color: #978980;
font-family: museo-sans;
arial;
font-size: 82%;
padding-left: 20%;
text-align: left;
text-indent: 8px;
.nav li a {
padding-bottom: 10px;
h8 {
font-family: museo-sans; arial;
font-size: 100%;
h4 {
font-family: museo-sans;
arial;
font-size: 100%;
color: #C60651;
padding-left: 17px;
padding-top: 5px;
padding-bottom: 0px;
.container .content p {
padding-left: 17px;
padding-right: 30px;
.sidebar1 h8 strong {
font-size: 80%;
font-family:museo-sans; arial;
.container .sidebar1 h7 {
font-size: 40%;
color: #978980;
h7 {
font-family: museo-sans; arial;
font-size: 15%;
.container .sidebar1 h8 {
font-family: museo-sans; arial;
.sidebar2 p img {
min-width: 200px;
max-width: 100%;
.container .content img {
padding-left: 3%;
img {
position: static;
text-align: left;
body,td,th {
font-family: museo-sans; arial;
h5 {
font-size: 150%;
color: #C60651;
padding-left: 0px;
font-family:museo-sans; arial;
.container .content p {
padding-left: 17px;
padding-right: 30px;
font-size: 87%;
.container .sidebar2 p {
font-size: 90%;
.container .sidebar1 .nav li {
font-family: museo-sans;
arial;
.container .sidebar1 .nav li a {
padding-left: 0px;
margin-bottom: 0px;
height: 30px;
li a {
padding-left: 2px;
-->
</style><!--[if lte IE 7]>
<style>
.content
ul.nav a { zoom: 1; }
</style>
<![endif]--></head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header"><!-- end .header -->
<p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
; display:block;" /></a></p>
<div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
<p class="clearfloat"> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">High School Students</a></li>
<li><a href="#">College Students</a></li>
<li><a href="#">Parents/Educators</a></li>
<li><a href="#">Professionals</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Q & A Blog</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
<br><br><li><strong>Considering your college choices & career options</strong></li>
<li><strong>Preparing for the world of work after college</strong></li>
<li><strong>Seeking a new position to further your career</strong></li>
<li><strong>In-transition and considering new opportunities</strong></li>
<li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
</ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
<p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
<p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
<p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
<p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
<div id="footer">
<h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
</div>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>You should make your sidebar1 and sidebar2 fixed positioned. Make your content DIV fluid.
This should help you: http://www.glish.com/css/7.asp -
Making sidebar fill colors "scroll" with main content div
Just when I think this newbie is getting the hang of Dreamweaver, something throws me a curve
I have a three column fixed layout designed in Dreamweaver CS4 at the URL below. Each of the two sidebars - left and right - has a fill color. I would like those sidebar fill colors to "scroll" or "flow" down as the content of the middle, main content div expands. As it is, the fill color of the two sidebars stops when their content stops, even if the middle content continues.
I'm guessing I'm overlooking something simple here. Can someone tell me how to accomplish this?
Many thanks in advance.
http://firinglinedesign.com/mathieu/That is really ingenious! Many thanks for the lead. For anyone else who has this issue, while there are many links on Google, this is the first one I came across and it solved my problem.
http://www.communitymx.com/content/article.cfm?cid=afc58
Many thanks, Murray. -
Fixed Nav Bar, Fixed Sidebar, Scroll Main Content
Can someone direct me to some good documentation to learn how to design a page to have a fixed nav bar, fixed sidebar and main content that scrolls?
My objective is to have the nav bar/sidebar visible at all times when the user is scrolling through the main content.
Thanks.On line 135, you have this:
<td align="left"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" align="left" />
Try this:
<td align="left"> <div style="overflow:auto; height: 200px"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" />
Don't forget to close the division right before the cell closure.
</div>
</td>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
CSS, Main content div and sidebar length
I'm using DW CS4 and am using the 2 column fixed left sidebar with header and footer.
I want to make sure the main content div is never shorter than the length of the sidebar. I've got a coloured background, but want the bottom of the sidebar and main content div to be the same, if that makes sense?
ThanksFor equal height columns, create a 2-colored background image and repeat-y (vertically). This technique is called Faux Columns. See examples below.
3-Col Layout Before -
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
3-Col Layout After -
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
What would the code be to make the sidebar even with the main content at the bottom?
Can anyone tell me what code to use to make the sidebar even with the main content at the bottom. I am using CSS. I am guessing the height would be auto, but can't figure out how to do it. Any help would be greatly appreciated. Thanks.
Equal height columns are simple with Tables. But CSS divisions don't behave the same as table columns so you need to use a script or trick the eye with a repeating background Image.
See image below:
See working demo
http://alt-web.com/TEMPLATES/3-col-white-gray.html
CSS code:
#container {
width: 900px;
margin : 50px auto;
background: url(../Images/BG/3-col-wht-gry.jpg) repeat top;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Exapand menu image and aligning sidebars
I have a menu on my website which I created using CSS. I
would like the menu background image to expand to match the text on
the menu. Please have a look at the website: www.tusptest.com.
On another note, I have used sidebars on my Css and they do
not align. I have tried the faux column technique but I seem to be
getting it wrong and have not managed to align the sidebars. Is
there any other way of doing it.
hereis the link to the website: www.tusptest.com
CSS Code:
/* global */
html{height: 100%;}
body
font-family: arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: 0.78em;
p
margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
h1
{ font-family: serif;
font-size: 108%;
letter-spacing: .1em;
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
letter-spacing: .1em;
font-weight: normal;
text-decoration: underline;
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
.right
{ float: right;
padding: 0px 0px 0px 8px;
.center
{ display: block;
text-align: center;
margin: 0 auto;
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto;
margin-right: auto;
/* main container */
#main{
width: 850px
/* header */
#header
{ width: 100%;
height: 87px;
/* logo */
#logo
padding: 1;
float: left;
margin: -15px 15px 0px 15px;
#address
{ padding: 11px 17px 0px 14px;
float: right;
text-align: right;
#address p
{ padding: 0px;
margin: 0px;
#logo h1
{ font-family: verdana, arial, sans-serif;
margin: 0px;
padding: 18px 0px 0px 0px;
font-size: 160%;
letter-spacing: .3em;
#logo h2
{ font-family: verdana, arial, sans-serif;
margin: 0px;
padding: 5px 0px 0px 0px;
font-size: 100%;
letter-spacing: .2em;
/* navigation menu */
#menu{margin: 0px 15px 0px 15px;}
#menu ul
{ height: 38px;
margin: 0px auto;
#menu li
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
#menu li a, #menu li a#selected, #menu li a:hover
font-family: verdana, arial, sans-serif;
display: block;
float: left;
height: 7px;
text-decoration: none;
margin: 5px 12px 0px 4px;
padding: 7px;
text-transform: uppercase;
font-size: 80%;
#links
{ float: right;
width: 100px;
text-align: right;
padding: 0px 18px 0px 0px;
/* sidebars */
.sidebar
float: left;
width: 220px;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
/* sidebar items / links */
.sidebaritem
text-align: left;
width: 200px;
float: right;
margin: 0px 11px 9px 0px;
padding: 0px 0px 0px 0px;
.sidebaritem h1, .sidebaritem h2, .sidebaritem p{margin: 0px
10px 0px 10px}
.sidebaritem h1
{ font-weight: normal; padding: 8px 0px 16px 0px;
text-transform: uppercase;
.sidebaritem p
line-height: 16px;
padding: 0px 0px 8px 0px;
.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 14px;
text-decoration: none;
.sbilinks ul{margin: 0px 0px 18px 10px;}
.sbilinks li
{ list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
.sbilinks li a, .sbilinks li a:hover
{ height: 16px;
text-decoration: none;
width: 149px;
/* page content (centre) */
#content
text-align: justify;
width: 355px;
margin-top: 16px;
float: left;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: -1px;
#content h1
{ font-family: arial, sans-serif;
margin: 5px 0px 12px 0px;
font-size: 128%;
font-weight: normal;
text-transform: uppercase;
#content a, #content a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
/* footer */
#footer
{ height: 44px;
padding: 18px 0px 4px 0px;
font-size: 80%;
text-transform: uppercase;
font-family: verdana, arial, sans-serif;
clear: both;
text-align: center;
border-top: 2px solid;
margin: 4px 15px 4px 15px;
#footer a
{ text-decoration: none;
padding: 0px 0px 2px 0px;
border-bottom: 1px dashed;
#footer a:hover
{ text-decoration: none;
padding: 0px 0px 2px 0px;
border-bottom: 1px solid;
/* Based on Nifty Corners: rounded corners without images */
/* By Alessandro Fulciniti */
http://www.html.it/articoli/nifty/index.html
.rtop, .rbottom, .mtop, .mbottom{display: block;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4,
.mtop .m1, .mtop .m2, .mtop .m3, .mtop .m4,
.mbottom .m1, .mbottom .m2, .mbottom .m3, .mbottom .m4
{ display: block;
height: 1px;
overflow: hidden;
.r1, .m1{margin: 0 5px}
.r2, .m2{margin: 0 3px}
.r3, .m3{margin: 0 2px}
.rtop .r4, .rbottom .r4, .mtop .m4, .mbottom .m4
{ margin: 0 1px;
height: 2px
#main .sidebar .sidebaritem {
background-color: #F3F9EE;
#main #content .sidebaritem {
background-color: #F3F9EE;
#main .sidebar #right_sidebar2 {
background-color: #FFFFFF;Hi Beau:
That particular graphic will be hard to work with because
it's "tilt" will
require a lot of screen space.
{IMHO, it's a bit crude and "comic bookish" for the look you
have otherwise
designed).
With a more right-angled image, you can insert a 3 row x 3
column table (9
cells) in that container, and slice your image into four
square corner
images, and small tiling background images for the top, sides
& bottom.
The center cell will contain only your content and will
expand as needed.
"beau123" <[email protected]> wrote in
message
news:fhs2t4$3pl$[email protected]..
> please can someone help -
Gaps between header/footer and main content
I am building upon a website that somebody else previously worked on. When adding to the main content, gaps appear between the header/footer and the content. How can I fix this?
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>stitch by stitch needlepoint</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="sbs_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: 18px}
.style2 {font-size: 14px; font-style: normal; line-height: 20px; color: #aa0f2e; text-decoration: none; font-family: Georgia, "Times New Roman", Times, serif;}
-->
</style>
</head>
<body bgcolor="#d0e8fb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!-- ImageReady Slices (cut_events.psd) -->
<table width="732" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><a href="index.html"><img src="images/logo.gif" alt="stitch by stitch" width="316" height="66" border="0" class="logo" /></a></td></tr></tbody></table>
<table width="732" height="629" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tbody>
<tr>
<td colspan="17"><img src="images/bordertop.gif" width="732" height="31" alt="" /></td></tr>
<tr>
<td rowspan="5"><img src="images/events_borderleft.gif" width="36" height="564" alt="" /></td>
<td><img src="images/nav_spacerleft.gif" width="31" height="19" alt="" /></td>
<td><a href="index.html"><img src="images/nav_home.gif" alt="" name="home" width="47" height="19" border="0" id="home" /></a></td>
<td><img src="images/nav_dot1.gif" width="7" height="19" alt="" /></td>
<td><a href="events.html"><img src="images/nav_upcomingevents.gif" alt="" width="114" height="19" border="0" id="events" /></a></td>
<td><img src="images/nav_dot2.gif" width="11" height="19" alt="" /></td>
<td><a href="classes.html"><img src="images/Nav_classes.gif" alt="" width="57" height="19" border="0" id="classes" /></a></td>
<td><img src="images/nav_dot3.gif" width="12" height="19" alt="" /></td>
<td><a href="directions.html"><img src="images/nav_directions.gif" alt="" width="68" height="19" border="0" id="directions" /></a></td>
<td><img src="images/nav_dot4.gif" width="13" height="19" alt="" /></td>
<td><a href="photogallery.html"><img src="images/nav_photogallery.gif" alt="" width="89" height="19" border="0" id="photogallery" /></a></td>
<td><img src="images/nav_dot5.gif" width="12" height="19" alt="" /></td>
<td><a href="customdesign.html"><img src="images/nav_customdesigns.gif" alt="" width="97" height="19" border="0" id="customdesigns" /></a></td>
<td><img src="images/nav_dot6.gif" width="13" height="19" alt="" /></td>
<td><a href="vendors.html"><img src="images/nav_vendors.gif" alt="" width="67" height="19" border="0" id="vendors" /></a></td>
<td><img src="images/nav_spacerright.gif" width="24" height="19" alt="" /></td>
<td rowspan="5"><img src="images/events_borderright.gif" width="34" height="561" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/string.jpg" width="662" height="88" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/events_hd_upcomingevents.gif" width="662" height="44" alt="" /></td></tr>
<tr>
<td colspan="15" width="662" height="13" bgcolor="#EBECEC"> </td></tr>
<tr>
<td width="662" height="397" colspan="15" bgcolor="#EBECEC" valign="top">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="140"><br /></td>
<td align="center"></td></tr></tbody></table>
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
<p align="left"><span class="style2">February 2012</span><span class="events_boldRed"><br />
</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed"><span class="style1">Back to Basics II with Tony Mineri</span></span></p>
<p align="left"><span class="style2">March 12, May 14, June 18 & July 19</span></p>
<p align="left"><span class="style2">9:30-4:00 (lunch will be provided</span></p>
<p align="left"><span class="style2">Space is limited - $350.00</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed style1">Tony Mineri Embellishments</span></p>
<p align="left" class="style2">2012 </p>
<p align="left" class="style2">June 3rd & 4th - Full (waiting list only)</p>
<p align="left" class="style2">November 4th & 5th (limited space available)</p>
<p align="left" class="style2">2013</p>
<p align="left" class="style2">June 9th & 10th </p>
<p align="left" class="style2">October 6th & 7th</p>
<p align="left"><span class="events_boldRed"><br />
</span></p></td>
</tr>
<tr>
<td colspan="17"><img src="images/borderbottom.gif" width="732" height="37" alt="" /></td></tr></tbody></table>
<table width="732" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<p align="center"><span class="bottomnav"><a href="index.html">home</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="events.html">upcoming events</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="classes.html">classes</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="directions.html">directions</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="photogallery.html">photo gallery</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="customdesign.html">custom designs</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="vendors.html">vendors </a></span></p></td></tr></tbody></table>
<p> </p>
<p> </p>
<p><!-- End ImageReady Slices --></p>
<p> </p>
</body>
</html>This is just a guess, which is what we have to do until we can see the live page, but try changing this -
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
to this -
<p align="left" class="events_boldRed" style="margin-top:0;"><span class="style1">Charlie Harper Trunk Show</span></p>
Does that solve the gap between the header and the main content?
While you're worrying about these gaps, read this -
http://www.apptools.com/rants/spans.php
I see trouble ahead.... -
Main content text does not scale down on iPhone
Hello my Dreamweaver friends,
I'm working on a site for a friend -- a simple fixed width layout (header, footer, sidebar and main content). It looks good on Safari and Firefox. But on the iPhone and iTouch the text in the mainContent area does not scale down to size with the <h> tags and the links on the Spry navigation bar. Is there a reason for that? Is there something I could do so that it all scales down?
Another problem is that the right border I put on the Spry Navigation menu doesn't appear on my version of Internet Explorer.
The link to the page, for what its worth, is http://www.daveharrison.info/tzs/index.html
Thanks for any help!12 tips for iPhone Web Design
http://articles.sitepoint.com/article/iphone-development-12-tips
Also see this working Demo with media queries. Resize your non-IE browser viewport and see what happens.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
White space between header and main content
Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the 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>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
.oneColElsCtrHdr #container {
width: 46em; /* this width will create a container that will
fit in an 800px browser window if text is left at browser default
font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.oneColElsCtrHdr #header {
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #FFFFFF;
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
padding-top: 0;
padding-right: 0px;
padding-left: 0px;
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 0px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
.style4 { font-family: "Fiolex Girls", "Arial Narrow";
color: #FF0000;
font-size: xx-large;
font-style: italic;
.style6 {color: #FF0000}
.style7 { color: #000000;
font-size: x-small;
.style9 {color: #FF0000; font-family: Arial, Helvetica,
sans-serif; }
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:static;
width:525px;
height:250px;
z-index:1;
float: left;
border-bottom-color: #000000;
border-bottom-style: solid;
border-top-width: thin;
border-bottom-width: thin;
border-color: #000000;
#apDiv3 {
position:static;
width:500px;
height:0px;
z-index:1;
left: 465px;
top: 410px;
float: right;
.style14 {
font-size: medium;
font-style: italic;
font-weight: normal;
.style15 {font-size: small}
-->
</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">
<!--
#apDiv7 {
position:static;
width:737px;
height:0px;
z-index:2;
bottom: 0px;
border-bottom-style: solid;
border-bottom-width: thin;
.style16 {font-size: x-small}
-->
</style>
<!-- Do not remove the line below!!! It is required for
the XML Flash Slideshow v3. -->
<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre><!-- end #header -->
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p><!-- end #mainContent -->
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre><!-- Begin XML Flash Slideshow v3 -->
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>
<!-- End XML Flash Slideshow v3 -->
</pre>
</div>
<pre>
</pre>
<pre> </pre><!-- -->
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php -
I am trying to make only the main content editable in a template.
I thought I had only the main content area editable, but when I made a change to the menu bar in the template it didn't carry over ( I did try update) and then I realized my whole page is editable on the page where I applied the template. Can someone please review and tell me what I might have done wrong.
template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../main.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body onLoad="MM_preloadImages('../images/logo/shop_small_1.png','../images/home_page/plantatio n_closed.jpg')">
<div id="outer_container">
<div id="inner_conatiner">
<div id="header">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<table width="1024" border="0" cellspacing="0" cellpadding="5">
<tr>
<td rowspan="2"><img src="../images/logo/bed_guy_logo.gif" alt="bedguy logo" width="195" height="116" class="logo_images"></td>
<td colspan="2" class="sleep_better">Helping Saint Louis<br>
Sleep Better Since 2000</td>
<td rowspan="2"><a href="../contact_forms/free_sticker_please.html" class="shop_small" onMouseOver="MM_swapImage('shop small','','../images/logo/shop_small_1.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/logo/logo_sticker_1.jpg" alt="shop small STL" width="225" height="105" id="shop small"></a></td>
</tr>
<tr>
<td class="address"><a href="#">6431 Hampton Ave<br>
Saint Louis, MO 63109<br>
314-678-9100</a></td>
<td class="address"><a href="#">4666 McRee Ave<br>
Saint Louis, MO 63110<br>
314-772-9999</a></td>
</tr>
</table>
</div>
<div id="nav_bar_top">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">browse</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">bedroom</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Platform Beds</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Case Goods</a></li>
<li><a href="#">Platform Accessories</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">futons</a>
<ul>
<li><a href="#">wallhuggers</a></li>
<li><a href="#">premium frames</a></li>
<li><a href="#">standard frames</a></li>
<li><a href="#">economy frames</a></li>
<li><a href="#">futon mattresses</a></li>
<li><a href="#">futon accessories</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">youth</a>
<ul>
<li><a href="#">Loft Beds</a></li>
<li><a href="#">BunkBeds</a></li>
<li><a href="#">Storage & Trundle Beds</a></li>
<li><a href="#">Daybeds</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Mattresses</a>
<ul>
<li><a href="#">Pocket Coil</a></li>
<li><a href="#">Memory Foam</a></li>
<li><a href="#">Pillowtop</a></li>
<li><a href="#">Plush/Firm</a></li>
<li><a href="#">Best Value</a></li>
<li><a href="#">Double Sided</a></li>
<li><a href="#">Youth</a></li>
<li><a href="#">Misc </a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">bed rails</a>
<ul>
<li><a href="#">Basic Frames</a></li>
<li><a href="#">Hook-On </a></li>
<li><a href="#">Bolt-On</a></li>
<li><a href="#">Specialty</a></li>
</ul>
</li>
</ul>
</div>
<div id="nav_bar_left">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="#">browse</a></li>
<li><a href="#">Specials & Closeout</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">delivery</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">hours & locations</a></li>
<li><a href="#">Our manufacturers</a></li>
<li><a href="#">photo gallery</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<div id="hours"> <!-- #BeginLibraryItem "/Library/hours.lbi" --><strong class="underline">6431 Hampton</strong> <br>
Tues-Fri 11-7<br>
Sat 11-6<br>
Sun 12-3<br>
<br>
<strong class="underline">4666 McRee </strong><br>
Tues-Fri 10-7<br>
Sat 10-6<br>
Sun 12-3<!-- #EndLibraryItem --><br>
<br>
</div>
<div id="main_content"><!-- TemplateBeginEditable name="main_content" -->main_content<!-- TemplateEndEditable --><table width="800" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_futon','','../images/home_page/plantation_closed.jpg',1)" ><img src="../images/home_page/plantation_open.jpg" alt="futon open and closed" width="150" height="145" id="home_futon"></a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="footer">The BedGuy ©2000-2014<br>
Contact Us</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
page with template applied
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="main.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body onLoad="MM_preloadImages('images/logo/shop_small_1.png','images/home_page/futon_closed.jp g','images/home_page/Clove Casegoods Dark Chocolate (Metal Knobs).jpg','images/home_page/sasparilla_chocolate_trundle.jpg','images/home_page/BR12_TE _Stack_06.jpg','images/home_page/link_spring.jpg')">
<div id="outer_container">
<div id="inner_conatiner">
<div id="header">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<table width="1024" border="0" cellspacing="0" cellpadding="5">
<tr>
<td rowspan="2"><img src="images/logo/bed_guy_logo.gif" alt="bedguy logo" width="195" height="116" class="logo_images"></td>
<td colspan="2" class="sleep_better">Helping Saint Louis<br>
Sleep Better Since 2000</td>
<td rowspan="2"><a href="contact_forms/free_sticker_please.html" class="shop_small" onMouseOver="MM_swapImage('shop small','','images/logo/shop_small_1.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/logo/logo_sticker_1.jpg" alt="shop small STL" width="225" height="105" id="shop small"></a></td>
</tr>
<tr>
<td class="address"><a href="#">6431 Hampton Ave<br>
Saint Louis, MO 63109<br>
314-678-9100</a></td>
<td class="address"><a href="#">4666 McRee Ave<br>
Saint Louis, MO 63110<br>
314-772-9999</a></td>
</tr>
</table>
</div>
<div id="nav_bar_top">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">browse</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">futons</a>
<ul>
<li><a href="#">wallhuggers</a></li>
<li><a href="#">premium frames</a></li>
<li><a href="#">standard frames</a></li>
<li><a href="#">economy frames</a></li>
<li><a href="#">futon mattresses</a></li>
<li><a href="#">futon accessories</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">bedroom</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Platform Beds</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Case Goods</a></li>
<li><a href="#">Platform Accessories</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">youth</a>
<ul>
<li><a href="#">Loft Beds</a></li>
<li><a href="#">BunkBeds</a></li>
<li><a href="#">Storage & Trundle Beds</a></li>
<li><a href="#">Daybeds</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Mattresses</a>
<ul>
<li><a href="#">Pocket Coil</a></li>
<li><a href="#">Memory Foam</a></li>
<li><a href="#">Pillowtop</a></li>
<li><a href="#">Plush/Firm</a></li>
<li><a href="#">Best Value</a></li>
<li><a href="#">Double Sided</a></li>
<li><a href="#">Youth</a></li>
<li><a href="#">Misc </a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">bed rails</a>
<ul>
<li><a href="#">Basic Frames</a></li>
<li><a href="#">Hook-On </a></li>
<li><a href="#">Bolt-On</a></li>
<li><a href="#">Specialty</a></li>
</ul>
</li>
</ul>
</div>
<div id="nav_bar_left">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="#">browse</a></li>
<li><a href="#">Specials & Closeout</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">delivery</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">hours & locations</a></li>
<li><a href="#">Our manufacturers</a></li>
<li><a href="#">photo gallery</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<div id="hours"> <!-- #BeginLibraryItem "/Library/hours.lbi" --><strong class="underline">6431 Hampton</strong> <br>
Tues-Fri 11-7<br>
Sat 11-6<br>
Sun 12-3<br>
<br>
<strong class="underline">4666 McRee </strong><br>
Tues-Fri 10-7<br>
Sat 10-6<br>
Sun 12-3<!-- #EndLibraryItem --><br>
<br>
</div>
<div id="main_content"><!-- TemplateBeginEditable name="main_content" --> <!-- TemplateEndEditable -->
<table width="800" cellpadding="10">
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('futon','','images/home_page/futon_closed.jpg',1)"><img src="images/home_page/futon_open.jpg" alt="take me to futon home page" width="250" height="175" id="futon"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bedroom','','images/home_page/Clove Casegoods Dark Chocolate (Metal Knobs).jpg',1)"><img src="images/home_page/Tamarind Bed Full Cherry K-Series w Cinnamon Storage Drawers opened.jpg" alt="platform bed and casegoods" width="250" height="175" id="bedroom"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('youth','','images/home_page/sasparilla_chocolate_trundle.jpg', 1)"><img src="images/home_page/Scribbles Twin Twin Medium Oak w Drawer opened.jpg" alt="bunkbeds and trundle beds" width="250" height="175" id="youth"></a></td>
</tr>
<tr>
<td class="home_page_table_words">FUTONS</td>
<td class="home_page_table_words">BEDROOM</td>
<td class="home_page_table_words">YOUTH</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mattresses','','images/home_page/BR12_TE_Stack_06.jpg',1)"><im g src="images/home_page/BR13_Pyramid_Stack_R.jpg" alt="mattresses" width="250" height="175" id="mattresses"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bedframes','','images/home_page/link_spring.jpg',1)"><img src="images/home_page/classic_frame.jpg" alt="bedframes" width="250" height="175" id="bedframes"></a></td>
<td><img src="images/home_page/futon_closed.jpg" width="250" height="175"></td>
</tr>
<tr>
<td class="home_page_table_words">MATTRESSES</td>
<td class="home_page_table_words">BED FRAMES</td>
<td class="home_page_table_words">SPECIALTY AND MISC</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="footer">The BedGuy ©2000-2014<br>
Contact Us</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Go to File > New page from template.
Select your Template.dwt file from the list and hit Create.
Save your child page.
Nancy O. -
Reselecting main content tab with tabbed panels
Hi all,
Using Tabbed Panels, once a user selects a panel that tab
remains "selected" until somewhere else in the main content window
is clicked. What I mean by selected is that it has an ugly dotted
line around it. Is there anyway to get it so that after a user
clicks a new tab, the main content window is selected again so that
the dotted selection line disappears?
Thanks,
ErinErin -
I noticed that too this past week on a project_
I'm running thru Firefox 2.x on both Mac and PC also IE 6 and
Safari_
It seems to be more on an issue with the browsers than it
does with something either in the Spry code or Dreamweaver itself_
In Firefox - goto yahoo.com and in the little "in the news"
tab there is a list of 6 or 7 lines of text [news headlines] Click
and drag to an empty spot on the page [don;t go off the window]
then let go and you'll see a "border box" around the text link you
just messed with_ It's this round of browsers doing it_
I was messing with some image slices and custom area maps
custom this weekend this weekend and that got my attention 'cause
the "outline" of the area map kept showing up when I exported to
test in a browser and tried them all - did the same thing
everywhere_ -
How to create margin in Main Content section?
Howdy folks, I have created several pargraphs in the main content section. At the left of the page is a sidebar. The text in the main content section touches the left side of that section, and I want to create a margin to keep the text from touching the left side of that section. Thanks.
Try this:
#mainContent * {
padding: 0 12px 0 12px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Background displaying between main content and footer
Hi guys, I have a bit of a strange one to ask, with a discrepancy between what I am seeing on my website (online), compared to viewing my pages in Dreamweaver. OK, here goes.. online, the footer shows up fine, being directly underneath the main content (with nothing displaying between the footer and the main content) - however when I look at the same pages in Dreamweaver (CC), it shows a very large amount of the purplish background situated directly between the main content and the footer, and taking up an area around 4 times the height of the main content of the page (which basically makes the page 4 times bigger than it needs to be, in Dreamweaver). I hope that description makes sense - so basically (as I scroll down the page in Dreamweaver), firstly I have the main content (taking up 20% of the total height of the page), then below that, the mystical blank area of background color (taking up maybe around 79% of the total height), and then below that, right at the bottom, the footer (say, 1% of the total height). Yet when I view the web pages online, the footer is sitting snugly below the main content, exactly where it is meant to be - which I guess is the important thing, but I am worried that Google will see the issue as some kind of page error, so I would prefer to fix it if I can. Here is a typical page where the issue exists - http://www.mindtraining.net/dreamweaver/motivational-info/index.php I have a feeling it might have something to do with the vertical blue strip I have on the right hand side of each page, as the only page where the issue doesn't exist is the homepage at http://www.mindtraining.net/dreamweaver - which doesn't have the blue strip. Any thoughts would be greatly appreciated. Many thanks, Craig T
Both links are going to the same page. So they are identical.
<I am worried that Google will see the issue as some kind of page error>
Google robots don't see CSS or JavaScript. They index sites based on your HTML content.
Unfortunately, you do have a significant number of code validation errors which need attention to avoid x-browser rendering problems.
[Invalid] Markup Validation of http://www.mindtraining.net/dreamweaver/motivational-info/index.php - W3C Mark…
Do not use spaces in folder & file names. On the web it creates problems b/c spaces are converted to %20. Use underscores or hyphens but no spaces or special characters.
Change all instances of this:
Metamorphic Dreamweaver Template_files
to this:
Metamorphic-Dreamweaver-Template_files
or this:
Metamorphic_Dreamweaver_Template_files
You also have some orphaned HTML tags.
Nancy O.
Maybe you are looking for
-
ICal day view not in current month
Looking at my calendar in day view right now, the right hand column is clearly headed Thursday, 7 November, 2013, the left hand column is headed Thursday 7 January, 2013. Have checked all of the obvious settings and they seem fine. Any ideas?
-
X220 - upgrade to Windows 8.1 after latest restart - some restarts, after some restarts restart and finaly asking about store fotos to skydrive - display stayed clear, nothing on display... after one hour I decide to switch it off. Windows 8.0
-
Can I install Snow Leopard over Lion to install old software after hard drive crashed?
My hard drive crashed and I lost everything. I have a new hard drive, but when the repair shop installed my operating system, they installed Lion and I no longer have my prior updates. My computer had been updated a few times. I have a lot of soft
-
I've been noticing as of late, that whenever I boot up my iMac, it seems stall and I get a persistent white screen. After a minute or two, the wallpaper comes up along with the icon and the dock. It seems as if the Finder is having some issues loadin
-
DEAR ALL I want one report of import & domestic purchase based on slpite valuation i.e. How much import & domestic purchase of same material on different valuation type is there any std report in SAP such as S_ALR_87012332