Log in

View Full Version : Resolved better way of making this button


ggalan
12-10-2010, 12:26 AM
can anyone help me write this more efficiently?

i have a button that is 150px X 120px with a simple text inside that i would like to have control over the placement.
I want the entire button to be clickable, so i placed a 1pixel gif as a img inside and gave it the same dimension as the button
then i had to move the entire img up so that it is placed within the main buttons parameter

seems a bit overcomplicated for something that can have a simpler solution



<html>
<head>
<style>
#btnDiv{background-color:#CCC; width:150px; height:120px; text-indent:20px;}
#btnDiv span{position:relative; top:30px; left:40px; background-color:#999;}
#btnDiv img{margin-top:-20px;}
</style>
</head>
<body>
<div id='btnDiv'><a href='#'><span>btn</span><img src='x.gif' width='150' height='120' /></a></div>
</body>
</html>
Nile
12-10-2010, 01:00 AM
One question before I recode this - did you want an actual button like the type you'd see under a form, like "Submit"? Or did you want a clickable-link type button?
ggalan
12-10-2010, 03:38 AM
more like the submit, maybe with 2 or 3 lines of text
thanks!
Nile
12-10-2010, 03:53 AM
I'm sorry for asking that question originally, it seems like a link would be more ideal for this.


<style type="text/css">
a.button {
background-color:#CCC;
display: block;
width: 150px;
height: 120px;
line-height: 120px;
text-align: center;
}
a.button span {
background-color:#999;
}
</style>
<a href="#" class="button"><span>Btn</span></a>
ggalan
12-10-2010, 04:03 AM
display:block!
thanks

how would you add lets say 3 lines of text?
Nile
12-10-2010, 01:00 PM
Would your three lines classify as a list? If not - just use <br />
ggalan
12-10-2010, 03:30 PM
i guess thats what i was wondering, when would you use a "ul li" vs "br" ?
Nile
12-10-2010, 08:57 PM
If you were listing things, you would put it in a list...
http://www.w3.org/TR/html401/struct/lists.html ;)