Dan_
August 11, 2010, 9:37am
1
I have a footer which contains two elements in it (part of an online store) which I’m trying to format without any success.
here is a sample of the code
<div id="footer">
{include file="customer/menu_cart.tpl"}
{include file="customer/help/menu.tpl"}
</div>
all I want to do is make these two elements appears side by side (currently they appear 1 on top of another), then i can figure out the rest of the formatting.
Can you please offer some suggestions?
I’m sure this is very easy to solve but I cannot figure it out.
Thanks
Dan_
August 11, 2010, 11:24am
4
I tried to edit the above but it would not save,
I managed to solve the issue, it was due to the div tags being not formatted correctly.
Thanks
Dan_
August 11, 2010, 10:43am
5
Many thanks for your assistance,
I do have a css file which styles the “footer” yet it applies to the section below this, not this section.
Here is the css file…(it’s a big one, so I extracted the styles)
/*
/*==============================================================================
layout styles
==============================================================================*/
/* page container */
#page-container { margin: 10pt auto 0; position: centre; width: 1000px; min-height: 100%; }
/* page layout */
#content-container {
clear: both;
float: left;
overflow: hidden;
position: relative;
width: 1000px;
padding-bottom: 39px;
margin-top: 65px; /* edit this value to adjust the space between the header and top of body*/
}
#content-container2 {
float: left;
position: relative;
right: 100%;
width: 200%;
}
#center {
float: left;
position: relative;
width: 50%;
left: 50%;
}
#left-bar {
float: left;
position: relative;
width: 0px; /*changed to 0 to reduce width, also made the changes below to ensure the centre flows over*/
margin-left: 0px;
}
#right-bar {
float: right;
right: 0px;
position: relative;
width: 160px;
}
#center-main {
margin: 0px 170px 0px 0px; /*this is where you edit the right and left column widths in the 2nd and 4th value*/
position: relative;
overflow: hidden;
}
#header {
height: 100px;
position: absolute;
top: 0px;
left: auto;
width: 1000px;
}
#footer {
height: 200px;
width: 1000px;
position: centre;
bottom: 0;
overflow: visible;
float: left;
}
/*
Right-to-left
*/
.rtl {
direction: rtl;
}
/*
header styles
*/
#header .line1 {
position: relative;
height: 67px;
direction: ltr;
}
#header .line1 .logo {
padding-top: 9px;
margin-left: 27px;
width: 203px;
}
#header .line1 .logo a img {
width: 203px;
height: 48px;
}
/* header tabs */
.tabs {
position: absolute;
top: 0px;
right: 0px;
margin: auto;
padding: 0px;
height: 25px;
width: 80%;
text-align: right;
}
.tabs ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.tabs li {
float: right;
margin: 0px 1px 0px 0px;
padding: 0px;
background: transparent url(images/tab_r.png) no-repeat right top;
height: 25px;
}
.tabs a:link,
.tabs a:visited,
.tabs a:hover,
.tabs a:active
{
display: block;
background: transparent url(images/tab_l.png) no-repeat left top;
margin: 0px 5px 0px 0px;
padding: 5px 10px 5px 15px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
color: #253161;
text-decoration: none;
font-weight: bold;
font-size: 11px;
height: 25px;
outline-style: none;
}
.tabs a:hover {
color: #2863c2;
}
/* phones line */
#header .phones {
position: absolute;
right: 10px;
top: 25px;
height: 42px;
vertical-align: middle;
line-height: 42px;
color: #5480a2;
text-align: right;
white-space: nowrap;
font-size: 11px;
}
#header .phones span {
padding-left: 15px;
}
/* header line 2 */
#header .line2 {
position: relative;
width: 100%;
border: none;
border-top: 1px solid #cb480c;
border-bottom: 1px solid #cb480c;
background: url(images/head_linebg.gif) repeat-x top;
height: 39px;
color: #451300;
}
#header .line2 div,
#header .line2 span
{
color: #451300;
}
#header .line2 a:link,
#header .line2 a:visited,
#header .line2 a:hover,
#header .line2 a:active
{
color: #510000;
}
#header div.search {
position: absolute;
top: 0px;
left: 0px;
height: 39px;
line-height: 39px;
vertical-align: middle;
}
#header span.search {
font-size: 12px;
padding-left: 20px;
padding-right: 5px;
}
#header input.text {
width: 108px;
}
#header a.search:link,
#header a.search:visited,
#header a.search:hover,
#header a.search:active
{
text-decoration: underline;
}
#header input {
margin-right: 3px;
}
#header button.simple-button {
vertical-align: middle;
margin-bottom: 3px;
margin-right: 3px;
}
#header button.simple-button img {
margin-left: 0px;
}
#header .languages {
position: absolute;
top: 7px;
right: 20px;
text-align: right;
vertical-align: middle;
}
#header .languages-row,
#header .languages-flags
{
top: 9px;
}
#header .languages-flags a:link,
#header .languages-flags a:visited,
#header .languages-flags a:hover,
#header .languages-flags a:active,
#header .languages-flags strong
{
padding-left: 5px;
padding-right: 5px;
}
#header .languages label {
line-height: 21px;
vertical-align: middle;
font-size: 12px;
}
#header .languages select {
margin-left: 5px;
}
/* header line 3 */
#header .line3 {
position: relative;
width: 100%;
height: 39px;
text-align: right;
}
.printable-bar a:link,
.printable-bar a:visited,
.printable-bar a:hover,
.printable-bar a:active
{
background: transparent url(images/printer.gif) no-repeat right top;
padding: 2px 20px 2px 0px;
color: #818891;
font-size: 10px;
line-height: 16px;
}
div.printable-bar {
width: 130px;
}
/*
footer styles
*/
#footer .box {
width: 100%;
border: none;
border-top: 1px solid #cb480c;
padding: 0px;
}
#footer .subbox {
position: relative;
border-top: #ffd30d 1px solid;
background: #ffffff none;
color: #667d92;
height: 40px;
vertical-align: middle;
padding: 0px;
}
#footer .subbox .left {
background: transparent none;
position: absolute;
left: 12px;
top: 0px;
line-height: 40px;
vertical-align: middle;
}
#footer .subbox .right {
background: transparent none;
position: absolute;
right: 12px;
top: 0px;
text-align: right;
line-height: 40px;
vertical-align: middle;
}
#footer .subbox a:link {
color: #667d92;
text-decoration: underline;
}
#footer .subbox a:visited {
color: #667d92;
text-decoration: underline;
}
#footer .subbox a:hover {
color: #667d92;
text-decoration: none;
}
#footer .subbox a:active {
color: #667d92;
text-decoration: underline;
}
You need to be looking at the generated source (html), then look at the CSS (if any) which styles it.
So this isn’t really PHP.
Post the generated HTML and we’ll ask this to be moved to somewhere more appropriate.
