Search the Community
Showing results for tags 'internal'.
Found 2 results
-
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;}
-
People always say that if you have JavaScript code which is used by multiple pages then it should be in an external page but if it is only used by a single page in should be internal. People also say that external JavaScript code can make the browsing slower since additional PHP requests are made but that when it is internal less bandwidth is used. Is it a good idea to put JavaScript code into PHP files and then include them like any other PHP files? I've been thinking about this because then I can minimise the HTTP requests and at the same time use the same JavaScript files in many PHP files.
