Hi,
I'm working on a responsive site with a friend. I added some things to page.tpl.php. There are some placement problems.
The situation:
Screenshot: http://testvansuzanne.hostoi.com/screenshotbnb.jpg (I edited names out of the picture.)
Image1-container holds the big picture and image2-container. image2-container holds the smaller picture.
I'm working on the responsive theme.
I made a .info file, placed a copy of the page.tpl.php in the right theme folder and made style.css.
The images on the page are responsive (this is working correctly). The images are max-width and max-height 100% inside containers. I put this in the page.tpl.php.
The problem:
The problem is that the links to translations and the menulinks are placed at the bottom of the page. The footer is placed at the top of the page. I think that perhaps I made a mistake in the page.tpl.php file, but I do not know what.
What I tried to make it better
Obviously I tried to move the menu and translationslinks with CSS, but the placement only works with top: -700px; That is not responsive.
In an effort to change the location of the menu and the links to translations, I made a new region in the .info file. The region is called: menu_and_language. Also I added the region to the page.tpl.php file.
Like I wrote above, the other addition I made to the page.tpl.php are the containers with images and content inside.
Questions
How can I make the menu and the translation inside image1-container, and the footer at the bottom of the page? Did I make any mistakes in the themeing?
Help would be greatly appreciated.
Code
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
<div class="image1-container">
<img id="img1" src="/sites/all/themes/jtheme/images/mainbackgroundimage.jpg">
<?php print render($page['menu_and_language']); ?>
<div class="image2-container">
<span> <p> <?php print render($page['content']); ?> </span></p>
<img id="img2" src="/sites/all/themes/jtheme/images/mainbackgroundimage.jpg">
</div>Here's the CSS:
.image1-container
{
position: absolute;
margin-left:auto;
margin-right:auto;
min-width: 300px;
min-height: 600px;
max-width: 90%;
max-height: 90%;
}
#img1
{
max-height:100%;
max-width: 100%;
border-style:solid;
border-width: 3px;
border-color: pink;
}
.title{
top: 0;
left: 0;
}
.menu{
position:absolute;
top: 0px;
left: 10%;
}
.language-switcher-locale-url{
left: 10%;
top: 40%
}
.image2-container{
position: absolute;
top: 5%;
right: 12%;
width: 54%;
max-height:100%;
max-width: 100%;
}
#img2{
max-height:100%;
max-width: 100%;
border-width: 0;
}
.field-items p{
position: absolute;
display: block;
color: white;
background-color: blue;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
bottom: 0;
padding: 0;
}
.field-items p span{
position: absolute;
display: block;
}Thanks in advance,
Suzanne
Comments
Any help would be
Any help would be appreciated.