Trouble converting from internal to external CSS

Question

DocTech25 0 Newbie Poster

9 Years Ago

I used some CSS code which worked internally on my website. When I went to convert the code to an external .css file but ran into some issues. I can use the internal version, but the external is more efficient and less restrictive.

Here is the code for the internal HTML code with CSS:



<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html 
            {
            background: url("resources/images/docTech25Banner.png") 
            no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover; 
            -o-background-size: cover; 
            background-size: cover;
            } 
            ul
            {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            }
            .dropdown-menu {
            padding: 0;
            margin: 0;
            width: 130px;
            font-family: Arial;
            display: block;
            border: solid 1px #CCCCCC;
            border-bottom-style: none;
            background-color: #F4F4F4;
            }
            .dropdown-menu .menu-item-link {
            display: block;
            border-bottom: solid 1px #CCCCCC;
            text-decoration: none;
            line-height: 30px; /* Vertically center the text */
            color: rgba(89,87,87,0.9);
            height: 30px;
            padding: 5px;
            cursor: pointer;
            }
            .dropdown-menu .menu-item {
            display: none;
            }
            .dropdown-menu .menu-item.active {
            display: block;
            }
            .dropdown-menu:hover .menu-item {
            display: block;
            }
            .dropdown-menu .menu-item-link:hover {
            background-color: #DDDDDD;
            }
            .dropdown-menu .menu-item.active .menu-item-link:after {
            width: 0; 
            height: 0; 
            content: "";
            position: absolute;
            top: 18px;
            right: 8px;
            border-top: 4px solid rgba(0, 0, 0, 1);     
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            }
        </style>
        <title>DocTech25 Universe</title>
    </head>
    <body>
        <ul class="dropdown-menu">
            <li class = "menu-item active">  
                <a class="menu-item-link" href = "">Navigation</a>
            </li>
            <li class= "menu-item">
                <a class="menu-item-link" href = "#">Home</a>
            </li>
            <li class="menu-item">
                <a class = "menu-item-link" href = "#">
                    Entertainment</a
            </li>
            <li class="menu-item">
            <a class = "menu-item-link" href = "#">University</a></li>
            <li class="menu-item">
                <a class = "menu-item-link" href = "#">Labs</a>
            </li>
        </ul>
    </body>
</html>

This works just fine, however I would like the CSS as external code. Here is my attempt at doing so (Please note that I am only tackling the image at this time and not the navigation, if you would like to help with that, it would be greatly appreciated, but for right now the main focus is the image.):

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            .dropdown-menu {
            padding: 0;
            margin: 0;
            width: 130px;
            font-family: Arial;
            display: block;
            border: solid 1px #CCCCCC;
            border-bottom-style: none;
            background-color: #F4F4F4;
            }
            .dropdown-menu .menu-item-link {
            display: block;
            border-bottom: solid 1px #CCCCCC;
            text-decoration: none;
            line-height: 30px; /* Vertically center the text */
            color: rgba(89,87,87,0.9);
            height: 30px;
            padding: 5px;
            cursor: pointer;
            }
            .dropdown-menu .menu-item {
            display: none;
            }
            .dropdown-menu .menu-item.active {
            display: block;
            }
            .dropdown-menu:hover .menu-item {
            display: block;
            }
            .dropdown-menu .menu-item-link:hover {
            background-color: #DDDDDD;
            }
            .dropdown-menu .menu-item.active .menu-item-link:after {
            width: 0; 
            height: 0; 
            content: "";
            position: absolute;
            top: 18px;
            right: 8px;
            border-top: 4px solid rgba(0, 0, 0, 1);     
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            }
        </style>
        <title>DocTech25 Universe</title>
        <link rel="stylesheet" type="text/css" href="resources/css/docTech25Banner.css" />
    </head>
    <body>
        <ul class="dropdown-menu">
            <li class = "menu-item active">  
                <a class="menu-item-link" href = "">Navigation</a>
            </li>
            <li class= "menu-item">
                <a class="menu-item-link" href = "#">Home</a>
            </li>
            <li class="menu-item">
                <a class = "menu-item-link" href = "#">Entertainment</a>
            </li>
            <li class="menu-item">
                <a class = "menu-item-link" href = "#">University</a>
            </li>
            <li class="menu-item">
                <a class = "menu-item-link" href = "#">Labs</a>
            </li>
        </ul>
    </body>
</html>

CSS (resources/css/docTech25Banner.css)

html 
{
/* Uses "docTech25Banner.png" from resource directory background */
    background: url("resources/images/docTech25Banner.png") 

/* Does not repeat and is fixed at center width and height */
    no-repeat center center fixed;  

/* Provides compatibility in Internet Explorer, Chrome, Firefox,  
 * Safari, and Opera browsers for web browser rendering engine */

    -webkit-background-size: cover; /* Safari & Chrome */
    -moz-background-size: cover; /* Firefox */
    -o-background-size: cover; /* Opera */
    background-size: cover; /* Internet Explorer? */

/* The above from centered background to browser compatibility is 
 * contributed to this site: 
 * https://css-tricks.com/perfect-full-page-background-image/ */

} 

ul
{

/* Specifies the appearance of a list item element */ 
    list-style-type: none;

/* Sets margins */
    margin: 0;

/* Sets padding */
    padding: 0;
/*  specifies whether to clip content, render scroll bars or 
 * just display content when it overflows its block level container */
    overflow: hidden;

}

html-css web-design

5 Contributors
12 Replies
247 Views
1 Day Discussion Span
Latest Post 9 Years Ago Latest Post by almostbob

cereal 1,524 Nearly a Senior Poster

9 Years Ago

Try to add the (root) slash to the link:

<link
    rel="stylesheet"
    type="text/css"
    href="/resources/css/docTech25Banner.css" />

Otherwise the link will be relative to the current path, if you are in /contact/, for example, the browser will expect to find the css file inside:

/contact/resources/css/docTech25Banner.css

And so on for each browsed path of the website.

Lau_1 12 Junior Poster in Training

9 Years Ago

Iz all the css design doesnt appear in your page?

Lau_1 12 Junior Poster in Training

9 Years Ago

using % for your width and height or font. Otherwise, using @media query method, for example:

@media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {
    }
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    }
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    }

set the size for each type of screen resolution.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

DocTech25 0 Newbie Poster · Answer 1 · 2015-07-02T01:14:40+00:00

Thanks for the help, but that didn't seem to work. I even moved the .css to the same directory and changed the the link href to be href="docTech25Banner.css". I did the same thing with the css file and the image, moved it to the same directory and still nothing. So as of right now the index, image, and css are all in the same directory.

DocTech25 0 Newbie Poster · Answer 2 · 2015-07-02T01:34:01+00:00

Not externally, if all the code was internal css, it would work. This is not efficent, it restricts the code to that page, and looks ugly which is why I am trying to move it to external files.

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 3 · 2015-07-02T01:37:45+00:00

Also, have you checked if the file is loading through the browser console? On Google Chrome press CTRL + SHIFT + J then go to the Network tab and reload the page, check if the css file loads with 2xx or 3xx status codes.

Lau_1 12 Junior Poster in Training · Answer 4 · 2015-07-02T01:42:35+00:00

Try to move all ur css design into the docTech25Banner.css. So now,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DocTech25 Universe</title>
        <link rel="stylesheet" href="docTech25Banner.css" >
    </head>

As u said u moved everything in the same directory, the background link also need to change

 background: url("docTech25Banner.png") no-repeat center center fixed;

DocTech25 0 Newbie Poster · Answer 5 · 2015-07-02T01:52:40+00:00

cereal, I tried doing as you suggested, but the .css file doesn't even appear in the list. So it's not loading? Lau 1, im just focusing on the image portion right now and have moved everything in the same directory with pathfiles reflecting. I also moved the "no-repeat center center fixed;" because it was breaking shorthand but that didn't solve the issue either.

DocTech25 0 Newbie Poster · Answer 6 · 2015-07-02T02:00:26+00:00

Alright, I am kind of new to css stuff, but something seemed off for the way I was calling the .css file. So I changed the call link to:

<link href="docTech25Banner.css" rel="stylesheet" type="text/css" />

So now the css is being loaded, but the image is still failing to load with a status of 304.

--------------------------------------------------------------------------
Update: I got the image to load using single quotes in the call:

background: url('docTech25Banner.png') no-repeat center center fixed;

I am now having a new issue with it. The image doesn't appear to auto resize as the text that is part of the image remains very large when I change the size of the window. Any suggestions on the most effiecent way of doing this so that it will work across multiple browsers and windows resolutions?

s3xandch0c0late 0 Questionable moral code · Answer 7 · 2015-07-02T02:13:15+00:00

I tried your code on my computer and it seems to work (as in, the background image appears on the page).

try setting the background: url to "../image_directory/name_of_image.png"
the ../depends on the depth of your directory structure (as in how many levels do you have to go up from the css directory so you can access the image directory - I hope this makes sense).

good luck!

DocTech25 0 Newbie Poster · Answer 8 · 2015-07-02T02:33:18+00:00

sexandchocolate, to eliminate any problems that directories may have been causing I moved everything to the same directory and changed the paths accordingly. Thanks.

Lau 1, thanks again for your help, I will probably go the @media route, if I encounter issues I just might revert to %. Thanks for all your help in this.

Thank you to everyone else for your contributions.

almostbob 866 Retired: passive income ROCKS · Answer 9 · 2015-07-02T18:45:42+00:00

outside of solved thread as well,,
html5
<link rel="stylesheet" type="text/css" href="resources/css/docTech25Banner.css" />is wrong
<link rel="stylesheet" href="resources/css/docTech25Banner.css"> is right
the more code errors, the less likely everything will work together,
each browser has a different way of handling errors