Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Width

Posted on 2011-03-16
4
Medium Priority
?
276 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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

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 a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

972 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