Jump to content

Trouble converting internal to external CSS


DocTech25

Recommended Posts

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;}

 

Link to comment
Share on other sites

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 */try this:body {    background-image: url("resources/images/docTech25Banner.png");}/*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;}
Link to comment
Share on other sites

You made it worse, you split background shorthand it should be

html {/* Uses "docTech25Banner.png" from resource directory background. Does not repeat and is fixed at center width and height */background: url("resources/images/docTech25Banner.png") 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/ */} 

You should avoid breaking background shorthand as you did, as even placing a space between url and (..) can cause it to break.

  • Like 1
Link to comment
Share on other sites

You have the stylesheet in a different folder...

<link rel="stylesheet" type="text/css" href="resources/css/docTech25Banner.css" />
...so obviously all the relative filepaths in the CSS will need to be adjusted.
Link to comment
Share on other sites

Thanks for your help,

dsonesuk, I applied the fix as you suggested, but the image still fails to load unlike when it was an internal css. davej, I understand that this is a common problem and checked and rechecked this before posting. My image, css, and index are now all in the same directory with pathfiles reflecting it. Still hasn't eliminated the problem.

Link to comment
Share on other sites

Just as an update:

 

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" />

 

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?

Link to comment
Share on other sites

Maybe you would be better off using the specific background properties so that you could more easily experiment with the various options...

html{  background-image: url('docTech25Banner.png');   background-color: #000;  background-position: center center;  background-size: cover;  background-repeat: no-repeat;       background-origin: padding-box;  background-clip: border-box;  background-attachment: fixed;}

http://www.w3schools.com/cssref/css3_pr_background.asp

  • Like 1
Link to comment
Share on other sites

It depend on the shape of image, the image will stretch proportionally to fill the whole screen, if you have a landscape image and trying to fit in a portrait window, it will stretch to the whole height, with the left and right edges becoming clipped, so it would not show the result you are probably looking for, as height would 100% but width could be 150% + wider cause image text to show larger.

  • Like 1
Link to comment
Share on other sites

Thanks, I will be sure to try that. Any suggestions with moving the css file to another directory? In this case it isn't so bad to keep it in the same directory as the html file, but I would need another css for the navigation which will be shared by almost every page in my site.

 

So by directory structure is this:

 

root

root/resources

root/resources/css

root/resources/images

 

I have already tried several things the didn't work:

 

<link rel="stylesheet" type="text/css" href="resources/css/docTech25Banner.css"> <link rel="stylesheet" type="text/css" href="/resources/css/docTech25Banner.css"> <link rel="stylesheet" type="text/css" href="http://docTech25.net/resources/css/docTech25Banner.css">
The only thing that does work is keeping it in the same directory
<link rel="stylesheet" type="text/css" href="docTech25Banner.css"> 
Edited by DocTech25
Link to comment
Share on other sites

That's simply because in the file http://doctech25.net/resources/css/docTech25Banner.css you have...

background: url('resources/images/docTech25Banner.png') no-repeat center center fixed; 	
...and you can see that the relative path should instead be...
background: url('./../images/docTech25Banner.png') no-repeat center center fixed; 	
..or..
background: url('../images/docTech25Banner.png') no-repeat center center fixed; 	
This is what I said earlier -- when you move a file you need to change the relative filepaths in that file.
  • Like 1
Link to comment
Share on other sites

I'm sorry, I misunderstood you earlier. Thanks for your help, finally got it working. Is there a reason it has to be relative to the CSS file and why it can't be relative to the URL?

Edited by DocTech25
Link to comment
Share on other sites

 

Is there a reason it has to be relative to the CSS file and why it can't be relative to the URL?

Because when you access the css file from any location, you don't worry about constantly adjusting the url of image as it is always relative to css file, all you have to do is link to the css file..

  • Like 1
Link to comment
Share on other sites

Just as an update:

 

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" />

 

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?

Could be I failed to read evrything but one thing that I noticed is no [ ./ ] before the folder containing the style eg.. ./folder/stylesheet . I use to run into this issue back in the day and would pull my hair out trying to figure out why it was not seeing my image when I would resort to putting the damn thing right next to it!

 

If you style is in its own folder and your image is in another folder with html sitting for instance in the root folder you would lay down your code as

 

url(../folderwithimage/image) In other words you're telling your style to back out of the folder it resides in order to point correctly to the image. But again, I could have missed something. Hope this helps!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...