Centering an image in all monitor resolutions /Urgent

Centering an image in all monitor resolutions /Urgent

by margarida silva -
Number of replies: 9
Hello!!

This is the moodle I am designing: http://moodle.smartthink.com

The header image is to be on the center. But when the monitor is higher than 1024x768 the image looks like this:

image

Is not in the center.
I've tried putting it in a table 100% but it's the same. sad I need some urgent help. Thank you for your help!

Average of ratings: -
In reply to margarida silva

Re: Centering an image in all monitor resolutions /Urgent

by Mauno Korpelainen -

Try this:

replace these tags around logo

<h1 class="headermain">....</h1>

with

<p style="text-align: center;border-width: 0px;">....</p>

and add to fw_layout.css at the beginning of headermenu

.headermenu {
  position:absolute;
top:10px;right:15px;

to get menu to correct place.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Centering an image in all monitor resolutions /Urgent

by margarida silva -
Hi, thank you for your answer, but it remains not center. sad Oh ...

I am just wondering... is it possible to center an image? To maintain the image always center even if the resolutions is high or small?

morto


Average of ratings: -
In reply to margarida silva

Re: Centering an image in all monitor resolutions /Urgent

by Mauno Korpelainen -

Hi Margarida,

I checked your site and you have a code:

<p style="img-align:center;border-width: 0px;"><img src='http://moodle.smartthink.com/theme/formal_white_maga/logo.jpg' />
    </p>

it must be TEXT-ALIGN
not IMG-ALIGN as you have !!!!

It works, I tested it before sending my previous message. smile

Average of ratings: -
In reply to Mauno Korpelainen

Re: Centering an image in all monitor resolutions /Urgent

by margarida silva -

Yes, I know. I've change to IMG, but now I've again in TEXT, but it's the same. sad image

Anyway, thank you for your help.
Average of ratings: -
In reply to margarida silva

Re: Centering an image in all monitor resolutions /Urgent

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
> it's the same

It doesn't look the same to me. The logo in your second screenshot is centered, but in the first screenshot it was lined up with the "MOODLE ESHTE" logo.

Personally speaking, I don't think you should center the image. Leave it left aligned.

One trick you could try to make the logo left-aligned but appear to occupy the entire screen width on varying screen sizes is to put the image in a <div> which has a certain background color. The <div> should stretch to the right hand side of the screen. Now, remove the red border around the image and have the have the right hand side of the image fade to the background color of the <div>. This will make the image appear to stretch the entire screen width, whatever the screen size.
Average of ratings: -
In reply to margarida silva

Re: Centering an image in all monitor resolutions /Urgent

by Mauno Korpelainen -
The image IS CENTERED, but your logo (the image itself) has empty space at the left side. That's why it looks like it is not centered! Cut this red area away and it looks better...
Attachment reason.jpg
Average of ratings: -
In reply to Mauno Korpelainen

Re: Centering an image in all monitor resolutions /Urgent

by margarida silva -
Hi. smile

I've done that, the empty space because at 1st it was the only way to center the image on my resolution (1024)

I am trying to check with your notes, I will let you know. THANK YOU!
Average of ratings: -
In reply to margarida silva

Re: Centering an image in all monitor resolutions /Urgent

by margarida silva -
YES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

olhos bem abertos smile

Thank you!!!
Average of ratings: -