css - Zurb Foundation Image and text frames, issues with centering and nav-bar max-width -
i've been putting site together, , series of 6 images (graphic1.jpg, graphic2.jpg etc) set sort of frame, attached image, text stays under image, on mobile if images squeezed downwards single file, , give visual clarity bit of text goes image.
i'm having problem 2 buttons @ bottom of page centering, despite fact i'm using center code.
also, there resource can pointed to set width of nav-bar maximum, site can have edges , background behind/outside of that? think there's code there.
thanks help can provide!
brookes
<html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>tribal droid studio</title> <link rel="stylesheet" href="css/foundation.css" /> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <script src="js/vendor/modernizr.js"></script> </head> <body> <div class="twelve columns centered"> <nav class="top-bar"> <ul class="title-area"> <li class="name"><h1><a href="index.html">tribal droid studio</a></h1></li> </ul> <section class="top-bar-section"> <ul class="right"> <li><a href="#">visual development</a></li> <li><a href="#">sign work</a></li> <li><a href="#">our process</a></li> <li><a href="#">contact us</a></li> <li><a href="#">about tribal droid</a></li> </ul> </section> </nav> <div class="row"> <div class="row"> <div class="large-5 columns"> <h2>tribal droid studio</h2> <p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p> </div> <div class="large-7 columns"> </div> <div class="large-12 columns"> <img src="img/tribalhead3.jpg"/> </div> <hr /> <div class="row"> <h2>why tribal droid studio?</h2> <div class="large-12 columns"> <ul class="large-block-grid-3"> <li><img src="img/graphic1.jpg" />graphic design, logo design, , branding go creating visual identity.</li> </panel> <li><img src="img/graphic2.jpg" />but can hard noticed in sea of things demanding attention.</li> <li><img src="img/graphic3.jpg" />you may find developing 1 of own lacking in professionalism or soul.</li> <li><img src="img/graphic4.jpg" />at heart of visual identity story.</li> <li><img src="img/graphic5.jpg" />tribal droid studio team of artists , storytellers determined turn visions visuals.</li> <li><img src="img/graphic6.jpg" />once identity ready, have signmaking tools , experience bring life.</li> </div> <div class="row"> <divclass="small-8 small-centered columns"> <a class="button round"="contact.html">contact started!</a> <a class="button round"="#">view our gallery of work</a> </div> </div> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.your-class').slick({ setting-name: setting-value }); }); </script> <script> $(document).foundation(); </script> </body> </html> ![what i'd images , text (font unimportant)][1]
first i'd go through , check syntax... <divclass="small-8... invalid. can cause break in layout. also... check divs "row" classes seems there lot of extras in example...
i count 9 open <div> tags , 6 close /div> tags...
for image issues, set sort of css images position them need, , place image, , text it, within block element on page. right text free flow within <li> tag , image free float well. without sort of container around them going separation.
css image zurb-foundation center
No comments:
Post a Comment