Solved

CSS Width

Posted on 2011-03-16
4
268 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 70
would like the bottom of this page to be smaller 3 27
Remove third quote mark from widget 6 23
Wordpress "chart" plugin recommendation 7 50
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

816 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now