Hi
I have a website running, which has a frame down the left hand side containing buttons which link to other pages.
The code for the buttons was freely available fom a website, which I obtained some time ago, but I cannot see a way of centering the buttons within the frame. I have adjusted all the settings, one a time, but none had the desired effect.
I have included the relevant piece of code below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
/* NAVIGATION BUTTONS */
.cssnav {
position:relative;
font-family: arial, helvetica, sans-serif;
background-image: url(Button-ON-blank.jpg);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 115px;
height:23px;
margin: 0;
padding: 0;
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 115px;
height: 23px;
display: block;
float: left;
color: #8B0000;
text-decoration: none;
}
.cssnav img {width: 115px; height: 23px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: -31px;
top: 6px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 178px;
height: 12px;
text-align: center;
}
/* END OF NAVIGATION */
</style>
The link to the website it is currently running on is: www.garyevs.co.uk
Any ideas would be appreciated.
Thanks
Full Version: Centering buttons in a frame
In what way are you trying to center the buttons that they aren't already centered?
Hi
On the website (www.garyevs.co.uk) the buttons are to the left of the frame, and not in the center of it. i was wondering if it was possible to cener them.
Thanks
Hi
I have a website running, which has a frame down the left hand side containing buttons which link to other pages.
The code for the buttons was freely available fom a website, which I obtained some time ago, but I cannot see a way of centering the buttons within the frame. I have adjusted all the settings, one a time, but none had the desired effect.
I have included the relevant piece of code below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
/* NAVIGATION BUTTONS */
.cssnav {
position:relative;
font-family: arial, helvetica, sans-serif;
background-image: url(Button-ON-blank.jpg);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 115px;
height:23px;
margin: 0;
padding: 0;
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 115px;
height: 23px;
display: block;
float: left;
color: #8B0000;
text-decoration: none;
}
.cssnav img {width: 115px; height: 23px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: -31px;
top: 6px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 178px;
height: 12px;
text-align: center;
}
/* END OF NAVIGATION */
</style>
The link to the website it is currently running on is: www.garyevs.co.uk
Any ideas would be appreciated.
Thanks
On the website (www.garyevs.co.uk) the buttons are to the left of the frame, and not in the center of it. i was wondering if it was possible to cener them.
Thanks
QUOTE(garyevs @ Jan 6 2008, 08:18 AM) 
Hi
I have a website running, which has a frame down the left hand side containing buttons which link to other pages.
The code for the buttons was freely available fom a website, which I obtained some time ago, but I cannot see a way of centering the buttons within the frame. I have adjusted all the settings, one a time, but none had the desired effect.
I have included the relevant piece of code below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
/* NAVIGATION BUTTONS */
.cssnav {
position:relative;
font-family: arial, helvetica, sans-serif;
background-image: url(Button-ON-blank.jpg);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 115px;
height:23px;
margin: 0;
padding: 0;
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 115px;
height: 23px;
display: block;
float: left;
color: #8B0000;
text-decoration: none;
}
.cssnav img {width: 115px; height: 23px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: -31px;
top: 6px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 178px;
height: 12px;
text-align: center;
}
/* END OF NAVIGATION */
</style>
The link to the website it is currently running on is: www.garyevs.co.uk
Any ideas would be appreciated.
Thanks
Sure. See Centering things.
Hi
Thanks for the link.
I have tried a few things within the code for this frame, but I can't see how the examples given fit into the code I gave to give the required results.
If possible, can you specify how to apply these examples to this code ?
Thanks
Thanks for the link.
I have tried a few things within the code for this frame, but I can't see how the examples given fit into the code I gave to give the required results.
If possible, can you specify how to apply these examples to this code ?
Thanks
QUOTE(garyevs @ Jan 8 2008, 03:56 PM)
I have tried a few things within the code for this frame
Wrong page. Center the buttons on the page that will show in the IFRAME.
I don't see any IFRAME anywhere in the code. It definitely concens a frames page.
You have each link in a separate div. I think a better way is to use a list, which groups all the links in one surrounding element, that will be easier to center. Go see MaxDesign's Listamatic.
You have each link in a separate div. I think a better way is to use a list, which groups all the links in one surrounding element, that will be easier to center. Go see MaxDesign's Listamatic.
My bad. What I said applies anyway. 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.