Jump to content

DocTech25

Members
 View Profile  See their activity

  • Posts

    5

  • Joined

  • Last visited

DocTech25's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. DocTech25
    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?
  2. DocTech25
    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">
  3. DocTech25
    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?
  4. DocTech25
    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.
  5. DocTech25
    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;}
×
×
  • Create New...