PDA

View Full Version : Positioning on index page.

dlp
14-10-08, 22:00
I am trying to position a content widget on the right hand side of the default template index page. I have reduced the width of the Search and Hotpicks sections to leave a free space on the right side of the page.

Originally I just copied the code into the index.tpl. The widget displayed on the page but always on the left and below the hotpicks section.

I have created a new template file in elements and included the code for the widget. Have also added a line in the index.tpl to include the new tpl file. I have also amended the css file referencing the new tpl file and with a line: (horizontal-align: right;), in an attempt to rectify the problem.

To my frustration the widget still displays below the hotpicks section and on the left hand side.

How can I get this to show up on the right of the search and hotpicks sections?

Can anyone help please?

Thanks
Confuscius
15-10-08, 10:42
Hi dlp

If you post the site in question then I am pretty sure that one of the css gurus here would be able to look at your site and css file and advise further.

It is hard to proffer a solution to an unseen problem.

Paul
dlp
15-10-08, 21:20
Hi Paul,

Thankyou for your reply.

Site address is: www.shopperdropper.com/sdindex
(use above url as normal index page only shows a construction message).

New template page is: right_side_widget.tpl (this is stored in the default template/elements directory.
Code in this is:
<div class="sw_right_side_widget">
<script src="http://www.awin1.com/wshow.js?s=121958"></script>

</div>

Code in css is:/* styles for ad widget on right of home page */

#sw_right_side_widget {
vertical-align: right;
}

Code in index.tpl in default template directory (line 17 is what I have added):
1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2) <html>
3) <head>
4) <title>{#siteTitle#} - ShopperDropper your online megastore</title>
5) <link rel="stylesheet" href="{$templatePath}css/styles.css" type="text/css">
6) </head>
7)
8) <body>
9)
10) <div id="sw_frame">
11)
12) {include file="elements`$DIRECTORY_SEPARATOR`page_header.tpl"}
13)
14) <div id="sw_nav">
15) {include file="elements`$DIRECTORY_SEPARATOR`category_tree.tpl"}
16) {include file="elements`$DIRECTORY_SEPARATOR`query_list.tpl"}
17) {include file="elements`$DIRECTORY_SEPARATOR`right_side_widget.tp l"}
18)
19) </div>
20)
21) <div id="sw_container">
22)
23) <div id="sw_content"> {include file="elements`$DIRECTORY_SEPARATOR`search_box.tpl"}
24) {include file="elements`$DIRECTORY_SEPARATOR`hot_picks.tpl"}
25) <h2><a href="retailers.php"><font color="#92006C">Retailer map</font></a></h2>
26) </div>
27) </div>
28)
29){include file="elements`$DIRECTORY_SEPARATOR`page_footer.tpl"}

If you view the site you will see that the widget is at the bottom on the left.
I want it to position on right side of the search and hot picks boxes, like the category tree but on the right of the page.

Any advice and help would be appreciated.

Thanks.

dlp
Amoochi
16-10-08, 01:38
Any advice and help would be appreciated.

Thanks.

Firstly, the link you provided didn't work, so i've not been able to check to see exactly what is going on.

However, looking at your code, it shows a fairly simple mistake that you appear to have made.

You have put the code you've added to line 17 into the <div> that starts at line 14, which is the left hand sided <div> where the categories show up, so that's why your widget is showing up there too.

You need to place your include code inside a new set of div tags, after line 26 but before line 27.

Something like:

<div id="right_side_widg_css_example_name">
{include file="elements`$DIRECTORY_SEPARATOR`right_side_wid get.tpl"}
</div>

I'm a bit old fashioned with this stuff personally though, I still like using <tr> and <td> tags and only use <div>, <span> and <p> tags when i've got no choice.

I would have thought the CSS for a right hand column would have been better being something like the following:

#right_side_widg_css_example_name {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:0px solid #000000;
}
IntroSites
16-10-08, 13:19
put it in the sw_content div like:


<div id="sw_content">
{include file="elements`$DIRECTORY_SEPARATOR`right_side_widget.tp l"}
{include file="elements`$DIRECTORY_SEPARATOR`search_box.tpl "}
{include file="elements`$DIRECTORY_SEPARATOR`hot_picks.tpl" }
<h2><a href="retailers.php"><font color="#92006C">Retailer map</font></a></h2>
</div>


and float it right like:


.sw_right_side_widget {
float: right;
}


See how you get on with that

This is untested and just off the top of my head so dont expect perfection:D


NOTE: in your example css you show an id but in the template you are using a class
dlp
16-10-08, 23:21
Hi,

Thanks for your replies.

I tried both options. The one which I seemed to have most success with was Intro Sites.

The widget does now display on the right but depending on where I insert the code in index.tpl it moves either hot picks or the search box down the page.

The code is as follows: index.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>{#siteTitle#} - Your Online Megastore</title>
<link rel="stylesheet" href="{$templatePath}css/styles.css" type="text/css">
</head>

<body>

<div id="sw_frame">

{include file="elements`$DIRECTORY_SEPARATOR`page_header.tpl"}

<div id="sw_nav">
{include file="elements`$DIRECTORY_SEPARATOR`category_tree.tpl"}
{include file="elements`$DIRECTORY_SEPARATOR`query_list.tpl"}

</div>

<div id="sw_container">

<div id="sw_content">
{include file="elements`$DIRECTORY_SEPARATOR`search_box.tpl"}
{include file="elements`$DIRECTORY_SEPARATOR`right_side_widget.tp l"}
{include file="elements`$DIRECTORY_SEPARATOR`hot_picks.tpl"}
<h2><a href="retailers.php"><font color="#92006C">Retailer map</font></a></h2>
</div>

</div>

{include file="elements`$DIRECTORY_SEPARATOR`page_footer.tpl"}

Currently right side widget code is between the search box and hotpicks. this pushes hotpicks down the page below the widget. If code is placed before search box and hotpicks, both are pushed down the page below the widget

CSS File:

.sw_right_side_widget {
float: right;
}


Site address is: http://www.shopperdropper.com/sdindex.php If you have a look at the site you can see how it is displaying. Please use the exact site address as above to access. I want the search box with hotpicks directly below it with no or little space and the widget on the right of both of them.


If you can help I would be grateful. It's driving me up the wall.

Thanks.

dlp.
IntroSites
17-10-08, 10:19
For a start your hotpicks box is too wide and clears both left and right in your css.

If you are planning on redesigning the whole page then its best to start from scratch, else you'll be fighting with the original css

Read up on CSS and positioning, thats the best way to learn