Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

CSS problem

  • 20-01-2012 3:44pm
    #1
    Registered Users Posts: 1,013 ✭✭✭


    Hi, If someone could help me it would be great. I have downloaded a website template in HTML and have amended it to suit. When I look at the preview in Dreamweaver it is all working fine. But when I make the website live, the styling seems to be missing even though any css sheets I have are in the directory. Anyone help please???


Comments

  • Registered Users Posts: 11,977 ✭✭✭✭Giblet


    Open the page in a browser, right click and click 'View Source'
    Paste it here.


  • Registered Users Posts: 129 ✭✭nager


    your link to the css stylesheet are probably wrong.


  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    Giblet wrote: »
    Open the page in a browser, right click and click 'View Source'
    Paste it here.

    Here it is:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt; <head> <title>LM Design Web Design</title> <meta name="author" content="Your Inspiration Web - Nando [php, xhtml, css], Sara [graphic design]" /> <meta name="keywords" content="single web page, single page website, single page template, single page layout" /> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- [template css] begin --> <link rel="stylesheet" href="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/css/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/css/960.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/css/print.css" type="text/css" media="print" /> <!--[if IE]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> <!-- [template css] end --> <!-- [favicon] begin --> <link rel="shortcut icon" type="image/x-icon" href="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/favicon.ico" /> <link rel="icon" type="image/x-icon" href="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/favicon.ico" /> <!-- [favicon] end --> <!-- Some hacks for the dreaded IE6 ;) --> <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" /> <script type="text/javascript"> var clear="images/clear.gif"; </script> <script type="text/javascript" src="js/unitpngfix.js"></script> <![endif]--> <script type="text/javascript" src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/mootools-yui-compressed.js"></script> <script type="text/javascript" src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/jquery.js"></script> <script type="text/javascript" charset="utf-8">jQuery.noConflict();</script> <!-- START FANCYZOOM --> <script type="text/javascript" src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/fancyzoom.js"></script> <script type="text/javascript" charset="utf-8"> document.addEvent('domready', function() { $$("div.photo a").each(function(el) { new FancyZoom(el, { scaleImg:true, onShow: function(e) { var fancy = this var a = fancy.content_div.getElement('a') if(a && a.getElement('.loading')) { var loaded = function() { fancy.loaded = true fancy.options.width = this.width fancy.options.height = this.height a.empty().adopt(this) FancyZoom.show(e) } var image = new Image() image.onload = loaded image.src = a.href } }, max: 700 }) }) }); </script> <!-- END FANCYZOOM --> <!-- START SCROLL --> <script src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/scroll.js" type="text/javascript"></script> <!-- END SCROLL --> <!-- START CUFON --> <script type="text/javascript" src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/cufon-yui.js"></script> <script type="text/javascript" src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/dustismo_400.font.js"></script> <script type="text/javascript"> Cufon.replace('h1,ul#nav,h2,h4', { hover: true, fontFamily: 'dustismo' }); </script> <!-- END CUFON --> <!-- START VALIDATE FORM CONTACT --> <script type="text/javascript" src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/js/form-contact-validate.js"></script> <!-- END VALIDATE FORM CONTACT --> </head> <body id="home-page"> <!-- START TOP FADE --> <div class="top-bg"> </div> <!-- END TOP FADE --> <!-- START BOTTOM FADE --> <div class="bottom-bg"> </div> <!-- END BOTTOM FADE --> <!-- START HEADER --> <div class="container_12"> <!-- START NAVIGATION SECTION --> <div class="grid_3 alpha"> <div class="fixed-column"> <!-- START LOGO --> <a href="index.html" title="home page"> <img src="LMLogo.png" alt="logo" class="logo" /> </a> <!-- END LOGO --> <!-- START NAV --> <ul id="nav"> <li><a href="#home-page" title="Home page">home</a></li> <li><a href="#about-page" title="about">about</a></li> <li><a href="#portfolio-page" title="portfolio">portfolio</a></li> <li><a href="#contact-page" title="contatti">contact</a></li> </ul> <!-- END NAV --> <!-- START FOLLOW ME --> <a href="https://www.facebook.com/pages/LM-Design-Web-Design/147341128690388" title="follow me on twitter" target="_blank"> <img src="facebook.png" alt="" class="follow-me" /> </a> <!-- END FOLLOW ME --> <!-- START SEND ME AN EMAIL --> <a href="mailto:lauramahoney@lmdesign.ie" title="Send me an email" target="_blank"> <img src="email.png" alt="send mail" /> </a> <!-- END SEND ME AN EMAIL --> <!-- START ADD ME ON SKYPE --> <a href="http://ie.linkedin.com/pub/laura-mahoney/21/834/7a1" target="_blank"><img src="linkedin.png" alt="LinkedIn" /></a> <!-- END ADD ME ON SKYPE --> <!-- DO NOT REMOVE: START CREDITS --> <!-- END CREDITS --> </div> </div> <!-- END NAVIGATION SECTION --> <div class="grid_9 omega right-column"> <!-- START HOME PAGE --> <div class="home"> <!--<img src="images/text-home.jpg" alt="contenuto-home" />--> <h1>Welcome to my <span>portfolio</span>: <br /> I love to create lovely things, including both <span><br /> web</span> & <span>graphic</span> design! </h1> <!--<img src="images/arrow-home.png" alt="arrow" class="arrow" />--> </div> <div class="home-bottom-bg"></div> <!-- END HOME PAGE --> <!-- START ABOUT PAGE --> <a id="about-page"></a> <div class="about"> <div class="grid_5 alpha"> <div class="container-about"> <h2>About </h2> <p> My name is Laura Mahoney and I am a web and graphic designer. I have been a Web Designer since October 2009. <br /> I have many websites online and have also completed several logos for businesses.<br /> I love what I do and I enjoy getting stuck into a good project!<br /> Previously I worked as an architectural technician for 7 years therefore I also have a good eye for detail and not shy of hard work and deadlines!</p> <p> </p> </div> </div> <!-- START AVATAR --> <div class="grid_4 omega avatar-image"> <img src="Portrait.png" alt="avatar" class="avatar" /> </div> <!-- END AVATAR --> <div class="clear"></div> </div> <div class="about-bottom-bg"></div> <!-- END ABOUT PAGE --> <!-- START PORTFOLIO PAGE --> <a id="portfolio-page"></a> <div class="portfolio"> <div class="grid_4 alpha"> <div class="container-portfolio"> <h2>Portfolio</h2> </div> </div> <!-- START PORTFOLIO QUOTE --> <!-- END PORTFOLIO QUOTE --> <div class="clear"></div> <div class="container-portfolio"> <!-- START THUMB IMAGE --> <div class="photo"> <a href="#project01"> <img src="thumbs/affirmlife.png" alt="Affirm Life" /> </a> </div> <div class="photo"> <a href="#project02"> <img src="thumbs/cao.png" alt="Asilo nido" /> </a> </div> <div class="photo"> <a href="#project03"> <img src="thumbs/donnadunne.png" alt="One Page Folio" /> </a> </div> <div class="photo"> <a href="#project04"> <img src="thumbs/jma.png" alt="Eclectic: Premium WordPress Theme" /> </a> </div> <div class="photo"> <a href="#project05"> <img src="thumbs/keaneconsulting.png" alt="Gold: Premium WordPress Theme" /> </a> </div> <div class="photo"> <a href="#project06"> <img src="thumbs/host.png" alt="" /> </a> </div> <div class="photo"> <a href="#project07"> <img src="thumbs/vinyl.png" alt="" /> </a> </div> <div class="photo"> <a href="#project08"> <img src="thumbs/danieljones.png" alt="" /> </a> </div> <div class="photo"> <a href="#project09"> <img src="thumbs/morgansports.png" alt="" /> </a> </div> <div class="photo"> <a href="#project10"> <img src="thumbs/corkjazz.png" alt="Asilo nido" /> </a> </div> <div class="clear"></div> <!-- END SMALL IMAGE --> <!-- START BIG IMAGE --> <div id="project01"> <a href="http://www.affirmlife.net" target="_blank"> <img src="bigpics/AFFIRMLIFE.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.affirmlife.net</p> </div> <div id="project02"> <a href="http://www.charteredaccountingonline.ie" target="_blank"> <img src="bigpics/CAO.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.charteredaccountingonline.ie</p> </div> <div id="project03"> <a href="http://www.donnadunnemusic.com" target="_blank"> <img src="bigpics/DONNADUNNE.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.donnadunnemusic.com</p> </div> <div id="project04"> <a href="http://www.jamesmitchellarchitect.com" target="_blank"> <img src="bigpics/JMA.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.jamesmitchellarchitect.com</p> </div> <div id="project05"> <a href="http://www.keaneconsulting.org" target="_blank"> <img src="bigpics/KEANE.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.keaneconsulting.org</p> </div> <div id="project06"> <a href="http://www.hosthospitality.ie" target="_blank"> <img src="bigpics/HOST.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.hosthospitality.ie</p> </div> <div id="project07"> <a href="http://www.vinylband.ie" target="_blank"> <img src="bigpics/VINYL.jpg" alt="loading" class="" /> </a> <p class="foto_caption">www.vinylband.ie</p> </div> <div id="project08"> <img src="bigpics/danieljones.jpg" alt="loading" class="" /> </a> <p class="foto_caption">Daniel Jones Band Logo</p> </div> <div id="project09"> <img src="bigpics/morgansports.jpg" alt="loading" class="" /> </a> <p class="foto_caption">Morgan Sports Logo</p> </div> <div id="project10"> <img src="bigpics/guiness logo.jpg" alt="loading" class="" /> </a> <p class="foto_caption">Cork Jazz Logo</p> </div> <!-- END BIG IMAGE --> </div> </div> <div class="portfolio-bottom-bg"></div> <!-- END PORTFOLIO PAGE --> <!-- START CONTACT PAGE --> <a id="contact-page"></a> <div class="contact"> <div class="grid_5 alpha"> <div class="container-contact"> <h2>Contact</h2> <div id="log"></div> <form id="emf-form" target="_blank" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/u7480VMYX2LFRD47&quot; name="emf-form"> <table style="text-align:left;" cellpadding="2" cellspacing="0" border="0" bgcolor="transparent"> <tr> <td style="" colspan="2"> </td> </tr> <tr valign="top"> <td id="td_element_label_0" style="" align=""> <font face="Verdana" size="2" color="#000000"><b>Name</b></font> <span style="color:red;"><small>*</small></span> </td> </tr> <tr> <td id="td_element_field_0" style=""> <input id="element_0" name="element_0" value="" size="30" class="validate[required]" type="text" /> <div style="padding-bottom:8px;color:#000000;"></div> </td> </tr> <tr valign="top"> <td id="td_element_label_1" style="" align=""> <font face="Verdana" size="2" color="#000000"><b>Email</b></font> <span style="color:red;"><small>*</small></span> </td> </tr> <tr> <td id="td_element_field_1" style=""> <input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" /> <div style="padding-bottom:8px;color:#000000;"></div> </td> </tr> <tr valign="top"> <td id="td_element_label_2" style="" align=""> <font face="Verdana" size="2" color="#000000"><b>Message</b></font> <span style="color:red;"><small>*</small></span> </td> </tr> <tr> <td id="td_element_field_2" style=""> <textarea id="element_2" name="element_2" cols="40" rows="10" class="validate[required]"> </textarea> <div style="padding-bottom:8px;color:#000000;"></div> </td> </tr> <tr> <td colspan="2" align="left"> <input name="element_counts" value="3" type="hidden" /> <input name="embed" value="forms" type="hidden" /><input value="Send" type="submit" /></td> </tr> </table> </form> </div> </div> <div class="grid_4 omega contact-info"> <p class="title">Any Questions?</p> <p> Don't hesitate to contact me.<br/> Fill in the form or email me directly. </p> <img src="[/email]LMLogosmall.png" alt="LM Design" width="100" height="111" class="contact-logo" /> <h3>LMDesignWebDesign</h3> <address> Dublin, Ireland </address> <p class="right"> <span>Tel: </span> 086 0836810<br/> <span>Email: </span>lauramahoney@lmdesign.ie</p> </div> <div class="clear"></div> </div> <div class="contact-bottom-bg"></div> <!-- END CONTACT PAGE --> </div> <div class="clear"></div> </div> <!--[if IE]> <script type="text/javascript"> Cufon.now(); </script> <![endif]--> </body> </html>


  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    nager wrote: »
    your link to the css stylesheet are probably wrong.

    BUt it all came together in the template i downloaded and it works fine in the preview


  • Registered Users Posts: 11,977 ✭✭✭✭Giblet


    Ok, you are using absolute paths for linking style sheets.
    You need to put the path relative to the document.

    ie: If you have the structure
    index.html
    style.css

    In the index.html, the path would be
    href="style.css"
    

    I suggest you copy the css file into the same directory as the html file, or a subdirectory of that folder and link relatively. ie: if you have the css in a subfolder of the folder that index.html resides in, link using
    href="subfoldername/style.css"
    

    Anywhere you see
    file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/

    Isn't going to work, as that only exists on your PC, so when you upload it, it won't know where to look. Everything needs to be self contained in one folder and everything in the document linked to those files using relative paths, so when you upload it, it doesn't lose the context.

    Dreamweaver preview is useless as well for most things, just use the browser.


  • Advertisement
  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    i will try this, thank you very much


  • Closed Accounts Posts: 9,700 ✭✭✭tricky D


    src="file:///C|/Documents and Settings/Laura Mahoney/My Documents/Downloads/YourInspirationFolio/template/..."
    

    This bit links to the file which is on your PC, not the server. There should be a 'use relative links' option in DW. Fix that with attention to what Giblet says.

    Also DW is not only rubbish for Design View/Preview but also the ftp functions can have issues. Consider using a dedicated ftp client like FileZilla.


  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    i do use filezilla for ftp


  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    Thank you both very much for your help, this has worked thankfully!


  • Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    <title>LM Design Web Design</title>

    Seriously ?

    I can only hope that this is a school project of some sort ?


  • Advertisement
  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    Liam Byrne wrote: »
    Seriously ?

    I can only hope that this is a school project of some sort ?

    Excuse me??


  • Registered Users Posts: 806 ✭✭✭Niall09


    lmahoney79 wrote: »
    Excuse me??

    I think he is saying you can't be seriously selling your services as a web designer, seeing as you made this thread about a very very basic error that one would make on their first day of learning html/css.


  • Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Maybe surprise got the better of my phrasing, so apologies for being so direct/abrupt.

    Everyone has to start somewhere, so if this is step 1 of a school or media project then the error is understandable and trying to learn is admirable and to be helped and encouraged.

    But if it is for a real site offering web design then it would certainly raise eyebrows and concerns.


  • Banned (with Prison Access) Posts: 1,332 ✭✭✭desaparecidos




  • Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne



    OK - colour me confused as hell.

    OP - how did you manage to create a (to be fair, pretty decent) portfolio of sites since 2009 without ever encountering the basic essentials re relative paths and having files in proper folders along the way ?

    Even if they are all bought templates rehashed or reworked, you must surely have changed the images in some of them in order to make them your own "design" ?


  • Registered Users Posts: 428 ✭✭[Rasta]


    Liam Byrne wrote: »
    OK - colour me confused as hell.

    OP - how did you manage to create a (to be fair, pretty decent) portfolio of sites since 2009 without ever encountering the basic essentials re relative paths and having files in proper folders along the way ?

    "powered by yiw"


  • Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    [Quote=[Rasta];76653487]
    Liam Byrne wrote: »
    OK - colour me confused as hell.

    OP - how did you manage to create a (to be fair, pretty decent) portfolio of sites since 2009 without ever encountering the basic essentials re relative paths and having files in proper folders along the way ?

    "powered by yiw"[/Quote]

    Still, unless all of the sites involved changing absolutely no images the same problem would have arisen.


  • Registered Users Posts: 1,013 ✭✭✭lmahoney79


    To answer peoples comments, I take your point and understand it.
    I have been a web designer since 2009 and have created the sites on my website working with coding and css etc. This problem I asked for help about came on a very frustrating and stressful day ( im not going to explain my personal stuff here)
    I made a schoolboy mistake by just simply not checking the code, but I had my reasons.
    I am sorry I am only human and I was having stupid day for many reasons.


  • Registered Users Posts: 11,977 ✭✭✭✭Giblet


    Guys, I've seen worse from people with 10 years or more experience.


Advertisement