0
イメージがあります。応答するイメージを中心にしたいボタンを作成します。しかし、私はそれをイメージの上にどのように置くか、それがその背後に隠れるのを防ぐ方法を知らない。私はz-indexを試みましたが失敗しました。 div "ボタン"を参照してください。前もって感謝します！応答しているイメージ上のセンタリングボタン
@font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}
h1, h2, h3, h4, h5, h6, p {
\t margin: 0;
\t padding: 0;
}
p {
\t margin: 0 0 1em 0;
\t font-size: 93%;
\t line-height: 1.5em;
}
body {
\t font-family: Helvetica, Arial, sans-serif;
\t padding: 0;
\t margin: 0;
\t background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
\t max-width: 100%;
\t height: auto;
\t margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
\t max-width: 1100px;
\t padding: 0 25px;
\t margin: 0 auto;
}
/* Header */
div.header {
\t background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
\t margin-top:40px;
\t height: 30px;
\t background-color: #E9E9E9;
\t padding: 40px 0;
}
/*Logo*/
h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
/*Satooth Pattern*/
h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/*Sawtooth Pattern Two*/
h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/* Navigation */
#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.40em 0.75em 0.05em;
\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 color:#F0E8E0;
\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:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
\t color:#87C6BC;
}
#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: 1em;
}
#mainMenu:after {
\t bottom:0.3em;
\t font-size:150%;
\t margin-left:-1.5em;
}
#mainMenu ul:before {
\t margin-left:-3em;
}
/* Body Content */
div.body-content {
\t padding: 50px 0;
\t background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
\t font-family: Gudea;
}
button {
\t
}
/* Thirds */
div.thirds {
\t padding-bottom: 50px;
\t text-align: center;
\t font-family: Gudea;
}
div.one-third {
\t width: 30%;
\t float: left;
\t margin-right: 5%;
\t text-align: center;
\t font-family: Gudea;
}
div.one-third-last {
\t margin: 0;
\t text-align: center;
\t font-family: Gudea;
}
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
\t width: 100%;
\t float: left;
\t margin-top: -30px;
\t margin-right: 5%;
\t text-align: center;
\t padding-bottom:20px;
\t font-family: Gudea;
\t position: relative;
}
/* Footer */
div.footer {
\t background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
\t margin-top: 30px;
\t margin-bottom: 30px;
\t color: #FFF;
\t padding: 15px 0;
\t text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
@media (min-width:900px) {
\t .header2 {
\t \t display: none;
\t }
\t .menu {
\t \t display: none;
\t }
}
@media (max-width:900px) {
\t body {
\t z-index: 100;
\t margin:;
\t font-family: font:bold 16px/18px arial,helvetica,sans-serif;
\t background-color: #f4f4f4;
\t
\t }
\t a {
\t color: #F8F4E6;
\t text-shadow:
\t \t 0 0 5px #000,
\t \t 5px 5px 5px #754;
\t }
\t .menu a:before,
\t .menu ul:before,
\t .menu ul:before {
\t \t content:"\2605";
\t }
\t /* header */
\t .header2 {
\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 .header2 ul {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t overflow: hidden;
\t background-image:none;
\t }
\t .header2 li a {
\t display: block;
\t padding: 20px 20px;
\t border-right: 1px solid #f4f4f4;
\t text-decoration: none;
\t }
\t .header2 li a:hover,
\t .header2 .menu-btn:hover {
\t \t background-color:#4EB4AC;
\t
\t }
\t .header2 .logo {
\t display: block;
\t float: left;
\t font-size: 15px;
\t padding: 10px 20px;
\t margin-top: 15px;
\t text-decoration: none;
\t }
\t /* menu */
\t .header2 .menu {
\t clear: both;
\t max-height: 0;
\t transition: max-height .2s ease-out;
\t
\t }
\t /* menu icon */
\t .header2 .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 .header2 .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 .header2 .menu-icon .navicon:before,
\t .header2 .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 margin-top: 7px;
\t }
\t .header2 .menu-icon .navicon:before {
\t top: 03px;
\t }
\t .header2 .menu-icon .navicon:after {
\t top: -2px;
\t }
\t /* menu btn */
\t .header2 .menu-btn {
\t display: none;
\t }
\t .header2 .menu-btn:checked ~ .menu {
\t max-height: none;
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon {
\t background: transparent;
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon:before {
\t transform: rotate(-45deg);
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon:after {
\t transform: rotate(45deg);
\t }
\t .header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
\t .header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
\t top: 0;
\t }
}
/* 48em = 768px */
@media (max-width: 899px) {
#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>
\t <meta charset="utf-8">
\t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t
\t <title>Introduction to Responsive Web Design</title>
\t
\t <meta name="viewport" content="width=device-width">
\t
\t <!-- css -->
\t <link rel="stylesheet" href="css/main.css">
\t <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
\t
</head>
<body>
<!--Logo-->
<h1>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h1>
<!--Sawtooth Pattern-->
<h2>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h2>
<!-- Header -->
\t <div class="header"><div class="section-inner">
\t </div></div>
\t
<!-- Navigation -->
<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>
</div>
<!--Mobile Navigation-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
<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>
\t
<!-- Body-Content -->
\t <div class="body-content"><div class="section-inner">
\t \t <div class="button">
\t \t \t <img src="http://i63.tinypic.com/2hyxcls.jpg">
\t \t </div>
\t <div class="main">
\t <img src="http://oi63.tinypic.com/14ifsz6.jpg">
\t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
\t \t
\t \t <!-- thirds -->
\t \t <div class="thirds clearfix">
\t \t \t
\t \t \t <!-- one-third -->
\t \t \t <div class="one-third mobile-collapse">
\t \t \t \t <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird on a fence" />
\t \t \t \t <h2>The Trainer</h2>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\t \t \t </div><!--/one-third-->
\t \t \t
\t \t \t <!-- one-third -->
\t \t \t <div class="one-third one-third-second mobile-collapse">
\t \t \t \t <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird eating" />
\t \t \t \t <h2>Lessons</h2>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\t \t \t </div><!--/one-third-->
\t \t \t
\t \t \t <!-- one-third -->
\t \t \t <div class="one-third one-third-last mobile-collapse">
\t \t \t \t <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A cat" />
\t \t \t \t <h2>Training</h2>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\t \t \t </div><!--/one-third-->
\t \t \t
\t \t </div><!--/thirds-->
\t \t
\t \t
\t </div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h3>
\t
<!-- Footer -->
\t <div class="footer"><div class="section-inner">
\t \t
\t \t <p>Footer text placed here.</p>
\t \t
\t </div></div>
</body>
</html>