Jump to content


Mollio template question - FireFox

Started by twentecontrole, May 15 2006 12:49 PM

  • You cannot reply to this topic
7 replies to this topic

#1 twentecontrole

    Etomite Forum Newbie

  • Member
  • 17 posts

Posted 15 May 2006 - 12:49 PM

Hi,

I am experimenting with the Mollio Template but I have a question.

My screen resulution is 1400x1050 and in Internet Explorer the site show as supposed, but when I use Firefox as webbrowser the site DOES show the bottom-banner/image..
but at the top the image is not stretched from left to right..
(I can try to add add a screenshot later on)

My question is.. can the top image be showed from left to right as well... 100%?

And maybe even better (for me)
can you show me how to alter the Mollio templates to give it a fixed width from say 1024?

It should shrink and enlarge automatically with the screen size (like it does now)
but it should not become wider than 1024..... is that 'easy' to realise??

Kind Regards from Holland
TC

#2 lloyd_borrett

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 605 posts
  • Gender:Male

Posted 15 May 2006 - 09:37 PM

G'day TC,

You are more likely to get an informed answer to these questions in the Mollio Google Groups support area.

Best Regards, Lloyd Borrett.

#3 gp_etomite

    Etomite Forum Newbie

  • Member
  • 43 posts

Posted 16 May 2006 - 04:53 AM

twentecontrole, on May 15 2006, 02:49 PM, said:

My screen resulution is 1400x1050 and in Internet Explorer the site show as supposed, but when I use Firefox as webbrowser the site DOES show the bottom-banner/image..
but at the top the image is not stretched from left to right..
(I can try to add add a screenshot later on)

My question is.. can the top image be showed from left to right as well... 100%?

Hi TC,

The Mollio templates use max-width technique, and the reason it looks 'fine' in IE is because IE doesnt' support max-width.

Look for this line in the main.css file.
/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:1200px;margin: 0 auto;position:relative}

As you can see, the maximimum width is 1200px

Mollio templates put the header image in #header, which is insider the #wrap, and the background image for footer' is in body tag.
#header {
background:url("images/headerbar.gif") repeat-x;
}

There are ways you can do:

1) move th body's image to the #footer. However this involves some workaround for footer if you want the image stretch 100% horizontally. Place the same header image to body tag with repeat-x, do not remove the one in the #header.

2) If you dont' care the footer image, then the work around is easier, Place the same header image to body tag with repeat-x, do not remove the one in the #header.

3) Add a outer wraper tag. Something like this:

#outer_wrap {width: auto; margin: 0 auto;position:relative} /* or width: 100%

Then in your mollio template html file

place "<div id="outer_wrap>" above wrap

<body>
<div id="outer_wrap>
<div id="wrap">

close the outer_wrap by placing a </div> above the </body>

</div>
</body>

Cheers,

gp



3) add a outter wrapper

#4 gp_etomite

    Etomite Forum Newbie

  • Member
  • 43 posts

Posted 16 May 2006 - 05:13 AM

Oh, I forgot one thing, you can remove the max-width from the #wrap so the header image will stretch 100% horionatally regarless which browser.

Personally I don't recommend though, because you can see many fluid layout websites that don't use min/max-width, when the browser is at maximum view, the layout looks real ugly.

gp

#5 twentecontrole

    Etomite Forum Newbie

  • Member
  • 17 posts

Posted 16 May 2006 - 07:11 AM

@lloyd_borrett:
I was not aware of this google group (but am not familiar with posting messages there either)
So I posted my question here, But I have al look at those messages as well.

@gp_etomite
Thanks alot for your reply.
I guess I can implement these changes.. I'll try it asap.

Another small point..
maybe someone allready solved it, but when using the boxes on the right
and making the screen smaller.. sometimes the boxes overlap the text in the main content area...
how is this possible.. (can) this be fixed?

edit: text added:
example: see http://www.dashboardmonkey.com
make the screen smaller,so small that the search text is near the contact button
you see the boxes overlap the main content.
But I don not see this happen on the Scubadocter site... lloyd_borret.. what is the difference?

Edited by twentecontrole, 16 May 2006 - 07:49 AM.

#6 Dean

    Loves Etomite Forums!

  • Admin
  • 4,758 posts
  • Gender:Male

Posted 16 May 2006 - 07:58 AM

Are you an etomite user?? The site you posted isn't etomite based....

#7 twentecontrole

    Etomite Forum Newbie

  • Member
  • 17 posts

Posted 16 May 2006 - 08:02 AM

Dean, on May 16 2006, 10:58 AM, said:

Are you an etomite user?? The site you posted isn't etomite based....

I saw this site in the Moolio Google Groups thats lloyd_borrett mentioned in this topic..
I only have a local version of Etomite running and testing it.... so cannot show you my site

But my local version acts the same as the dashboardmonkey.com
It is not my site but I mention it so others can see what i mean

#8 gp_etomite

    Etomite Forum Newbie

  • Member
  • 43 posts

Posted 16 May 2006 - 10:17 AM

twentecontrole, on May 16 2006, 09:11 AM, said:

Another small point..
maybe someone allready solved it, but when using the boxes on the right
and making the screen smaller.. sometimes the boxes overlap the text in the main content area...
how is this possible.. (can) this be fixed?

TC, without seeing your page, I can't tell exactly what causes the problem, however it is likely be caused from this:

If you have an element that has a fixed pixel width in the content area, when screen makes smaller, it overlaps.
For example, in one of the page I was working:
http://eto.marinersq.com/index.php?id=4
I have the form wrapped in a fixed pixel width, changing the pixel to % should fix the problem I believe.

g
Back to Completed Templates


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users