Я работал над базовым сайтом, используя только HTML и CSS. Файлы были сохранены в сетевом расположении и работали нормально при предварительном просмотре в разных браузерах. Я делаю это на работе, поэтому я хотел взять это домой и работать над этим. Я скопировал все файлы на карту памяти, сохранив структуру такой же, чтобы пути к файлам не изменились, и, хотя это был точно такой же код, таблица стилей неожиданно не сработала должным образом.
Некоторые из таблиц стилей работают, такие как цвета текста и фоновое изображение, так что я знаю, что это видно, но макет испорчен. Я использую тот же браузер, поэтому не понимаю, почему стили работают при открытии из одного места, но только половина работает при открытии из другого. Как я уже сказал, я проверил пути к файлам, и это не проблема.
Кроме того, я скопировал файлы в другое место на рабочем столе из исходного места, и они снова запутались, но по-другому. Я скопировал файлы с карты памяти обратно в сеть, и она снова испортилась.
Это точно такие же файлы, поэтому я не понимаю, почему иногда он работает нормально, а иногда нет. Если кто-то может предложить какое-то понимание, это было бы здорово!
body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #404040;
background-image: url("Pictures/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
color: #ffffff;
padding: 5px;
}
#main {
width: 75%;
margin: auto;
}
header{
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-top: 5px;
}
#logo {
width: 300px;
padding: 5px;
border: none;
}
#title {
text-align: center;
border-top: solid 7px #DDD;
border-bottom: solid 7px #DDD;
line-height: 0.5;
padding-bottom: 20px;
}
#title h1 {
font-size: 4.68em;
font-weight: normal;
}
#title p {
color: rgb(63,174,42);
font-size: 1.37em;
}
nav {
width: 100%;
overflow: auto;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
border-bottom: 2px solid white;
}
#menu {
list-style-type: none;
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
float: right;
}
.menubutton {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid #404040;
border-right: 5px solid #404040;
}
.menubutton a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
.menubutton:hover {
background-color: rgb(133,15,102);
}
.menubutton a:hover {
color: white;
}
#current {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid rgb(133,15,102);
border-right: 5px solid rgb(133,15,102);
}
#current a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
#current:hover {
background-color: rgb(133,15,102);
}
#current a:hover {
color: white;
}
section {
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-bottom: 5px;
}
aside {
width: 25%;
float: left;
padding: 10px;
}
.sidebarpost {
width: 90%;
margin: auto;
border: 2px solid rgb(133,15,102);
border-radius: 5%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
}
article {
width: 65%;
float: right;
margin-right: 35px;
}
article h1, h2, h3, h4, h5, h6 {
color: rgb(63,174,42);
font-weight: normal;
}
h1 {
font-size: 2em;
padding-top: 10px;
text-align: center;
}
h3 {
font-style: italic;
font-size: 23px;
}
h4 {
font-size: 18px;
}
.post {
padding: 10px;
border-bottom: 2px solid;
border-color: rgb(133,15,102);
}
#lastpost {
padding: 10px;
}
#marathon {
width: 65%;
display: block;
margin: auto;
text-align: center;
}
a {
color: white;
}
a:hover {
color: rgb(133,15,102);
}
.date {
font-style: italic;
font-size: 12.5px;
}
table {
padding: 5px;
}
tr {
padding: 10px;
}
td {
padding: 10px;
}
section:after {
content: "";
display: table;
clear: both;
}
@media (max-width: 600px) {
aside, article {
width: 100%;
height: auto;
}
}
footer {
width: 100%;
border-top: 2px solid white;
padding-top: 25px;
padding-bottom: 25px;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
}
footer p {
text-align: center;
color: rgb(63,174,42);
}
<!DOCTYPE HTML>
<html>
<head>
<title>CCL HOMEPAGE</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header>
<a href="index.html"><img src="Pictures/Logo.png" id="logo"></a></ br>
<div id="title">
<h1>One Step Ahead</h1>
<p>Digital Forensics, Data Analytics and Cyber Security</p>
</div><!--title-->
</header>
<nav>
<ul id="menu">
<li id="current"><a href="index.html">Home</a></li>
<li class="menubutton"><a href="news.html">News</a></li>
<li class="menubutton"><a href="sops-policies-forms.html">SOPs, Policies and Forms</a></li>
<li class="menubutton"><a href="official-drive.html">Official Drive</a></li>
<li class="menubutton"><a href="focalpoint.html">FocalPoint</a></li>
<li class="menubutton"><a href="hr.html">HR</a></li>
</ul><!--menu-->
</nav>
<section>
<aside>
<div class="sidebarpost">
<h3>Latest News</h3>
<h4>NEW INTRANET LAUNCHED</h4>
<p class="date">July 2nd, 2018</p>
<p>2018 sees the redesign of our intranet. Take a look around and let us know what you think.</p>
</div><!--sidebarpost-->
<div class="sidebarpost">
<h4>Useful Links</h4>
<ul>
<li><a href="path">Contracted Clients</a></li>
<li><a href="path">Sales Clients</a></li>
<li><a href="path" target="0">Focal Point</a></li>
<li><a href="http://www.google.co.uk" target="0">Google</a></li>
</ul>
</div><!--sidebarpost-->
</aside>
<article>
<div class="post">
<h1>Homepage Launch</h1>
<p>Welcome to CCL's Homepage. The homepage will be updated with Company news and have pages that aid with access to the most up to date SOP's, policies, procedures and documentation for the business.</p>
</div><!--post-->
<div class="post">
<h2>Dragon Boat Racing</h2>
<p class="date">July 2nd, 2018</p>
<p>There are a limited number of spaces left on this year's Dragon Boat Racing team! The event takes place on 16th September. If you're interested in joining, please email . Click <a href="https://www.theshakespearehospice.org.uk/EventEnhanced/200/DragonBoat2018" target="0">here</a> for more information about the day.</p>
<p>There's also a home made cake up for grabs for the person who comes up with the best team name!</p>
<p>The team so far is:
<ul>
<li></li>
</ul>
</p>
</div><!--post-->
<div class="post">
<h2>Blog Posts</h2>
<p><a href="https://cclgroupltd.com/defence-cases" target="0">‘Defence Cases’</a> written by Jason Dickson</p>
<p><a href="https://cclgroupltd.com/the-new-nokia-3310-part-1/" target="0">‘The New Nokia 3310: Part 1’</a> written by Arun Prasannan</p>
</div><!--post-->
<div id="lastpost">
<h2></h2>
<p></p>
</div><!--lastpost-->
</article>
</section>
<footer>
<p>For any updates or additions, please email </p>
</footer>
</div><!--main-->
</body>
</html>
Обновление: только что видел, что это только проблема в IE11, к сожалению, это браузер, на котором он должен работать.
Обновление: когда я открываю инструмент разработчика в IE11, он показывает, что HTML загружается неправильно. У меня есть скриншот, чтобы показать разницу между кодом в консоли и моим исходным кодом. Я думаю, что это проблема, поскольку элементы макета, такие как и закрываются перед фактическим содержимым внутри них, однако, как видно из текстового документа, это не то, как я это запрограммировал. Любые идеи, почему это будет делать это?
