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!

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

background position question

Status
Not open for further replies.
smeyer56

smeyer56

IS-IT--Management
Oct 16, 2002
206
US
I am trying a new way(to me) of creating buttons. Using I create the text like so:
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>News</a><br>
and using css use the background-image to add the image to the button. This way I only have two images total for six buttons and the text changes in the html.

.btnTxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #FF0000;
left: 40px;
top: 255px;
position: relative;
text-align: center;
vertical-align: text-bottom;
height: 25px;
width: 100px;
background-image: url(button1.png);
padding: 0px;
margin: 0px 10px 10px 0px;
background-position: right center;
}

My problem is that the text is positioned center like I want it but too high. I cannot get it to position middle for height.
Any ideas?
 
Sort by date Sort by votes
BTW this doesn't work in netscape but I don't really care about that.
 
Upvote 0 Downvote
vertical-align: text-middle;


Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Tried that and it doesn't work. The text seems to move accordingly but the background-image follows the text movement.
Text is still at the top of the background image. It looks like this:
|------------|
| Text |
| |
| |
|____________|

Would like more like
|------------|
| |
| Text |
| |
|____________|
 
Upvote 0 Downvote
can i have ur entire code?

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Sure. I am just starting to play with this so it is very basic.

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<link href=&quot;main.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>
<script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf(&quot;#&quot;)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor=&quot;#000000&quot; onLoad=&quot;MM_preloadImages('buttonHover.png')&quot;>
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>News</a><br>
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>Hobbies</a><br>
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>Computer</a><br>
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>Work</a><br>
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>Pictures</a><br>
<a href=&quot;#&quot; class=&quot;btnTxt&quot;>History</a>
</body>
</html>


main.css
body {
background-attachment: fixed;
background-image: url(background.png);
background-repeat: no-repeat;
background-position: left top;
}
.btnTxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #FF0000;
left: 40px;
top: 255px;
position: relative;
vertical-align: 80%;
text-align: center;
height: 25px;
width: 100px;
background-image: url(button1.png);
padding: 0px;
margin: 0px 10px 10px 0px;
}
a.btnTxt:hover {
font-family: Arial, Helvetica, sans-serif;
background-image: url(buttonHover.png);
}
 
Upvote 0 Downvote
is ur entire code posted here? i think some of it is cut. i am also only a beginner in css. s i need the entire stuff...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
You are correct. I wonder if they limit the amount of lines because I swear I posted the whole thing
.mainText {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
position: absolute;
left: 250px;
top: 185px;
white-space: normal;
height: 325px;
width: 490px;
display: block;
overflow: auto;
}
.leftTopImage {
position: absolute;
left: 45px;
top: 45px;
height: 160px;
width: 160px;


}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FF0000;
text-decoration: blink;
position: absolute;
height: 100px;
width: 500px;
left: 250px;
top: 20px;
}

I do not have more HTML because I just starting tinkering with these buttons and haven't really played with anything else.
 
Upvote 0 Downvote
when you pst codes

enclose them in

Code: 
your code here

<signature>
sometime you just gotta say &quot;WHAT THE @#*% !!&quot;
</signature>
 
Upvote 0 Downvote
shoot

&quot;[ignore]
Code: 
your code here
[/ignore]&quot;

<signature>
sometime you just gotta say &quot;WHAT THE @#*% !!&quot;
</signature>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
730
3esolar
3
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
130
jason.lex
jason.lex
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
386
lupidol
lupidol
Blueie
  • Locked
  • Question
Menu position
Replies
3
Views
104
Blueie
Blueie
IPGuru
  • Locked
  • Question
Label position on Checkbox
Replies
5
Views
406
IPGuru
IPGuru

Part and Inventory Search

Sponsor

Back
Top