0
Ich brauche Hilfe mit einer Website, die ich baue. Ich bin neu im Webdesign, also bin ich ziemlich verwirrt mit diesem Problem. Sie sehen, ich habe ein Sägezahnmuster, das ich über einem Header, wie folgt haben möchte:Element versteckt unter einem anderen Element
Das Problem ist, mein Sägezahnmuster versucht, sich hinter dem blauen Header zu verstecken. Ich kann nicht für das Leben von mir herausfinden, warum! (Entschuldigen Sie den Fehler im Sägezahnmuster, ich brauche das zu beheben.)
Css:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img{
\t margin:0;
\t padding:0;
}
img, fieldset {
\t border:none;
}
body {
\t padding-top:2em;
\t font:normal 100%/150% "segoe ui",helvetica,sans-serif;
\t background:#642 url(http://oi68.tinypic.com/x42exd.jpg);
\t color:#FFF;
}
#header2 {
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zpscwam4jrq.png);
height: 20px;
width: 100%;
top: 0px;
font-size: 90px;
font-weight: bold;
color: #FFF;
text-align: center;
padding-top: 0px;
position:absolute;
}
h1 {
\t position:relative;
\t z-index: 7;
\t font:bold 40px/42px arial,helvetica,sans-serif;
\t background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x;
\t text-align:center;
\t margin-top:20px;
\t
}
h1 a {
\t position:relative;
\t zoom:1; /* trip haslayout, fix legacy IE bugs */
\t display:block;
\t padding:30px 0;
\t text-transform:uppercase;
\t background:url(http://oi67.tinypic.com/33dfi86.jpg) bottom left;
\t color:#FFF;
\t text-decoration:none;
\t text-shadow:
\t \t 0 0 2px #000,
\t \t 2px 2px 3px #754;
}
h1 span {
\t position:absolute;
\t top:50%;
\t left:50%;
\t width:402px;
\t height:160px;
\t margin:-80px 0 0 -201px;
\t text-indent:-999em;
\t background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
h1 small {
\t display:block;
\t font:bold 16px/18px arial,helvetica,sans-serif;
}
#mainMenuCheck {
\t /* display none breaks this in some browsers, so just slide it out of view */
\t position:absolute;
\t left:-999em;
}
#mainMenu {
\t position:relative; /* depth sort over h1 */
\t background:#754 url(images/dots.png) top left;
\t padding:0.75em 0 0.75em 0.75em;
\t /* left margin adjusts for uneven menu width, change as needed */
\t text-align:center;
}
#mainMenu li {
\t list-style:none;
\t display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
\t text-shadow:
\t \t 0 0 2px #000,
\t \t 2px 2px 2px #000,
\t \t 2px 2px 3px #000;
}
#mainMenu a {
\t display:inline-block;
\t vertical-align:bottom;
\t text-decoration:none;
\t color:#F0E8E0;
\t -webkit-transition:color 0.3s, text-shadow 0.3s;
\t transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
\t color:#AEF;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
\t color:#0FF;
}
#mainMenu a:after {
\t display:inline-block;
\t padding:0 0.1em 0 0.5em;
\t color:#FFF;
}
#mainMenu .lastInSet a:after {
\t display:none;
}
#mainMenu .setBreak {
\t padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
\t content:"\2605";
\t font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
\t position:absolute;
\t left:50%;
\t width:3em;
\t bottom:0.65em;
}
#mainMenu:after {
\t bottom:0.2em;
\t font-size:150%;
\t margin-left:-1.5em;
}
#mainMenu ul:before {
\t margin-left:-3em;
}
@media (min-width:1px) { /* sneaky trick to target just CSS3 browsers */
/*
\t h1 span {
\t \t background:url(images/h1Logo2x.png);
\t \t background-size:cover;
\t }
\t uncomment for 2x resolution logo support
*/
}
@media (max-width:50em) {
\t #mainMenu {
\t \t padding:1em 0 0.5em;
\t }
\t #mainMenu ul {
\t \t max-width:25em;
\t \t margin:0 auto;
\t }
\t #mainMenu .setBreak {
\t \t padding-right:0;
\t }
\t /*
\t \t restyle menu to 'mobile friendly' finger-sized targets
\t */
\t #mainMenu:after,
\t #mainMenu a:after,
\t #mainMenu ul:before,
\t #mainMenu ul:after {
\t \t
\t }
\t #mainMenu a {
\t \t padding:0.5em 1em;
\t \t margin:0 0.15em 0.5em;
\t \t background:rgba(0,0,0,0.3);
\t \t -webkit-border-radius:1em;
\t \t border-radius:1em;
\t }
}
@media (max-width:26em) {
\t body {
\t \t padding-top:0;
\t }
\t h1 {
\t \t text-align:left;
\t \t font:bold 150%/120% arial,helvetica,sans-serif;
\t \t
\t }
\t h1 a {
\t \t padding:0.25em 3em 0.25em 0.25em;
\t \t
\t }
\t h1 small {
\t \t font:bold 80%/120% "segoe ui",arial,helvetica,sans-serif;
\t \t padding-bottom:15px;
\t \t
\t }
\t h1 span,
\t #mainMenu:before {
\t \t display:none;
\t }
\t #mainMenuCheck + label {
\t \t position:absolute;
\t \t z-index:99;
\t \t right:0.25em;
\t \t top:0.3em;
\t \t width:3em;
\t \t padding:0.5em 0;
\t \t background:#488;
\t \t border:0.25em solid #FFF;
\t \t -webkit-border-radius:0.75em;
\t \t border-radius:0.75em;
\t \t display:none;
\t }
\t #mainMenuCheck + label:hover {
\t \t background:#6BB;
\t \t display: none;
\t }
\t #mainMenuCheck + label:before,
\t #mainMenuCheck + label:after {
\t \t content:"";
\t \t display:block;
\t \t height:0.5em;
\t \t margin:0 0.5em;
\t \t border:solid #FFF;
\t \t border-width:0.25em 0;
\t }
\t #mainMenuCheck + label:after {
\t \t border-width:0 0 0.25em;
\t \t
\t }
\t #mainMenu {
\t \t display:none;
\t \t padding:0.5em 0.5em 0;
\t }
\t #mainMenuCheck:checked ~ #mainMenu {
\t \t display:block;
\t
\t }
}
/**MENU**/
@media (min-width:52em) {
\t .header {
\t \t display: none;
\t }
\t .menu {
\t \t display: none;
\t }
}
@media (max-width:52em) {
\t body {
\t margin:;
\t font-family: font:bold 16px/18px arial,helvetica,sans-serif;
\t background-color: #f4f4f4;
\t text-shadow:
\t \t 0 0 5px #000,
\t \t 5px 5px 5px #754;
\t }
\t a {
\t color: #F8F4E6;
\t }
\t .menu a:before,
\t .menu ul:before,
\t .menu ul:before {
\t \t content:"\2605";
\t }
\t /* header */
\t .header {
\t background-color:#6A4E39;
\t box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
\t position: relative;
\t width: 100%;
\t z-index: 3;
\t }
\t .header ul {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t overflow: hidden;
\t background-image:none;
\t }
\t .header li a {
\t display: block;
\t padding: 20px 20px;
\t border-right: 1px solid #f4f4f4;
\t text-decoration: none;
\t }
\t .header li a:hover,
\t .header .menu-btn:hover {
\t \t background-color:#4EB4AC;
\t
\t }
\t .header .logo {
\t display: block;
\t float: left;
\t font-size: 15px;
\t padding: 10px 20px;
\t margin-top: 5px;
\t text-decoration: none;
\t }
\t /* menu */
\t .header .menu {
\t clear: both;
\t max-height: 0;
\t transition: max-height .2s ease-out;
\t }
\t /* menu icon */
\t .header .menu-icon {
\t cursor: pointer;
\t display: inline-block;
\t float: right;
\t padding: 28px 20px;
\t position: relative;
\t user-select: none;
\t }
\t .header .menu-icon .navicon {
\t background: #F8F4E6;
\t display: block;
\t height: 2px;
\t position: relative;
\t transition: background .2s ease-out;
\t width: 18px;
\t }
\t .header .menu-icon .navicon:before,
\t .header .menu-icon .navicon:after {
\t background: #F8F4E6;
\t content: '';
\t display: block;
\t height: 100%;
\t position: absolute;
\t transition: all .2s ease-out;
\t width: 100%;
\t }
\t .header .menu-icon .navicon:before {
\t top: 5px;
\t }
\t .header .menu-icon .navicon:after {
\t top: -5px;
\t }
\t /* menu btn */
\t .header .menu-btn {
\t display: none;
\t }
\t .header .menu-btn:checked ~ .menu {
\t max-height: none;
\t }
\t .header .menu-btn:checked ~ .menu-icon .navicon {
\t background: transparent;
\t }
\t .header .menu-btn:checked ~ .menu-icon .navicon:before {
\t transform: rotate(-45deg);
\t }
\t .header .menu-btn:checked ~ .menu-icon .navicon:after {
\t transform: rotate(45deg);
\t }
\t .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
\t .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
\t top: 0;
\t }
}
/* 48em = 768px */
@media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
@media (max-width: 52em) {
#mainMenu {
\t display: none;
\t justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
@media (min-width: 48em) {
.section-split a {
width: 50%;
}
}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>Sandmann Farm</title>
</head><body>
<div id="header2"></div><!--end of header -->
</div><!--end of container -->
<h1>
\t <a href="/">
\t \t Sandmann Farm
\t \t <span>-</span>
\t \t <small>EST. 1975</small>
\t </a>
</h1>
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
\t <ul>
\t \t <li><a href="#" class="current">Home</a></li>
\t \t <li><a href="#">About</a></li>
\t \t <li><a href="#">What We Do</a></li>
\t \t <li class="lastInSet setBreak"><a href="#">Events</a></li>
\t \t
\t \t <li><a href="#">Success Stories</a></li>
\t \t <li><a href="#">Contact</a></li>
\t \t <li><a href="#">Events</a></li>
\t \t <li class="lastInSet"><a href="#">Blog</a></li>
\t </ul>
<!-- #mainMenu --></div>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header">
<a href="/" class="logo">Navigation</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work"> Home</a></li>
<li><a href="#about"> About</a></li>
<li><a href="#careers"> What We Do</a></li>
<li><a href="#contact"> Success Stories</a></li>
<li><a href="#contact"> Contact</a></li>
<li><a href="#contact"> Events</a></li>
<li><a href="#contact"> Blog</a></li>
</ul>
</header>
<img src="https://41.media.tumblr.com/a084ee9dfc98ea3b1243a27c35c87e65/tumblr_mmxchsAxbB1rbpdkgo1_500.jpg">
</body></html>Vielen Dank im Voraus!
Vielen Dank so sehr! Das hat funktioniert! Das hätte ich nie alleine gefunden. In der Zukunft werde ich meinen Code korrekt posten, Entschuldigung für den Ärger! – BarrelPony