Simple CSS question, about layout

Discussion and education for beginner / novice programmers interested in embarking on the development process to take advantage of the extensible nature of the Joomla! CMS.
Locked
MrWolfy
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Jul 11, 2008 1:04 pm

Simple CSS question, about layout

Post by MrWolfy » Fri Jul 11, 2008 1:11 pm

Hi,

I'm really new to css, appreciate any help. Sorry if I can not describe this problem with correct terminology.

I am using the default RHUK Milkyway template and tweaking.

I just want to make the footer/bottom of the page fill to the bottom of the browser view. What am I looking for in the css and how can I change that?

Thanks,

MrWolfy.com

gogoli
Joomla! Explorer
Joomla! Explorer
Posts: 360
Joined: Fri Aug 17, 2007 5:31 pm

Re: Simple CSS question, about layout

Post by gogoli » Fri Jul 11, 2008 1:15 pm

give the link of your site, it will give members a better understand of your problem
Ad Share Revenue Social Network : http://www.ufreespace.com

MrWolfy
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Jul 11, 2008 1:04 pm

Re: Simple CSS question, about layout

Post by MrWolfy » Fri Jul 11, 2008 1:20 pm

http://www.mrwolfy.com/

Here is a link to the site.

MrWolfy
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Jul 11, 2008 1:04 pm

Re: Simple CSS question, about layout

Post by MrWolfy » Sat Jul 12, 2008 5:14 am

I was unable to leave a frivate massage for Mat (secteur) who tried to help me out, Joomla said I need 5 posts brfore using the private message tool.

Anyway thanks! But actually I was thinking of a vertical fill. Wherein the shadowed edges of the site always run to the very bottom of the browser view, instead of adjusting to the scale of the "content". I like where the text sits horizontally at this point.

Thanks again.

Wolfy

User avatar
Chris
Joomla! Guru
Joomla! Guru
Posts: 811
Joined: Sat Aug 20, 2005 3:58 am
Location: Australia
Contact:

Re: Simple CSS question, about layout

Post by Chris » Sat Jul 12, 2008 6:08 am

You can try to do something like:

Code: Select all

<div style="min-height:540px;">
That is what I use at one of my sites to set the minimum height of the content.
If there is very little content, the page still fils the screen.

MrWolfy
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Jul 11, 2008 1:04 pm

Re: Simple CSS question, about layout

Post by MrWolfy » Sun Jul 13, 2008 2:09 am

Thanks all! Thanks Chris, I will try that. And Secteur, I still can't send private messages, but I put the site back on line.

Hope you all have a great day,

Wolfy

secteur
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 146
Joined: Tue Nov 08, 2005 9:32 am
Location: Malaysia

Re: Simple CSS question, about layout

Post by secteur » Sun Jul 13, 2008 4:12 am

Hi MrWolfy,

the following should bring you closer, though not perfect:
Make sure html and body have height

Code: Select all

html, body {
  height: 100%
}
For your <div class="center" > add also the 100% style.

Code: Select all

<div class="center" align="center" style="height: 100%">
Your wrapper div will refer to it's parent height. Now it's actually a minimum height that you need. So for good browsers that follow standards, a min-height will do. But for IE6 you'll need to use height only.

Code: Select all

#wrapper {
  min-height: 100%;
}
I've noticed that you right border isnt part of that same div, but part of the <div id="wrapper_r">, which is a child of #wrapper. And that's where I ran into trouble: since we're using a min-height for the wrapper, a height on the #wrapper_r doesn't know what to refer to and it fails.
But if we use a height only for #wrapper, I'm quite sure the content will be clipped

Can you handle the right margin without having a #wrapper_r div?

Now your copyright is out of the view though, bring it back in by using a relative position:

Code: Select all

#footer {
  position: relative; 
  top: -31px;
}
31px being the exact height of your footer inclusive of padding.

Hope this helps.

MrWolfy
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Jul 11, 2008 1:04 pm

Re: Simple CSS question, about layout

Post by MrWolfy » Sun Jul 13, 2008 4:57 am

Secteur,

I really appreciate all of the help, it's really giving me more insight into css and Joomla. I fear your expertise is beyond my ability to use today, I have tried my best to implement. Part of the problem is I am trying to hack a pre-built template. No fear, I am doing some css and templating tutorials, after-which I will review your suggestions.

Thanks,

Wolfy

secteur
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 146
Joined: Tue Nov 08, 2005 9:32 am
Location: Malaysia

Re: Simple CSS question, about layout

Post by secteur » Sun Jul 13, 2008 5:14 am

Sure no problem.

Interested in a tweak then maybe?

Add the following Javascript to your index.php:

Code: Select all

window.addEvent("domready",function(){
  var s=window.getHeight()-$("footer").getCoordinates().height;
  if($("wrapper").getCoordinates().height<s){
    $("wrapper").setStyle("height",s);
  }
});
(has to be after declaring mootools though)

Let me know whether that works. Problem being of course is that this is JS and therefore if the user resizes the browser window, no correction is done on the height.

Good luck with your site.


Locked

Return to “Joomla! Coding 101”