Changing layout of items in footer

Changing layout of items in footer

Shabana Akhtar -
回帖数：5
Hi,

Could some-one please advise me on how to align the 'sitelink' and 'loggedinas' variables in the footer of a standard moodle theme.

moz-screenshot.jpgmoz-screenshot-1.jpgmoz-screenshot-3.jpgmoz-screenshot-4.jpgIn my css I have tried
moz-screenshot-2.jpg
#footer .logininfo {
text-align:right;
}

#footer .sitelink{
text-align:left;
}

but they are still coming on the page one underneath the other ( see image below) . I would like to line them up where the moodle logo is on the left side of the footer and the "you are logged in as " sign to the right of the footer but all on the same line/area.

Any help or suggestions would be appreciated.

Thanks

Shabana
附件 Untitled.jpg
平均分： -
回复Shabana Akhtar

Re: Changing layout of items in footer

Frank Ralf -
Hi Shabana,

Those are both DIVs which are block level elements which will stack by default.

Use the following CSS to make them display as inline elements next to each other:

#footer div.logininfo, #footer div.sitelink {
display: inline;
}

You can then add some more CSS, e.g. margins or paddings.


If you want to position them left and right you should "float" them like so:

#footer div.sitelink {
float: left;
}

#footer div.logininfo {
float: right;
}

hth
Frank
附件 Footer_floating_logo.png
平均分：Useful (1)
回复Frank Ralf

Re: Changing layout of items in footer

Shabana Akhtar -

Hi Frank,

Thanks for your quick reply. I have tried the css changes you mentioned. Although the logo and login info is displaying on the same line (one to the left and one to the right) so I am getting closer but the background of the footer seems to disappear. I had tried using the float statements earlier and had the same issue.

Any ideas/suggestions on this area would help me a great deal and be appreciated.

Thanks

Shabana

附件 untitled2.JPG
平均分： -
回复Shabana Akhtar

Re: Changing layout of items in footer

Frank Ralf -
Hi Shabana,

Try giving the footer it's own background-color and settings it's height because the floated elements don't "hold it open" any more so the page background shines through:

body {
background-color: fuchsia;
}

div#page {
background-color: yellow;
}

div#footer {
background-color: lime;
height: 50px;
}

hth
Frank

PS
Using Firebug is the best way for this kind of tweaking your theme.

附件 Footer_colorful.png
平均分：Useful (1)
回复Frank Ralf

Re: Changing layout of items in footer

Shabana Akhtar -

Hi Frank,

That did the job.  Customising a theme for Moodle is not as easy as I thought but I'm getting there with the help you guys. Thanks for your help.

I may be back with another problem I stumble accross.

Thanks again

Shabana

平均分： -