Need help converting a HTML/CSS file to template in code igniter

Question

I am having trouble moving the HTML/CSS/javascript and jquery to template in Code igniter. This is the HTML code I have

    <div id="container" >
    <div id = "header">    
        <div>
            <a id = "logo" href="index.php"> </a>       
        </div>    
        <div id="topnav" class="topnav"> <a href="registration.php" class="register"> <span> Register </span></a>
          <a href="" class="signin"><span> Login</span></a> 
        </div>         
    </div>
    <fieldset id="signin_menu" style="right:auto;z-index:2001;left:70%;">
        <form method="POST" id="signin" action="login.php" >
            <label for="username">Username or email</label>
              <input id="username" name="username" value="" title="username" tabindex="4" type="text"/>
               <p>
                <label for="password">Password</label>
                <input id="password" name="password" value="" title="password" tabindex="5" type="password"/>
              </p>
              <p class="remember">
                <input type="hidden" name="originating_uri" value="<?php $_REQUEST['originating_uri'] ?>" />
                <input id="signin_submit" value="Login" tabindex="6" type="submit" name="submit"/>
                <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox"/>
                <label for="remember">Remember me</label>
              </p>
              <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
              <p class="forgot-username"> <a id=forgot_username_link
                title="If you remember your password, try logging in with your email" 
                href="#">Forgot your username?</a>
              </p>
        </form>
    </fieldset>

    <div id="menubar">
        <ul class="menulist">
            <li>
                <a href="index.php">Home </a>
                <a href="#">Generator </a>
                <a href="#">News </a>
                <a href="#">Forum </a>
                <a href="#">About </a>
                <a href="feedback.php"> Feedback </a>
            </li>
        </ul>
        <ul id="search">
            <li>
                <form id="searchform" action="" method="POST" name="searchform"> 
                    <input type="text" maxlength="10" value="Search" name="search" style="color: rgb(#999);" 
                        onclick="document.searchform.search.value='';"/>
                    <input type="submit" name="submit_search" value="Search" />
                </form>
            </li>
        </ul>
    </div>
</div>

    <div id="maincontent">
        <div id="flashcontent">
            Flash content goes here !!
        </div>

        <div id="resources">
            Resources/ News goes here !!
        </div>
    </div>

I have following code in template.php

$template['default']['regions'] = array(
   'logo' => array(
        'content' => array(''),
        'name' => 'Logo',
        'wrapper' => '<a>',
        'attributes' => array('id' => 'logo', 'href' => 'index.php')
    ),
    'menulist' => array(
        'content' => array(''),
        'name' => 'Menulist',
        'wrapper' => '<ul>',
        'attributes' => array('class' => 'menulist', 'id' => 'search')
    ),
   'flashcontent' => array(
       'content' => array('Flash content goes here !!'),
       'name' => 'Flashcontent',
       'wrapper' => '<div>',
       'attributes' => array('id' => 'flashcontent')
   ),
    'resources' => array(
       'content' => array('Resources content goes here !!'),
       'name' => 'Resources',
       'wrapper' => '<div>',
       'attributes' => array('id' => 'resources')
   ),
   'footer' => array(
       'content' => array('<ul> 
                            <li> <a href="#">Home</a>
                            <a href="#">News & Events</a>
                            <a href="#">Forum</a>
                            <a href="#">About us</a>
                            <a href="#">Contact us</a>
                            <a href="#">Terms of use</a>
                            <a href="#">Privacy policy</a>
                            <a href="#">Site map</a>
                            </li>
                           </ul>'),
       'name' => '',
       'wrapper' => '<div>',
       'attributes' => array('id' => 'footertable1')
   )
);

My questions:

1. The div tag with logo in it has to be an image. Somehow I am unable to retrieve the image from the folder.

2. I havev the fieldset which is the jquery based login. I am not sure of how to add in the template.php

3. The div tag with menubar has class with menulist and id with search and a form in it. I am confused of how to add that into my template.

I would appreciate if someone could help me in this

Answer 1

You can make a logo class and add it to the specific div, like this:

<div class="logo">
    <a id = "logo" href="index.php"> </a>       
</div>  

and in CSS you can do this to place an image (Logo) inside the div:

.logo{
    background-image:url(/* path to the image from your CSS file directory */);
}

Answer 2

1) Why does the div tag have to be an image? That doesn't really make sense. Are you saying that it should use an img tag? Why don't you just add a background image to your a tag using css?

I'm afraid I don't understand what you're asking in questions 2 and 3.