Solved

CSS float issue

Posted on 2011-03-16
9
283 Views
Last Modified: 2012-05-11
Hi,

With the code posted, how can I get this line aligned to the left:
<?php echo "There are $numPhotos photos total for this event"; ?>

and the rest on the right?

Thanks!
<style type="text/css">
.bold_right {
font-weight: bold;
font-size: 14px;
}

.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
}
</style>

<span class="float_right_PN">
	<?php echo "There are $numPhotos photos total for this event"; ?><span class="bold_right">Page Navigation</span>
	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button_active"> ' . $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
Comment
Question by:Computer Guy
  • 5
  • 4
9 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151313
.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
}

add text-align: left;
?
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151319
AND set a fixed width of this container - example: 300px;
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35151400
When you say width, you mean this?

.float_right_PN {
float:right;
width:450px;
margin-bottom:3px;
margin-right:22px;
text-align: left;
}
Didn't do anything
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151490
Can you show more of the page ?
Wrap the "there are ... photos..." inside a div.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Author Comment

by:Computer Guy
ID: 35151532
Like this?

.left{
text-align: left;
}

<div class="left"><?php echo "There are $numPhotos photos total for this event"; ?>

0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151768
You may try even to float it left
.left{
text-align: left;
float: left;
clear: right;
}
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35152080
Hi,

Please see the attached image so you have an idea of whats going on.

The width of the area I want to cover is about 900px, so I set that fixed.

I also posted my code since it's been updated a tad.

Thanks!

My SUDO code
<left>Number of Photos Here</left>                                        <right> Page Navigation 1, 2, 3</right>
<style type="text/css">
.page_button 
{
	background:url(gallery/images/TEST_IMAGES/page.png);
    display:inline-block;	
    height: 27px;
	color: #FFF;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}

.page_button:hover {
background:url(gallery/images/TEST_IMAGES/page-hover.png);
color:#FFF
	}
	.page_button_active {
background:url(gallery/images/TEST_IMAGES/page-active.png);
    display:inline-block;	
    height: 27px;
	color: #000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}
	
.page_button a {
color:#fff;}

.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
text-align:left;
width:850px;
}
.bold_right {
font-weight: bold;
font-size: 14px;
}
.num_left{
text-align: left;
float: left;
clear: right;
} 

</style>

<span class="float_right_PN">
	<div class="num_left"><?php echo "There are $numPhotos photos total for this event"; ?></div><span class="bold_right">Page Navigation</span>
	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button_active"> ' . $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

Results2.PNG
0
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
ID: 35154237
Try this:



<style type="text/css">
.page_button 
{
	background:url(gallery/images/TEST_IMAGES/page.png);
    display:inline-block;	
    height: 27px;
	color: #FFF;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}

.page_button:hover {
background:url(gallery/images/TEST_IMAGES/page-hover.png);
color:#FFF
	}
	.page_button_active {
background:url(gallery/images/TEST_IMAGES/page-active.png);
    display:inline-block;	
    height: 27px;
	color: #000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}
	
.page_button a {
color:#fff;}

.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
text-align:left;
width:850px;
border : 1px solid black;
}
.bold_right {
font-weight: bold;
font-size: 14px;
float: right;
}
.num_left{
text-align: left;
float: left;

} 
.clear{ clear: both;}

</style>


<span class="float_right_PN">
	<div class="num_left"><?php echo "There are $numPhotos photos total for this event"; ?></div>
	<div class="bold_right">Page Navigation</div>
	<div class="clear" />
	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button_active"> ' . $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
 
LVL 3

Author Comment

by:Computer Guy
ID: 35155162
Did the trick
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change properties of a dialog box 1 34
CSS Columns on Slider Mobile 4 48
Synchronizing CSS load 3 29
css help with menu spacing 10 30
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…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

930 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

9 Experts available now in Live!

Get 1:1 Help Now