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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Baffled with CSS - NOT working in webpage

    I'm sure that the code is the culprit as I am far from "literate" with CSS. I just needed to simplify as I have to change things and it is a pain to change manually on all of the pages.

    I tried a css document named mystyle.css and tried to put it into a trial page of abc.html (website is thebuttercupbowtique.com) I only get the background color coming up and nothing else.

    I am hopeful that someone can help me out. Thanks in advance.
    Michelle
    Last edited by powell1294; 10-26-2009 at 08:40 PM. Reason: RESOLVED

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Your CSS file has all the HTML from the page in it. A CSS file must only contain CSS, though. This means only:
    Code:
    @charset "utf-8";
    
    select {
    background-color : #fff0f0;
    color : #9c7289;
    }
    body {
    background-image : url(purplemottle.jpg);
    font-family : verdana;
    color : #664e5e;
    }
    .header {
    float : left;
    background-image : url(paint.jpg);
    background-repeat : no-repeat;
    position : relative;
    width : 970px;
    height : 286px;
    }
    #list-menu {
    position : relative;
    float : left;
    margin-top : -266px;
    margin-left : 750px;
    padding : 0;
    width : 152px;
    }
    #list-menu ul {
    margin : 0;
    padding : 0;
    list-style-type : none;
    font-family : tahoma;
    font-size : 14px;
    font-weight : 700;
    }
    #list-menu li {
    margin : 5px;
    }
    #list-menu a {
    display : block;
    width : 120px;
    padding : 2px 2px 2px 10px;
    padding-top : 2px;
    padding-left : 2px;
    padding-right : 2px;
    padding-bottom : 10px;
    border-width : 2px;
    border-color : #664e5e;
    border-style : solid;
    }
    a:visited {
    color : #ffeaff;
    text-decoration : none;
    }
    a:hover {
    color : #ffffff;
    text-decoration : underline;
    }
    a:active {
    color : #ff00ff;
    text-decoration : underline;
    }
    #topmiddle {
    float : right;
    clear : right;
    text-align : center;
    position : relative;
    margin-top : -146px;
    margin-right : 85px;
    width : 158px;
    background-color : #d8bfd8;
    }
    #leftside {
    float : left;
    clear : left;
    margin-top : 8px;
    margin-bottom : 10px;
    position : relative;
    font-family : tahoma;
    font-size : 18px;
    left : 0;
    width : 205px;
    height : 860px;
    font-family : tahoma;
    font-size : 12px;
    text-align : center;
    background-image : url(paint.jpg);
    background-repeat : repeat;
    overflow : hidden;
    padding-right : 10px;
    padding-left : 10px;
    padding-top : 10px;
    padding-bottom : 40px;
    }
    #leftside ul {
    display : block;
    list-style : none;
    text-align : left;
    }
    #lefside ul li {
    display : block;
    float : left;
    list-style : none;
    text-indent : 5em;
    width : 10em;
    }
    #container {
    float : right;
    clear : right;
    position : relative;
    margin-top : 8px;
    margin-bottom : 10px;
    margin-left : 0;
    margin-right : 7px;
    width : 638px;
    text-align : justify;
    height : 860px;
    font-size : 16px;
    font-family : tahoma;
    background-color : #e8dad9;
    background-image : url("");
    background-repeat : no-repeat;
    padding-right : 40px;
    padding-left : 40px;
    padding-top : 10px;
    padding-bottom : 40px;
    }
    #footer {
    float : left;
    margin-top : 8px;
    background-image : url(paint.jpg);
    position : relative;
    width : 970px;
    height : 160px;
    font-family : tahoma;
    font-size : 18px;
    font-weight : 700;
    text-align : center;
    margin : 0;
    padding-top : 5px;
    padding-bottom : 5px;
    }
    belongs into mystyle.css, the rest is not allowed/valid.

    Also in your abc.html file you should validate your code. <container> is not a valid HTML element, even if you put any doctype (which you also forgot – I suggest HTML strict).

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Take the html tags out of your css file.

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I altered both files -- could you please take another look and let me know what is wrong? Also, how do I get the menus and listings from main page bowsforgirls.com to be in the css document. I don't want to have to go and change all of the pages to make adjustments to the menu, links/buttons and footer information on all pages.

    Thanks for your help thus far...I know I am a css idiot...just trying to get it fixed.

    Michelle

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    OK, let’s keep it in the public forum because other people might learn from it as well and/or have some helpful additions to make.

    Rule #1: CSS is only supposed and able to change the look of (already existing) HTML, not to include HTML or a menu structure in other documents.

    What you want is the typical case of including the menu in all pages from an external file so you don’t have to edit every HTML file to change the menu. However, as I said, CSS isn’t made to do this, what you need is a server side script such as PHP or Server Side Includes. It’s pretty easy to do this but you should make sure that your server supports any of these scripting languages. You’ll know by trying:

    The SSI way:
    1. Name your main page abc.shtml
    2. Cut out the HTML of the menu
    3. Create a new file called menu.html, for example.
    4. In your main file put <!--#include file="menu.html" --> where the menu used to be.
    5. Repeat step 4 in every HTML file where the menu is supposed to appear
    6. Upload the files (main and include files) to the server and call abc.shtml – you’ll see your page as if it was one HTML document if SSI is supported. If not you’ll probably see the raw HTML code (or nothing at all).


    The PHP way:
    1. Name your main page abc.php
    2. Cut out the HTML of the menu.
    3. Create a new file called menu.html, for example.
    4. In your main file put <?php include 'menu.html'; ?> where the menu used to be.
    5. Repeat step 4 in every HTML file where the menu is supposed to appear
    6. Upload the files (main and include files) to the server and call abc.php – same as the SSI way.


    Now, what this does is include the file menu.html in abc.shtml (or abc.php, depending on the method used) and whenever you change the menu.html file it’s changed automatically on all pages where you include this.

    Note that these are server side scripts that cannot be executed or viewed on your local machine by just opening the files in the browser, it must happen on the server (where your website is stored for online access). If your server doesn’t support any of these scripting languages then there’s no way around changing it manually. However there are some pretty good programs with which you can do a multi-file search and replace so doing this is just as quick as with server side scripts.
    Last edited by VIPStephan; 10-26-2009 at 05:02 PM.

  • Users who have thanked VIPStephan for this post:

    powell1294 (10-26-2009)

  • #6
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok...thanks much for your time.

    I changed the index.html to index.php and made the menu.html and replaced the menu information in the index file -- works fine.

    However, should all of the .html files that get the menu replacement be changed to php files?

    I'm sorry for the trouble -- just want to make sure that I am doing this correctly.

    Thanks again...I'll await your reply.

    Michelle

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by powell1294 View Post
    However, should all of the .html files that get the menu replacement be changed to php files?
    Yes. In order for the server to know what to do with the PHP code in the files, they must be named “.php”, otherwise the PHP isn’t executed but displayed as plain text.

    By the way: You can also include other contents, not only the menu. For example you can replace the header or footer code with an include statement and put the code in external files which you also include in the main page(s). Then you only need to change the header/footer include file once and it’s changed on all pages.


  •  

    Posting Permissions

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