Solved

CSS float issue

Posted on 2011-03-16
9
316 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 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 …

695 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