Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

<DIV buttons FLOAT and trying to center an image>

Status
Not open for further replies.

fireburner69

Programmer
Joined
Aug 22, 2002
Messages
108
Location
GR
I have this problem
I have a CSS file that has this code in it :
DIV.button {
FLOAT: center;
}
DIV.button .btnleft {
FLOAT: left; BACKGROUND-IMAGE: url(images/button_left.gif); WIDTH: 5px; HEIGHT: 20px
}
DIV.button .btnright {
FLOAT: left; BACKGROUND-IMAGE: url(images/button_left.gif); WIDTH: 5px; HEIGHT: 20px
}
DIV.button .btnright {
BACKGROUND-IMAGE: url(images/button_right.gif)
}
DIV.button .btncenter {
FLOAT: left; BACKGROUND-IMAGE: url(images/button_midt.gif); HEIGHT: 20px
}
DIV.button .btncenter A {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 20px; PADDING-TOP: 0px; TEXT-DECORATION: none
}
DIV.button .btncenter INPUT {
BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; MARGIN-TOP: 1px; BACKGROUND: none transparent scroll repeat 0% 0%; FONT: 11px "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif; BORDER-LEFT: #000 0px solid; CURSOR: pointer; COLOR: #000; BORDER-BOTTOM: #000 0px solid; HEIGHT: 19px; TEXT-DECORATION: none
}




And I am trying to make a button in the center of an html
I use this code below

<tr><td>
<div class='button'><div class='btnleft'></div>
<div class='btncenter'>
<a href='welcome.html'>Edit</a>
</div>
<div class='btnright'></div>
</div>
</td>
<td>


I tried to make it center by typing <td><center> and stuff like that but nothing happend
The button is fine but in the left side of the table and
always there!

I just need to make it go to the center of the page or table!
Any sujestions?
 
Put your entire table in div tags set to align=center.

<div align=&quot;center&quot;>
<table border='0'>
<tr>
<td>
<div class='button'>
<div class='btnleft'></div>
<div class='btncenter'>
<a href='welcome.html'>Edit</a>
</div>
<div class='btnright'>
</div>
</div>
</td>
</tr>
</table>
</div>

Lillu

 
It did not worked :( and I can not figure it out why!
 
well atleast does the button appear?

Known is handfull, Unknown is worldfull
 
Yes the button appears alright. And it works fine but the align makes me a headache.
 
change ur style to:
<style>
DIV.button {
FLOAT: center;
}
DIV.button .btnleft {
FLOAT: left; BACKGROUND-IMAGE: url(images/button_left.gif); WIDTH: 5px; HEIGHT: 20px
}
DIV.button .btnright {
FLOAT: left; BACKGROUND-IMAGE: url(images/button_left.gif); WIDTH: 5px; HEIGHT: 20px
}
DIV.button .btnright {
BACKGROUND-IMAGE: url(images/button_right.gif)
}
DIV.button .btncenter {
BACKGROUND-IMAGE: url(images/button_midt.gif); HEIGHT: 20px
}
DIV.button .btncenter A {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 20px; PADDING-TOP:

0px; TEXT-DECORATION: none
}
DIV.button .btncenter INPUT {
BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; MARGIN-TOP: 1px; BACKGROUND: none

transparent scroll repeat 0% 0%; FONT: 11px &quot;Trebuchet MS&quot;, Tahoma, Geneva, Arial, Helvetica,

sans-serif; BORDER-LEFT: #000 0px solid; CURSOR: pointer; COLOR: #000; BORDER-BOTTOM: #000 0px

solid; HEIGHT: 19px; TEXT-DECORATION: none
}
</style>


Known is handfull, Unknown is worldfull
 
This one worked but :(
Now I have the left_part of the image splitted a very small line break and then comes the middle that covers the hole area and benith this comes the right_part of the button image. but the text is centered!
That's something :)
I will tryied some more if i figure it out I will posted so this will come to an end :)
Thanx for your time :)
 
can u tell me what u r trying to do? i can give u anther soln....

Known is handfull, Unknown is worldfull
 
I just to have the 3 images right middle and left and to create a button from them! just that! and every time I will write in the text! and to be able to place it like text
left center or right just that!
Any ideas?
 
why not use the images themselves as button?

>>and every time I will write in the text! and to be able
to place it like text...

i am unable to get that part...


Known is handfull, Unknown is worldfull
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top