Включенный HTML / CSS через <object> не отображается правильно

0

Я пытаюсь сделать так, чтобы функции, которые находятся на каждой странице сайта, находятся в отдельных 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

кто-нибудь знает, почему это произошло? Спасибо!

Теги:
object

2 ответа

1
Лучший ответ

Во-первых, вам не нужно определять type = "text/css" в html5, а во-вторых, ширина вашего #identityAndLinksHeader равна 100% и, возможно, в index.html, эта небольшая область равна 100%.

0

Размер тега объекта настолько велик. Попробуйте установить его ширину в ширину страницы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню