Text Moving Down in Live View
I've been working in Dreamweaver on a project and I've run into a problem with some text. Every time I go into live view, it moves down a few pixels, but in non-live view it appears correctly. I've tested it in Chrome and Firefox, too, and the text still moves down. I can't seem to get it to be still.
Here's my code -
HTML:
<div id="contactBar">
<div id="contactText">
<h2>Contact us today at 417-522-4467</h2>
</div>
</div>
CSS:
#contactBar {
width:1024px;
height:77px;
background-color:#004683;
position:absolute;
margin-top:545px;
color:#FFF;
text-align:center;
#contactText {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
#contactText h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:38px;
font-weight:normal;
Can someone please tell me why this is happening and how to fix it? I'd appreciate it.
Because all headers have margins, paddings and even "transparent" borders. You can reset these by putting the following CSS code at the top of your CSS file after any body and html css you might have:
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
The above code simply resets all "possible" headings in your page to zero so you can now start from base zero.
Hope this helps.
Similar Messages
-
Why won't my text align right in Live View or Browsers?
I created a class called .reviewer so the the name of the reviewer would align right while the the review itself remains aligned to the left. I applied the class to the reviewer's name and in design view, it looks perfect. But in Live view and when I preview in a browser, the text remains aligned left. I put this class in two external style sheets, main.css and mainReviews.css.
The page in question is: www.jillgrovemezzo.com/reviews.htm
To be more specific, the text I want to align right under the first review is "Lawrence A. Johnson, Chicago Classical Review"
ReginaAdd display: block; to your css class .reviewer (as shown below).
.reviewer {
text-align: right;
display: block; -
How do I use Dreamweaver CC 2014.1 Live View to copy complex formatted text into web page?
Since Design View has been removed from Fluid Grid Layouts, and could be removed completely in next upgrade, I cannot use Live View to place complex text into my web pages.
Our business requires the listing of complex job descriptions on our web pages. Design View worked fine, Live View does not. Both examples are noted below.
Using Design View the web page rendered this way:
Research & Analytics Director
Position# 2469
Location: Midwest
Education Requirements: MS degree in Mathematics, Statistics, Economics, Engineering, Actuarial Science or related field or equivalent designation, such as FCAS.
Other Requirements: Include:
Job Competencies:
Achieve Results.
Be Accountable.
Lead Change.
Lead Corp Vision & Strategy.
Lead People.
Maximize Customer Experience.
Specialized Knowledge and Skills Requirements:
Demonstrated ability to develop strategic partnerships.
Demonstrated ability to identify potential issues, and to proactively work to the mitigation of those issues.
Demonstrated experience communicating business implications of complex data relationships and results of statistical models to multiple business partners.
Demonstrated experience formulating, approaching, and solving problems in massive, complex datasets.
Demonstrated experience in public speaking and use of appropriate presentation skills.
Demonstrated experience interfacing with business clients and driving solution discussions with both IT and business stakeholders.
Demonstrated experience performing advanced statistical analysis, including generalized linear models, decision trees, neural networks, etc., to discover business insights and develop predictive models.
Demonstrated experience with statistical and modeling software tools, such as SAS or R.
Demonstrated management or leadership experience.
Solid knowledge and understanding of mathematical modeling and research.
Salary Range: $146,300 to $243,800+
Description: This position is responsible for oversight and strategic direction of advanced analytics, including predictive modeling, that drive business performance consistent with company goals and objectives. Works with internal business partners to understand and validate scope of advanced analytics projects and directs projects teams to support those projects. Collaborates within the division and cross-divisionally to develop and integrate statistical models into various processes. Oversees research of new and innovative analytic tools and techniques. Monitors industry trends in analytics and investigates new concepts, ideas, and data sources. Primary accountabilities include:
Advanced Analytics Oversight (40%):
Provides oversight and direction for the design, development, and evaluation of predictive models and advanced algorithms that lead to business solutions.
Directs the most complex and vital analytics work critical to the organization.
Oversees advanced exploratory analytics that produce a variety of business solutions.
Conducts peer review on technical aspects of projects.
Partners with business areas (Commercial Lab, EDM, IS, etc.) on data innovation.
Portfolio Strategy and Management (25%):
Collaborates with Strategic Data & Analytics Vice President as well as business partners internal and external to the division to develop and execute advanced analytics strategy and project portfolio.
Leverages business acumen and domain expertise in directing advanced analytics strategy and application.
Aligns plans to divisional and corporate objectives/goals and integrates within the corporate planning cycle.
Monitors and analyzes advanced analytics resources. Assesses needs and appropriately allocates resources to priorities and initiatives.
Works with divisional management to improve work processes that impact work environment and divisional resources.
Provides overall portfolio/project management oversight and direction for a variety of advanced analytics project. Oversees measurement, monitoring and reporting of project progress and resource utilization. Manages project resources to ensure timely delivery of projects consistent with divisional goals and objectives.
Coordinates with business partners (Analytics Strategy, etc.) on knowledge management and participates in business area meetings. Maintains holistic view of the business. Ensures rapid delivery and execution of insights derived from data analytics into the organization.
Analytic Tools and Techniques Research Oversight (15%):
Sets the vision for the use of new and innovative tools and technology.
Maintains and fosters an industry awareness of new developments in analytics techniques and tools, and ensures quick execution in their use within the department.
Interfaces with Enterprise Data Management (EDM) and Information Services (IS) on evolving technological and data needs and requirements.
Strategies Linked to the Division's Business Goals/Results (10%):
Establishes, communicates, and implements departmental plans, objectives, and strategies.
Participates as a member of the Management Team.
Maintains an active awareness of our Client's business environments, corporate culture, and structure to support key decision-making.
Management/Leadership for Department or Unit (10%):
Manages direct reports, systems, and projects to achieve department/unit goals in accordance with Company policies and practices.
Prepares and analyzes department/unit plans and reports.
Provides leadership by exhibiting influence and expertise, thus affecting the results of the operating area.
Creates an effective work environment by developing a common vision, setting clear objectives, expecting teamwork, recognizing outstanding performance, and maintaining open communications.
Develops staff through coaching, providing performance feedback, providing effective performance assessments, and establishing performance & development plans.
Using Live View the web page rendered this way:
Research & Analytics Director Position# 2469 Location: Midwest Education Requirements: MS degree in Mathematics, Statistics, Economics, Engineering, Actuarial Science or related field or equivalent designation, such as FCAS. Other Requirements: Include: • Job Competencies: o Achieve Results. o Be Accountable. o Lead Change. o Lead Corp Vision & Strategy. o Lead People. o Maximize Customer Experience. • Specialized Knowledge and Skills Requirements: o Demonstrated ability to develop strategic partnerships. o Demonstrated ability to identify potential issues, and to proactively work to the mitigation of those issues. o Demonstrated experience communicating business implications of complex data relationships and results of statistical models to multiple business partners. o Demonstrated experience formulating, approaching, and solving problems in massive, complex datasets. o Demonstrated experience in public speaking and use of appropriate presentation skills. o Demonstrated experience interfacing with business clients and driving solution discussions with both IT and business stakeholders. o Demonstrated experience performing advanced statistical analysis, including generalized linear models, decision trees, neural networks, etc., to discover business insights and develop predictive models. o Demonstrated experience with statistical and modeling software tools, such as SAS or R. o Demonstrated management or leadership experience. o Solid knowledge and understanding of mathematical modeling and research. Salary Range: $146,300 to $243,800+ Description: This position is responsible for oversight and strategic direction of advanced analytics, including predictive modeling, that drive business performance consistent with company goals and objectives. Works with internal business partners to understand and validate scope of advanced analytics projects and directs projects teams to support those projects. Collaborates within the division and cross-divisionally to develop and integrate statistical models into various processes. Oversees research of new and innovative analytic tools and techniques. Monitors industry trends in analytics and investigates new concepts, ideas, and data sources. Primary accountabilities include: • Advanced Analytics Oversight (40%): o Provides oversight and direction for the design, development, and evaluation of predictive models and advanced algorithms that lead to business solutions. o Directs the most complex and vital analytics work critical to the organization. o Oversees advanced exploratory analytics that produce a variety of business solutions. o Conducts peer review on technical aspects of projects. o Partners with business areas (Commercial Lab, EDM, IS, etc.) on data innovation. • Portfolio Strategy and Management (25%): o Collaborates with Strategic Data & Analytics Vice President as well as business partners internal and external to the division to develop and execute advanced analytics strategy and project portfolio. o Leverages business acumen and domain expertise in directing advanced analytics strategy and application. o Aligns plans to divisional and corporate objectives/goals and integrates within the corporate planning cycle. o Monitors and analyzes advanced analytics resources. Assesses needs and appropriately allocates resources to priorities and initiatives. o Works with divisional management to improve work processes that impact work environment and divisional resources. o Provides overall portfolio/project management oversight and direction for a variety of advanced analytics project. Oversees measurement, monitoring and reporting of project progress and resource utilization. Manages project resources to ensure timely delivery of projects consistent with divisional goals and objectives. o Coordinates with business partners (Analytics Strategy, etc.) on knowledge management and participates in business area meetings. Maintains holistic view of the business. Ensures rapid delivery and execution of insights derived from data analytics into the organization. • Analytic Tools and Techniques Research Oversight (15%): o Sets the vision for the use of new and innovative tools and technology. o Maintains and fosters an industry awareness of new developments in analytics techniques and tools, and ensures quick execution in their use within the department. o Interfaces with Enterprise Data Management (EDM) and Information Services (IS) on evolving technological and data needs and requirements. • Strategies Linked to the Division's Business Goals/Results (10%): o Establishes, communicates, and implements departmental plans, objectives, and strategies. o Participates as a member of the Management Team. o Maintains an active awareness of our Client's business environments, corporate culture, and structure to support key decision-making. • Management/Leadership for Department or Unit (10%): o Manages direct reports, systems, and projects to achieve department/unit goals in accordance with Company policies and practices. o Prepares and analyzes department/unit plans and reports. o Provides leadership by exhibiting influence and expertise, thus affecting the results of the operating area. o Creates an effective work environment by developing a common vision, setting clear objectives, expecting teamwork, recognizing outstanding performance, and maintaining open communications. o Develops staff through coaching, providing performance feedback, providing effective performance assessments, and establishing performance & development plans.
Obviously, as seen above, I'm doing something wrong or Live View does not do all the functions that Design View use to do. I realize I can still access Design View in non-Fluid Grid Layout documents and that is my current work-around. I copy from my Word file into Design View available in non-Fluid, then copy that code into my Fluid Grid Layout document, not real efficient use of my time. And, even that work-around may not be available after the next upgrade.Hans thank you for your reply and attention to this matter. Moreover, with your steeped expertise I do not, in any fashion, intend to be flippant or capricious.
However, I do not believe the reply is on point since I'm not discussing the insertion of an HTML tag/element; but rather, the placing of complex formatted text into my various web pages.
Design View and 2014.1 Live View seem to serve different functions. That is, Design View, for us, serves as a highly sophisticated HTML5 code generator that allows us to properly display complex formatted text that originally is created as a Word docx file. As I noted in my original post, the complex formatted text from the Word file is then pasted into Design View and thus properly renders on the web page. I invite you to try this yourself. Simply copy my properly formatted text in my original post (that can be found at "Using Design View the web page rendered this way:") to a Word file, and it will retain the complex formatting, then copy that Word file text to both Design View and 2014.1 Live View files. Please apprise me of your results.
Discussion has been had in at least two separate threads on the Design View disappearance in Fluid Grid. In https://forums.adobe.com/thread/1597260 staff member Lalita wrote "It would be helpful for us if you list the issues you are seeing with fluid grid live view editing." And in https://forums.adobe.com/message/6807088#6807088 staff member Subhadeep wrote "If you can list down the workflows you are trying while editing in Live View & the issues you are facing in doing so, it will help us understand what is amiss & suggest alternative workflows to do the same." I believe I've pointed out issues when attempting to use Live View for functions or work flow that customarily had been done in Design View.
Being a CC subscriber, if someone can provide me with a workflow using other additional Adobe products to get my complex formatted text from Word ultimately to my Dreamweaver web page, be it an image insert or whatever, I would take the suggestions.
The difference in the coding of my example in my original post is as follows.
Code when using Design View is:
<p><strong>Research & Analytics Director</strong><br>
<strong>Position# 2469</strong><br>
<strong>Location:</strong> Midwest<br>
<strong>Education Requirements:</strong> MS degree in Mathematics, Statistics, Economics, Engineering, Actuarial Science or related field or equivalent designation, such as FCAS.<br>
<strong>Other Requirements:</strong> Include:</p>
<ul type="disc">
<li>Job Competencies:</li>
<ul type="circle">
<li>Achieve Results.</li>
<li>Be Accountable.</li>
<li>Lead Change.</li>
<li>Lead Corp Vision & Strategy.</li>
<li>Lead People.</li>
<li>Maximize Customer Experience.</li>
</ul>
<li>Specialized Knowledge and Skills Requirements:</li>
<ul type="circle">
<li>Demonstrated ability to develop strategic partnerships.</li>
<li>Demonstrated ability to identify potential issues, and to proactively work to the mitigation of those issues.</li>
<li>Demonstrated experience communicating business implications of complex data relationships and results of statistical models to multiple business partners.</li>
<li>Demonstrated experience formulating, approaching, and solving problems in massive, complex datasets.</li>
<li>Demonstrated experience in public speaking and use of appropriate presentation skills.</li>
<li>Demonstrated experience interfacing with business clients and driving solution discussions with both IT and business stakeholders.</li>
<li>Demonstrated experience performing advanced statistical analysis, including generalized linear models, decision trees, neural networks, etc., to discover business insights and develop predictive models.</li>
<li>Demonstrated experience with statistical and modeling software tools, such as SAS or R.</li>
<li>Demonstrated management or leadership experience.</li>
<li>Solid knowledge and understanding of mathematical modeling and research.</li>
</ul>
</ul>
<p><strong>Salary Range:</strong> $146,300 to $243,800+<br>
<strong>Description:</strong> This position is responsible for oversight and strategic direction of advanced analytics, including predictive modeling, that drive business performance consistent with company goals and objectives. Works with internal business partners to understand and validate scope of advanced analytics projects and directs projects teams to support those projects. Collaborates within the division and cross-divisionally to develop and integrate statistical models into various processes. Oversees research of new and innovative analytic tools and techniques. Monitors industry trends in analytics and investigates new concepts, ideas, and data sources. Primary accountabilities include:</p>
<ul type="disc">
<li>Advanced Analytics Oversight (40%):</li>
<ul type="circle">
<li>Provides oversight and direction for the design, development, and evaluation of predictive models and advanced algorithms that lead to business solutions.</li>
<li>Directs the most complex and vital analytics work critical to the organization.</li>
<li>Oversees advanced exploratory analytics that produce a variety of business solutions.</li>
<li>Conducts peer review on technical aspects of projects.</li>
<li>Partners with business areas (Commercial Lab, EDM, IS, etc.) on data innovation.</li>
</ul>
<li>Portfolio Strategy and Management (25%):</li>
<ul type="circle">
<li>Collaborates with Strategic Data & Analytics Vice President as well as business partners internal and external to the division to develop and execute advanced analytics strategy and project portfolio.</li>
<li>Leverages business acumen and domain expertise in directing advanced analytics strategy and application.</li>
<li>Aligns plans to divisional and corporate objectives/goals and integrates within the corporate planning cycle.</li>
<li>Monitors and analyzes advanced analytics resources. Assesses needs and appropriately allocates resources to priorities and initiatives.</li>
<li>Works with divisional management to improve work processes that impact work environment and divisional resources.</li>
<li>Provides overall portfolio/project management oversight and direction for a variety of advanced analytics project. Oversees measurement, monitoring and reporting of project progress and resource utilization. Manages project resources to ensure timely delivery of projects consistent with divisional goals and objectives.</li>
<li>Coordinates with business partners (Analytics Strategy, etc.) on knowledge management and participates in business area meetings. Maintains holistic view of the business. Ensures rapid delivery and execution of insights derived from data analytics into the organization.</li>
</ul>
<li>Analytic Tools and Techniques Research Oversight (15%):</li>
<ul type="circle">
<li>Sets the vision for the use of new and innovative tools and technology.</li>
<li>Maintains and fosters an industry awareness of new developments in analytics techniques and tools, and ensures quick execution in their use within the department.</li>
<li>Interfaces with Enterprise Data Management (EDM) and Information Services (IS) on evolving technological and data needs and requirements.</li>
</ul>
<li>Strategies Linked to the Division's Business Goals/Results (10%):</li>
<ul type="circle">
<li>Establishes, communicates, and implements departmental plans, objectives, and strategies.</li>
<li>Participates as a member of the Management Team.</li>
<li>Maintains an active awareness of our Client's business environments, corporate culture, and structure to support key decision-making.</li>
</ul>
<li>Management/Leadership for Department or Unit (10%):</li>
<ul type="circle">
<li>Manages direct reports, systems, and projects to achieve department/unit goals in accordance with Company policies and practices.</li>
<li>Prepares and analyzes department/unit plans and reports.</li>
<li>Provides leadership by exhibiting influence and expertise, thus affecting the results of the operating area.</li>
<li>Creates an effective work environment by developing a common vision, setting clear objectives, expecting teamwork, recognizing outstanding performance, and maintaining open communications.</li>
<li>Develops staff through coaching, providing performance feedback, providing effective performance assessments, and establishing performance & development plans.</li>
</ul>
</ul>
Code when using Live View is:
<div id="liveview" class="fluid">Research & Analytics Director Position# 2469 Location: Midwest Education Requirements: MS degree in Mathematics, Statistics, Economics, Engineering, Actuarial Science or related field or equivalent designation, such as FCAS. Other Requirements: Include: • Job Competencies: o Achieve Results. o Be Accountable. o Lead Change. o Lead Corp Vision & Strategy. o Lead People. o Maximize Customer Experience. • Specialized Knowledge and Skills Requirements: o Demonstrated ability to develop strategic partnerships. o Demonstrated ability to identify potential issues, and to proactively work to the mitigation of those issues. o Demonstrated experience communicating business implications of complex data relationships and results of statistical models to multiple business partners. o Demonstrated experience formulating, approaching, and solving problems in massive, complex datasets. o Demonstrated experience in public speaking and use of appropriate presentation skills. o Demonstrated experience interfacing with business clients and driving solution discussions with both IT and business stakeholders. o Demonstrated experience performing advanced statistical analysis, including generalized linear models, decision trees, neural networks, etc., to discover business insights and develop predictive models. o Demonstrated experience with statistical and modeling software tools, such as SAS or R. o Demonstrated management or leadership experience. o Solid knowledge and understanding of mathematical modeling and research. Salary Range: $146,300 to $243,800+ Description: This position is responsible for oversight and strategic direction of advanced analytics, including predictive modeling, that drive business performance consistent with company goals and objectives. Works with internal business partners to understand and validate scope of advanced analytics projects and directs projects teams to support those projects. Collaborates within the division and cross-divisionally to develop and integrate statistical models into various processes. Oversees research of new and innovative analytic tools and techniques. Monitors industry trends in analytics and investigates new concepts, ideas, and data sources. Primary accountabilities include: • Advanced Analytics Oversight (40%): o Provides oversight and direction for the design, development, and evaluation of predictive models and advanced algorithms that lead to business solutions. o Directs the most complex and vital analytics work critical to the organization. o Oversees advanced exploratory analytics that produce a variety of business solutions. o Conducts peer review on technical aspects of projects. o Partners with business areas (Commercial Lab, EDM, IS, etc.) on data innovation. • Portfolio Strategy and Management (25%): o Collaborates with Strategic Data & Analytics Vice President as well as business partners internal and external to the division to develop and execute advanced analytics strategy and project portfolio. o Leverages business acumen and domain expertise in directing advanced analytics strategy and application. o Aligns plans to divisional and corporate objectives/goals and integrates within the corporate planning cycle. o Monitors and analyzes advanced analytics resources. Assesses needs and appropriately allocates resources to priorities and initiatives. o Works with divisional management to improve work processes that impact work environment and divisional resources. o Provides overall portfolio/project management oversight and direction for a variety of advanced analytics project. Oversees measurement, monitoring and reporting of project progress and resource utilization. Manages project resources to ensure timely delivery of projects consistent with divisional goals and objectives. o Coordinates with business partners (Analytics Strategy, etc.) on knowledge management and participates in business area meetings. Maintains holistic view of the business. Ensures rapid delivery and execution of insights derived from data analytics into the organization. • Analytic Tools and Techniques Research Oversight (15%): o Sets the vision for the use of new and innovative tools and technology. o Maintains and fosters an industry awareness of new developments in analytics techniques and tools, and ensures quick execution in their use within the department. o Interfaces with Enterprise Data Management (EDM) and Information Services (IS) on evolving technological and data needs and requirements. • Strategies Linked to the Division's Business Goals/Results (10%): o Establishes, communicates, and implements departmental plans, objectives, and strategies. o Participates as a member of the Management Team. o Maintains an active awareness of our Client's business environments, corporate culture, and structure to support key decision-making. • Management/Leadership for Department or Unit (10%): o Manages direct reports, systems, and projects to achieve department/unit goals in accordance with Company policies and practices. o Prepares and analyzes department/unit plans and reports. o Provides leadership by exhibiting influence and expertise, thus affecting the results of the operating area. o Creates an effective work environment by developing a common vision, setting clear objectives, expecting teamwork, recognizing outstanding performance, and maintaining open communications. o Develops staff through coaching, providing performance feedback, providing effective performance assessments, and establishing performance & development plans. </div>
It is readily apparent that Design View is a much needed code generator in the Dreamweaver product. Live View serves completely other, and needed, purposes. Therefore, I still, after all the forum discussions, do not understand why Design View has been removed from Fluid Grid.
Again Hans thank you for your reply. But unless I'm missing something, citation to the links you provided does not solve my problem. And that problem is this: If Design View is on its way out and thus will be completely removed from Dreamweaver at some point, then how do I provide my information (i.e. complex executive job descriptions) on my website?
Apparently a vote is taking place https://forums.adobe.com/ideas/3922 on the issue of placing Design View back into Fluid Grid. I do not understand why the need for two rather disjunctive functionalities are at the mercy of the democratic process. These are matters of engineering principles not "town hall gatherings". -
Div shifting down page in live view
I'm trying to create a website for a project I'm doing.I'm having a problem in live view where I the div with the id "imageholder" keeps shifting down the page. It looks fine in the editor but the browser and live view not so much. I want it to line up with the top div, not the bottom one.
Another problem I'm having is that I can't adjust the footers margin very well. it's not taking into account the div's directly above it. I've included a screenshot of the page as it hasn't been uploaded online yet. Thanks
Here is the code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="CSS/Project.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #E0EEEE;
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="title">Limerick Running Club</h1>
<h2 class="subhead"><strong>L.R.C</strong></h2>
</header>
<br/>
<nav>
<nav id="nav_centre">
<ul>
<li><a href="#">Home</a></li>
<li></li>
<li><a href="#">History</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul><br/>
</nav>
</nav>
<section>
<h2 >History</h2>
<article></article>
<article class="mainpara">
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
<article id="testimonial"><h3>Member Testimonials</h3><h3 class="Name">John Byrne</h3>
<p>Since joining the LRC my health and fitness has improved greatly. I recommended the club to everyone.</p>
<h3 class="Name">Mary Smith</h3>
<p>I'm delighted I joined the LRC. I feel much fitter and healthier since joining and there is a great sense of community surrounding the club.</p>
<h3 class="Name">Tom Ryan</h3>
<p>Really enjoying my runs with the lRC. I'd recommend joining to anyone.</p>
</article>
</section>
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<footer><span id="copyright">©2015 Limerick Running Club</span></footer>
</div>
</body>
</html>
CSS:
@charset "utf-8";
html{
background-color:#E0EEEE;
header{
width:100%;
nav {
width 100%;
height 55px;
#nav_centre {
text-align: center;
width: 1080px;
margin-right: auto;
margin-left: auto;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-bottom: 15px;
padding-top: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: small;
background-color:#4683ea;
nav ul{
list-style:none;
nav a{
display:inline;
float:left;
text-decoration:none;
font-weight:bold;
padding-top: 5px;
padding-bottom:5px;
padding-right: 45px;
padding-left: 45px;
height: 20px;
color:#CCC;
header {
text-align: center;
#container {
width: 1080px;
margin-left: auto;
margin-right: auto;
footer {
margin-top: 600px;
text-align: center;
height: 50px;
clear: both;
padding-top: 25px;
#copyright{
color:#a6a6a6;
article {
margin-top: 20px;
width: 650px;
margin-left: 5px;
margin-right: 0px;
#imageholder {
width: 360px;
float: right;
clear: none;
margin-top: 20px;
margin-right: 5px;
padding-right: 5px;
.mainpara {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
width: 600px;
section {
margin-top: 75px;
left: 5px;
h1{
color:#4683ea;
#title{
font-weight: bold;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color:#FFA500;
.subhead{
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
h2{
letter-spacing: 2px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#testimonial {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
padding-right: 5px;
width: 600px;
clear: both;
.Name {
color:#FFA500;Try this -
<article class="mainpara">
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
Move the imageholder div so that it is the first child of the "mainpara" article.
Also, you probably want "...what they're saying below" in that last paragraph above. Finally, why do you have a nested <nav> tag in your code? -
Text Fields Not Showing in Design or Live View
Hello Everyone,
I have run into a problem trying to create a simple contact form through Dreamweaver CS6. I have two text fields for Name & Email, and 1 text area for Comments. The issue I am running into is that the text fields are not showing in Design or Live view. I have set-up all variables required for the server for the form to work... but that should not have any effect on the text field showing... I tried uploading my contact page with the same result of no text fields showing...
What is really laughable is that the "text area" I placed in my form for Comments shows up in Design & Live view just fine. I am thinking that I am missing something, but just do not know what exactly. The form is styled through CSS.
Here is the form code:
<div id="CRDForm">
<form action="http://www.sweetformimi.com/formmail/formmail.php" method="post" enctype="application/x-www-form-urlencoded" name="contact" target="_self" id="contact">
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER">
<input type="hidden" name="recipients" value="[email protected]" />
<input type="hidden" name="subject" value="Contact Form" />
<label><p>Your Full Name
<input name="Name" type="text" id="Name" size="40" /></p>
</label>
<label><p>Email
<input name="email" type="text" accesskey="2" tabindex="2" title="Email" value="Email"></p>
</label>
<label>Comments<br />
<textarea name="comments" cols="40" rows="10" accesskey="3" tabindex="3" title="Comments"></textarea>
</label>
<input name="submit" type="submit" accesskey="4" tabindex="4" title="submit" value="submit">
</form>
</div>
Are there other variables I should be thinking about in the rest of my site? I am using a fluid grid layout. I have CSS for desktop, tablet, and phone devices. I also have a primary CSS file that imports all three. The sites structure was done by using <header>, <article>, <footer>, and of course <div> tags.
Has anyone ever experienced the "text fields" not showing up before? Is it a simple fix as reinstalling Dreamweaver CS6? Finally, another thing I should mention is that I did have a previous version of Dreamweaver on my comp, which was CS3. I did not uninstall that before installing the newer version. I assumed (and I could be wrong here) that it would automatically replace the older version.
I apoligize for it being long winded, but I am looking for some help on this issue...
Thank YouHey thank you osgood for the reply!
When I look at code for long hours it sort of blurs together, and I miss things... I think that happens to the most of us
Ya I found what was blocking my text fields in my desktop.css
I primarily work through code view, and currently working on quite a few projects kind of makes your eyes miss the small errors.
Thanks again! -
When I'm adding white text it doesn't show up as the background input panel is white, and I keep having to go into Live view to see the paragraph spacings etc. Is there a way round this, other than changing the text colour in CSS to, for instance, black, and then changing it back before I upload the page?
Hi, and thanks, but it's my fault, I think I'm describing it wrong!
I've attached two screenshots from that area of the screen, one with the white text on the white background (showing as invisible) and the other where I've highlighted the text so you can see where it is. The background .jpg isn't a solid colour, it's a pattern, and if I added an equivalent pattern to the text area div, it wouldn't line up properly on all sreen resolutions, so that's why I gave that div a transparent background. When I go into Live view, the page displays perfectly, but in Design view I can't see to make amendments to the paragraphs etc. -
I'm trying to print onto mailing labels, but it won't line up correctly. It looks right on the template and the 1st row even prints correctly. The text keeps moving down a line on each row of labels, so the rest of it will not print correctly.
There are several ways you can go about this.
1. Most labels come with Word templates or downloadable Word templates. Simply open those in Pages.
2. Make a table with extra cells for the thin spaces between the labels and skinny those down to match the spaces. ie You have big fat cells for the actually labels and thin narrow empty ones for the gaps.
3. Make a floating Text box the size of one label, format with dummy text just the way you like it.
+Menu > Format > Advanced > Define as Placeholder text+
You can now drag and drop snippets of text, the addresses etc onto those and it will replace them matching the style of the existing text.
You duplicate that text box into position of the other labels by clicking on it with the command kety held down, then drag copy it up or across with the option and shift keys held down. Fine tune the positions with:
+Inspector > Metrics > Position+
Peter -
Div Image not showing in Live View
Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!
I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/pavemend_website1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
</style>
<!-- InstanceEndEditable -->
<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
background-repeat: no-repeat;
height: 78px;
width: 196px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><!-- InstanceBeginEditable name="HeaderLogo" --><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
<div id="resources"></div>
<!-- InstanceBeginEditable name="Header" -->
<div class="headerResources"></div>
<!-- InstanceEndEditable -->
<nav>
<ul id="menu">
<li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
<ul>
<li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
<li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
<li><a href="dotline_product_page.html">DOTLine™</a></li>
<li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
<li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
<li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
<li><a href="IA_product_page.html">Instant Asphalt™</a></li>
<li><a href="kemrok_product_page.html">KEMROK™</a></li>
<li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
<li><a href="firerok_product_page.html">FIREROK™</a></li>
<li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
<li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
</ul>
</li>
<li><a href="resources_page.html">RESOURCES</a></li>
<li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
<li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
</section>
<!-- InstanceBeginEditable name="Sidebar" -->
<div class="sidebarleftlong">
<nav>
<ul>
<li><a href="#">PAVEMEND PRODUCT <br> BROCHURE</a></li>
<p><li><a href="#">KEEP TRAFFIC MOVING <br> BROCHURE</a></li></p>
<p><li><a href="#">CASE STUDIES</a></li></p>
<p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
<p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
<p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
<p><li><a href="#">DOTLINE FIELD <br> APPICATION VIDEO</a></li></p>
</ul>
</nav>
<div id=""></div>
<!-- end .sidebar1 --> </div>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Content" -->
<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
<section>
<p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
<p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
</section>
<!-- end .content --></div>
<!-- InstanceEndEditable -->
<div class="footer"><!-- InstanceBeginEditable name="Footer Logo" --><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" /><!-- InstanceEndEditable -->
<table width="510" summary="footer material">
<tr>
<td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
<td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
<td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
</tr>
</table>
<div id="apDivPFT1"></div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
clear: left;
position: relative;
width: 100%; /**adjust width as needed**/
margin: 0;
padding: 0;
background-image: url(_images/topnavpanel.png);
color: #FFFFFF;
#menu ul {
margin: 0;
padding: 0
#menu li {
list-style: none;
float: left;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
/**top level menu**/
#menu li a {
display: inline-block;
text-decoration: none;
/* adjust width as needed or use auto */
width: 13em;
padding: 8px;
font-weight: bold;
line-height: 12px;
color: #000;
border-top-style: none;
font-size: 90%;
margin-bottom: 0;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
color: #FFF;
width: 13em;
/**sub-menu**/
#menu li ul {
display: none;
text-align: center;
padding: 0;
margin-bottom: 0;
margin-left: 40px;
margin-right: 0;
margin-top: 0;
border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
display: block;
position: absolute;
z-index:1000;
padding: 0;
#menu li:hover li, #menu li.hover li {
float: none;
background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
width: 14em; /* adjust width as needed or use auto */
margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
color: #FFF;
background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
position: absolute;
width: 190px;
height: 180px;
z-index: 2;
background-image: url(_images/WomanPhone.png);
background-position: 10px;
background-repeat: no-repeat;
margin-top: 240px;
#apDivSustainability {
position: absolute;
width: 200px;
height: 420px;
z-index: 3;
background-image: url(_images/sustainabilitySB2.png);
background-repeat: no-repeat;
#apDiv10 {
position: absolute;
width: 75px;
height: 73px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
float: right;
margin-left: 650px;
margin-top: -110px;
#apDiv9 {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/slphoto1.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivslqphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/slqphoto.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivdotlinephoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/dotlinephoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv15photo {
position: absolute;
width: 200px;
height: 179px;
z-index: 3;
background-image: url(_images/15.0_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivTRphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/TR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivAWphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/AWPhoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivASphoto {
position: absolute;
width: 200px;
height: 134px;
z-index: 3;
background-image: url(_images/ASphoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivVRphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/VR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivIAphoto {
position: absolute;
width: 200px;
height: 162px;
z-index: 3;
background-image: url(_images/IA_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/KEMROK%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivFirerokphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/Firerok_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivtechsupportphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/techsupport_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokVRphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/Kemrok%20VR%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv8 {
position: absolute;
width: 180px;
height: 167px;
z-index: 2;
background-image: url(_images/SLbktandbag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 520px;
#apDivslq {
position: absolute;
width: 80px;
height: 105px;
z-index: 2;
background-image: url(_images/SLQbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -125px;
margin-left: 515px;
#apDivdotlinebag {
position: absolute;
width: 88px;
height: 167px;
z-index: 2;
background-image: url(_images/dotlinebag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 280px;
#apDivkemrokbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 570px;
#apDivPFT1 {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
background-repeat: no-repeat;
float: right;
margin-top: -75px;
margin-left: 470px;
#apDivkemrokVRbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrokvr_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivFirerokbag {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 570px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 80px;
height: 96px;
z-index: 2;
background-image: url(_images/AWbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDiv15bag {
position: absolute;
width: 88px;
height: 111px;
z-index: 2;
background-image: url(_images/15.0bucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -115px;
margin-left: 260px;
#apDivTRbucket {
position: absolute;
width: 80px;
height: 106px;
z-index: 2;
background-image: url(_images/TRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 370px;
#apDivAWbucket {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/AWArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivASArt {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/ASArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivVRbucket {
position: absolute;
width: 80px;
height: 87px;
z-index: 2;
background-image: url(_images/VRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -105px;
margin-left: 470px;
#apDivIAbucket {
position: absolute;
width: 251px;
height: 106px;
z-index: 2;
background-image: url(_images/IAbuckets.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 400px;
body {
background-color: #666;
color: #000;
text-align: center;
background-image: url(_images/roadblurred.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding-top: 60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
.formtext {
font-size: 100%;
text-align: left;
.bodyfootnote {
font-size: 70%;
margin-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
font-size: 70%;
color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
text-transform: capitalize;
text-decoration: none;
list-style: none;
h1, h2, h3, h4, h5, h6, p {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 23px;
line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 100%;
padding: 5px;
a:visited {
color: #FFFFFF;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #03C;
color: #FFF;
height: 12px;
alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/Bridge4WebScreened.png);
background-repeat: no-repeat;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
text-align: left;
.containerTS {
width: 960px;
background-color: #FFF;
margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/US_Map.png);
background-repeat: no-repeat;
text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #000;
background-image: url(_images/BannerBlured960.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSL {
background-color: #000;
background-image: url(_images/PMND%20SL%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerPurchase {
background-color: #000;
background-image: url(_images/contact%20us%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSLQ {
background-color: #000;
background-image: url(_images/PMND%20SLQ%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerDOTline {
background-color: #000;
background-image: url(_images/DOTLINE%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header15 {
background-color: #000;
background-image: url(_images/PMND%2015.0%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTR {
background-color: #000;
background-image: url(_images/PMND%20TR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAW {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAS {
background-color: #000;
background-image: url(_images/anti%20scale%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerVR {
background-color: #000;
background-image: url(_images/PMND%20VR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerIA {
background-color: #000;
background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrok {
background-color: #000;
background-image: url(_images/KEMROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrokVR {
background-color: #000;
background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerFirerok {
background-color: #000;
background-image: url(_images/FIREROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAntiWear {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTechSupport {
background-color: #000;
background-image: url(_images/FEBlurred.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerResources {
background-color: #000;
background-image: url(_images/ResourceBanner.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20pt;
font-style: normal;
font-weight: bolder;
color: #FFF;
padding-top: 150px;
padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 180px;
margin-left: 0px;
margin-right: 30px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/Testimonialb.gif);
background-repeat: no-repeat;
height: 456px;
text-decoration: none;
z-index: 1000;
.sidebarPurchase {
float: right;
width: 200px;
margin-left: 0px;
margin-right: 20px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/purchaseSB.png);
background-repeat: no-repeat;
height: 420px;
margin-top: 0px;
text-decoration: none;
background-color: #217CC0;
background-position: 10px 10px;
.sidebarleft {
float: left;
width: 195px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 85%;
font-style: oblique;
height: 200px;
text-decoration: none;
padding-top: 8px;
padding-left: 10px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 30px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
.sidebarleftlong {
float: left;
width: 195px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: oblique;
height: 280px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 17px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
color: #FFF;
font-size: 85%;
text-align: left;
padding-left: 10px;
.sidebargreen {
float: left;
width: 195px;
height: 410px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #8CC63F;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
padding-left: 10px;
.nav2 {
font-family: bebas-neue;
font-style: normal;
font-weight: 400;
color: #FFF;
.sidebarleft nav ul li a {
text-decoration: none;
color: #FFF;
.sidebarleftlong nav ul li a {
text-decoration: none;
color: #FFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
.content {
width: 730px;
float: left;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding: 10px 0;
text-align: left;
font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
text-decoration: none;
ul.nav li {
border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #DFEBF3;
color: #FFF;
text-decoration: none;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both;
background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position: absolute;
width: 900px;
height: 94px;
z-index: 1;
margin-top: 80px;
margin-left: 30px;
white-space: 3;
font-size: 100%;
text-align: left;
sllogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
.slLogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
height: 100px;
width: 240px;
.productlogos {
margin-left: 23px;
margin-top: 10px;
.Bold {
font-weight: bold;
.inherent {
font-style: inherit;
sup {
position: relative;
top: -1ex;
vertical-align:baseline;
font-size: 75%;
#apDiv2 {
position: absolute;
width: 650px;
height: 31px;
z-index: 2;
background-repeat: no-repeat;
padding-right: 15px;
padding-left: 15px;
margin-right: 15px;
margin-left: 15px;
top: 369px;
background-image: url(_images/homeheader.png);
.footer table tr td {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
height: 8px;
width: 160px;
margin-left: 10px;
padding-left: 15px;
border-collapse: collapse;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
.footer p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #FFF;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 30px;
.footer table tr th h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
float: left;
padding-left: 15px;
height: 0px;
.footer table tbody tr td a {
color: #FFF;
#wrapper {
width:970px; /**adjust as needed**/
margin:0 auto; /**centers page on screen**/
.flt_rgt {
float: right;
margin-top: 15px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.title {
/* [disabled]margin-right: 30px; */
margin-top: 35px;
margin-left: 10px;
background-image: ;
background-repeat: no-repeat;
/* [disabled]margin-left: 20px; */
top: 30px;
/* [disabled]margin-top: 30px; */
left: 30px;
.flt_products {
float: right;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.container section nav {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
padding-top: 3px;
#apDiv3 {
position: absolute;
width: 468px;
height: 41px;
z-index: 2;
background-image: url(_images/savetimetext.png);
background-repeat: no-repeat;
margin-left: 15px;
#apDiv4 {
position: absolute;
width: 400px;
height: 41px;
z-index: 3;
background-image: url(_images/ULTRAFLOR.png);
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 45px;
#apDiv5 {
position: absolute;
width: 250px;
height: 103px;
z-index: 4;
background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
background-repeat: no-repeat;
float: right;
right: auto;
margin-left: 675px;
margin-top: -22px;
#apDiv6 {
position: absolute;
width: 40px;
height: 38px;
z-index: 5;
background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
margin-top: -25px;
margin-left: 83px;
#apDiv7 {
position: absolute;
width: 20px;
height: 17px;
z-index: 5;
background-image: url(_images/twitter-bird-dark-bgs.png);
margin-top: -15px;
margin-left: 85px;
nav ul {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
font-size: 90%;
nav ul li {
text-decoration: none;
color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
text-align: left;
color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
text-decoration: none;
.orange {
color: #FAA634;
.white {
color: #FFFFFF;
.red {
color: #F00;
.red1 {
color: #F00;
.toppanel {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
#apDiv12 {
position: fixed;
width: 960px;
height: 30px;
z-index: 5;
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
float: left;
top: 229px;
.white {
.CeraTechLogo {
background-image: url(_images/CTI_logo_white.png);
background-repeat: no-repeat;
width: 200px;
height: 60px;
.apDivPFT {
background-repeat: no-repeat;
padding-left: px;
padding-top: 0px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#resources {
background-image: url(_images/ResourcesType.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px; -
Webpage looks good with tranparent boxes and photo background in live view but not in browsers
If anyone has time to help I would be very grateful. I am new to dreamweaver and am trying to make a webpage with transparent colums and boxed text using styles. It looks perfect in "live view" but when I look at it in any browser all formatting is gone. It looks like the background with text on top layed out wrapped across the entire page. I have not been able to figure out what is wrong in days of searching. Does anyone know the answer?
This first the format I want and is what it looks like in Live View, the second is what it looks like in most browsers.
Here is the code I used:
</style>
<link href="../styles/tcastyles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-image: url(bamboo.JPG);
margin-left: 150px;
a:link {
color: #600;
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
a {
font-size: 12px;
body,td,th {
font-family: Verdana, Geneva, sans-serif;
.container .faqs h2 {
line-height: 40px;
.container .faqs ul li {
text-align: left;
.footer {
padding: 5;
position: relative;
clear: both;
</style>
<div class="container">
<div class="header"><span class="menutable"></span><img border="0" src="navigate_projects.jpg" width="307" height="167" usemap="#FPMap0" alt="The Conservation Agency - Project Menu" align="absmiddle" />
<map name="FPMap0">
<area shape="rect" coords="132, 112, 172, 127" href="asia.htm" alt="Asia" />
<area shape="rect" coords="138, 92, 286, 110" href="west.htm" alt="Western Hemisphere" />
<area shape="rect" coords="138, 73, 279, 89" href="flamingos.htm" alt="British Virgin Islands" />
<area shape="rect" coords="131, 55, 249, 72" href="turkscaicos.htm" alt="Turks and Caicos" />
<area shape="rect" coords="121, 35, 244, 52" href="newengland.htm" alt="Narragansett Bay" />
<area shape="rect" coords="103, 17, 306, 32" href="coyote.htm" alt="Narragansett Bay Coyote Study " />
<area shape="rect" coords="121, 128, 173, 144" href="pacific.htm" alt="Pacific" />
</map>
</div>
<div class="menu">
<table width="100%" border="0" align="center" id="menutable">
<tr>
<td height="30" align="center" valign="middle"><p><strong><a href="mission.htm">Mission</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="pubs.htm">Publications</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="projects.htm">Projects</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="opps.htm">Opportunities</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="sponsors.htm">Sponsors</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="coyote.htm">NBCS</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="guana.htm">Guana</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="tca.htm">Contact us</a></strong></p></td>
<td height="30" align="center" valign="middle"><p><strong><a href="index.htm">Home</a></strong></p></td>
</tr>
</table>
</div>
<div class="banner">Narragansett Bay Coyote Study</div>
<d/div>
<div class="box739">
<h3>What does NBCS Do?</h3>
<p>Since 2004 The Narragansett Bay Coyote Study (NBCS) has been developing science-based coexistence and management strategies for our newest top predator. Coyotes, originally a prairie species, have successfully colonized all parts of the continental and nearshore us in the past 100 years. They reached the islands of Narragansett Bay in the mid-1990s. Since then coyotes have become increasingly abundant and problematic in some island communities.</p>
<p>In our history of cohabitation with coyotes people consistently tried to eliminate them by hunting, trapping, and poisoning. Lethal removal worked for individual problem animals but did not work as a population control strategy. Why? Coyotes have intrinsic physiological and behavioral abilities to control their own numbers. If coyotes are removed they increase reproduction and numbers rapidly rebound. The critical population regulation trigger is competition for food. As long as coyotes are well fed (with few coyotes competing for food) their populations will grow. </p>
<p>It is also known that opposite effect occurs if coyotes if coyotes are stressed by competition for food. If there are too many coyotes competing for the food available coyotes will drop the the level sustainable by those resources.</p>
<p>Understanding this relationship, NBCS scientists decided to study the resource use of coyotes on two islands in Narragansett Bay, Rhode Island. We used GPS tracking collars to find out where the coyotes were spending thier time. We theorized that if we could identify important coyote food resources - and control them - the coyotes would bring their own numbers down. NBCS calls this "passive coyote management."</p>
<p> Since 2005 when we trapped and collared our first island coyotes we have continually found that the most important food resources to our study are provided by people. That means they are within our control That means we can control coyotes. If we remove anthropogenic resources (human subsidies) coyote numbers will drop to the level sustainable by natural resources. When coyotes are sustained only by natural prey (mice, woodchucks, rabbits, geese, and deer) coyotes numbers will be lower and they will provide helpful pest control services. </p>
<p>Based our scientific data NBCS generated a set of <a href="coyotes/Best Management Practices for Coexistence with Coyotes - Nov 8 2010.pdf" target="_new">Best Management Practices for Coexistence with Coyotes</a>- basically a toolbox for safe, sustainable, community coyote management. We are working with the towns in our study area to adopt the CBMPs and be the first community in the nation to successfully and sustainably manage coyotes. We also believe other cities and towns might be able to use our results as a template if they are experiencing coyote problems. We have only just begun to implement the CBMPs on our islands. We hope in the near future to have all our towns implementing the CBMPs - only then will we see the full impacts they make on coyote numbers and behavioral problems. You can follow our progress on this website.</p>
</div>
<div class="footer">
<table width="100%" border="0" cellspacing="5">
<tr>
<td>Return to top</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>iv class="faqs">
<h2>FAQs</h2>
<ul>
<li>How do coyotes control their own population numbers?</li>
<li>bla bla bla</li>
</ul>
</div>
<div class="content">
<div class="clearbox">
<div class="col1">
<h3>Middletown Adopts the CBMPs and passes a No-Feeding Ordinance!</h3>
</div>
<div class="col2">
<h3>Pilot, Java, and the Valley Pack</h3>
<
And here are the styles:
.container {
height: 1500px;
width: 975px;
border: 8px solid #660000;
float: left;
.header {
float: left;
height: 170px;
width: 975px;
background-color: #033000;
.menu {
background-color: #FFC;
float: left;
height: 30px;
width: 975px;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
color: #660000;
font-weight: bold;
margin-bottom: 5px;
.table {
font-family: Verdana, Geneva, sans-serif;
font-size: 8px;
font-weight: bold;
.banner {
float: left;
height: 100px;
width: 739px;
font-family: Verdana, Geneva, sans-serif;
font-size: 37px;
font-weight: bold;
color: rgba(0,51,0,1);
background-color: rgba(255,255,204,.7);
text-align: center;
line-height: 75px;
border-radius: 5px;
padding: 5px;
margin: 5px;
.clearbox {
float: left;
height: auto;
width: 760px;
.box739 {
width: 739px;
float: left;
height: auto;
background-color: rgba(255,255,204,.7);
font-size: 12px;
color: rgba(0,51,0,1);
border-radius: 5px;
padding: 5px;
margin: 5px;
.faqs {
float: right;
height: 620px;
width: 205px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
overflow: scroll;
background-color: rgba(255,255,204,.7);
margin: 5px;
border-radius: 5px;
font-weight: bold;
color: rgba(0,51,0,1);
text-align: center;
.col1 {
float: left;
height: 500px;
width: 359px;
background-color: rgba(255,255,204,.7);
font-size: 12px;
border-radius: 5px;
color: rgba(0,51,0,1);
margin: 5px;
padding: 5px;
.col2 {
float: left;
height: 500px;
width: 359px;
background-color: rgba(255,255,204,.7);
font-size: 12px;
border-radius: 5px 5px 5px 5px;
color: rgba(0,0,0,1);
padding: 5px;
margin: 5px;
.footer {
position:relative;
clear: both;
background-color: rgba(255,255,204,1);
font-size: 12px;
color: rgba(0,51,0,1);Helo thanks for responding . I think it uploads... It says it does as an assocaiated file when I put to the website. But that sounds like it is the issue. Those format commands seem to be the one it is ignoring. I am not familiar with html but I see that the href command is what identifies the path to the file I call TCAStyles. I notice that dw puts all my files in a local public file and the structure is different - with no public file - at the site.
I am not sure what the 2 dots in the href command mean - there is not a full path. Is this command valid? I will try to look into the directory structure on local and remote site and will check for files. -
When using Live View, site looks great, browser testing goes crazy
I am creating a new website (and I am really unexperienced with Dreamwaver CS5). But when I check my site using "Live View" everything looks great, the way it is supposed to. Then when I go to test it in my browswer (Primary browser is Chrome) it goes crazy: I at first noticed that I had saved one copy as an .asp but then resaved it to .xhtml I did delete the first line of code already that the .asp file created as it kept giving me an error on line 1.
Then I tried to do a spry drop-down menu bar, which I have deleted since I thought I was doing something wrong with that and I should just stick to what I half-way know.
If I were to preview the template page it gives me this error:
This page contains the following errors:
error on line 150 at column 76: error parsing attribute name
Below is a rendering of the page up to the first error.
Here is line 150:
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
If I were to test the index.xhtml page in the browser, it ignores most images (all but one), and the first nav-bar (an editable region) appears to the left instead of under the header. The layout is totally ignored and everything is on the left-hand side of the screen instead of in a two column layout.
I am not testing this on a server just off of my computer.
I am assuming that the error has something to do with the .asp file I first did and when I resaved it, since I don't know what I would be looking for, is still in there screwing it up.
Here is the code from the template page:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Midwest Window Brokers | Page</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-image: url(/images/bkg.jpg);
background-repeat: repeat;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
text-align: left;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #060;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #666;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 300px;
background: #ffffff;
padding-bottom: 10px;
.content {
padding: 10px 0;
width: 650px;
float: right;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #DDDECB;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #ADB96E;
color: #FFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
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 */
background-color: #DDDECB;
font-size: small;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#h-navbar {
font-weight: bold;
height: auto;
font-size: 18px;
line-height: 50px;
background-image: url(/images/navbar2.jpg);
#h-navbar1 {
background-image: none;
background-repeat: repeat-x;
-->
</style>
<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];}}
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_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>
</head>
<body onload="MM_preloadImages('/images/home2.jpg')">
<div class="container">
<div class="header"><a href="/index.xhtml"><img src="../images/heading.jpg" alt="Midwest Window Brokers, Windows, Siding, Roofing, 605-791-5352" name="Insert_logo" width="950" height="200" align="right" id="Insert_logo" style="background: #FFFFFF; display:block;" /></a>
<div id="h-navbar1"><a href="/index.xhtml"><img src="/images/home.jpg" alt="home" width="159" height="51" id="Image1" onmouseover="MM_swapImage('Image1','','/images/home2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="/windows.html"><img src="/images/services.jpg" width="151" height="51" alt="services" /></a><a href="/freebay.xhtml"><img src="/images/specials.jpg" width="153" height="51" alt="specials" /></a><a href="/gallery.html"><img src="/images/gallery.jpg" width="152" height="51" alt="gallery" /></a><a href="/roofing.xhtml"><img src="/images/order.jpg" width="152" height="51" alt="order" /></a><img src="/images/blank.jpg" width="75" height="51" /><img src="/images/facebook.jpg" width="38" height="51" alt="facebook" longdesc="http://facebook.com/midwestwindowbrokers" /><img src="/images/twitter.jpg" width="37" height="51" alt="twitter" longdesc="http://twitter.com/midwestwindow" /><img src="/images/google.jpg" width="42" height="51" alt="google+" longdesc="http://https://plus.google.com/u/0/b/108071947231835835141/108071947231835835141/posts" /></div>
<!-- end .header --></div>
<!-- TemplateBeginEditable name="navbar" -->
<div id="h-navbar">
<div id="h-navbar2"> Content for id "h-navbar2" Goes Here</div>
</div>
<!-- TemplateEndEditable -->
<div class="sidebar1">
<ul class="nav">
</ul>
<p> <div id="wufoo-z7x3k1">
Fill out my <a href="http://midwestwindow.wufoo.com/forms/z7x3k1">online form</a>.
</div>
<script type="text/javascript">var z7x3k1;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'midwestwindow',
'formHash':'z7x3k1',
'autoResize':true,
'height':'601',
'async':true,
'header':'show'};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { z7x3k1 = new WufooForm();z7x3k1.initialize(options);z7x3k1.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script></p>
<!-- end .sidebar1 --></div>
<!-- TemplateBeginEditable name="Body" -->
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2>Clearing Method</h2>
<p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p><span style="font-size: 18px; color: #C00; font-weight: bold; font-style: italic;">Logo Replacement</span></p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<h4>Backgrounds</h4>
<p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
<!-- end .content -->
</div>
<!-- TemplateEndEditable -->
<div class="footer">
<p class="footer"><strong> <em>References Available!</em> We accept cash, check, Visa, Discover, MasterCard</strong></p>
Copyright 2012 Midwest Window Brokers Inc. All Rights Reserved.
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>I had saved one copy as an .asp but then resaved it to .xhtml
I'm assuming this is a static web site. Rename (F2) all your pages with .html or .htm extension.
.xhtml is not a valid extension.
Nancy O. -
When changing to Live View Images do not display...
Yesterday I was working on my website and it is still in the early stages so currently I have just a single image worked into my design. When I was changing between my code and the live view everything was displaying just fine. I saved my work yesterday and when I came back today I opened up the same file and found that everything appears fine in the code and the regular design view but as soon as I switch to the live view my images shows up as a tiny blue questionmark box. I have not changed any code from yesterday- the image appears to be linked to correctly because it displays without a problem in th design view. I am not sure what is going on- any help is appreciated!
this is my code:
<body>
<div id="wrapper">
<div id="header"><div><img src="/images/topimage.jpg"></div></div>
<div id="ddtopmenubar" class="mattblackmenu" align="center">
<ul>
<li><a href="http://www.caliberequipment.com">Home</a></li>
<li><a href="http://www.caliberequipment/machines.htm" rel="ddsubmenu1">Machines</a></li>
<li><a href="http://www.caliberequipment.com/parts/" rel="ddsubmenu2">Parts</a></li>
<li><a href="http://www.caliberequipment.com/forums/">Service</a></li>
<li><a href="http://www.caliberequipment.com/" rel="ddsubmenu3">Technical Support</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>
<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->
<!--Top Drop Down Menu 1 HTML-->
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="/scrubbers.html">Floor Scrubbers</a></li>
<li><a href="/sweepers.html">Floor Sweepers</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>
<!--Top Drop Down Menu 2 HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
<ul>
<li><a href="#">Sub Item 3.1b</a></li>
<li><a href="#">Sub Item 3.2b</a></li>
<li><a href="#">Sub Item 3.3b</a></li>
<li><a href="#">Sub Item 3.4b</a></li>
</ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul>
<li><a href="#">Sub Item 5.2.1b</a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#">Sub Item 5.2.3b</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>
<!--Top Drop Down Menu 3 HTML-->
<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>
</ul>
<div id="content">
<div id="content-left"></div>
<div id="content-main"></div>
<div id="content-right"></div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
</body> -
there is one item on my index.html (home) page that floats off to the right when in live view, but when in design view and when viewing live online through IE7 and firefox its fine. the url is www.lowcostloanmodification.com. if anyone can look at it and help me figure it out. my fear is it is showing up live on some other browser that way. When i did a compatability check it seems fine in all browsers.
Message was edited by: greg134My apologies, I thought I was moving too fast. The item that is moving off to the right is the opt in box reprsented by this code. My friend helped me put this together and he created a shadow box using this code which even me as an amaetuer can tell is not correct. i asssume that is why its moving off to the right outside of the div id = wrap
<div id="sidebar" >
<div class="opt-in">
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
<form id="joinform" method="post" action="https://www.mcssl.com/app/join.asp?">
<h2>Receive Our Free Report:</h2>
<p><strong>"5 Most Recent Loan Mod Developments as of 12/20/09!"</strong></p>
<p>First Name:<br />
<input type="text" name="name1" id="name1" size="14" /><br />
Email Address:<br />
<input type="text" name="email1" id="email1" size="14" /><br />
<input class="button" type="submit" name="submit" value="Get Free Report" />
<input type="hidden" name="Home" value="www.lowcostloanmodification.com" />
<input type="hidden" name="DefaultMailingAR" value="478392" />
<input type="hidden" name="MailingThankyouURL" value="www.lowcostloanmodification.com/index2.html" />
<input type="hidden" name="MerchantID" value="163311" /></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div> -
Horizontal menu bar (spry) not working in live view
action taken - simply add a horizontal spry menu to
a blank page, then go to live view.....
when select "item 1" - item 2 briefly disappears...any thoughts - this is making me nuts! pls email me at [email protected]
here is the code
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 182px;
top: 281px;
#apDiv2 {
position:absolute;
width:463px;
height:243px;
z-index:1;
left: 350px;
top: 135px;
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</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="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>You will have better luck here in the Forum if you can post a link to your page. Just the HTML doesn't give us enough information; we need to see the CSS stylesheets as well, and in context...working...it's easier to pin down.
Beth -
Hi - I am new to Dreamweaver and have been following a book to understand it. I am told that one can test links in live view. (page 51 in "How-To's 100 Essential techniques" by David Karlins. I have a page that links to pictures and URLs and this works in Browser Preview. However the links do not work in live view. I am sure they did but I must have changed something to stop them. Can anyone shed some light on this.
thanks
SueI think I just responded to your other post, but to reiterate, you have done nothing wrong if your links don't "work" in Live View. The Live part of the View is seeing the hover interaction...you can test Spry menus to the extent that they appear to 'drop down' when they should, but you cannot navigate to other pages through Live View.
So continue using your Browser to check out the actual linking and moving to new pages.
Beth -
I have created sevedral templates and they look great in the live view, however they look like plain HTML text when I try to create a webpage based on the template. HELP!
This forum is about the Cloud as a delivery process, not about using individual programs
If you start at the Forums Index https://forums.adobe.com/welcome
You will be able to select a forum for the specific Adobe product(s) you use
Click the "down arrow" symbol on the right (where it says All communities) to open the drop down list and scroll
Maybe you are looking for
-
Inserção de mais moedas - 8KEM
Boa tarde Poderiam me dar um help? Estou num projeto de alteração de moeda e queremos inserir mais moedas na transação 8KEM mas o match code só mostra 2 opções: 10 u2013 moeda da empresa 30 u2013 moeda do grupo de empresas Procuramos nas configuraçõe
-
Trying to restore external HDD
I was doing regular backups of an external drive to my time capsule, and recently the drive crashed which required me to reformat it. I gave it the same name and thought I could restore it via Time Machine but when I select this drive under Time Mach
-
My old computer died. No files were able to be recovered at all; it wouldn't turn on, and now it's been replaced by(and returned to) Dell. I hadn't done anything to use my iPod to "store" music, it was just synched with iTunes on that computer. Now I
-
'airport' process chewing up CPU on boot?
I'm having a weird problem. I've had my MacBook for about a month, but this problem has only been happening in the last few days. Before I begin, I'm 100% up to date and repaired permissions. When I boot up my computer, the fans start going full spee
-
I want to load an initial image into onTop_mc,. When the user clicks next, load another image into onBottom_mc (below onTop_mc), then using MovieClip.setMask() create a transition from the first image to the second image. No problem, but for the thir