• Locked
4 replies [Last post]
Tue, 2012-01-31 19:58
blackflier
blackflier's picture
User offline. Last seen 15 weeks 1 day ago. Offline
newbie
Timezone: GMT+1
Joined: 2012-01-26
Posts: 4
Points: 6

I have a few buttons, and want them to be in the middle of the page.
I can't get it to work however. what do i need to place where.

css code:

.groovybutton
{
   font-size:16px;
   font-family:Arial,sans-serif;
   height:48px;
   width:48px;
   background-color:#779999;
   background-image:url(keyboard.jpg);
   border-style:none;
   border-color:#DDDDDD;
   border-width:1px;
   text-align: center;
}

<FORM name="form1">
   <input type="text"   name="waarde1"  value="" ><br><br>
   <input type="text"   name="waarde2"  value="">
   <input type="Button"  class="groovybutton" name="reset" value="Clear &#10 all" onclick="LeegMaken()"><br><Br>
   <input type="Button" class="groovybutton" name="optellen" value="+" onclick="OpTellen()">
   <input type="button" class="groovybutton" name="aftrekken" value="-" onclick="Aftrekken()"> <br>
   <input type="button" class="groovybutton" name="vermenigvuldigen" value="x" onclick="Vermenigvuldigen()">
   <input type="button" class="groovybutton" name="delen" value=":" onclick="Delen()"><br><br>
   <input type="text"   name="uitkomst" value="">
   </FORM>

Top
Tags:
Tue, 2012-01-31 19:59
#1
blackflier
blackflier's picture
User offline. Last seen 15 weeks 1 day ago. Offline
newbie
Timezone: GMT+1
Joined: 2012-01-26
Posts: 4
Points: 6

Oh, and the site is :

Oh, and the site is : http://informatica.collegedenhulster.nl/5428/index.php?page=5

Top
Wed, 2012-02-01 05:28
#2
balajidesign
balajidesign's picture
User offline. Last seen 6 weeks 5 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

Hi, It is simple changes from

Hi,

It is simple changes from your code. check the below code updated:

css:

.groovybutton
{
font-size:16px;
font-family:Arial,sans-serif;
height:48px;
width:48px;
background-color:#779999;
background-image:url(keyboard.jpg);
border-style:none;
border-color:#DDDDDD;
border-width:1px;

}

Here you need to remove text-align:center tag

Html code:

Top
Wed, 2012-02-01 05:29
#3
balajidesign
balajidesign's picture
User offline. Last seen 6 weeks 5 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

sorry i forgot that html

sorry i forgot that html code:

here it is

Top
Wed, 2012-02-01 05:30
#4
balajidesign
balajidesign's picture
User offline. Last seen 6 weeks 5 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

html code: <div

html code:

<div style="text-align:center; display:block;">
<FORM name="form1">
   <input type="text"   name="waarde1"  value="" ><br /><br />
   <input type="text"   name="waarde2"  value=""><br /><br />
   <input type="Button" class="groovybutton" name="optellen" value="+" onclick="OpTellen()">
   <input type="button" class="groovybutton" name="aftrekken" value="-" onclick="Aftrekken()"> <br>
   <input type="button" class="groovybutton" name="vermenigvuldigen" value="x" onclick="Vermenigvuldigen()">
   <input type="button" class="groovybutton" name="delen" value=":" onclick="Delen()"><br><br>
   <input type="text"   name="uitkomst" value=""><br /><br />
      <input type="Button"  class="groovybutton" name="reset" value="Clear &#10 all" onclick="LeegMaken()"><br><Br>
 
   </FORM>
   </div>

Top
  • Locked