Preview in browser shows html code
Can't get DW to display my design, I go to "preview in
browser" and it goes to the browser and shows the html code
instead. Can someone help me fix that?
<%@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">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the
user's default fonts size, they are more unpredictable. Used
correctly, they are also more accessible for those that need larger
fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font
size in the body element. If you decrease the text size overall by
using a font-size: 80% on the body element or the #container,
remember that the entire layout will downsize proportionately. You
may want to increase the widths of the various divs to compensate
for this.
3. If font sizing is changed in differing amounts on each div
instead of on the overall design (ie: #sidebar1 is given a 70% font
size and #mainContent is given an 85% font size), this will
proportionately change each of the divs overall size. You may want
to adjust based on your final font sizing.
.twoColElsLtHdr #container {
width: 46em; /* this width will create a container that will
fit in an 800px browser window if text is left at browser default
font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.twoColElsLtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is
used in the #header instead of text, you may want to remove the
padding. */
.twoColElsLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div,
the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding
on the sidebar itself. It will be added to the width for standards
compliant browsers creating an unknown actual width.
3. Space between the side of the div and the elements within
it can be created by placing a left and right margin on those
elements as seen in the ".twoColElsLtHdr #sidebar1 p" rule.
.twoColElsLtHdr #sidebar1 {
float: left;
width: 12em; /* since this element is floated, a width must
be given */
background: #EBEBEB; /* the background color will be
displayed for the length of the content in the column, but no
further */
padding: 15px 0; /* top and bottom padding create visual
space within this div */
.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be
given to every element that will be placed in the side columns */
margin-right: 10px;
/* Tips for mainContent:
1. If you give this #mainContent div a font-size value
different than the #sidebar1 div, the margins of the #mainContent
div will be based on its font-size and the width of the #sidebar1
div will be based on its font-size. You may wish to adjust the
values of these divs.
2. The space between the mainContent and sidebar1 is created
with the left margin on the mainContent div. No matter how much
content the sidebar1 div contains, the column space will remain.
You can remove this left margin if you want the #mainContent div's
text to fill the #sidebar1 space when the content in #sidebar1
ends.
3. To avoid float drop, you may need to test to determine the
approximate maximum image/element size since this layout is based
on the user's font sizing combined with the values you set.
However, if the user has their browser font size set lower than
normal, less space will be available in the #mainContent div than
you may see on testing.
4. In the Internet Explorer Conditional Comment below, the
zoom property is used to give the mainContent "hasLayout." This
avoids several IE-specific bugs that may occur.
.twoColElsLtHdr #mainContent {
margin: 0 1.5em 0 13em; /* the right margin can be given in
ems or pixels. It creates the space down the right side of the
page. */
.twoColElsLtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.twoColElsLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 10px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
/* Miscellaneous classes for reuse */
.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 */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or
break element and should be the final element before the close of a
container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional
comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout
it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColElsLtHdr">
<div id="container">
<div id="header">
<h1><img src="../MASTHEAD.jpg" width="720"
height="269" /></h1>
<!-- end #header --></div>
<div id="sidebar1">
<blockquote>
<pre> </pre>
</blockquote>
<h3>Landscaping</h3>
<p><strong>Lawn Care</strong></p>
<p><strong>Chemical
Services</strong></p>
<p><strong>Tree
Services</strong></p>
<p><strong>Retaining
Walls</strong></p>
<p><strong>Water
Gardens</strong></p>
<p><strong>Special
Projects</strong></p>
<p> </p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> GET THE EDGE</h1>
<p>Custom Edges Enterprises gives you the edge when it
comes to landscape design, implementation and
maintenance.</p>
<p>Residential and commercial properties thrive under
the supervision and attention of Custom Edges
Enterpirses.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the
#mainContent div in order to force the #container div to contain
all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Similar Messages
-
Preview in browser change html code
Hi!
Often when I sketch web sites in Fireworks I preview the page
as an image in my browsers, just to get a feeling of the page in
its real environement, so to speak. Often my web sites are aligned
to the center but Fireworks just put the image to the left and
don´t remove the standard body margins.
Is there a way for me to change the html code used in the
preview in browser command?why not make a standard page (in dw) with zero margins and
padding, and
single div centred with one image and then place the native
fireworks
png in there, save and preview that page from DW and then
when you work
on your fw image just save it and press refresh in your
browser window.
when you do a new project simply swap the new fw png for the
old fw png ;)
JoeyD1978 wrote:
> My work flow is probably a bit different, so this might
be way out in left
> field for you. But I create a new document and make it
very large (2400x3000+).
> I then center what will be my layout in that document
and design from there.
>
> When I preview the layout, I just center the layout in
my browser with the
> horizontal scroll bar. This is the only way I've ever
figured out how to get
> around this same problem.
> -
Preview in Browser shows site fine....but uploaded....
Hi all,
I'm coming accross a strange problem.
I've taken over the creation of a website, things were going well.
Yet this evening, for some unknown reason, the site has started to display differently when uploaded.
Everything looks fine in Dreamweaver. Everything looks fine in a browser, using the Preview in Browser feature.
But when its uploaded, the menu bar on the left has all the contents out of line.
http://www.emersonlakepalmer.com/www/index.html
The design is meant to be centralised, directly underneath the logo. Yet for some reason, there's an additional (unwanted) centimetre of blue on the right, and the text is alligned right too. This isn't my doing, and doesn't appear like that in Dreamweaver/Preview in Browser. (I'm using the IE8 both times)
No amount of fiddling can fix it, its spoils the look of the site.
Can anyone explain step-by-step how to fix it ? I'm confined to WYSYWYG mostly, code isn't my strong point.
Thanks !!!!!!!!!!!!!!!!!!!!!!Honestly, your code is a real mess. The fact that you lost your original was probably a godsend.
You might want to look at an alterntive layout before you invest much more time on the one you have.
Copy and paste this into a new, blank HTML page. Tested and works in IE6,7,8, Chrome, FF and Opera. NOTE: I changed images to absolute URLs so I could work with it. You can change them back site relative.
<!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=iso-8859-1" />
<title>Emerson Lake & Palmer</title>
<style type="text/css">
CSS Layout by Alt-Web Design and Publishing
http://www.alt-web.com
copyright July 15, 2010
/**Universal reset. Zero out default browser settings on everything**/
* {margin:0; padding:0; font-size: 100%; line-height:100%;}
/**GENERAL STYLES**/
body {
font-size: 1em;
font-family:Verdana, Arial, Helvetica,sans-serif;
background: #000;
color: #FFF;
/**for IE only**/
*body {zoom:100%; font-size: 76%}
/**BASIC LAYOUT**/
#container {
width : 1025px;
margin : 0 auto;
text-align : center;
#header {
width: 100%;
padding:0;
text-align: left;
#sidebar1 {
width: 140px;
background: #000032;
padding: 65px 0 0 0;
float: left;
margin: 0;
min-height: 440px;
/**for IE only**/
overflow:hidden;
word-wrap: wrap-word;
#mainContent {
margin: 0 0 0 140px;
padding: 10px;
#footer {
padding: 0 10px;
clear: both;
border-top: 1px solid silver;
/* BEGIN List Menu */
#navlist ul{
margin: 0;
padding: 0;
#navlist li{
list-style: none;
font-size: 14px;
margin: 0;
#navlist li a {
text-decoration: none;
display: block;
font-weight: bold;
line-height: 3em;
#navlist li a:link {color:#A19332}
#navlist li a:visited { color:#CCCCCC}
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus{
color:#000032;
background: #A19332;
/* END navlist */
/**IMPORTANT FOR SEO**/
#sitename h1 {margin:0; padding:0; line-height: 0; text-indent:-99999px}
/**TEXT STYLES**/
#mainContent h1,
#mainContent h2,
#mainContent h3,
#mainContent p {
line-height: 1.4;
margin: 0 1em 1em 1em;
padding:0 1em 1em 1em;
#footer p {
margin: 0;
padding: 10px 0;
font-size: x-small;
text-align: right;
color: #CCC;
/**RE-USABLE CLASSES**/
.left {text-align: left}
.center {text-align: center}
.right {text-align:right}
.caption {font-size: 11px; font-style:oblique; letter-spacing:2px;}
/**FLOATS AND CLEARINGS**/
.floatRt {float:right; width: 40%}
.floatLt {float:left; width: 40%}
.clearing,
.clearRt,
.clearLt {height: 1px; visibility:hidden}
.clearing {clear:both}
.clearRt {clear:right}
.clearLt {clear:left}
/**REGULAR LINKS**/
a img {border:none}
a:link,
a:visited {color: #A6933D;}
a:hover,
a:active,
a:focus {color:#FFF;background:#A6933D;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="sitename">
<h1>Emerson, Lake & Palmer</h1>
<!--end sitename --></div>
<a href="index.html"><img src="http://www.emersonlakepalmer.com/www/images/ELP_Logo.jpg" width="140" alt="ELP logo" height="115" border="0" /></a>
<img src="http://www.emersonlakepalmer.com/www/images/ELP_Masthead.jpg" alt="ELP banner" title="EMERSON LAKE & PALMER"width="860" height="115" />
<!--end header --></div>
<!--BEGIN LEFT SIDEBAR -->
<div id="sidebar1">
<!--BEGIN NAVLIST -->
<ul id="navlist">
<li><a href="news2.html">NEWS</a></li>
<li><a href="biographies.html">BIOGRAPHIES</a></li>
<li><a href="discography.html">DISCOGRAPHY</a></li>
<li><a href="shop.html">SHOP</a></li>
<li><a href="links.html">LINKS</a></li>
<li><a href="contact.html">CONTACT</a></li>
<!--end navlist --></ul>
<!--end left sidebar --> </div>
<!--BEGIN MAINCONTENT -->
<div id="mainContent">
<div class="floatRt">
<h3><a href="signup.html">Sign-up for E-mail</a></h3>
<!--end floatRt --></div>
<h3 class="left">Official Web Site </h3>
<img src="http://www.emersonlakepalmer.com/www/ELP_Gold_Home2.jpg" alt="ELP" title="Welcome Back My Friends" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="669,7,816,215" href="tickets.html" alt="High Voltage" title="Buy Tickets" />
</map>
<p class="caption">Greg Lake on guitar, Keith Emerson on keyboard, Robert Palmer on percussions </p>
<!--end mainContent --></div>
<!--BEGIN FOOTER -->
<div id="footer">
<p>© 2010 Emerson, Lake & Palmer. All rights reserved. </p>
<!--end footer --></div>
<!--end container --></div>
</body>
</html>
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Date picker field shows html code?
I have a HTMLDB 2.0 app that I have ported to APEX 3.1. I have one field that is a date picker field which has a before regions computation on it that calculates an expiration date. For some reason, the text area shows the HTML code of the page, not the calculated date. No idea why. Anyone? TIA
Can you show us on apex.oracle.com?
Scott -
Browser shows only codes instead of graphics
Hi,
I've got a problem
When I test out (f12) my design, the window browser showed
only html and my style sheet. Normally, I would see my graphics.
Does this have anything to do with MYSQL and APACHE on ? I am
using Wamp and dreamweaver csPost a link to the site if you hope to have someone figure it
out..
gary
"RunRunforest" <[email protected]> wrote in
message
news:gb8ld2$jc1$[email protected]..
> Hi,
>
> I've got a problem
>
> When I test out (f12) my design, the window browser
showed only html and
> my
> style sheet. Normally, I would see my graphics.
>
> Does this have anything to do with MYSQL and APACHE on ?
I am using Wamp
> and
> dreamweaver cs
>
>
> -
Hello,
Is there a component (like richedit) to show some html code in a form ?Not that I know of in SAP Business One. You could include the ActiveX control. There's a sample on this on the SDK, although i couldn't run it myself. I believe I read somewhere that the ActiveX feature on SAP doesn't run under Windows XP SP2.
You could always try! -
Some Mail messages show html code
I am using Mail 6.2 and Gmail IMAP. Some Mail that I move from my Inbox to another Mail folder part of the message appears in html code in the folder where I moved the message. The html code did not appera while the message was in my In Box. If I look at the message in Gmail, no html code appears and the message has the same lable as the Mail folder where I moved the message. If i look at the message on my iPad there is no html code. The problem only appears to happen within Apple Mail
By the way, also, the html code is interpreted correctly by the html tester on the following web site:
http://www.webtutorialplus.com/html-code-tester.aspx
So it seems that perhaps a simple edit should make it compatible with Mail App.
I have verified that all uninterpreted messages where all I see is html raw code, are interpreted and rendered beautifully by the tool at the link above. All I need do is to coy and paste the body of the message. So it seems that what is missing is something to trigger the interpretation in Mail App. Right? -
Collection showing HTML code in report
I'm trying to upgrade/rebuild an application. It was in 3.2 and now I'm moving to 4.1. Since APEX doesn't allow two tabular forms on the same page, I was trying to use collection handling to do the same thing, but I'm running into something I never saw under 3.2: when I use a report region to display the collection items, it displays the HTML literals instead of the form fields. I use collections a LOT so I need to know how to use them in 4.1 - if the rules have changed.
I use this to build the collection:
apex_collection.create_or_truncate_collection
(p_collection_name => 'EQP_ACQ_TYPE');
DECLARE
v_type_id EQUIP_ACQ_TYPE_REF.EQUIP_ACQ_TYPE_ID%TYPE;
v_abbr EQUIP_ACQ_TYPE_REF.ACQ_TYPE_ABBR%TYPE;
v_desc EQUIP_ACQ_TYPE_REF.ACQ_TYPE_DESC%TYPE;
cursor c_prepop is
select EQUIP_ACQ_TYPE_ID, ACQ_TYPE_ABBR, ACQ_TYPE_DESC
from EQUIP_ACQ_TYPE_REF;
BEGIN
OPEN c_prepop;
LOOP
FETCH c_prepop into v_type_id, v_abbr, v_desc;
EXIT WHEN c_prepop%NOTFOUND;
APEX_COLLECTION.ADD_MEMBER(
p_collection_name => 'EQP_ACQ_TYPE'
, p_c001 => v_type_id --Type ID
, p_c002 => v_abbr --Type Abbreviation
, p_c003 => v_desc --Type Description
END LOOP;
CLOSE c_prepop;
APEX_COLLECTION.ADD_MEMBER(
p_collection_name => 'EQP_ACQ_TYPE'
, p_c001 => 0 -- Type ID placeholder
, p_c002 => NULL
, p_c003 => NULL
END;and this to display the collection in a standard report region:
SELECT apex_item.hidden(9, SEQ_ID) as SEQ_ID
, apex_item.text(1, c001, 3, 3) TYPE_ID
, apex_item.text(2, c002, 8, 8) TYPE_ABBR
, apex_item.text(3, c003, 16, 47) TYPE_DESC
from APEX_COLLECTIONS
where COLLECTION_NAME = 'EQP_ACQ_TYPE'This is the very most basic collection I use. Any help?So instead of the fields, I see the following text:
Seq Id Type Id Type Abbr Type Desc
<input type="hidden" name="f09" value="1" /> <input type="text" name="f01" size="3" maxlength="3" value="0" /> <input type="text" name="f02" size="8" maxlength="8" value="" /> <input type="text" name="f03" size="16" maxlength="47" value="" /> -
Replying to a web-based email shows html code in the area where the response should be typed
this problem still exists and I am tired of trying new versions, then having to uninstall them and go back to version 5. Now you FORCE me to upgrade to version 7 where my web based email doesn't work. So looks like I will switch browsers to Chrome. You shouldn't automatically force and upgrade on anyone - especially if you haven't fixed the bugs in it!!!
I posted this problem before and no one answered it - so I don't expect a reply to this one either. Too bad, cause I liked Firefox.This is an issue for me too and everytime I upgrade on a different computer it pops up - very annoying and I posted a request for support but never received an answer - not even an acknowledgment. I like Firefox - don't want to change and it only happens in my web based email but I may have to switch browsers too.
-
I have a 2010 work flow that is associated with a sharepoint 2013 list that creates a new list document using a custom Microsoft Word 2013 template with a rich text multiline field quick part. The workflow creates the document and populates
the the quickpart, however, the text in the document is showing html codes
<div class="ExternalClass2116495984EB429D95B02CC15F85FD4C"><h1>ABC123</h1><h2>Test: 1234</h2></div>
and not as
ABC123
Test: 1234
Is there a no code solution for this?Hi,
I have done a test and I can reproduced your issue.
I referred to the blog about Automatically create Word documents which include list fields:
http://blogs.technet.com/b/brenclarke/archive/2009/04/15/automatically-create-word-documents-which-include-list-fields.aspx
When I create a multiple line of text column in a list, I just choose Plain text, Then I solved the issue:
Besides, here is a similar post, you can take a look at:
https://social.technet.microsoft.com/Forums/sharepoint/en-US/a7ab3a61-6643-4a47-a464-fe46b5db1558/rich-text-field-showing-html-code
Best Regards,
Lisa Chen
Lisa Chen
TechNet Community Support -
If someone could help me on this one, this would be great. I am creating a web site that has several departments. I have categorized and saved each department in a main folder called "departments" and a subfolder for each one. In the Dreamweaver code view the pop-up menu links seem to show up properly, but when I preview in browser or upload to server "page not found" comes up because for some reason the address changes. Some parts of the address seem to be appearing twice, sometimes the entire path will appear twice as shown below:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/departments/p arks-and-recreation/pr-arabiamtn-map.html
that is incorrect and it takes me to "web page cannot be found".
It is obviously repeating the folders (hence the "departments/parks-and-recreation" twice. The correct link is:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr-arabiamtn- map.html
The link issues are happening in the pop-up menu. For example if you go to http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr-arabiamtn. html and rollover the link called "Arabia Mountain" in the links to the left side of the page, then click the pop-up menu link entitled "Arabia Mountain Map" that's where the problem occurs.
Can anyone tell me how I can fix this problem. I don't know what I should do with the code since it already appears correct in html view.
Please help if you can...
Thanks in advance for any possible help you can provide...XonoBoom wrote:
It is obviously repeating the folders (hence the "departments/parks-and-recreation" twice. The correct link is:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr- arabiamtn-map.html
The link issues are happening in the pop-up menu.
This problem usually happens when the menu is either a server-side include or a library item using links relative to the document. When you reference a page at a different level of the folder hierarchy, the document-relative links no longer point to the correct destination.
Change the links in the menu to be relative to the site root.
A document-relative link usually looks like this:
<a href="../products/index.html">Products</a>
A link relative to the site root begins with a forward slash like this:
<a href="/products/index.html">Products</a> -
Changes to the design, html, css won't show up immediately in preview in browser
No matter what I am working on, the browser displays the design correctly only after the first viewing. From there on if I make any changes to html or css, save it and try to preview it again it just shows the design from the previous time. Sometimes if I wait a little bit and try to preview it again it shows up correctly, but the wait time varies. The same thing happens if I actually go to the folder and open up Index.html. But if I preview it in adobe browser lab it always shows up right. It is getting really annoying because I can't easily preview the changes that I make to see if they are working.
Sounds like a caching issue. You are saving the file and then using Preview In Browser and not just making a change to the DW file without saving and trying to refresh the browser, right?
In FireFox, hti Ctrl + Shift + R
In IE9, Hit F12, then Ctrl + R, then "Yes"
To clear your browser cache. -
Preview in Browser and Adobe Browser Lab show website differently? Please help
Hi...working on my first website and I have a question about the differences in viewing the site through
choosing file...preview in browser....
from within Dreamweaver, and using the Adobe Browser Lab to view the website.
There seems to be a very significant difference between the two. When I preview firefox from within dreamweaver, my site is just how I want it.
When I go to browser lab, it is...well... a disaster.
I'm attaching screenshots of the two as well as my code, so it can show how different they are. Here is a screenshot of the website as it looks when I use the preview in browser function from within dreamweaver to view it in firefox. This is how I'd like it to look.
And here is a screenshot of what it looks like when I preview it in Adobe Browser Lab in Firefox.
The quote is underneath the logo, the left div text is flowing over the center div, the nav bar graphics are too narrow, the photo is hanging outside the div it should be contained in. Not what I want.
Does anyone have any insight into how I would fix this or which version is correct?
I'm stumped. This is my first website: shouldn't these two things be similar? And which one is correct?
and here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<style type="text/css">
<!--
@font-face {
font-family: 'museo_sans_500regular';
src: url('museosans-500-webfont.eot');
src: url('museosans-500-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans-500-webfont.woff') format('woff'),
url('museosans-500-webfont.ttf') format('truetype'),
url('museosans-500-webfont.svg#museo_sans_500regular') format('svg');
font-weight: normal;
font-style: normal;
@font-face {
font-family: 'museo_sans_500italic';
src: url('museosans-500italic-webfont.eot');
src: url('museosans-500italic-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans-500italic-webfont.woff') format('woff'),
url('museosans-500italic-webfont.ttf') format('truetype'),
url('museosans-500italic-webfont.svg#museo_sans_500italic') format('svg');
font-weight: normal;
font-style: normal;
@font-face {
font-family: 'binary_itcregular';
src: url('binaritcbol-webfont.eot');
src: url('binaritcbol-webfont.eot?#iefix') format('embedded-opentype'),
url('binaritcbol-webfont.woff') format('woff'),
url('binaritcbol-webfont.ttf') format('truetype'),
url('binaritcbol-webfont.svg#binary_itcregular') format('svg');
font-weight: normal;
font-style: normal;
}body {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
line-height: 1.4;
background-image: url(images/background.gif);
background-repeat: repeat;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* 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;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
h1 strong {
color: #C60651;
font-size: 90%;
font-family: "Binary ITC Bold";
h1 strong em {
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:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
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 container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300";
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C60651;
border-left-color: #C60651;
/* ~~ 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 {
padding-top: 40px;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
#Quote {
float: right;
clear: left;
margin-right: 50px;
/* ~~ 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 15%;
padding-bottom: 10px;
margin-top: 40px;
border-top-color: #FFF;
border-left: #FFF;
margin-left: 25px;
background-color: #FFF;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.content {
width: 60%;
float: left;
margin-top: 40px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.sidebar2 {
float: left;
width: 30%;
background-color: #D3CCB2;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 5px;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding-top: 0;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 60px;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300";
font-size: 100%;
color: #666;
#Quote {
float: right;
clear: both;
/* ~~ 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 */
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
line-height: 250%;
.nav {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
ul.nav li {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
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. */
text-decoration: none;
color: #333333;
background-color: #FFF;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
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 */
color: #C60651;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
background-color: #FFF;
background-image: url(images/navbar2.gif);
/* ~~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 */
/* ~~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;
.container .content {
width: 50%;
font-size: large;
#footer { width: 100%;
background-color: #FFF;
.container .sidebar2 h4 img {
padding-left: 20px;
padding-top: 0px;
.sidebar2 p img {
border: medium solid #C60651;
#Insert_logo2 {
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
.container .content p .content strong {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.container .content .content {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.container .content ul li strong {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
font-size: 95%;
line-height: 150%;
list-style-type: disc;
test {
font-family: "Binary ITC Bold";
.container .sidebar2 p img {
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-color: #C60651;
border-right-color: #C60651;
border-bottom-color: #C60651;
border-left-color: #C60651;
li strong {
line-height: 130%;
list-style-type: circle;
color: #978980;
.container .content ul {
.container .sidebar1 .nav {
margin-top: 10px;
margin-bottom: 10px;
.nav li a {
background-image: url(images/navbar2.gif);
background-repeat: no-repeat;
background-position: right center;
left: auto;
right: auto;
clip: rect(auto,auto,auto,auto);
.container .sidebar1 h6 {
padding: 0px;
color: #000000;
#footer h3 strong {
font-size: 60%;
color: #978980;
.container .content p {
padding-left: 5%;
padding-right: 5%;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.container .sidebar2 p {
padding-right: 8%;
padding-left: 8%;
padding-top: 5px;
#Insert_logo2 #Insert_logo2 {
padding-left: 15px;
.container .content ul {
color: #C60651;
h6 {
color: #000;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.sidebar1 h8 strong {
font-size: 80%;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300";
.container .sidebar1 h7 {
font-size: 40%;
color: #978980;
.h7 {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
font-size: 15%;
.container .sidebar1 h8 {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<body>
<div class="container">
<div class="header"><!-- end .header -->
<p class="clearfloat"><a href="#" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Insert Logo Here" name="Insert_logo" width="638" height="110" id="Insert_logo2" style="background: #FFF
; display:block;" /></a></p>
<div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
<p class="clearfloat"> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Parents/Educators</a></li>
<li><a href="#">Professionals</a></li>
<li><a href="#">Bio/Contact</a></li>
<li><a href="#">Q & A Blog</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<h8><strong>Your Career Direction</strong><br></h8>
<h6>96 Harvard Avenue<br>
Maplewood NJ 07040<br>
[email protected]<br>
(973) 996-0207</h6>
<h7>© Your Career Direction, LLC, 2012<br>
</h7>
<p> </p>
</div>
<div class="content">
<h1><strong><img src="images/Whether-you-are.gif" width="266" height="48" alt="Whether you are"></strong></h1>
<ul>
<li><strong>Considering your college choices & career options</strong></li>
<li><strong>Preparing for the world of work after college</strong></li>
<li><strong>Seeking a new position to further your career</strong></li>
<li><strong>In-transition and considering new opportunities</strong></li>
<li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
</ul>
<p> </p>
<h1><img src="images/One-thing-is-for-sure.gif" width="310" height="38" alt="One thing is for sure"></h1>
<p>We all need to direct our own careers, our own lives!</p>
<p>Given today's competitive job market, global economy, and changed corporate culture, we can no longer depend upon others to ensure our professional futures. Choosing or changing your career direction requires self-reflection, career education and an action plan. </p>
<p> Building a successful and rewarding career requires linking your interests, education and skills, with trending industries, job opportunities and your experience. It takes making smart decisions about your college major, vocational training and continuing education options. With motivation, persistence and top notch job search skills, you can succeed in finding a path to building a career that is right for you.</p>
<p>At Your Career Direction, we are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go. </p>
<p> </p>
<!-- end .content --></div>
<div class="sidebar2">
<p><img src="images/Counselingastudent.gif" width="321" height="256" alt="Lisa Mark counseling a student"></p>
<p>By combining an understanding of your interests and current skills with what’s happening in today's marketplace we’re able to partner with you to develop new career ideas, target companies, and generate job and internship opportunities. We provide step by step assistance to ensure success in your written communications, presentation skills, job search, interviews and life choices.</p>
<p>At Your Career Direction, YOUR career is our passion. Our mission is to educate and counsel you to choose your own path in life and become what you want to be. </p>
<p> </p>
<p> </p>
<!-- end .sidebar2 --></div>
<div class="footer">
<div id="footer">
<h3 align="center"> </h3>
</div>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Thanks for your help.You are using % widths for your layout which means it will look different depending of the size of each users monitor. Although this is probably the better way to go these days, it is not one size fits all and will work more effectively if you include min and max widths, and also media queries that change your layout depending on the monitor size. This is more advanced coding and will take time if you want to do that. Alternatively, you could design using pixel widths and have it look consistent across all desktop browsers and throw a few media queries in for the mobile side.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-7 5660
More on Media Queries
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mo bile-version-of-your-website/ -
HTML code displays on one line in browser view source
Hi,
In Dreamweaver, my HTML code displays returns, spaces, etc. However, in the view source option in a browser (Firefox in particular), all the code is displayed on one single line. I only found about this because I was having problems with my Google Ads not displaying. (A Google customer service person helped me to find a workaround for this since I still haven't figured how to get my code to display correctly.) So I have gone to Preferences in DW and changed my Code Format Line Break type. The result is the same with each of the three options: the code is all on one line when you check it under view source in a browser. (The server is Linux.)
Does anyone know how to fix this? Also, I think I know how this happened in the first place. I copied my code to TextEdit for a quick backup the other day, and then I pasted it back to DW. Bad idea? Is the only way to get the code back to normal to re-write it in a new HTML file in DW?Pssh. Problem solved, but I'm not quite sure how. I did go back and try to clean up some redundant CSS and other things, but the HTML/CSS validator still shows that I have this one invalid <header> tag (www.nextmontenegro.com), but since that was written as part of the DW template, I just left it. Weird. Anyway, the code flows down the page now.
Thanks for the quick replies and helpful hints:-) -
"Preview in Browser" only shows slices
I'm been working on a mutli-page website mockup. When I add slices to my design and then select "Preview in Browser" ONLY the slices are showing up. Only when I delete the slices can I preview my whole design.
Ideas? For the life of me, can't seem to figure this out.
I use Fireworks CS6. Thanks!Try going to File > HTML Setup. Within the Document Specific category, be sure that "Include areas without slice objects" has been checked.
Maybe you are looking for
-
Hi All, I have some understanding of key mapping internal functionality. my question is ... should I use this key mapping feature from all look up tables, main table while importing from remote systems? should all my feilds have REMOTE KEY enabled.
-
Caller Id not working nothing showing in my settings under phone to activate or deactivate
HOw do I turn on caller I'd if I do not have option in phone settings used to have it not sure what happened
-
SAP B1 Client closes in AR Invoice
Hi experts, We need your help in the following issue. When trying to add a Sales Invoice in client SAP 9.0 (PL5), we choose a Customer and an Item code and then after few seconds SAP closes and error message appears:Unhanced Exception "SAP Business O
-
"Datasource" or "Tx Datasource" for Local Transactions
I am wondering whether I should use a "Normal DataSource" or "Transactional DataSource" Object in my EJB deployment. According to the docs, Tx Datasources are needed only for distributed transactions. For local transactions Datasource is recommended.
-
"Reader Extensions ES" in Command Prompt.
Is it possible to use the "Reader Extensions ES" through command prompt. Kindly advice me. Thanks, Prabudass