0
Der Hintergrund auf dieser Seite wird nicht angezeigt und zeigt stattdessen nur das Bild, das ich hinter dem Hintergrund eingestellt habe. Auch habe ich versucht, meine Tabelle mit den Methoden, die in anderen Threads gepostet wurden, zu zentrieren, aber keiner von ihnen arbeitete speziell dafür.Hintergrund wird nicht angezeigt
/*
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>
Ihr Code hat mir geholfen, meine Fehler meinen Code in der div class "container1" zu finden war nicht einkapseln. Danke, dass Sie mir geholfen haben, das Gebiet zu finden, das ich überprüfen musste. Weißt du, wie ich den Tisch zentrieren kann? –
@SkryBlackfall yup 'table {margin: auto}' – dippas
Ich habe versucht, aber es hat es nicht zentriert –