Solved

CSS Width

Posted on 2011-03-16
4
269 Views
Last Modified: 2012-08-14
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
Comment
Question by:Computer Guy
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:JF0
ID: 35149166
There is no background-width property for CSS. Just use width.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35149180
I did, but it did not work.

changed background-width to width
0
 
LVL 16

Accepted Solution

by:
JF0 earned 500 total points
ID: 35149660
can you show some html code so I can understand what is not working?
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35149977
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question