Why won't my HTML link up with my CSS?
Question
I'm following a tutorial online but I can't seem to link up my CSS with the HTML code. I have both files placed in the same folder. The files are called tut.html and tut.css
HTML:
<html>
<head>
<title>HTML5 Tutorial</title>
<link rel='stylesheet' href='tut.css'/>
</head>
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<div id="content">
<p>here is the content</p>
</div>
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</html>
CSS:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 940px;
}
#navigation ul li {
display: inline-block;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 698px;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 10px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 220px;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 940px;
}
2 answers
solution1
1 2013-05-22 13:14:35
Your HTML is invalid. You are missing <body> tags in your HTML which is probably the source of your issue. If you did not, you should also provide a doctype at the top of the page. Make your html this:
<!doctype html>
<html>
<head>
<title>HTML5 Tutorial</title>
<link rel='stylesheet' href='tut.css'/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<div id="content">
<p>here is the content</p>
</div>
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</body>
</html>
solution2
1
If you have exactly this file:
tut.css
And it is in the same folder as tut.html , then, your HTML/CSS must works correctly, as it worked for me fine in all browsers. Maybe you have save the CSS file by such this name: tut.css.txt .
If you are using Windows, follow this instructions to be sure of your file name:
- Open My Computer
- From
Viewmenu, selectFolder and Search Options - In the
Viewtab of opened window, diselect this option: Hide extensions for known file types - Apply and Ok
Now you must see the complete name of your css file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.