html,  php

Rumbling with the HTML

This post is mostly for my own memory:
I have been playing around with custom HTML buttons and such, for use with a ā€˜story-readerā€™ I am attempting to write in PHP. It should be noted that I know nothing about using PHP.
Basically Iā€™m writing a simple page that will pull text from a mySQL database and then allow the reader to read a story by navigating with page buttons.
Once I had the initial page-system working, with navigation, I then started playing around to make the buttons look nicer.

At first it looked like I could just replace the button with a

input type="image"ā€¦

But the problem with that is when the button is pressed, the information that gets submitted is the X,Y location of the image and not the data Iā€™m passing in (the current progress through the story). So that didnā€™t work.
I finally got



to work, in a basic sense, but the button was bigger than I wanted. I messed around with styles after doing some web searches:

.btnExample {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border: 1px solid;
border-color: #696 #363 #363 #696;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
height:25px;
width:100px;
}
.btnExample:hover {
color: #FFF;
background: #900;
}

Which made a decent button, but the image was funky.

Irrelevant detour – along the way I discovered that:

<input class="mbutton" type="submit" value="test" >Submit</input>

Creates a button with Test as caption and the word Submit beside it. Oddly, if you leave value blank it defaults ot the text ā€œSubmit Queryā€ā€¦ Iā€™m assuming that elsewhere in my wordpress sites this is defined for the class or something as a default.

And oh yeah, the really important bit is that within my <style> section I cannot have any spaces! I donā€™t know if this is because the page Iā€™m experimenting with his a hack of internal php and html code. Iā€™ll have to remember this.

Anyways, some progress made.
An okay button is here:

.btnExample {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border: 1px solid;
padding: 0px 0px;
text-align:left;
padding:2px;
width:60px;
border-color: #696 #363 #363 #696;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
}
.btnExample:hover {
color: #FFF;
background: black;
border: 2px solid green;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#000000',EndColorStr='#ffeeddaa');
}
.btnExample img {
float:left;
padding:2px;
}

What do I still need to figure out?
1. Alignment (get the buttons to row up properly)
2. Figuring out why the button has too much ā€˜top spaceā€™

Notes: I use Internet Explorer. Deal.
Also, for memory’s sake, from http://codex.wordpress.org/Writing_Code_in_Your_Posts we have:

< = < > = >
/ = /
] = ]
[ = [
" = "
' = '

Former lead designer at BioWare (Dragon Age: Origins, Neverwinter Nights). Creator of Raiders of the Serpent Sea.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.