Я пытаюсь сделать так, чтобы функции, которые находятся на каждой странице сайта, находятся в отдельных HTML файлах. Я создал файл header.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/inc/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="identityAndLinksHeader">
<table>
<tr>
<td><a>Home</a></td>
<td><a>About</a></td>
<td><a>Privacy</a></td>
</tr>
</table>
</div>
</body>
</html>
И следующий CSS:
@charset "utf-8";
/* CSS Document */
#identityAndLinksHeader
{
height: 50px;
width: 100%;
margin: 0, 0, 0, 0;
padding: 0, 0, 0, 0;
background-color: rgba(127, 140, 141,1.0);
}
Файл работает отлично и выглядит так: http://puu.sh/68SbK.png
Тогда у меня есть этот index.html код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object name="header" type="text/html" data="inc/header.html"></object>
</body>
</html>
Однако, когда я запускаю это, заголовок выглядит следующим образом: http://puu.sh/68S9M.png
кто-нибудь знает, почему это произошло? Спасибо!
Во-первых, вам не нужно определять type = "text/css" в html5, а во-вторых, ширина вашего #identityAndLinksHeader равна 100% и, возможно, в index.html, эта небольшая область равна 100%.
Размер тега объекта настолько велик. Попробуйте установить его ширину в ширину страницы.