Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post

    Smile view css with html in safari before uploading to server

    Hi there,

    I apologize that this may seem like a stupid question, but please keep in mind that I'm new to this. I'm writing my html code in text wranger and have started a separate css file that the html file will link to. I've been checking my html by dragging the file into safari to see what it looks like, and I can see the css styling when I directly place it in the header of the html, but not if I link to the css file. How can I check it along the way just like I do with the html file that way I know how it looks as I continue to learn and build the site?

    Thanks!

    Cat

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    This sounds like it might be how you are linking to your css file. Does your link tag look like the following?
    Code:
    <head>
    <title>Testing</title>
    <link rel="stylesheet" type="text/css" href="testing.css" />
    </head>
    If it does, then it might be a relative/absolute path issue. Could you post your coding?

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post

    html for section

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Sincerely Curious</title>
    <link rel="stylesheet" type="text/css" href="sincerelycurious.css" />
    </head>
    <body>
    <header role="banner">
    <h1>Sincerely Curious</h2>

    <!--site logo could go here-->
    <header>
    <nav role="navigation">
    <ul>
    <article class="social header">
    <h2><a href="http://www.facebook.com/cat.kustes">Facebook</a></h2><h2><a href="https://twitter.com/Catkustes">Twitter</a></h2>
    <h2><a href="http://www.linkedin.com/pub/caitlin-kustes/3a/6b6/90b">Linked In</a></h2>
    <h2><a href="http://sincerelycuriousblog.blogspot.com/">Blog</a></h2>
    </ul>
    </div>
    </nav>

    CSS text:
    <style media="screen" type="text/css">
    h2{
    color: red;
    font: 11
    }

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    As fireplace said it is probably a linking problem.

    I've always had trouble understand the linking concept without an Apache server. For some reason I keep thinking you cannot use the relative path without localhost, but I just tested this on windows and you can. Are you running on localhost?

    If the file is .php and you are not running with some kind of localhost bundle, it will not work as your computer does not have php installed (is that the reason lol?).

    Try using the absolute path as I'm curious to whether this is the problem. If you are using notepad++ or pnotepad or some kind of smart notepad, right click the tab ("asdf.html" in my example) and select "copy file path" or "full file path" or something of the sort and use it in your link href instead.



    Muahaha sunfighter, too slow
    Last edited by Sammy12; 10-03-2012 at 05:16 AM.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    <link rel="stylesheet" type="text/css" href="sincerelycurious.css" />
    As fireplace_tea has said change the href to the absolute path.
    Like href="/C:/wamp/www/TestPrograms/css/sincerelycurious.css"
    If that's where it is located.

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    hmm the relative path i used was:href="/Users/Catkustes/Desktop/sincerely curious html/sincerelycurious.css

    the html is saved as a .html and the css file is saved as a .css

    i'm not using apache and i don't have a local host set up. all i've been doing is writing the code in textwrangler and dragging/dropping into safari to see what it looks like. the html works but when i try and link to the the css it doesn't work. it works when i put the css directly into the html, although i'd rather keep it as a different file.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Check these editors out http://webdesign.about.com/od/macint...sh-editors.htm

    I use an editor I bought but I still program css as part of the html instead of two files. I only separate them if it's a large project. The reason for one file. I don't have to save the file to see changes in html or css, but if the css was a seperate file I would have to save it before seeing changes to it. Save a Cntr-s. Yeah, totally lazy.

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi catkustes,

    Sorry for not attributing more to the conversation sooner. I took on a short migration project that lead to 13 hour days (like from 4pm - 5am)...it sucked

    Silly question for you. Is your .css file and .html file save in the same folder? And are you sure you have spelled your .css file correctly in your <link> tag?

    Also, I noticed in your .css coding that you listed in an early post, you are missing some coding with font, such as the ending semi-colon. Since font is a shorthand property that sets all the font properties in one declaration and you are only using it for font-size, I would just do this coding:

    Code:
    h2{
    color: red;
    font-size: 11px;
    }
    Also, in your css file do you have the coding <style media="screen" type="text/css"> as you show in your example above? Because, I"m pretty sure that shouldn't be in the .css file, which could also be causing you the issue. Here is your example coding from an earlier post:
    Code:
    CSS Code:
    <style media="screen" type="text/css">
    h2{
    color: red;
    font: 11
    }
    Last edited by fireplace_tea; 10-06-2012 at 05:57 AM.

  • #9
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    yikes that sounds horrific!

    I got lazy and decided to combine my html/css project into one. My pages on my site will all be unique besides for the header so i figured that shoullllddd be okay.

    I did have the css and the html file in the same folder....not sure if that changes anything :/

    I'm going to try with another project and take your advice and see if i just messed up something silly with it.


  •  

    Tags for this Thread

    Posting Permissions

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