• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

CSS Width

I have a background, that I want to make 55px in width.

This is the background for page numbers, so each page number will be in a box with the chosen background.

The current layout only shows the actual size with the number, but I want a fixed width.


.page_button 
{
background:url(images/page.png); 
background-width: 35px;
color: #FFFFFF;
font-family: Arial, Tahoma, Verdana;
font-size: 14px;
font-weight: bold !important;
text-decoration: none;
text-align:center;
margin: 0;
padding: 2px 2px 2px 2px !important;
border: 1px solid #000000; 
}

.page_button:hover {
background: #000000 !important;
border: 1px solid #000000;
}

.page_button a {
background-width: 35px;
text-align:center;
color:#fff;
}

Open in new window

0
Computer Guy
Asked:
Computer Guy
  • 2
  • 2
1 Solution
 
JF0Commented:
There is no background-width property for CSS. Just use width.
0
 
Computer GuyAuthor Commented:
I did, but it did not work.

changed background-width to width
0
 
JF0Commented:
can you show some html code so I can understand what is not working?
0
 
Computer GuyAuthor Commented:
Sure, there is a little PHP in it.
<style type="text/css">
.page_button 
{
	background:url(gallery/images/TEST_IMAGES/page.png); 
                     width: 35px;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
                     text-align:center;
                     margin: 0;
	padding: 2px 2px 2px 2px !important;
	border: 1px solid #000000;	}

.page_button:hover {
	background: #000000 !important;
	border: 1px solid #000000;
	}
.page_button a {
text-align:center;
color:#fff;}
</style>

	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button"> ' . $i . '</span>';
		else
			echo '<span class="page_button"><a href="event.php?group=' . $group . '&event=' . $event .'&page=' . $i . '"> ' . $i . '</a></span>';
	}

	?>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now