html - Divs not moving down within parent section -
here website current code: http://www.actuatecontent.com
i building first website , trying move down 2 divs within container div , won't budge down. (.copy
, .btn_section
)
what doing wrong, , how can correct it?
thanks help!
source code:
.second_section .container { position: relative; top: 300px; background-image: url(http://1.bp.blogspot.com/-i0jocwyqw94/udfz9u8si0i/aaaaaaaacrw/2hhb0xy7yzy/s1600/84.jpg); height: 900px; width: 100%; } .copy { top: 300px; width: 100%; text-align: center; color: white; font-family: 'josefin sans', sans-serif; letter-spacing: 2px } .btn_section { position: relative; top: 300px; text-align: center; } .btn { margin-top: 100px color: white; border: solid 2px fixed; } .btn_section { border: 1px solid white; padding: 20px 40px; text-decoration: none; background-color: #191919; color: white; font-family: 'open sans', sans-serif; font-size: 1.33em; letter-spacing: 2px; text-transform: uppercase; }
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="ac_css.css"/> <link href='https://fonts.googleapis.com/css?family=open+sans:400,600' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=raleway:500' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=josefin+sans' rel='stylesheet' type='text/css'> </head> <body> <div class="header"> <div class="nav"> <ul> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">team</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> <div class="second_section"> <div class="container"> <div class="copy"> <h1>actuate content</h1> <br> <h3>expert content every business</h3> </div> <div class="btn_section"> <a href="#" class="btn">write me!</a> </div> </div> <div class="third_section"> </div> <div class="fourth_section"> <div class="col"> <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>research</h2></a> <br> <p>our meticulous research methods uncover relevant information project. </p> </div> <div class="col"> <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/icon_17-512.png"> <h2>writing</h2></a> <br> <p>our seasoned, handpicked writers craft stellar content specific needs.</p> </div> <div class="col"> <a href="#"><img src="http://i.imgur.com/aincaug.png"> <h2>editing</h2></a> <br> <p>our editors work leading authors , publishers bring out best in writing.</p> </div> </div> <div class="footer"> <div class="footer_info"> <a href="#"><p>designed ashwin reddy / © ashwin reddy</p></a> </div> </body> </html>
try adding padding-top .container class. eg:
.second_section .container { padding-top:200px; background-image: url(http://1.bp.blogspot.com/-i0jocwyqw94/udfz9u8si0i/aaaaaaaacrw/2hhb0xy7yzy/s1600/84.jpg); height: 900px; width: 100%; }
Comments
Post a Comment