SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to learn from source of existing site

    Hi All,
    A newbie here, working on his first site...am trying to use the source code of a site I like, to learn and design but am unable to see how the HTML and the CSS for the page work together...i saved the CSS in a local file and used href to include it in the HTML but the page is rendered without any styling in the browser when i preview...can someone tell me how i need to look at this properly - the site is www.coffeecup.com? (i've included the sample original code and my changes below)..

    Original code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
    ...
    <link rel="stylesheet" href="/min/?b=stylesheets&amp;f=master.css,homepage.css,colorbox.css,actionModal.css" type="text/css" media="screen">
    ...

    My changes:
    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
    ...
    <link rel="stylesheet" href="C:\Website\styles.css" type="text/css" media="screen">
    ...

    Appreciate any replies,
    Max.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi maxdp73. Welcome to the forums.

    <link rel="stylesheet" href="C:\Website\styles.css" type="text/css" media="screen">
    The first question is: where is the page that's calling these styles located? If it's not in the "Website" folder, then that will be a problem.

    I'm not familar with Windows file paths, either, so I can't tell if that's a valid path or not. What does the path to your page file look like? Is that path above actually what you see in your browser address bar for the CSS file?

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,156
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    I would just use a relative file path there - it's easier (in my opinion ).

    So if your CSS file is in the same folder as your HTML file, all you would need is:
    Code:
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen">

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for ur quick replies, ralph and technobear...i tried the relative path method and its worked!...am not sure why the absolute didn't ...

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maxdp73 View Post
    am not sure why the absolute didn't ...
    That normally doesn't work on desktop, as that's probably not the real absolute path. You can only really use absolute paths on your desktop if you are using a local server environment like XAMMP. (Well worth checking out, because you can set your site up with the same absolute paths on your desktop as online, meaning you don't have to change anything when you upload. You can also run PHP etc.)

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have downloaded XAMMP, Ralph, will work on it from now on...thnx for the tip..

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maxdp73 View Post
    thnx for the tip..
    You're welcome. I haven't used XAMPP because I'm on a Mac, which uses MAMP instead. But another handy thing to know about to make the experience even better is to learn how to set up "virtual hosts", so that your URLs can be exactly the same in XAMPP and online. Here is a post that may help:

    http://sawmac.com/xampp/virtualhosts/

    (I just Googled this, as there's an equivalent resource for MAMP.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •