Centering an image in all monitor resolutions /Urgent

Centering an image in all monitor resolutions /Urgent

di margarida silva -
Numero di risposte: 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. triste I need some urgent help. Thank you for your help!

Media dei voti:  -
In riposta a margarida silva

Re: Centering an image in all monitor resolutions /Urgent

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

Media dei voti:  -
In riposta a Mauno Korpelainen

Re: Centering an image in all monitor resolutions /Urgent

di margarida silva -
Hi, thank you for your answer, but it remains not center. triste 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


Media dei voti:  -
In riposta a margarida silva

Re: Centering an image in all monitor resolutions /Urgent

di 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

Media dei voti:  -
In riposta a Mauno Korpelainen

Re: Centering an image in all monitor resolutions /Urgent

di margarida silva -

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

Anyway, thank you for your help.
Media dei voti:  -
In riposta a margarida silva

Re: Centering an image in all monitor resolutions /Urgent

di Gordon Bateson -
Immagine Core developers Immagine Peer reviewers Immagine 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.
Media dei voti:  -
In riposta a margarida silva

Re: Centering an image in all monitor resolutions /Urgent

di 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...
Allegato reason.jpg
Media dei voti:  -
In riposta a Mauno Korpelainen

Re: Centering an image in all monitor resolutions /Urgent

di margarida silva -
Hi. sorridente

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!
Media dei voti:  -
In riposta a margarida silva

Re: Centering an image in all monitor resolutions /Urgent

di margarida silva -
YES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

olhos bem abertos sorridente

Thank you!!!
Media dei voti:  -