Member Avatar for davy_yg

Hello,

I am trying to create a form, yet I wonder why the form does not works like usually:

index.php

<form action="login.php" method="POST">
<input type="text" class="form" name="email"><br>
<div style="margin: -60px 0 0 165px;"><input type="password" class="form" name="password"></div>
<div style="margin: 235px 0 0 -125px;"><input type="button" name="submit"></input></div>
<div style="margin: -170px 0 0 350px;"><input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br></div>
</form>

First, I wonder why the password textbox is too small (the height is too low and the width is too narrow).

Second, I wonder why after I press the button, nothing happens! Normally, if I press the button - the form suppose to be processed by carrying me to login.php

Yet, this is not the case.

  • 4 Contributors
  • 15 Replies
  • 256 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by broj1
Member Avatar for broj1

I wonder why after I press the button, nothing happens! Normally, if I press the button - the form suppose to be processed by carrying me to login.php

<input type="button" name="submit">

The type should be submit not button unless you use some javascript code to submit the form.

Also an input element does not need a closing </input> tag.

Edited by broj1
Member Avatar for davy_yg

If I change the type to submit then, it buttons turn into unclickable. only if I leave the type to button is clickable, yet the form still not processing correctly like carrying me to the login.php file.

Member Avatar for AndrisP

It seems that your submit clickable controlled by javascript

Member Avatar for edbr

<input name="Submit" type="submit" value="Submit">

Member Avatar for broj1

Do you have any javascript bound to the form / button? If yes, post it. Or maybe there is something in the style sheet?

Member Avatar for davy_yg

index.php

<html>
<title></title>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/styleT.css"> <!-- Resource style --><script src="js/modernizr.js"></script> <!-- Modernizr --> 
</head>
<body>

<div id="container">
<image src="images/logo.jpg">

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="http://202.93.143.203/SIP_Ricci">SIP</a></li>  
<li><a href="#">LMS</a></li>
<li><a href="#">Library</a></li>
<li><a href="http://www.roomplus.co.id/roomplus/">Roomplus</a></li>

</ul>
</div>

<image src="images/nav.jpg">

<div id="banner-background">
<div style="margin: 120px 0 0 280px; position: absolute; z-index: 3;">
<form action="login.php" method="POST">
<input type="text" class="form" name="email"><br>
<div style="margin: -60px 0 0 165px;"><input type="password" class="form" name="password"></div>
<div style="margin: 235px 0 0 -125px;"><input type="button" name="submit"></input></div>
<div style="margin: -220px 0 0 570px;"><a href="#">Create an Account</a><br><a href="#">Forgot Password</a></div>
<div style="margin: 10px 0 0 350px;"><input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br></div>
</form>
</div> 
</div>
Member Avatar for broj1

I copied the code above on my server, changed the input type to submit and it submits the form without any problems. Maybe you try to disable javascript and see if it works or test without any css (maybe without negative margins and z-index).

This is the same form stripped down to bare bones:

<form action="login.php" method="POST">
<input type="text" name="email"><br>
<input type="password" name="password"><br>
<input type="submit" name="submit" value="Submit"><br>
<a href="#">Create an Account</a><br>
<a href="#">Forgot Password</a><br>
<input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br>
</form>

Try if this works.

Edited by broj1
Member Avatar for davy_yg

I try this:

index.php

<html>
<title></title>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/styleT.css"> <!-- Resource style <script src="js/modernizr.js"></script> <!-- Modernizr --> 
</head>
<body>

<div id="container">
<image src="images/logo.jpg">

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="http://202.93.143.203/SIP_Ricci">SIP</a></li>  
<li><a href="#">LMS</a></li>
<li><a href="#">Library</a></li>
<li><a href="http://www.roomplus.co.id/roomplus/">Roomplus</a></li>

</ul>
</div>

<image src="images/nav.jpg">

<div id="banner-background">
<div style="margin: 120px 0 0 280px; position: absolute; z-index: 3;">
<form action="login.php" method="POST">
<input type="text" class="form" name="email"><br>
<div style="margin: 60px 0 0 165px;"><input type="password" class="form" name="password"></div>
<div style="margin: 235px 0 0 -125px;"><input type="button" name="submit"></input></div>
<div style="margin: 220px 0 0 570px;"><a href="#">Create an Account</a><br><a href="#">Forgot Password</a></div>
<div style="margin: 10px 0 0 350px;"><input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br></div>
</form>
</div> 
</div>
<!--<image src="images/banner.jpg">-->

<center><image src="images/educational_portal.jpg"></center>
<image src="images/tab.jpg">

<br><br>
<div style="margin: -30px 0 0 0; width: 1100px; height: 400px; background-color: #eee6ca;">

<!--  TAB -->



<div class="cd-tabs">
    <nav>
        <ul class="cd-tabs-navigation">
            <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
            <li><a data-content="new" href="#0">New</a></li>
            <li><a data-content="gallery" href="#0">Gallery</a></li>

        </ul> <!-- cd-tabs-navigation -->
    </nav>

    <ul class="cd-tabs-content">
        <li data-content="inbox" class="selected">
            <!--
            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
        </li>

        <li data-content="new">
            <p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>

            <p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>
        </li>

        <li data-content="gallery">
            <p>Gallery Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque tenetur aut, cupiditate, libero eius rerum incidunt dolorem quo in officia.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ipsa vero, culpa doloremque voluptatum consectetur mollitia, atque expedita unde excepturi id, molestias maiores delectus quos molestiae. Ab iure provident adipisci eveniet quisquam ratione libero nam inventore error pariatur optio facilis assumenda sint atque cumque, omnis perspiciatis. Maxime minus quam voluptatum provident aliquam voluptatibus vel rerum. Soluta nulla tempora aspernatur maiores! Animi accusamus officiis neque exercitationem dolore ipsum maiores delectus asperiores reprehenderit pariatur placeat, quaerat sed illum optio qui enim odio temporibus, nulla nihil nemo quod dicta consectetur obcaecati vel. Perspiciatis animi corrupti quidem fugit deleniti, atque mollitia labore excepturi ut.</p>
        </li>

        <li data-content="store">
            <p>Store Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, enim, pariatur. Ab assumenda, accusantium! Consequatur magni placeat quae eos dicta, cum expedita sunt facilis est impedit possimus dolorum sequi nostrum nobis sit praesentium molestias nulla laudantium fugit corporis nam ut saepe harum ipsam? Debitis accusantium, omnis repudiandae modi, distinctio illo voluptatibus aperiam odio veritatis, quam perferendis eaque ullam. Temporibus tempore ad voluptates explicabo ea sit deleniti ipsum quos dolores tempora odio, ab corporis molestiae, eaque optio, perferendis! Cumque libero quia modi! Totam magni rerum id iusto explicabo distinctio, magnam, labore sed nemo expedita velit quam, perspiciatis non temporibus sit minus voluptatum. Iste, cumque sunt suscipit facere iusto asperiores, ullam dolorum excepturi quidem ea quibusdam deserunt illo. Nesciunt voluptates repellat ipsam.</p>
        </li>

        <li data-content="settings">
            <p>Settings Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam magni, ullam nihil a suscipit, ex blanditiis, adipisci tempore deserunt maiores. Nostrum officia, ratione enim eaque nihil quis ea, officiis iusto repellendus. Animi illo in hic, maxime deserunt unde atque a nesciunt? Non odio quidem deserunt animi quod impedit nam, voluptates eum, voluptate consequuntur sit vel, et exercitationem sint atque dolores libero dolorem accusamus ratione iste tenetur possimus excepturi. Accusamus vero, dignissimos beatae tempore mollitia officia voluptate quam animi vitae.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ipsam eum reprehenderit minima at sapiente ad ipsum animi doloremque blanditiis unde omnis, velit molestiae voluptas placeat qui provident ab facilis.</p>
        </li>

        <li data-content="trash">
            <p>Trash Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque a iure nostrum animi praesentium, numquam quidem, nemo, voluptatem, aspernatur incidunt. Fugiat aspernatur excepturi fugit aut, dicta reprehenderit temporibus, nobis harum consequuntur quo sed, illum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima doloremque optio tenetur, natus voluptatum error vel dolorem atque perspiciatis aliquam nemo id libero dicta est saepe laudantium provident tempore ipsa, accusamus similique laborum, consequatur quia, aut non maiores. Consectetur minus ipsum aliquam pariatur dolorem rerum laudantium minima perferendis in vero voluptatem suscipit cum labore nemo explicabo, itaque nobis debitis molestias officiis? Impedit corporis voluptates reiciendis deleniti, magnam, fuga eveniet! Velit ipsa quo labore molestias mollitia, quidem, alias nisi architecto dolor aliquid qui commodi tempore deleniti animi repellat delectus hic. Alias obcaecati fuga assumenda nihil aliquid sed vero, modi, voluptatem? Vitae voluptas aperiam nostrum quo harum numquam earum facilis sequi. Labore maxime laboriosam omnis delectus odit harum recusandae sint incidunt, totam iure commodi ducimus similique doloremque! Odio quaerat dolorum, alias nihil quam iure delectus repellendus modi cupiditate dolore atque quasi obcaecati quis magni excepturi vel, non nemo consequatur, mollitia rerum amet in. Nesciunt placeat magni, provident tempora possimus ut doloribus ullam!</p>-->
        </li>
    </ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->


<!-- End of Tab -->

<div id="box">
<table border="0">
<tr>
<td>
<image src="images/box1.jpg">
<image src="images/box2.jpg">
<image src="images/box3.jpg">
<image src="images/box4.jpg"><br>
<image src="images/box5.jpg">
<image src="images/box6.jpg">
<image src="images/box7.jpg">
<image src="images/box8.jpg"><br>
</td>
<td>
<a href="#"><img src="images/button_program.jpg"></a><br><br>
</td>
</tr>
</div>

<div style="margin: 200px 0 0 -400px;"><hr width="650px"></div>

<div id="help"><image src="images/help.jpg"></div>

<div id="program">
<br><br><br>
<image src="images/program.jpg"><br>
<image src="images/title2.jpg"><br>
<b>

<div style="margin: 0 0 0 30px;">Program</div> 
<div style="margin: -20px 0 0 230px;">Schools</div>
<div style="margin: -20px 0 0 430px;">Courses</div> 
<div style="margin: -20px 0 0 630px;">Careers</b>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin: 0 0 0 -600px;"><image src="images/articles_tab.jpg"></div><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>
</div>
</div>

</body>
</html>

The form is still unclickable. Now, not only the textbox but also the button.

Member Avatar for AndrisP

Show source of "js/main.js" please

Member Avatar for davy_yg

js/main.js

jQuery(document).ready(function($){
    var tabItems = $('.cd-tabs-navigation a'),
        tabContentWrapper = $('.cd-tabs-content');

    tabItems.on('click', function(event){
        event.preventDefault();
        var selectedItem = $(this);
        if( !selectedItem.hasClass('selected') ) {
            var selectedTab = selectedItem.data('content'),
                selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
                slectedContentHeight = selectedContent.innerHeight();

            tabItems.removeClass('selected');
            selectedItem.addClass('selected');
            selectedContent.addClass('selected').siblings('li').removeClass('selected');
            //animate tabContentWrapper height when content changes 
            tabContentWrapper.animate({
                'height': slectedContentHeight
            }, 200);
        }
    });

    //hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
    checkScrolling($('.cd-tabs nav'));
    $(window).on('resize', function(){
        checkScrolling($('.cd-tabs nav'));
        tabContentWrapper.css('height', 'auto');
    });
    $('.cd-tabs nav').on('scroll', function(){ 
        checkScrolling($(this));
    });

    function checkScrolling(tabs){
        var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
            tabsViewport = parseInt(tabs.width());
        if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
            tabs.parent('.cd-tabs').addClass('is-ended');
        } else {
            tabs.parent('.cd-tabs').removeClass('is-ended');
        }
    }
});
Member Avatar for broj1

As I said in my post above: try with the stripped down version of the form. Here is your code with bare form:

<html>
<title></title>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/styleT.css"> <!-- Resource style <script src="js/modernizr.js"></script> <!-- Modernizr --> 
</head>
<body>

<div id="container">
<image src="images/logo.jpg">

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="http://202.93.143.203/SIP_Ricci">SIP</a></li>  
<li><a href="#">LMS</a></li>
<li><a href="#">Library</a></li>
<li><a href="http://www.roomplus.co.id/roomplus/">Roomplus</a></li>

</ul>
</div>

<image src="images/nav.jpg">

<div id="banner-background">


 <!-- stripped down form -->
 <form action="login.php" method="POST">
<input type="text" name="email"><br>
<input type="password" name="password"><br>
<input type="submit" name="submit" value="Submit"><br>
<a href="#">Create an Account</a><br>
<a href="#">Forgot Password</a><br>
<input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br>
</form>



</div>
<!--<image src="images/banner.jpg">-->

<center><image src="images/educational_portal.jpg"></center>
<image src="images/tab.jpg">

<br><br>
<div style="margin: -30px 0 0 0; width: 1100px; height: 400px; background-color: #eee6ca;">

<!--  TAB -->



<div class="cd-tabs">
    <nav>
        <ul class="cd-tabs-navigation">
            <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
            <li><a data-content="new" href="#0">New</a></li>
            <li><a data-content="gallery" href="#0">Gallery</a></li>

        </ul> <!-- cd-tabs-navigation -->
    </nav>

    <ul class="cd-tabs-content">
        <li data-content="inbox" class="selected">
            <!--
            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
        </li>

        <li data-content="new">
            <p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>

            <p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>
        </li>

        <li data-content="gallery">
            <p>Gallery Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque tenetur aut, cupiditate, libero eius rerum incidunt dolorem quo in officia.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ipsa vero, culpa doloremque voluptatum consectetur mollitia, atque expedita unde excepturi id, molestias maiores delectus quos molestiae. Ab iure provident adipisci eveniet quisquam ratione libero nam inventore error pariatur optio facilis assumenda sint atque cumque, omnis perspiciatis. Maxime minus quam voluptatum provident aliquam voluptatibus vel rerum. Soluta nulla tempora aspernatur maiores! Animi accusamus officiis neque exercitationem dolore ipsum maiores delectus asperiores reprehenderit pariatur placeat, quaerat sed illum optio qui enim odio temporibus, nulla nihil nemo quod dicta consectetur obcaecati vel. Perspiciatis animi corrupti quidem fugit deleniti, atque mollitia labore excepturi ut.</p>
        </li>

        <li data-content="store">
            <p>Store Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, enim, pariatur. Ab assumenda, accusantium! Consequatur magni placeat quae eos dicta, cum expedita sunt facilis est impedit possimus dolorum sequi nostrum nobis sit praesentium molestias nulla laudantium fugit corporis nam ut saepe harum ipsam? Debitis accusantium, omnis repudiandae modi, distinctio illo voluptatibus aperiam odio veritatis, quam perferendis eaque ullam. Temporibus tempore ad voluptates explicabo ea sit deleniti ipsum quos dolores tempora odio, ab corporis molestiae, eaque optio, perferendis! Cumque libero quia modi! Totam magni rerum id iusto explicabo distinctio, magnam, labore sed nemo expedita velit quam, perspiciatis non temporibus sit minus voluptatum. Iste, cumque sunt suscipit facere iusto asperiores, ullam dolorum excepturi quidem ea quibusdam deserunt illo. Nesciunt voluptates repellat ipsam.</p>
        </li>

        <li data-content="settings">
            <p>Settings Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam magni, ullam nihil a suscipit, ex blanditiis, adipisci tempore deserunt maiores. Nostrum officia, ratione enim eaque nihil quis ea, officiis iusto repellendus. Animi illo in hic, maxime deserunt unde atque a nesciunt? Non odio quidem deserunt animi quod impedit nam, voluptates eum, voluptate consequuntur sit vel, et exercitationem sint atque dolores libero dolorem accusamus ratione iste tenetur possimus excepturi. Accusamus vero, dignissimos beatae tempore mollitia officia voluptate quam animi vitae.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ipsam eum reprehenderit minima at sapiente ad ipsum animi doloremque blanditiis unde omnis, velit molestiae voluptas placeat qui provident ab facilis.</p>
        </li>

        <li data-content="trash">
            <p>Trash Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque a iure nostrum animi praesentium, numquam quidem, nemo, voluptatem, aspernatur incidunt. Fugiat aspernatur excepturi fugit aut, dicta reprehenderit temporibus, nobis harum consequuntur quo sed, illum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima doloremque optio tenetur, natus voluptatum error vel dolorem atque perspiciatis aliquam nemo id libero dicta est saepe laudantium provident tempore ipsa, accusamus similique laborum, consequatur quia, aut non maiores. Consectetur minus ipsum aliquam pariatur dolorem rerum laudantium minima perferendis in vero voluptatem suscipit cum labore nemo explicabo, itaque nobis debitis molestias officiis? Impedit corporis voluptates reiciendis deleniti, magnam, fuga eveniet! Velit ipsa quo labore molestias mollitia, quidem, alias nisi architecto dolor aliquid qui commodi tempore deleniti animi repellat delectus hic. Alias obcaecati fuga assumenda nihil aliquid sed vero, modi, voluptatem? Vitae voluptas aperiam nostrum quo harum numquam earum facilis sequi. Labore maxime laboriosam omnis delectus odit harum recusandae sint incidunt, totam iure commodi ducimus similique doloremque! Odio quaerat dolorum, alias nihil quam iure delectus repellendus modi cupiditate dolore atque quasi obcaecati quis magni excepturi vel, non nemo consequatur, mollitia rerum amet in. Nesciunt placeat magni, provident tempora possimus ut doloribus ullam!</p>-->
        </li>
    </ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->


<!-- End of Tab -->

<div id="box">
<table border="0">
<tr>
<td>
<image src="images/box1.jpg">
<image src="images/box2.jpg">
<image src="images/box3.jpg">
<image src="images/box4.jpg"><br>
<image src="images/box5.jpg">
<image src="images/box6.jpg">
<image src="images/box7.jpg">
<image src="images/box8.jpg"><br>
</td>
<td>
<a href="#"><img src="images/button_program.jpg"></a><br><br>
</td>
</tr>
</div>

<div style="margin: 200px 0 0 -400px;"><hr width="650px"></div>

<div id="help"><image src="images/help.jpg"></div>

<div id="program">
<br><br><br>
<image src="images/program.jpg"><br>
<image src="images/title2.jpg"><br>
<b>

<div style="margin: 0 0 0 30px;">Program</div> 
<div style="margin: -20px 0 0 230px;">Schools</div>
<div style="margin: -20px 0 0 430px;">Courses</div> 
<div style="margin: -20px 0 0 630px;">Careers</b>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin: 0 0 0 -600px;"><image src="images/articles_tab.jpg"></div><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>
</div>
</div>

</body>
</html>

Also try to comment out all javascript (note that the tabs wont work).

Member Avatar for davy_yg

Thanks. It now works! except that I do not know how to alter the form button with my custom image button:

index2.php

<form action="login.php" method="POST">
<input type="text" class="form" name="email"><br>
<input type="password" class="form2" name="password"></div>
<input type="submit" class="login" name="submit" value="Login"></input></div>
<a href="#">Create an Account</a><br><a href="#">Forgot Password</a></div>
<input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br></div>
</form>

styleT.css

.login{
    margin: 260px 0 0 650px;
    background-image("../images/login.jpg");
}
Member Avatar for broj1

You can do it this way (without a login class):

<input type="submit" name="submit" value=""><img src="../images/login.jpg" alt="Submit"></input>

or with the login class (but you must specify the image dimensions):

.login {
    width: 200px;
    height: 80px;
    background:url("../images/login.jpg");
}
<input type="submit" class="login" name="submit" value="">
Edited by broj1
Member Avatar for davy_yg

thanks. It works! Just is there certain thickness for every button?

The problem is my button is not box but it's round so in this case there is a box shape thickness around the button.

Is it possible to erase it (the box thickness)?

Member Avatar for broj1

Do you mean the outline around the active link? You can remove it in your css:

a {
    outline: 0;
    border: 0;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.