1. дома
  2. Вопрос и ответ
  3. Div не обертывание вокруг содержимого для детей

Div не обертывание вокруг содержимого для детей

2015-10-21 6 views
-1

мой черный фон в моей секции div формы не обертывает содержимое. Я пробовал встроенный блок, но он все еще занимает весь экран. Я пытаюсь обернуть прозрачный текст и форму. Если кто-то может помочь, что бы так оценил:) `Div не обертывание вокруг содержимого для детей

@import "elements.less"; 
 
@import "normalize.less"; 
 
@import "var.less"; 
 
@import "background.less"; 
 

 
    html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 
.cb-slideshow { 
 
\t list-style-type: none; 
 
} 
 
body { 
 
.font(); 
 
color: #fff; 
 

 
} 
 
header img { 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t margin-top: 3%; 
 
    margin-bottom: 20px; 
 
} 
 
h2 { 
 
color: #fff; 
 
text-align: center; 
 
.font(30px, normal); 
 
line-height: 38px; 
 
margin-bottom: 0; 
 
} 
 
html,body 
 
{ 
 
    height: 100%; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 

 
.grid { 
 
    margin-bottom: 40px; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.left { 
 
    width: 48%; 
 
    float: left; 
 
} 
 
.right { 
 
    width: 48%; 
 
    float: left; 
 
} 
 

 

 
p.xlarge { 
 
    font-size: 72px; 
 
    margin: 0; 
 
    line-height: 1; 
 
    } 
 
p.large { 
 
    margin: 0; 
 
    font-size: 60px; 
 
    font-family: 'bariol_light'; 
 
    line-height: 1; 
 
    a { 
 
    \t text-decoration: none; 
 
    \t color:#fff; 
 
    } 
 
     a:hover { 
 
     color:#3399FF; 
 
     } 
 
    } 
 
    
 
.form-section { 
 
    background-color:rgba(0, 0, 0, 0.4); 
 
    border-radius: 2%; 
 
    display: inline-block; 
 
    margin-bottom: 25px; 
 
    } 
 
section p { 
 
\t .font(20px); 
 
\t text-align: center; 
 
} 
 
section > p { 
 
\t margin-bottom: 5px; 
 
} 
 
.contact-info { 
 
\t margin: 20px auto 20px auto; 
 
\t width: 80%; 
 
    display: inline-block; 
 
} 
 

 
form { 
 
    text-align: center; 
 
    padding: 0 25px 5px 25px; 
 
} 
 

 
label { 
 
    display: block; 
 
    padding-top: 30px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
    color: #fff; 
 
} 
 
label .label-text { 
 
    cursor: text; 
 
    font-size: 20px; 
 
    line-height: 20px; 
 
    letter-spacing: 4px; 
 
    -moz-transform: translateY(-34px); 
 
    -ms-transform: translateY(-34px); 
 
    -webkit-transform: translateY(-34px); 
 
    transform: translateY(-34px); 
 
    transition: all 0.3s; 
 
} 
 
label input { 
 
    background-color: transparent; 
 
    border: 0; 
 
    border-bottom: 2px solid #4A4A4A; 
 
    font-size: 20px; 
 
    letter-spacing: -1px; 
 
    outline: 0; 
 
    padding: 5px 20px; 
 
    text-align: center; 
 
    transition: all 0.3s; 
 
    width: 300px; 
 
    color: #fff; 
 
} 
 
label input:focus { 
 
    width: 400px; 
 
} 
 
label input:focus + .label-text { 
 
    color: #F0F0F0; 
 
    font-size: 13px; 
 
    -moz-transform: translateY(-74px); 
 
    -ms-transform: translateY(-74px); 
 
    -webkit-transform: translateY(-74px); 
 
    transform: translateY(-74px); 
 
} 
 
label input:valid + .label-text { 
 
    font-size: 13px; 
 
    -moz-transform: translateY(-74px); 
 
    -ms-transform: translateY(-74px); 
 
    -webkit-transform: translateY(-74px); 
 
    transform: translateY(-74px); 
 
    color: #fff; 
 
} 
 
textarea { 
 
      height: 120px; 
 
      width: 300px; 
 
      display: block; 
 
      margin: 0 auto; 
 
      font-size: 20px; 
 
      line-height: 2em; 
 
      border-radius: 2%; 
 
      background-color:rgba(200,200,200, 0.6); 
 
     \t transition: height .3s ease-out; 
 
      transition: width .3s ease-out; 
 
     } 
 
     textarea:focus { 
 
      border: 2px solid #3399FF; 
 
      height: 200px; 
 
      width: 400px; 
 
      transition: height .3s ease-out; 
 
      transition: width .3s ease-out; 
 
     } 
 

 
button { 
 
    background-color: #333333; 
 
    border: 2px solid white; 
 
    border-radius: 27px; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 20px; 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
    padding: 15px 30px; 
 
    text-transform: uppercase; 
 
    transition: all 200ms; 
 
} 
 
button:hover, button:focus { 
 
    background-color: white; 
 
    transition: background-color .6s ease-out; 
 
    color: #333333; 
 
    outline: 0; 
 
} 
 

 
ul.share-buttons{ 
 
    list-style: none; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul.share-buttons li{ 
 
    display: inline; 
 
} 
 

 
.band { 
 
    display: block; 
 
    width: 100%; 
 
    background-color: #c7efef; 
 
    height: 6px; 
 
    float: left; 
 
} 
 
.strip { 
 
    float: left; 
 
    height: 6px; 
 
} 
 
.blue2 { 
 
    background-color: #4894b0; 
 
    width: 23.828125%; 
 
} 
 
.teal2 { 
 
    background-color: #6bc8c8; 
 
    width: 11.640625%; 
 
} 
 
.sand { 
 
    width: 19.296875%; 
 
    background-color: #f3c281; 
 
} 
 
.salmon { 
 
    width: 16.015625%; 
 
    background-color: #e64564; 
 
} 
 
footer { 
 
\t padding: 10px; 
 
background-color: #262F36; 
 
p { 
 
    color: #fff; 
 
} 
 
.cta { 
 
\t font-size: 24px; 
 
} 
 
} 
 
@media screen and (max-width: 1000px) { 
 
    html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 
input.submit-button { 
 
      width: 100%; 
 
      margin: 0 auto; 
 
      float: left; 
 
      background-color: #0066FF; 
 
      text-transform: uppercase; 
 
     } 
 
    
 
} 
 

 

 
.slideshow { 
 
\t list-style-type: none; 
 
} 
 
.container{ 
 
\t position: relative; 
 
\t text-align: center; 
 
} 
 

 

 
.slideshow, 
 
.slideshow:after { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 0; 
 
} 
 
.slideshow li span { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    color: transparent; 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
    background-repeat: none; 
 
    opacity: 0; 
 
    z-index: 0; 
 
\t -webkit-backface-visibility: hidden; 
 
    -webkit-animation: imageAnimation 36s linear infinite 0s; 
 
    -moz-animation: imageAnimation 36s linear infinite 0s; 
 
    -o-animation: imageAnimation 36s linear infinite 0s; 
 
    -ms-animation: imageAnimation 36s linear infinite 0s; 
 
    animation: imageAnimation 36s linear infinite 0s; 
 
} 
 
.slideshow li div { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: 0px; 
 
    width: 100%; 
 
    text-align: center; 
 
    opacity: 0; 
 
    -webkit-animation: titleAnimation 36s linear infinite 0s; 
 
    -moz-animation: titleAnimation 36s linear infinite 0s; 
 
    -o-animation: titleAnimation 36s linear infinite 0s; 
 
    -ms-animation: titleAnimation 36s linear infinite 0s; 
 
    animation: titleAnimation 36s linear infinite 0s; 
 
} 
 
.slideshow li div h3 { 
 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
 
    font-size: 160px; 
 
    padding: 0 30px; 
 
    line-height: 120px; 
 
    color: rgba(255,255,255,0.8); 
 
} 
 
.slideshow li:nth-child(1) span { background-image: url(http://www.webreality.co.uk/media/15625/wr-team-slider2.png) } 
 
.slideshow li:nth-child(2) span { 
 
    background-image: url(http://www.webreality.co.uk/media/15583/bellmans-1.jpg); 
 
    -webkit-animation-delay: 6s; 
 
    -moz-animation-delay: 6s; 
 
    -o-animation-delay: 6s; 
 
    -ms-animation-delay: 6s; 
 
    animation-delay: 6s; 
 
} 
 
.slideshow li:nth-child(3) span { 
 
    background-image: url(http://www.webreality.co.uk/media/1102/crestbridge.jpg); 
 
    -webkit-animation-delay: 12s; 
 
    -moz-animation-delay: 12s; 
 
    -o-animation-delay: 12s; 
 
    -ms-animation-delay: 12s; 
 
    animation-delay: 12s; 
 
} 
 
.slideshow li:nth-child(4) span { 
 
    background-image: url(http://www.webreality.co.uk/media/1055/tlc-home.jpg); 
 
    -webkit-animation-delay: 18s; 
 
    -moz-animation-delay: 18s; 
 
    -o-animation-delay: 18s; 
 
    -ms-animation-delay: 18s; 
 
    animation-delay: 18s; 
 
} 
 
.slideshow li:nth-child(5) span { 
 
    background-image: url(http://www.webreality.co.uk/media/15644/zuri_ipad.jpg); 
 
    -webkit-animation-delay: 24s; 
 
    -moz-animation-delay: 24s; 
 
    -o-animation-delay: 24s; 
 
    -ms-animation-delay: 24s; 
 
    animation-delay: 24s; 
 
} 
 
.slideshow li:nth-child(6) span { 
 
    background-image: url(http://www.webreality.co.uk/media/1059/umbraco-slider-3.jpg); 
 
    -webkit-animation-delay: 30s; 
 
    -moz-animation-delay: 30s; 
 
    -o-animation-delay: 30s; 
 
    -ms-animation-delay: 30s; 
 
    animation-delay: 30s; 
 
} 
 
.slideshow li:nth-child(2) div { 
 
    -webkit-animation-delay: 6s; 
 
    -moz-animation-delay: 6s; 
 
    -o-animation-delay: 6s; 
 
    -ms-animation-delay: 6s; 
 
    animation-delay: 6s; 
 
} 
 
.slideshow li:nth-child(3) div { 
 
    -webkit-animation-delay: 12s; 
 
    -moz-animation-delay: 12s; 
 
    -o-animation-delay: 12s; 
 
    -ms-animation-delay: 12s; 
 
    animation-delay: 12s; 
 
} 
 
.slideshow li:nth-child(4) div { 
 
    -webkit-animation-delay: 18s; 
 
    -moz-animation-delay: 18s; 
 
    -o-animation-delay: 18s; 
 
    -ms-animation-delay: 18s; 
 
    animation-delay: 18s; 
 
} 
 
.slideshow li:nth-child(5) div { 
 
    -webkit-animation-delay: 24s; 
 
    -moz-animation-delay: 24s; 
 
    -o-animation-delay: 24s; 
 
    -ms-animation-delay: 24s; 
 
    animation-delay: 24s; 
 
} 
 
.slideshow li:nth-child(6) div { 
 
    -webkit-animation-delay: 30s; 
 
    -moz-animation-delay: 30s; 
 
    -o-animation-delay: 30s; 
 
    -ms-animation-delay: 30s; 
 
    animation-delay: 30s; 
 
} 
 
@-webkit-keyframes imageAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -webkit-animation-timing-function: ease-in; 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -webkit-transform: scale(1.05); 
 
\t  -webkit-animation-timing-function: ease-out; 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -webkit-transform: scale(1.1); 
 
\t } 
 
\t 22% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: scale(1.1) translateY(-20%); 
 
\t } 
 
\t 25% { 
 
\t  opacity: 0; 
 
\t  -webkit-transform: scale(1.1) translateY(-100%); 
 
\t } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-moz-keyframes imageAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -moz-animation-timing-function: ease-in; 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -moz-transform: scale(1.05); 
 
\t  -moz-animation-timing-function: ease-out; 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -moz-transform: scale(1.1); 
 
\t } 
 
\t 22% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: scale(1.1) translateY(-20%); 
 
\t } 
 
\t 25% { 
 
\t  opacity: 0; 
 
\t  -moz-transform: scale(1.1) translateY(-100%); 
 
\t } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-o-keyframes imageAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -o-animation-timing-function: ease-in; 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -o-transform: scale(1.05); 
 
\t  -o-animation-timing-function: ease-out; 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -o-transform: scale(1.1); 
 
\t } 
 
\t 22% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: scale(1.1) translateY(-20%); 
 
\t } 
 
\t 25% { 
 
\t  opacity: 0; 
 
\t  -o-transform: scale(1.1) translateY(-100%); 
 
\t } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-ms-keyframes imageAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -ms-animation-timing-function: ease-in; 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -ms-transform: scale(1.05); 
 
\t  -ms-animation-timing-function: ease-out; 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -ms-transform: scale(1.1); 
 
\t } 
 
\t 22% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: scale(1.1) translateY(-20%); 
 
\t } 
 
\t 25% { 
 
\t  opacity: 0; 
 
\t  -ms-transform: scale(1.1) translateY(-100%); 
 
\t } 
 
\t 100% { opacity: 0 } 
 
} 
 
@keyframes imageAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  animation-timing-function: ease-in; 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  transform: scale(1.05); 
 
\t  animation-timing-function: ease-out; 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  transform: scale(1.1); 
 
\t } 
 
\t 22% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: scale(1.1) translateY(-20%); 
 
\t } 
 
\t 25% { 
 
\t  opacity: 0; 
 
\t  -transform: scale(1.1) translateY(-100%); 
 
\t } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-webkit-keyframes titleAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -webkit-transform: translateY(-300%); 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -webkit-transform: translateY(0%); 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -webkit-transform: translateY(0%); 
 
\t } 
 
\t 19% { 
 
\t  opacity: 0; 
 
\t  -webkit-transform: translateY(100%); 
 
\t } 
 
\t 25% { opacity: 0 } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-moz-keyframes titleAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -moz-transform: translateY(-300%); 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -moz-transform: translateY(0%); 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -moz-transform: translateY(0%); 
 
\t } 
 
\t 19% { 
 
\t  opacity: 0; 
 
\t  -moz-transform: translateY(100%); 
 
\t } 
 
\t 25% { opacity: 0 } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-o-keyframes titleAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -o-transform: translateY(-300%); 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -o-transform: translateY(0%); 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -o-transform: translateY(0%); 
 
\t } 
 
\t 19% { 
 
\t  opacity: 0; 
 
\t  -o-transform: translateY(100%); 
 
\t } 
 
\t 25% { opacity: 0 } 
 
\t 100% { opacity: 0 } 
 
} 
 
@-ms-keyframes titleAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -ms-transform: translateY(-300%); 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -ms-transform: translateY(0%); 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -ms-transform: translateY(0%); 
 
\t } 
 
\t 19% { 
 
\t  opacity: 0; 
 
\t  -ms-transform: translateY(100%); 
 
\t } 
 
\t 25% { opacity: 0 } 
 
\t 100% { opacity: 0 } 
 
} 
 
@keyframes titleAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  transform: translateY(-300%); 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  transform: translateY(0%); 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  transform: translateY(0%); 
 
\t } 
 
\t 19% { 
 
\t  opacity: 0; 
 
\t  transform: translateY(100%); 
 
\t } 
 
\t 25% { opacity: 0 } 
 
\t 100% { opacity: 0 } 
 
}
<!DOCTYPE html> 
 
    <!--[if IE 8]><html class="ie8"><![endif]--> 
 
    <!--[if IE 9]><html class="ie9"><![endif]--> 
 
    <!--[if gt IE 9]><!--><html><!--<![endif]--> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
     <title> WebReality Holding Page</title> 
 
     <meta name="description" content=""> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="/css/main.css" /> 
 
    </head> 
 
    <body> 
 
    <ul class="slideshow"> 
 
      <li><span>Image 01</span></li> 
 
      <li><span>Image 02</span></li> 
 
      <li><span>Image 03</span></li> 
 
      <li><span>Image 04</span></li> 
 
      <li><span>Image 05</span></li> 
 
      <li><span>Image 06</span></li> 
 
     </ul> 
 
     <div class="container"> 
 
    <header> 
 
    <img src="http://i.imgur.com/60tFZ1e.png" alt="logo"/> 
 
    </header> 
 
    <div class="form-section" 
 
    <section class="pw"> 
 
     <!-- @import "/Partials/header.html" --> 
 
     <div class="contact-info"> 
 
      <h2> We're here to help </h2> 
 
      <p> We help people plan, design, build and market their web and mobile projects. </p> 
 
      <div class="grid"> 
 
      <div class="plan left"> 
 
      <h3> Plan </h3> <p> 
 
      Wondering where to start? Let us draw you a map! Our wide experience means we usually have directly relevant insights when it comes to strategic planning. </p> 
 
      </div> 
 
<div class="design right"> 
 
<h3> Design </h3> 
 
<p> Design for digital media is a fast-changing specialist field. In the world of design, digital is all we do. Websites, apps, email marketing, branding, mobile vouchers... We make it beautiful. </p> 
 
</div> 
 

 
<div class="build left"> 
 
<h3> Build </h3> 
 
<p> At heart, we're a technology business. We have deep skills in software development for web and mobile. Whether it's building what we designed, or working with your design partner, we can help. </p> 
 
</div> 
 
<div class="market right"> 
 
<h3>Market</h3> 
 
<p>Plan it, design it, build it... now you need to feed it and get it seen.</p> 
 
</div> 
 
</div> 
 
     </div> 
 
      <form> 
 
       <label> 
 
        <input type="text" required /> 
 
        <div class="label-text">Name</div> 
 
        </label> 
 
        <label> 
 
        <input type="text" required /> 
 
        <div class="label-text">Email</div> 
 
        </label> 
 
       <label for="Message">Message:</label><br /> 
 
       <div class="textbox"> 
 
       <textarea name="Message" rows="20" cols="20" id="Message"></textarea> 
 
       </div> 
 
        <button>Submit</button> 
 
      </form> 
 
      
 
      <div style="clear: both;"></div> 
 
    </section> 
 
    </div> 
 
<div class="band"> 
 
    <div class="strip blue2"></div> 
 
    <div class="strip teal2"></div> 
 
    <div class="strip sand"></div> 
 
    <div class="strip salmon"></div> 
 
    <div class="strip blue3"></div> 
 
</div> 
 

 
    <footer class="fw"> 
 
    <div class="cta pw"> 
 
     <p class="xlarge">Get in touch</p> 
 
     <p class="large"><span>01534 488888</span> or <a href="mailto:[email protected]">email us »</a></p> 
 
    <p><span>2 La Chasse</span>, <span >St Helier</span> <span>JE2 4UE</span></p> 
 
</div> 
 
<ul class="share-buttons"> 
 
    <li><a href="#" title="Share on Facebook" target="_blank"><img src="http://i.imgur.com/7kQQwLU.png" alt="Facebook Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Tweet"><img src="http://i.imgur.com/zEUBZSI.png" alt="Twitter Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Share on Google+"><img src="http://i.imgur.com/hNgPsyc.png" alt="Google+ Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Post to Tumblr"><img src="http://i.imgur.com/vnwhljt.png" alt="Tumblr Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Pin it"><img src="http://i.imgur.com/8g0gxyZ.png" alt="Pin it Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Add to Pocket"><img src="http://i.imgur.com/rTqXncE.png" alt="Pocket Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Submit to Reddit"><img src="http://i.imgur.com/ehb3wbL.png" alt="Reddit Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Share on LinkedIn"><img src="http://i.imgur.com/tujqxUY.png" alt="LinkedIn Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Publish on WordPress"><img src="http://i.imgur.com/EXy9FOK.png" alt="WordPress Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Save to Pinboard"><img src="http://i.imgur.com/4qhISPT.png" alt="Pinboard Share"></a></li> 
 
    <li><a href="#" target="_blank" title="Email"><img src="http://i.imgur.com/ZEAJvU5.png" alt="Email"></a></li> 
 
</ul> 
 
    </footer> 
 
    </body> 
 
     <!-- @import "/Partials/footer.html" --> 
 
     <!-- @import "/Partials/additional-code.html" --> 
 
    </body> 
 
</html>

`

источник

2015-10-21 John Smith

+2

Можете ли вы создать ** минимальную ** демонстрационную версию проблемы. Похоже, что вы сбросили всю кухню в код, который вы предоставили. –

+0

попытался найти его, без успеха, но вот минимальная версия jsfiddle: http://jsfiddle.net/dbwu4w7w/ – JasperZelf

ответ

0

Это один из самых красивых форм я когда-либо прийти через :-)

<ul class="slideshow"> 
     <li><span>Image 01</span></li> 
     <li><span>Image 02</span></li> 
     <li><span>Image 03</span></li> 
     <li><span>Image 04</span></li> 
     <li><span>Image 05</span></li> 
     <li><span>Image 06</span></li> 
    </ul>

http://codepen.io/damianocel/pen/GpyPMa

I я не уверен, что понял вопрос, но проверьте его и дайте мне знать.

источник

2015-10-21 12:54:34

+0

Спасибо! Это означает, что я только начал создавать веб-сайты на другой неделе, едва имея опыт кодирования: o это не исправить, хотя, в конце концов, я пошел в другом направлении, дайте мне знать, что вы думаете! http://codepen.io/MJSBLUES/pen/xwpyvG –

+0

Добро пожаловать, кстати, что-то не так с кодефером, попробуйте поставить скомпилированный css там, нет необходимости в таблице стилей и разделе главы на codepen. Действительно ли это (классList.add) работает с jquery? :-) Объясните, пожалуйста, что вы хотите, чтобы форма выглядела? –

 Смежные вопросы

  • Нет связанных вопросов^_^