Front-End Help

Yii 1.1 General Discussion
1

Hi everyone!

Im having some problems in making my site’s frontend work correctly. I’ve always worked as a backend developer so I don’t have much knowledge in frontend.

I have some png images that I want to use in the header, side-frames and footer, as shown in the attached picture 5234

design.png

In the content area im printing a user registration form.

The idea is that header, side-frames and footer stays still and the content adjusted to the space available, with the option to scroll down if its bigger than the space available.

At this moment the solution that I’ve been using is inserting the images on the create view as background-image with absolute position. But it doesn’t shows correctly in every browser and resolution.

Also when some alerts appears ("please fill this form"), the form starts growing and the registration botton dissapears. Also when zooming in or out, it fails to show correctly.

So what is the correct approach for this problem?

What should I learn?

How can I make a fully compatible site for IExplorer, Chrome, Firefox and also mobile ready for iOS and Android?

Thanks for your time in advance!

Greets!

2

Hi,

Can you place your code now so it will be easy to resolve the issue

3

Sure!

This is view/create.php


<?php

/* @var $this EmprendedorController */

/* @var $model Emprendedor */

?>

<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF" marginheight="0" marginwidth="0">

<div style="background-image: url(<?php echo Yii::app()->baseUrl."/images/form/INSCRIPCION_01.png"; ?>); position: absolute; left: 0px; top: 0px; width: 1383px; height: 384px;" title=""></div>


	<div style="background-image: url(<?php echo Yii::app()->baseUrl."/images/form/INSCRIPCION_02.png"; ?>); position: absolute; left: 0px; top: 384px; width: 181px; height: 1151px;" title=""></div>

	

	

	

	<div style="background-image: url(<?php echo Yii::app()->baseUrl."/images/form/INSCRIPCION_04.png"; ?>);position: absolute; left: 1204px; top: 384px; width: 179px; height: 1151px;" title=""></div>

	

	

	

	<div style="background-image: url(<?php echo Yii::app()->baseUrl."/images/form/INSCRIPCION_06.png";  ?>);position:absolute; left:1203px; top:713px; width:1px; height:1px;" title=""></div>


	

	

	<div style="background-image: url(<?php echo Yii::app()->baseUrl."/images/form/INSCRIPCION_10.png"; ?>);position: absolute; left: 181px; top: 1383px; width: 1022px; height: 152px;" title=""></div>




<?php $this->renderPartial('_form', array('model'=>$model)); ?>




</body>

Greets!

4

Have you tried using jquery plugin scrolltofixed?

Link: github.com/bigspotteddog/ScrollToFixed

And if you wish that scrollbar would show only in the "Content" area, then you should check CSS attributes overflow:

overflow-y: auto;

overflow-x: hidden;