Member Avatar for c_rob

Unable to integrate html and css file.

The html code is

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

The css file

ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

now i am able to save the html file individually and open it, but when i try to integrate the css file with html by using

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

it does not work.

Thanks

  • 3 Contributors
  • 3 Replies
  • 198 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by harrierdh

Dani AI

Generated

A few focused checks will quickly reveal why adding the external stylesheet makes the page “go white.” The symptoms you describe are classic: either the stylesheet isn’t being loaded at all, it’s being loaded but sets colors/backgrounds that make text invisible when images aren’t present, or the server/file metadata is wrong. The suggestions from (cache/filename) and (head placement and missing images) point toward the right debugging path.

Quick checklist to follow, in order:

  • Confirm the CSS file is really a .css file (not style.css.txt). On Windows enable “show file extensions” and verify the filename and case exactly match what the page expects.
  • Open the stylesheet directly in the browser (enter its URL). If you see an HTML error page instead of CSS, the link/path is wrong or the server is returning a 404/500.
  • Use the browser developer tools (F12) → Network tab: reload and look for the stylesheet’s HTTP status and MIME. Also check Console for errors.
  • Remember that image URLs inside a CSS file are relative to the stylesheet’s location, not the HTML file. Missing background images plus a light page background can make white text disappear — that’s why the page looked blank for at first.
  • Force a full reload (Ctrl+F5) or temporarily rename the CSS and update the link to defeat caching, as suggested.
  • If the stylesheet is being served but hides content, use devtools to inspect an element and toggle/disable rules (look for display, visibility, or color rules) to isolate the offending rule. Also check file encoding (save as UTF‑8 without BOM).

If the stylesheet fails to load when requested directly, fix the path/name or server config first. If it loads but makes content invisible, use devtools to find the exact rule and adjust image paths or color rules accordingly.

Recommended Answers

All 3 Replies

Member Avatar for compusolver

If I understand you correctly, you're saying that if you put your css code within your head tags and in <style type="text/css"></style> tags, it all works, but when you use it in an external css file, it does not?

You are showing your external css tag as -

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

This means your stylesheet must be named "style.css" and must reside within the very same folder as the webpage that is trying to include it.

Note that when you ftp upload your stylesheet, your browser probably won't load the new css because it only senses whether the parent page (i.e.: webpage) has been changed, not the included content. Therefore, it can be helpful, when trying to overcome persistent caching, to rename the css file - change (of course) the href link in your style tag, then refresh the webpage, forcing the browser to exchange its cached data.

Member Avatar for c_rob

Its named style.css and its in the same folder and i tried referencing it in the html code then it makes the whole page goes white, you could just try it yourself.

Yes your right in assuming that i am trying to call the css file external by referencing it within the html code.

But No thats not what i meant by saying its working fine, i mean without the css tag or without any css and just the html code as its is currently if you put it in a notepad saved it with .html and open then it shows the menu and submenu but in a vertical manner.

Member Avatar for harrierdh

It works for me. You didn't show your head section. I'm guesing that is where your problem is. Also make sure your image links are working right. The text was white and I had no images. So it did come up blank the first time.

style.css

ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}

ul.topnav li a{
	padding: 10px 5px;
	color: #444444;  /* changed this because i didn't have your images*/
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}

ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

HTML

<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
 <ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
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.