www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with only some of css file being linked to html file

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Problem with only some of css file being linked to html file

    I have built a website (at long last). Whilst developing it I included the css code at the top of each html file. I am now trying to transfer the css code to it's own file and linking the html file to it.

    My problem is that the link works for the menus but not for the rest of the file. It looks like only the html file is displayed because text boxes and positioning etc are missing.

    My link is set up in the head section; <link rel="stylesheet" type="text/css" href="menu.css"/>

    The css file can be read here

    The website page used with the css is here

    If you click on books in the main nav bar you will see what the layout should look like.

    I've not done any css or html coding before. Can someone say what I need to do to get the page to display like the book page? The book page has the html in the head section.
    Thanks

  2. #2
    Join Date
    Aug 2012
    Posts
    7
    Lets see the HTML as well please.

    How are you declaring these selectors in your CSS? for example the names like "texted_5", "book_2", etc.

    You are not declaring them right. You are using selectors like they are elements, which they are not elements.
    You should be using Classes or ID's in your HTML file.

    For Example:

    <div class="book_2">
    <!--Some HTML inside a DIV named book_2-->
    </div>

    That is what the html would look like.
    In the CSS for that same html, it would look like this:

    .book_2 {
    property: 20px;
    etc: 30px;
    }






    If you were using ID's, you would have to use # instead of a period in front of the slector name in your CSS file.

    an ID would look like this:
    <div id="book_2">
    <!--Some HTML inside a DIV named book_2-->
    </div>


    The css for that would look similar to the class one, but with a small change.
    #book_2 {
    property: 20px;
    etc: 30px;
    }


    Also, consider running your CSS file through csslisible.com/?lang=en
    It will format it so its easier to read and navigate.
    You start off with spacing, but a quarter of the way through you drop the spacing.
    It just makes things more organized. Its a great tool.

  3. #3
    Join Date
    Aug 2012
    Posts
    7
    I fixed the top part of your CSS file so you could see what I mean. You were declaring each ID name, like they were elements.
    [Elements are the HTML name elements like "h1, h2, h3, body", etc. Even title and head, (which isn't actually style-able)]

    So since you are mostly using ID's to declare selectors, you must add # to your selectors, otherwise you are declaring elements...

    Code:
    body {
        width: 1000px;
        margin: 0 auto;
        padding-bottom: 90px;
        background-color: #c0c0c0;
    }
    
    #title {
        width: 1000px;
        padding-top: 3px;
        padding-bottom: 5px;
        text-align: center;
        background-color: #fffff0;
    }
    
    #title h1 {
        text-align: center;
        font-family: verdana;
        color: #000;
    }
    
    #title h2 {
        text-align: center;
        font-family: arial;
        color: #1107c7;
    }
    
    #head-photo {
        width: 1000px;
    }
    
    #menu ul {
        margin: 5;
        padding: 5;
        font-family: 
            Arial,
            Verdana;
        font-size: 1.5em;
        list-style: none;
    }
    
    #menu ul li {
        display: block;
        float: left;
        position: relative;
    }
    
    #menu li ul {
        display: none;
    }
    
    #menu ul li a {
        display: block;
        margin-left: 5px;
        padding: 5px 10px;
        border-top: 1px solid #fff;
        text-decoration: none;
        white-space: nowrap;
        color: #1107c7;
        background: #fffff0;
    }
    
    #menu ul li a:hover {
        background: #fffff0;
    }
    
    #menu li:hover ul {
        display: block;
        position: absolute;
    }
    
    #menu li:hover li {
        z-index: 200;
        float: none;
        font-size: 0.5em;
    }
    
    #menu li:hover a {
        background: #ff7f50;
    }
    
    #menu li:hover li a:hover {
        background: #fffff0;
    }


    Also I noticed the selector RIGHT AFTER the end of the code I finished for you.

    Code:
    main-box {
    h3 {
        width: 1000px;
        text-align: center;
        font-family: 
            arial,
            sans-serif;
        color: black;
        background-color: #fff;
    }
    This is incorrect. Because you used:
    Code:
    main-box { 
    h3 { 
    }
    You used the squiggly brackets inside of already using them. Which isnt possible in CSS, so it would break the style.

    If you are declaring a style for the h3 element inside of the div id main-box you must write it like this:
    Code:
    #main-box h3{ }
    That will apply your properties to all the H3 elements inside of the #main-box div, and only those. No other h3 outside of #main-box will not be effected.

    So remember if you want to style all the h1-h6 elements in the page, and not seperately, you could just use
    Code:
    h3 { }
    Also notice that h3 doesnt have a " . " or a " # " in front of it. Because it is not a Class nor an ID. It is an HTML element. Elements dont need anything in front of them.

    Remember it is the best practice not to over declare selectors.
    For example you declared a selector similar to this:
    Code:
    #title ul li a { }
    When you just remove the ul or li like this:
    Code:
    #title li a { }
    Also take into account when you specify a style like the above example, you are targeting only one something very small in the whole HTML file.
    Maybe you want to style all the anchor elements inside of a list, and not just the anchors inside of the list in the div ID title.
    You could just use:
    Code:
    ul a { }
    and that will style all the of links in a list with that style, instead of styling everything one by one.

    Hopefully all of this helped a bit to understand. Let me know if you need anymore help, or for me to further explain something better.


    By the way I recommend downloading both "Sublime Text 2", and "Aptana Studio 3"
    Sublime text is smaller, and can be used portable. I love it. It is really nice. But it is mainly just an Editor. It is free for an evaluation period and there is not an enforced limit of usage at this time. So you can use it and evaluate it as long as you would like at this time.
    Aptana Studio is Open Source and free. It is not just an editor, it is an IDE. (integrated development environment) So when you copy and paste or open your CSS file in aptana studio, it will show you all the mistakes you made as you make them. It helps sometimes when you cant figure out where in your code you messed up.
    Also if you start a project, you can open both your HTML file and matching CSS file and it will already know what the right ID and Class and Element selectors you are using in your HTML so it will know which you can use in your CSS file.
    I highly recommend it, especially for this issue.

    And to understand how to correctly declare all types of selectors in CSS, have a look at this page so you can fully understand.
    http://www.stat.auckland.ac.nz/~paul...ML/node32.html
    Last edited by CDev; 09-24-2012 at 10:39 AM. Reason: added a bit of content.

  4. #4
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    thanks for your help.

    Thanks for your help.

    The problem for me is that I bought a book that teaches html and supposedly css but it doesn't explain what the code does or why you need to set it out the way that they show. In reality the css is just coding examples with no explanations as to what the code does.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles