Noob question about yii default layout size, how to edit?

Hi all, i need to fit the Facebook iframe layout that it’s 760px ( they says that ).

This is my app: http://apps.facebook.com/remindapp/ and as you can see Yii layout it’s too large and facebook create horizontal and vertical scrollbar to fix it. Can you help me?

Do you mean this?




...

<body>

<div style="width: 760px;">

...

</div>

</body>

</html>



no, your solution destroy the layout. instead of centered, it’s on the left. I need another solution… is there some designer that know how to play with css? :(

You may try the "max-width" attribute.

There is a code in your layout: <div class="container" id="page> … </div>. And "container" class is:




.container {width:950px;margin:0 auto;}



Did you try to change it to 760px; ?

solved :) and for height?

add ‘height:99px;’ to the same .container definition.

As for height, I don’t think vertical scrollbar is bad? If you’ll have much text on a page, then you will need this scrollbar anyway.

it doesn’t work :(

It’s because your content has a bigger height. If you don’t want to display it, then use:




div.container

{

    width: 760px;

    height: 200px;

    overflow: hidden;

}



anyway i’m editing .container in screen.css couse there’s no div.container in main…

anyway your solution doesn’t work. The height is edited but it cut the content and not resing it…

As far as i know, you can’t resize content, according to a height value, in CSS.

Some height settings:

height: 99px; --> the height of the element. If the content renders to a larger height, a vertical scrollbar is displayed. If the overflow:hidden; is added then the content is cut of at the defined height.

max-height: 99px; --> the maximum height of the element. If the content renders to a larger height, a vertical scrollbar is displayed. If the overflow:hidden; is added then the content is cut of at the defined height.

min-height: 99px; --> the minimum height of the element. If the content renders to a larger height, the height is increased to display all content.

So basically if your content exceeds the height of your element, the element will be either enlarged, display a scrollbar or cut of the content.

Play around with these 4 settings to get the results that best matches your wishes.