Html submit button

nosense · 2014-03-29T17:19:34+00:00

Hello guys I'm trying to make a fancy submit button in a webpage so i have it as an image and i am using <input type="image" src="path/to/image">...

nosense

Sorry still didn't separate the css

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <style type="text/css">
           .imgSubmit
            {
                border:none;
                background-image: url(login.png);
                background-color: transparent;
                width: 75px;
                height: 30px;
            }
            .imgReset
            {
                background-color: transparent;
                border:none;
                background-image: url(reset.png);
                width: 75px;
                height: 30px;
            }
            .mydiv{
                margin:0 auto;
                width: 1000px;

            }
            .loginInputWrapper
            {
                float: left;
                clear: left;
                margin: 10px 0 0 0;

            }
            .loginLeft
            {
                float: left;
                width: 100px;
                color: white;

            }
            .loginRight
            {
                float: left;
            }
        </style>
        <script language="javascript">
            <!--//
            /*This Script allows people to enter by using a form that asks for a
UserID and Password*/
            function passfunc() {
                var x=document.getElementById("user").value;
                var y=document.getElementById("pass").value;
                if (x=="ali") { 
                    if (y=="test") {              
                        location="page2.php" 
                    } else {
                        alert("Invalid Password")
                    }
                } else {  alert("Invalid UserID")
                }
            }
            //-->
        </script>
    </head>
    <body background="s2.jpg">
        
        <div class="mydiv">

            <div class="loginInputWrapper">
                <div class="loginLeft">
                    User Name
                </div>
                <div class="loginRight">
                    <input  type="text" id="user" value="">
                </div>
            </div>
            <div class="loginInputWrapper">
                <div class="loginLeft">
                    Password
                </div>
                <div class="loginRight">
                    <input  type="password" id="pass" value="">
                </div>
            </div>
            <div class="loginInputWrapper">
                <input type="submit" onClick="passfunc()" class="imgSubmit" value=""> <input class="imgReset" type="Reset" value="">

            </div>



        </div>


    </body>
</html>

rtp

it is centered but now you need to center the content.

Create a new div under "mydiv" that holds the all the login content

<div class="mydiv">
   <div class="loginWrapper">

   ....

   </div>
</div>

give a border for both mydiv and loginWrapper like red or something visible and you should be able to tell what is happening.

nosense

Yeah that's what I thought and now seeing all the borders helps in figuring everything out
Today was a good day :D

rtp

there are two nice add on for firefox
- web developer tool
- firebug

web developer can show you the border of the divs by going to "outline" => "outline block level elements"

^_^

rolf

aliessayli2 wroteHaha did u see the picture I posted ? I did what u said and I needed this content to be exactly in the middle while it is still to the left

You should put your content in a DIV box, with a set width and height... something like that:

.box {
   width: 200px;
   height: 180px;
   position: absolute;
   left:0; right:0; bottom:0; top:0;
   margin:auto;
}

body {
  position:relative;
}

I know it's not very clear, but basically when a DIV is position:absolute and left,right,top and bottom set to 0 and margin set to auto it will be in the middle (vertical and horizontal) of the container, but the container must also be position:relative, I think.

Otherwise you can do a table and set vertical-position of the TD to middle.

If you just want to horizontally align, I think margin:auto; should be enough, or even text-align:center.

PS: please, please, please, in the JavaScript, when you have variables, don't call them x and y (except if they're coordinates), call them user and password instead, to avoid confusion.

nosense

PS: please, please, please, in the JavaScript, when you have variables, don't call them x and y (except if they're coordinates), call them user and password instead, to avoid confusion.

Yeah this is like my first script so it was like a test to see everything works but When doing the real deal everything should be clear like I do in java.

« Previous Page