Website looks nothing like my design :|

Hi All,
Second post here, hope that you are able to assist.
So I started to build a website and its based on the throughout template: http://www.freecsstemplates.org/preview/throughout/.
In dreamweaver, and its preview through to firefox, it looks great. Otherwise, as soon as its on the web, it looks nothing at all, like it should :|
We have a silver business package with FastHosts. Things like ASP and PHP are included as standard, but I just cant see whats gone wrong or why?
So click on the above link to see how the template should really look (colour in my website is a goldy yellow text with black background, all else is very similar)
and the below is what it looks like on the web :|
Can anyone advise if I am missing the obvious? do I need to set something on fasthosts to allow the javascript of the template?

You're a beginner. It takes time to learn everything you don't know. To save some time, copy and paste this code into a new, blank document. I stripped out everything non-essential and changed your slideshow to jQuery Cycle2. It works now.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mark Jenkinson Photography</title>


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
body {
background: #000;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
color: #FFCC00;
section {
width: 940px;
margin: 0 auto;
background: #333;
padding: 12px;
/* Top Menu */
nav {
float: left;
width: auto;
height: 68px;
nav ul {
margin: 0;
padding: 15px 0px 0px 5px;
list-style: none;
line-height: normal;
nav li {
display: block;
float: left;
nav a {
display: block;
float: left;
padding: 20px 25px 0px 20px;
letter-spacing: -1px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FF9900;
nav a:hover, nav a:active, nav a:focus {
color: #FF9900;
background-color: #333;
/**text links**/
a img { border: none }
a { text-decoration: none }
a:link { color: #FFCC00; }
a:visited { color: #CCC; }
a:hover, a:active, a:focus { text-decoration: underline }
/**Slideshow**/
.cycle-slideshow {
clear:left;
width: 500px;
margin: 0 auto;
.cycle-slideshow img {
width: 526px;
height: 345px;
border: 4px solid #666
.cycle-slideshow h4 {
margin: 0;
padding: 0;
font-size: 36px;
color: #CCC;
text-align: center;
</style>
</head>
<body>
<section>
<header>
<img src="http://www.markjenkinsonphotography.com/MJP/MJP.png" alt="" width="858" height="48" id="Logo" />
<nav>
<ul>
<li><a href="#" class="first">Homepage</a></li>
<li class="current_page_item"><a href="blog.html">Blog</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="AboutMe.html">About</a></li>
<li><a href="ContactUs.html">Contact</a></li>
</ul>
</nav>
</header>

<div class="cycle-slideshow" data-cycle-fx="swipe"
data-cycle-slides="> div"
>
<div>
<img src="http://www.markjenkinsonphotography.com/MJP/arch0001.jpg" alt="" />
<h4>caption 1</h4>
</div>
<div>
<img src="http://www.markjenkinsonphotography.com/MJP/nat0001.jpg" alt="" />
<h4>caption 2</h4>
</div>
<div>
<img src="http://www.markjenkinsonphotography.com/MJP/ani0001.jpg" alt="" />
<h4>caption 3</h4>
</div>
<div>
<img src="http://www.markjenkinsonphotography.com/MJP/fam0001.jpg" alt="" />
<h4>caption 4</h4>
</div>

</div>
<hr>
<article>
<h1><a href="#">Welcome to Mark Jenkinson Photography</a></h1>
<p>Welcome to Mark Jenkinson Photography. I hope you enjoy viewing the pictures as much as I have enjoyed shooting them.</p> <p>I am here to invite you into the albums, whether family events, days out with friends, day out with the children, or just your favourite locations snapped. If your interested, then contact me to find out more.</p>
<h2><a href="#">MJP Partnership with 'doo Dah Event Planning'</a></h2>
<p><a href="http://www.doodahheventplanning.co.uk/default.html">
<img src="http://www.markjenkinsonphotography.com/MJP/DooDahhEventPlanning.jpg" width="200" height="200" alt="" />
</a></p> <p>Mark Jenkinson Photography has now formed a partnership with Samantha, founder of "DooDahh Event Planning". Based in Ashford, Kent, she works with other suppliers as well as myself, to offer various packagebut specialising in weddings. Why not visit her website at http://www.doodahheventplanning.co.uk/default.html and see the excellent work she has done?</p> </article>
<footer> <p>Copyright (c) 2013 Mark jenkinson photography - www.markjenkinsonphotography.com - All rights reserved.</p> </footer>
</section>
</body>
</html>
Nancy O.

Similar Messages

Why does my site look nothing like the design and during testing once uploaded to the server?

Why does my site look nothing like the design and during testing once uploaded to the server?,
Im using Muse whichj crashes like you would not beleive, but after much perseverance I got a basic 4 page holding site together, I tested the site and it all looked fine, when I uploaded it to the server it looks nothing like the site I tested, to the point that even the background has changed colour and nothing is in the rite place.

Hi John, Sure it's
http://www.thezine.co.uk
thanks
it should be looking like this

My website looks nothing like how business catalyst publishes it when i launch it on my own FTP.

As soon as i Published my website onto the net on my FTP, none of the animations loaded, and non of my images looked like/act how they were supposed to, i rotated pictures, croped them on the program but they all were diplayed as the original image. the background is not filled with a colour, which this wasnt the case on business catalyst. the website looks oddly scrabbled with images everywhere with text that does not act as accordions etc.
here is my website : http://emeraldpublishing.org/index.html
business catalyst: http://sdsdsdfdfsdsd.businesscatalyst.com/index.html

The problem is the scripts folder is not on the server.
If you're using File > Upload to FTP Host... and errors are being displayed, I need to know exactly what the errors are (generally screenshots are easiest).
I recommend you choose "All Files" when using File > Upload to FTP Host... this one time, since the previous incomplete upload may have left Muse confused about what files are and are not on the server.

My Website Looks Nothing Like It Should When Published

I recently updated my website and when I published the updates, it changed everything. It is a mess. What do I do?
The site is http://www.mokeemotel.net

Sorry I forgot to add that http://www.mokeemotel.net is only one of the pages.
The other one is http://www.motelmokee.com
The .com site is still jumbled up. The .net site is working as it should now.

Why does my published site look nothing like the Muse site I designed?

I have published and taken live several sites and they all looked as expected. The most recent site looks nothing like the Muse site I designed. I published it and BC took me to the home page, where all the background images, graphics, slide show are all missing. Text looks like regular text, not html formatted text. I can't show this. What happened?

Similar situation just happened to me this morning. Opened a Muse site I was working on and when I preview it the web fonts are not showing and alignment is wierd. ??? Was working fine last week.

Why does my BC look nothing like the Tutorials???

My admin console looks NOTHING like the tutorials. There's no top tabs, theres no icons, theres no description of my website pages...it's very plain/vanilla and very much unrefined.
I'm clearly in the wrong area, or there was some update that took place that seems like it took more than two steps backward.

Hi,
You are in the correct area its just that some of the articles might be referencing the old v2 interface while you are on the new v3 interface.
We're in the process of making sure all our documentation will reflect the new interface however in the meanwhile you can reference articles on this page.
- http://helpx.adobe.com/content/help/en/business-catalyst/topics.html
If stuck on anything let us know and we'll assist further.
Kind regards,
-Sidney

When I copy and paste text in facebook, the text looks fine until I hit 'share' or 'comment' to submit it. Firefox then adds indiscriminate line-feeds within the text and it looks nothing like the original text. This does not happen in Safari. (Mac OSX 10

When I copy and paste text in facebook, the text looks fine until I hit 'share' or 'comment' to submit it. Firefox then adds indiscriminate line-feeds within the text and it looks nothing like the original text. It makes it very difficult to read and awful to look at.
This does not happen in Safari.
(Mac OSX 10.6.4 with Firefox 3.6.6).
== URL of affected sites ==
http://

Same problem, 3.6.8 and previous recent versions. I never thought to try another browser but I just pasted into IE and it worked fine. I copied from Firefox to IE and it worked as well. It's just when you paste into Firefox that you get the weird line breaks.

HT2905 My itunes looks nothing like the examples in this tutorial. I do not have "display exact duplicates" or "date added". Can someone please help me remove duplicate songs? Also, I downloaded two audio books and they are showing up in my song list.

My itunes looks nothing like the examples in this tutorial. I do not have "display exact duplicates" or "date added". Can someone please help me remove duplicate songs? Also, I downloaded two audio books and they are showing up in my song list. Why???

'Show duplicates' is now under the 'View' menu. To see the 'Date added' column go to 'View options' from the 'View' menu and check it in the section under 'Stats'.
Click an audiobook once to select it and hit command-i (Mac) or control-i (Windows). Go to the 'Options' tab and set 'Media Kind' to 'Audiobook'.

My firefox 4 default theme looks nothing like the one in the video.

I just installed firefox 4. Sadly my default theme looks nothing like the one in the video..
Heres how it looks..
http://i51.tinypic.com/2w5ru4o.png

First you need to use the default theme "Default 4.0" in "Tools" > "Add-ons" > "Appearance".
After that, right click the top bar and unckeck "Menu Bar". This will disable the menu bar and show the orange Firefox button.
Make sure you have also "Tabs on top" checked.
I also see you use ChromiFox theme in Firefox 3. If you want to have a similar theme for Firefox 4, you can download the FXChrome theme.
https://addons.mozilla.org/en-US/firefox/addon/fxchrome/

I downloaded FF 4 and now 5 and with neither my screen looks nothing like it shows on the FF page. For instance, I do not have the orange FF tab in the upper left corner, I have no option of "pin as app" nor do I have Panorama. Can someone please help me?

I downloaded FF 4 and now 5 and with neither my screen looks nothing like it shows on the FF page. For instance, I do not have the orange FF tab in the upper left corner, I have no option of "pin as app" nor do I have Panorama. Can someone please help me?

To get the orange FF tab, go to View > Toolbars > Menu Bar. This should uncheck the menu bar and give you the orange button.
Panorama is a box made of 4 grey rectangles that should be on the far right, if it isn't after you enable the orange FF tab, right click on anywhere on a tool bar that doesn't have anything on it, and you should get a menu with a list of your tool bars that you can check and uncheck. go down to customize at the very bottom and it will open a window with all your buttons. Find the panorama/tab groups button and drag it onto the tool bar of your choice.
to pin a tab as an app, right click on it; it's an option in the right-click menu.

Why is it that I downloaded Firefox 4.0 but I do not have the orange firefox box in the upper left hand corner of screen. My screen still looks like the old verison of firefox. My screen does not look like the one in the video. looks nothing like the one

My Firefox 4.0 does not look anything like the videos you show about the features of the new Firefox. My screen looks totally different than yours. It does not have the orange box in the upper left hand corner of the screen. My screen still looks like the old version. I have the logo on the top of my screen with Ask a Question a vertical line Firefox Help - Mozilla Firefox.
Under this line I have File, Edit, View, History, Bookmarks, Tools, and Help. Below this line is a tab with Ask a Question Firefox Help and a +. My husbands screen looks identical to the orange Firefox Box in the upper left of screen. I would like my screen to look identical to the ones shown in your videos. I only have one version of Firefox 4.0 my husband does have the Firefox 4.0 plus the Beta version. How do I add the Beta version? I have Windows Vista running systems. Please help. Thank you

You're welcome

My Firefox 4.0 Tools/Options/General menu looks nothing like your instructions. How do I tell websites that I don't want them to track me if my menu doesn't look like your instructions?

My question is self-explanatory.

I too have this problem. To provide more information on my issue, my file/edit/view... toolbar looks identical to how it did in version 3.6. I tried general update from 3.6x-4, and I tried a clean uninstall and reinstall (fully deleting and not fully deleting profiles; tried both) to 4.0 and my toolbar still looks identical to 3.6. I know it updated because the about says 4.0 and I have the tabs above option and the "awesome bar" toolbar looks new. My awesome bar toolbar is missing the privacy browsing button as well though.

When I updated Firefox and watched the "New Features" tour video upon restarting, my Firefox looks nothing like what's in the video

When I watched the video based on what's new on the newest version of Firefox, I realized that my Firefox window did not look like anything like what was being shown on the video.

Do you see text links at the top?<br><br>
* Right click a blank part of the Tab bar and then click "Menu Bar". This will remove the text links and restore the orange Firefox button.<br>
Do you want tabs on top?<br><br>
* Right click a blank part of the Tab bar and then click "Tabs on top" to move them above the location bar.<br><br>
* To rearrange the layout, repeat the same steps again and choose "Customize". A panel will open and while that remains onscreen, you can move elements like toolbars, buttons etc around and place them anywhere you wish. You can also drag anything you don't like into that panel and add anything you want by dragging it out of there.<br><br>
* The status bar has been removed in Firefox 4. If you want it back, install this add-on: https://addons.mozilla.org/en-US/firefox/addon/status-4-evar/<br><br>
See also: http://support.mozilla.com/en-US/home

Preview Looks Nothing Like Live View`

I used a 3 column fixed header and footer template in DW CS6 and when I preview it in Chrome or IE all of my columns are gone and the page is lined up like I don't have any columns-does anyone know why? I'm all ears!!!
Live View
Chrome Preview

It's not live yet but here's the code. I want to use this as the template for the rest of the site so your help is really appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>PCC Template</title>



<link href="/www.ocpcc.org/pcc_template.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
          background-color: #ffffff;
</style>
<link rel="stylesheet" href="../ajxmenu.css" type="text/css">
<script src="../ajxmenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="../pcc_nav.css" type="text/css">
<style type="text/css">
a:link {
          color: #0000FF;
a:visited {
          color: #660000;
a:hover {
          color: #000000;
a:active {
          color: #0000FF;
h1 {
          font-size: 16pt;
          color: #000000;
h2 {
          font-size: 14pt;
          color: #000000;
h3 {
          font-size: 12pt;
          color: #000000;
</style>
<script src="../pcc_nav.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header"><a href="#"></a>
    <img src="/www.ocpcc.org/images/banner_orig.png" width="960" height="115" alt="PCC Banner"></div>
<div class="sidebar1">
    <ul class="nav">
      <li>
        <div class="AJXCSSMenuBaUdNOD">
          <ul>
            <li class="tfirst"><a id="AJXCSSMenuBaUdNODitem_0" href="#">Welcome</a></li>
            <li><a href="#">Who We Are</a></li>
            <li><a href="#">Sermon Series</a></li>
            <li><a href="#">Worship Schedule</a></li>
            <li><a href="#">Calendar of Events</a></li>
            <li class="tsub"><a class="ajxsub" href="#">Getting Connected</a>
              <ul>
                <li class="sfirst"><a href="#">Children's Ministries</a></li>
                <li><a href="#">Student's Ministries</a></li>
                <li><a href="#">Women's Bible Study</a></li>
                <li class="slast"><a href="#">Retired Men's Group</a></li>
              </ul>
            </li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Fellowship</a></li>
            <li class="tlast"><a href="#">Pastor Tim's Blog</a></li>
            <li class="timg"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""></li>
          </ul>
          <br >
        </div>
      </li>
    </ul>
    </div>
<div class="content">
    <h1> </h1>
    <h1>Content</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> 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>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
<p> </p>
<p class="container.titleorange"><em><strong>Special Upcoming Events</strong></em></p>
<p> </p>
<p>Angels Game 8/17</p>
<p>  <img src="/www.ocpcc.org/images/angels_oval.png" width="117" height="192" alt="Angels Game"></p>
<p>All Church Picnic</p>
<p>     <img src="/www.ocpcc.org/images/volleyball_thumb_border.jpg" width="128" height="106" alt="Picnic"></p>
<p>The Story</p>
<div class="footer">
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote>
            <blockquote>
              <blockquote>
                <blockquote>
                  <p>Presbyterian Church of the Covenant<br>
                    2850 Fairview Rd<br>
                  Costa Mesa, CA 92626
                  <br><strong>Email:</strong> Click <a title="Email Natalie" href="#mailto:[email protected]" target="_blank">here</a> to send us an email<br><strong>Phone:</strong> <span id="gc-number-0" title="Call with Google Voice">(714) 557-3340</span><br>
                  </p>
                </blockquote>
              </blockquote>
            </blockquote>
          </blockquote>
        </blockquote>
      </blockquote>
    </blockquote>
    </div>
</div>
</body>
</html>

Gtk+ look and feel looks nothing like Gtk+

But I guess it feels something like Gtk+. Oh well. I was hoping for something a little more useful.

Take a blue marker to the screen?
Some information will possibly get a better answer.

Website looks nothing like my design :|

Similar Messages

Maybe you are looking for