0
Ich baue eine Amateur-Website, um einen Kurs zu bestehen, der mich in die Universität bringt. Ich finde es schwierig, mein Wrapper-Element so zu manipulieren, dass es die ganze Seite umfasst und eine andere Farbe hat als der Rest meines Hintergrunds. Ich möchte, dass es schwarz ist, vor dem grauen Hintergrund.Wrapper kann nicht Elemente enthalten oder Farbe ändern
Leider hat mein Tutor gesagt, dass er mir mit meinem Code nicht helfen kann. Ich habe viel gesucht und habe versucht, die Elemente zu löschen, aber es funktioniert nicht ..
Jeder Einblick würde sehr geschätzt werden.
Thankyou Sie klug Leute
:]
@charset "utf-8";
/* CSS Document */
body {
\t background-color:#A6A6A6;
\t color:#FFFFFF;
\t font-family: Arial, Helvetica, sans-serif;
\t font-size: 16px;
}
h1 {
\t float: right;
\t margin-right: 2px;
\t font-size:32px;
\t font-weight:bold;
\t color: #FFFFFF;
}
h2 {
\t font-size:26px;
\t font-weight:bold;
\t color: #FFFFFF;
}
h3 {
\t font-size: 20px;
\t font-style: italic;
\t color: #FFFFFF;
}
a:link, a:visited {
\t color: green;
}
#nav ul li a {
\t color: #ff0000;
}
a:hover {
\t color: green;
}
#wrapper {
\t width:1024px;
\t height: 100%;
\t margin: 0 auto;
\t color: #000000;
}
#search {
\t float:right;
\t margin-top: -50px;
}
/* These are additional to make the text box look nicer!! */
#search input {
\t border: 2px solid #66CCFF;
\t padding: 5px;
\t text-align:right;
}
#search input:focus {
\t border-color: #B7901E;
}
#nav {
\t /* Fallback if gradient doesn't work */
\t background-color:#B7901E;
\t /*Safari $+, Chrome 1-9 */
\t background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#000000)); /*Make black to show the difference!! */
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #333333, #000000);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #B7901E, #7B612C);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #B7901E, #7B612C);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #B7901E, #7B612C);
\t text-align:center;
\t width: 100%;
\t margin-top: 70px;
\t border-top: 1px solid #000000;
\t border-bottom: 1px solid #000000;
}
/*Delete <hr/> tags from html and change backround color of image to white*/ \t
#nav ul {
\t list-style: none;
\t padding: 20px;
\t margin: 0;
}
#nav ul li {
\t display:inline;
\t font-size: 22px;
\t font-weight: none;
}
/* Make the links in the HTML hyperlinks */
#nav ul li a {
\t color: #FFFFFF;
\t text-decoration:none;
}
#nav ul li a:hover {
\t color: #FF0000;
\t text-decoration:underline;
}
#nav ul li:after {
\t padding: 30px;
\t content: " | " ;
\t color: #FFFFFF;
}
#nav ul li:last-child:after {
\t content: "";
}
#photos, #content {
width: 926px;
margin: 0 auto;
}
#article {
\t float: left;
\t width: 30%;
\t margin-right: 2%;
}
#sidenav {
\t float: right;
\t width: 30%;
\t margin-left:auto;
}
#video {
\t \t float:right;
\t \t width: 30%;
\t \t margin-right: 2%;
\t \t margin-top: 2%;
}
.highlight {
\t color:#FF0000;
}
#Vegas-banner {
\t margin: 0 auto;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}<html>
<head>
\t <title>Las Vegas</title>
<link href="mywebsite.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
\t <div id="search">
\t <input type="text" value="search ..." />
</div>
\t <div id="nav">
\t <ul>
\t \t <li><a href="#">Hotels</a></li>
\t \t <li><a href="#">Casinos</a></li>
\t \t <li><a href="#">Drinking</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Contact</a></li>
</ul>
\t </div>
</div>
<img src="Images/Vegas banner.jpg" alt="Images of vegas" style="align-content:center;>
\t <div id="photos"> \t \t \t
<ul>
<img name="Hotels" src="images/Chip-hotels.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
<img name="Gambling" src="images/Chip-casinos.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
<img name="Drinking" src="images/Chip-drinking.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
<img name="Activities" src="images/Chip-activities.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
</ul>
<div id="content">
\t <div id="article">
\t \t \t <h2>Floated Divs</h2>
\t \t \t <p>Bacon ipsum dolor sit amet pork chop bacon salami, hamburger sausage jerky andouille chuck prosciutto. Frankfurter venison filet mignon, prosciutto short ribs brisket corned beef jowl meatloaf shankle boudin. <span class="highlight">Pancetta ham capicola flank</span> boudin jerky. Ham meatball boudin capicola ground round shankle, short loin spare ribs pastrami short ribs bresaola shoulder andouille tail. Jowl cow rump pork chop sausage fatback. <span class="highlight">Shoulder shank frankfurter</span>, fatback beef ribs meatball corned beef pancetta pork chop tongue t-bone.</p>
\t \t \t <p>Shank tongue beef, bacon strip steak biltong beef ribs meatball sausage jerky t-bone turkey short loin filet mignon short ribs. Tenderloin ground round pork chop short ribs rump drumstick. Salami pancetta chicken, sausage meatloaf bacon ball tip chuck hamburger rump jerky pig short loin. <a href="http://www.edgehill.ac.uk" target="_blank">Link to Edge Hill Web Site</a></p>
\t \t </div><!-- End of article -->
<div id="video">
<iframe width="300" height="390" src="https://www.youtube.com/embed/1Y4R3A0nrh0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sidenav">
<h2>Bulleted List</h2>
<ul>
<li>Point One</li>
<li>Point Two</li>
<li>Point Three</li>
<li>Point Four</li>
<li>Point Five</li>
</ul>
<p> </p>
<h3>Numbered List</h3>
<ol>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
<li>Number Four</li>
<li>Number Five</li>
</ol>
</div>
</div>
</div>
</body>
</html>