html - Full width footer with Foundation framework -


i trying make footer panel go across page seems stick in middle. header has filled across page. doing wrong. trying make both of panel @ bottom go across full width of page.

html

<body>   <header>     <div class="large-12">       <div class="panel">         <h1 class="nowrap text-center">header</h1>       </div>     </div>     <br><br>   </header>    <div class="large-4 columns">     <div class="panel">        <h3>sidebar</h3>        <h5>lorem</h5>         <ul class="text-left ">           <!-- # used placeholder -->           <li><a href="#">link 1</a></li>           <li><a href="#">link 2</a></li>           <li><a href="#">link 3</a></li>           <li><a href="#">link 4</a></li>           <li><a href="#">link 5</a></li>         </ul>        </div>     </div>    <div class="large-8 columns">     <div class="panel">       <h1>call action</h1>       <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium quas quasi perspiciatis unde cumque nesciunt nisi eveniet natus nemo quia, sequi non, ab, beatae aliquam. dolore accusamus quos esse similique architecto, aut consequatur ratione placeat, veritatis ea sit tempore corporis cupiditate voluptas? nesciunt rem vel corporis consectetur perferendis hic perspiciatis amet totam quod, impedit reiciendis suscipit aperiam, eum ex dolorem fugit repellendus sit. non, facere labore, veritatis nobis corporis sapiente dignissimos dolore ex maxime quia ipsum recusandae, quos velit atque perferendis quibusdam, deserunt eius? modi facilis impedit dolorem saepe, nobis eius voluptatibus perspiciatis iste, quis at, amet ex cum?</p>         </div>      <div class="row">       <div class="columns large-6">         <p class="panel columns">lorem ipsum dolor sit amet, consectetur adipisicing elit. voluptatum tempora, ipsam. quos, hic reprehenderit perferendis ut illo minus. quae odit laborum excepturi inventore consequuntur deserunt rerum dolorum optio, sit. maiores.</p>       </div>        <div class="columns large-6">         <p class="panel columns">lorem ipsum dolor sit amet, consectetur adipisicing elit. optio possimus unde labore delectus quia asperiores adipisci magni molestias libero in et modi assumenda nesciunt sapiente, error, necessitatibus, sed accusantium itaque.</p>       </div>     </div>      <div class="row">       <div class="large-12 columns">         <div class="panel">           <h1>website in no time</h1>         </div>         <footer>          <div class="large-12">            <div class="panel">              <h1 class="nowrap text-center">footer</h1>            </div>          </div>        </footer>

the problem footer inside row. restricted foundations max-width around 960px last time checked. when used foundation make footer 100% width , wrap content row.

css

footer {   width: 100%;   margin: 0;   padding: 0;  }

html

<header>   <!-- header content--> </header>  <div>   <!-- can wrap content want --> </div>  <!-- not wrap footer if want fill entire width of page --> <footer>   <div class="large-12">     <div class="panel">       <h1 class="nowrap text-center">footer</h1>     </div>   </div> </footer>

Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more