“html5 boilerplate issue” – Forum Thread – Discuss

html5 boilerplate issue

This is an open discussion with 3 replies, filed under General.

Search

You are looking at page 1 of 1

- dazdseg
- 21 May 13, 1:56 pm
- Comment #1

Hi,

I am trying to make a simple website with bp. (it contains 5 images back to back) and a fixed div on top (with sliding up & down menu bar)

What i am not able to figure out is the proper css elements for each of them.

1) why are the pics chosen by me is taking 100% size on all elements (i want these pics to take 100%) - i am sure i am unable to put css properly.

<div class="main-container">
  <div class="main wrapper clearfix">
    <article>
      <header id="home">
        <img src="img/2.jpg" style="width:100%;"/>
      </header>
      <section id="exp">
        <img src="img/3.jpg" style="width:100%;"/>
      </section>
      <section>
        <img src="img/4.jpg" style="width:100%;"/>
      </section>
      <section>
        <img src="img/5.jpg" style="width:100%;"/>
      </section>
      <section id="about">
        <img src="img/6.jpg" style="width:100%;"/>
      </section>
      <section id="access">
        <img src="img/7.jpg" style="width:100%;"/>
      </section>
      <section>
        <img src="img/8.jpg" style="width:100%;"/>
      </section>
    </article>
  </div> <!-- #main -->
</div> <!-- #main-container -->

2) My jquery menu script is playing hanky panky with me. Its not working as it should be.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

in html5 the script will influence below code.

<header class="wrapper clearfix">
  <img src="img/0.jpg" />
  <nav>
    <ul>
      <li id="flip"><a href="#"> MENU </a> </li>
    </ul>
    <section>
      <ul id="panel">
        <li><a href="#home"> HOME </a></li>
        <li id = "divider"> </li>
        <li><a href="#exp "> EXPLORE </a></li>
        <li id = "divider"> </li>
        <li><a href="#about "> ABOUT US </a></li>
        <li id = "divider"> </li>
        <li><a href="#cont "> ACCESS </a></li>
        <li id = "divider"> </li>
        <li><a href="#facebok "> FACEBOOK </a></li>
        <li id = "divider"> </li>
        <li><a href="#twitter "> TWITTER </a></li>
        <li id = "divider"> </li>
        <li><a href="#pinterest "> PINTEREST </a></li>
        <li id = "divider"> </li>
      </ul>
    </section>
  </nav>
</header>

Symphony.