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 Chris Miller 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
Aug 22, 2002
108
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

 
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