0
このページの背景が表示されず、代わりに背景に設定された画像が表示されます。また、私は他のスレッドに投稿されたメソッドを使用してテーブルをセンタリングしようとしましたが、どれもこれに特化しませんでした。 背景が表示されない
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a, article, audio, body, div, figcaption, figure, footer, header, h1,
h2, h3, img, li, nav, p, section, source, ul, video {
border: 0;
padding: 0;
margin: 0;
}
img, video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover, nav a:focus {
color: ivory;
}
nav ul, nav div, nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
\t color: ivory;
\t cursor: pointer;
}
#AboutUs {
\t color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
background: #7eccec;
background: url("images/bg.jpg");
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
\t float: left;
\t padding-right: 2%;
\t padding-bottom: 2%
\t margin-top: 20px;
}
.container {
min-width: 600px;
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background-color: darkblue;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes{
\t border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
\t clear: right;
\t float: left;
\t width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
\t position: relative;
\t top: 6em;
}
.Testimonial{
\t border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
\t position: relative;
\t top: 6em;
}
.History {
\t clear: left;
\t float: right;
\t width: 47%;
}
.Olddude {
\t border-radius: 5px;
\t border: 1em solid #B8944D;
\t margin: 1em;
\t position: relative;
\t top: 10em;
}
.nonprofit1 {
\t width: 60%;
\t clear: left;
\t float: right;
}
\t
.nonprofit {
\t margin: 1em;
\t float: left;
\t position: relative;
}
/* form styles */
form {
\t padding: 10px;
}
/* fieldsset styles */
fieldset {
\t margin-bottom: 0.8em;
}
fieldset fieldset {
\t margin-top: 1em;
\t padding: 0.8em;
\t border: 1px solid #777;
}
/* field styles */
.contactinfo input, #stay-nights, textarea {
\t border: 1px solid #ccc;
\t padding: 0.2em;
\t font-size: 1em;
}
select {
\t margin-bottom: 0.6em;
}
.contactinfo input {
\t position: absolute;
\t left: 5em;
}
.schedule input {
\t position: absolute;
\t left: 10em;
}
#nameinput, #emailinput {
\t width: 25em;
}
#phoneinput {
\t width: 12em;
}
#stay-nights {
\t width: 3em;
}
#submit {
\t border: none;
\t padding: 0.4em 0.6em;
\t background-color: #e3d5ba;
\t font-size: 1.25em;
\t border-radius: 10px;
}
/* main content table */
th, td {
\t border: 1px solid black;
\t padding: 0.5em;
}
th {
\t background-color: lightblue;
}
.email {
\t background-color: ivory;
}
.name {
\t background-color: pink;
}
.degree {
\t background-color: orange;
}
/* Main Content CSS Table */
.table {
\t margin: 1em 0;
\t font-size: 1.3em;
\t display: table;
}
.row {
\t display: table-row;
}
.row div {
\t padding: 0.25em 0.5em;
\t display: table-cell;
}
.day {
\t font-weight: bold;
}
/* label styles */
label {
\t font-size: 1em;
\t line-height: 1.6em;
}
.contactinfo label {
\t display: block;
\t position: relative;
\t margin: 0.8em 0;
}
.services label, .method label {
\t margin-right: 1.6em;
}
.schedule p{
\t width: 9.2em;
\t float: left;
}
.date-picker label {
\t position: absolute;
\t left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
\t text-align: center;
\t font-size: .8em;
\t color: white;
}
/* print styles */
@media print {
body, h1, article, footer {
color: rgb(0,0,0);
background: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
@page {
margin: 0.75in;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>WEB Managing Partners</title>
<!--
Winter, Edwards, and Boyd (WEB) main web page
Filename: index.html
Author: Justus Self
Date: 5/2/2017
A Giant Project that makes me really sad
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
\t <link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div class="container">
\t <div id="fb-root"></div>
\t <script>(function(d, s, id) {
\t \t var js, fjs = d.getElementsByTagName(s)[0];
\t \t if (d.getElementById(id)) return;
\t \t js = d.createElement(s); js.id = id;
\t \t js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
\t \t fjs.parentNode.insertBefore(js, fjs);
\t }(document, 'script', 'facebook-jssdk'));</script>
<p class="skipnavigation"><a href="#contentstart">Skip navigation</a></p>
<header>
<h1><a href="index.html"><img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd"></a></h1>
</header>
<nav class="sitenavigation">
<ul>
<li><a href="index.html">Home</a></li>
\t \t \t <li><a href="aboutus.html">About Us</a></li>
<li><a href="Services.html">Services</a></li>
\t \t \t <li><a href="Contact.html">Contact</a></li>
\t \t </ul>
\t \t <ul>
\t \t \t <li><a href="ManagingPartners.html">Managing Partners</a></li>
\t \t \t <li><a href="CompanyHistory.html">Company History</a></li>
\t \t \t <li><a href="CommunityInvolvement.html">Community Involvement</a></li>
</ul>
\t \t <div class="fb-like" data-href="https://facebook.com/cengagebrain"
\t \t data-layout="button" data-action="like" data-size="small" data-show-faces="true"
\t \t data-share="false">
\t \t </div>
\t \t <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
\t \t <a href="https://twitter.com/share" class="twitter-share-button" data-text="Sweet BnB in Northern MN" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</nav>
\t <article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
\t \t \t <br>
\t \t \t <table>
\t \t \t \t <colgroup>
\t \t \t \t \t <col class="name">
\t \t \t \t \t <col class="email">
\t \t \t \t \t <col class="degree">
\t \t \t \t </colgroup>
\t \t \t \t <thead>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th>Employee Name</th> \t \t \t \t \t
\t \t \t \t \t \t <th>E-mail</th>
\t \t \t \t \t \t <th>Degree</th>
\t \t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t <tbody>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Mike Edwards</td>
\t \t \t \t \t \t <td><a href="mailto:[email protected]">[email protected]</a></td>
\t \t \t \t \t \t <td>Certified Public Accountant</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Julia Winters</td>
\t \t \t \t \t \t <td><a href="mailto:[email protected]">[email protected]</a></td>
\t \t \t \t \t \t <td>Certified Financial Planner</td>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Regina Boyd</td>
\t \t \t \t \t \t <td><a href="mailto:[email protected]">[email protected]</a></td>
\t \t \t \t \t \t <td> Certified Public Accountant </td>
\t \t \t \t \t </tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t \t <br>
\t \t \t <br>
\t \t \t <footer>
\t \t \t <nav class="sitenavigation">
\t \t \t <ul>
\t \t \t \t <li><a href="home.html">Home</a></li>
\t \t \t \t <li><a href="aboutus.html">About Us</a></li>
\t \t \t \t <li><a href="Services.html">Services</a></li>
\t \t \t \t <li><a href="Contact.html">Contact</a></li>
\t \t \t </ul>
\t \t \t </nav>
\t \t \t <p class="copyright">ⒸJustus Self</p>
\t \t \t <p class="copyright"> CIS 130 – SP16</p>
\t \t \t </footer>
\t \t \t </article>
\t \t </div>
\t </body>
</html>
あなたのコード私のエラーはdivのクラス「container1」で自分のコードをカプセル化していなかった見つける助けました。私が確認する必要がある領域を見つけるのを手伝ってくれてありがとう。どのように私はテーブルの中心にすることができます知っていますか？ –
@SkryBlackfall yup 'table {margin：auto}' – dippas
私はそれを試しましたが、それを中心にしていませんでした –