html - Turned off margin on sections, still getting space in between sections -
i'm trying experiment parallax scrolling, came following html, using bootstrap framework:
<body> <header> <div class="logo"></div> <nav> <ul> <li>work</li> <li>services</li> <li>about</li> <li>news</li> <li>contact</li> </ul> </nav> <div class="social_media_icons"></div> </header> <div class="container-fluid"> <section class="background-fixed"> <h1 class="title_desc">company name</h1> </section> <section class="description_slide"> <h2>partnering forward-thinking companies build brands , design products, services , digital experiences bring them life.</h2> </section> <section class="featured_work"> <h1>featured work</h1> <p>lorem ipsum dolor sit amet, dolorem splendide pri ne, habeo petentium hendrerit sit cu. usu cibo dolores ei, duo id omnium definiebas, quo te esse illum dissentias. soleat concludaturque sea at. illum nobis putent per ex, nec tibique molestiae te, te sea sint quidam. in eum principes consulatu, hinc nemore nominavi ei. nec elitr invidunt et, te exerci elaboraret usu, in dicit noluisse pri. qui cu facete nostrum, et dico veniam pri. sit eros velit, commune conclusionemque ius an. choro molestie sit no, democritum disputando ne has. mazim efficiendi voluptatibus sea ne, vitae intellegam adversarium nam ex. ex habeo libris everti mel, eum et putent nemore utroque. alii doming aliquip quo et, sed novum discere mediocritatem ei. te cum agam causae consetetur, qui accusam albucius placerat an, nec @ eius phaedrum. populo nemore persecuti per et, amet theophrastus ius cu. eruditi vocibus cu sed, alia erroribus assueverit usu in, ne meliore rationibus. malorum laoreet sed in, impetus aperiam et pro. pro et ludus iriure efficiantur. purto lorem scriptorem ei vel, usu invidunt accusata dignissim id. feugiat constituam et vix, putant platonem per ad. erat posse ridens sit te, iisque labores eu ius. ex pri quodsi impetus phaedrum, in dicant officiis vix, ei ponderum deserunt duo. </p> </section> <section class="happy_clients"> <h1>happy clients</h1> </section> </div> <footer> <div class="col-md-3"> made </div> <div class="col-md-3"> find 199 cleveland street surry hills, nsw 2010 </div> <div class="col-md-3"> let's talk send email (02) 8006 5089 </div> <div class="col-md-3"> project enquiries let’s started - project planner </div> </footer> </body> then here's css
/* body */ body{ margin-top: 90px; } .container-fluid { padding: 0px; } /* header section */ header{ top: 0px; height: 90px; background-color: blue; position: fixed; width: 100%; z-index: 10; border-bottom: 1px solid black; } nav{ margin-top: 35px; text-align: center; } nav ul { list-style: none; } nav ul li { display: inline; margin-right: 30px; } nav ul li:last{ margin-right: 0px; } /* background slide */ h1.title_desc{ top: 160px; font-size: 70px; } section{ height: 510px; width: 100%; z-index: 5; background-color: white; padding: 0px; margin: 0px; } .background-fixed{ position: fixed; top: 90px; z-index: -2; background-color: blue; text-align: center; } /* slide on bottom slide */ .description_slide{ background: transparent url('../imgs/trans.png') repeat; color: white; z-index: 0; opacity: 1; text-align: center; } .description_slide > h2{ top: 200px; position: relative; } /* rest of slides */ /* featured work */ /* footer */ footer{ background-color: black; color: white; height: 100px; } if @ jsfiddle (https://jsfiddle.net/ph9x38o5/1/), can see spacing between sections. tried setting margins on section tabs 0px, still, nothing works.
any ideas why?
(edit: there's mysterious margin on right side of sections in jsfiddle that's there when include bootstrap. i'd ask happening - don't happening on desktop machine, worried about?)
the margin seeing caused h1 elements.
try add following css:
h1 { margin-top: 0; } you can see in this fiddle.
edit: in response question in comments: that's caused padding on body. try changing body css following:
body { margin-top: 90px; padding-left: 0; } 
Comments
Post a Comment