Need to center this image

Discuss Programming
Post Reply
User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Need to center this image

Post by Basher52 » Mon Jan 24, 2011 9:29 am

Code: Select all

foreach($bannerGroups[0] as $ban)
                {
                        echo $ban->html();
                }
In this loop i need to center the image(folder to it) that is i@ban
I've tried don't know how much but I just can't get it to work :(
I friend told me that it is in this place the centering should be done.

My knowledge of php is not enough and I need this new site to be finished tonight.
Anyone that knows what I can do?

User avatar
Void Main
Site Admin
Site Admin
Posts: 5716
Joined: Wed Jan 08, 2003 5:24 am
Location: Tuxville, USA
Contact:

Re: Need to center this image

Post by Void Main » Mon Jan 24, 2011 9:46 am

Not nearly enough info.

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Mon Jan 24, 2011 9:57 am

Then it isn't on this line the centering should be then as he said.
The code is ripped a bit so it's just one line with banners

banner.php

Code: Select all

<?php
/**
 * Displays a list of the categories/forums that the current user can see, along with some statistics.
 *
 * @copyright (C) 2008-2009 PunBB, partially based on code (C) 2008-2009 FluxBB.org
 * @license http://www.gnu.org/licenses/gpl.html GPL version 2 or higher
 * @package PunBB
 */


if (!defined('FORUM_ROOT'))
        define('FORUM_ROOT', './');

require "connect.php";
require "banner.class.php";

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

$bannerResult = mysql_query("SELECT * FROM banners");

$banners = array();
while($row=mysql_fetch_assoc($bannerResult))
{
        $banners[] = new Banner($row);
}

// Randomizing the $banners array:
shuffle($banners);

// Splitting the banners array into smaller arrays with 4 banners each:
$bannerGroups = array_chunk($banners,1);
?>

   <!-- Line of banners -->

   <div class="bannerHolder">
        <?php  

                // Looping through the first group:
                foreach($bannerGroups[0] as $ban)
                {
                        echo $ban->html();
                }
        ?>
    </div>

banner.class.php

Code: Select all

<?php

class Banner{

        private $data = array();

        public function __construct($row){
                $this->data = $row;
        }

        public function html(){

                /* This method returns the banner's HTML code */

                $d = &$this->data;
                $d['company'] = htmlspecialchars($d['company']);

                return '
                        <div class="banner"
                                <a href="'.$d['url'].'">
                                        <img src="img/banners/'.$d['image'].'" alt="'.$d['company'].'"
                                        width="728" height="90"
                                        />
                                </a>
                        </div>';
        }

}




/*
                                        <img src="img/banners/'.$d['image'].'" alt="'.$d['company'].'" background-position:top center; width="728" height="90" />
*/


/*
margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
        background-color:transparent;
        background-image:url(/images/boxerville_header_logo.png);
        background-repeat:no-repeat;
        background-position:top center;
        color: #fff;
        font-size:-100px;
        border:0;
        height:165px;
*/


?>

User avatar
Void Main
Site Admin
Site Admin
Posts: 5716
Joined: Wed Jan 08, 2003 5:24 am
Location: Tuxville, USA
Contact:

Re: Need to center this image

Post by Void Main » Mon Jan 24, 2011 11:35 am

All your PHP script does is generate HTML (which is what PHP is usually used for). When you view the page that is generated with "View Source" you need to understand HTML and what you want to change in that HTML so it is displayed the way you want. You could save the HTML, make the minor change that places the image where you want it, then change your PHP code so it generates the HTML like your saved/modified HTML. It would likely be a change within that "html()" function.

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Mon Jan 24, 2011 11:42 am

I tried that and used 'background-position:center' nut that won't matter.
like

Code: Select all

<div class="banner"
				<a href="http://kgdubben.se/">
					<img src="img/banners/banner_2.gif" alt="KG Dubben" 
					width="728" height="90"; background-position:center;
					/>
				</a>
			</div>

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Mon Jan 24, 2011 12:03 pm

Think I found it :)
Just gotta let him know and see if it's OK with him then Ill show the answer here

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Tue Jan 25, 2011 6:29 pm

As I thought it was in the style:

Code: Select all

.brd .banner{
        /* The banner divs */
        position:relative;
        overflow:hidden;
        background-position: center;
        text-align:center; /*centers in old versions of IE*/
        margin-bottom: 10px;
}
I added:

Code: Select all

        background-position: center;
        text-align:center; /*centers in old versions of IE*/
        margin-bottom: 10px;
First two lines as the centering of the image and the last line to add more space under the banner image to be more equal the space above it.


It sure seems I'm like YEARS after in php/css to be able to do proper work with it :(
Anyone know any good site where I can learn this?
I checked W3C but I also need a site with some kinda tests and stuff so my mind can remember all the "instruction" there is.

User avatar
xyle_one
programmer
programmer
Posts: 128
Joined: Mon Jan 13, 2003 1:02 pm
Contact:

Re: Need to center this image

Post by xyle_one » Wed Feb 16, 2011 11:31 pm

background-position only affects the background-image css property, it does nothing for img tags.

If you want to center the image, apply text-align:center to the parent element.

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Sat Feb 19, 2011 5:19 pm

Yeah, that did work but the name of it is so weird, TEXT!!!-align??
The image ain't no TEXT so I didn't think of it.
Think they should rename it to, like: object-align :P

User avatar
xyle_one
programmer
programmer
Posts: 128
Joined: Mon Jan 13, 2003 1:02 pm
Contact:

Re: Need to center this image

Post by xyle_one » Sun Feb 20, 2011 11:14 pm

I agree, the language is weird.

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Sun Feb 20, 2011 11:25 pm

you seem to know this very good.
Do you know any EXTREMELY good free online "school" that I can learn this stuff?
I wanna learn both CSS and PHP... I've tried but I've always start to cheat cos I
wanna learn it all right away... not later :P , thus not learning much :(
I need a place that intrigues me and not letting me cheat by skipping pages
or practices.

oh btw... I'm "old" too :( :( so think of that too, lol

User avatar
xyle_one
programmer
programmer
Posts: 128
Joined: Mon Jan 13, 2003 1:02 pm
Contact:

Re: Need to center this image

Post by xyle_one » Mon Feb 21, 2011 7:59 pm

I do not know of any good online schools for this.

If you want to learn CSS I highly recommend picking up any book by Eric Meyer - http://meyerweb.com/

For a good reference check out w3schools - http://www.w3schools.com/css/css_reference.asp

I learned CSS through a lot of trial and error, and lots of "how would i do this", "how can i make this thing work" and then just hammering my way through it. Google became my best friend.

The key points to understand for creating good CSS are the DOM, the box model, and the difference between inline and block elements. Anything after that is just learning how to bend the rules to make things work the way you want them to.

If you are just learning PHP and still dealing with things like syntax, control flow, arrays, etc, the php.net documentation is really all you need. After that I recommend the following books:

"Advanced PHP Programming" - http://www.amazon.com/Advanced-Php-Prog ... 098&sr=1-3 - I purchased the first version of this book 5 years ago and can't vouch for this one, but the first one has been an invaluable resource for me, and this one looks like a good update.

"Essential PHP Security" - http://www.amazon.com/Essential-PHP-Sec ... 219&sr=1-1 - This one is a bit old, but the lessons and security concerns are still very much important.

I really have to recommend avoiding most php tutorial sites as they do not teach best practices and push out really bad and insecure code.

User avatar
xyle_one
programmer
programmer
Posts: 128
Joined: Mon Jan 13, 2003 1:02 pm
Contact:

Re: Need to center this image

Post by xyle_one » Mon Feb 21, 2011 8:02 pm

I'd also like to suggest learning HTML really well. Since most of what you will be doing (probably anyways) is outputting HTML from your PHP, it would make sense to be able to write it well.

User avatar
Basher52
guru
guru
Posts: 918
Joined: Wed Oct 22, 2003 5:57 am
Location: .SE

Re: Need to center this image

Post by Basher52 » Tue Feb 22, 2011 1:15 pm

Agree, html is what it php creates so... yeah

Post Reply