Joomla Templates Club 406,261 posts

[sotjoom2 Friend sotjoom2Join date: January 2010Posts: 47Downloads:0Uploads:10 Thanks: 5 Thanked: 3 times in 1 posts]

#181616

I am having an issue I really would like to solve. I need to use slideshow lite on the home page in a way that looks like a page background. To achieve that, I need to make it taller and I also positioned the preceding <div> absolutely.

The structure is as follows:

<div id="ja-wrapper">
<div id="ja-topbar" class="wrap ">
<div id="ja-header" class="wrap ">
<div id="ja-mainnav" class="wrap ">
<div id="ja-slideshow" class="wrap clearfix">

I have been able to move <div id=”ja-slideshow”> all the way below <div id=”ja-header” class=”wrap “> so that the logo and the menu appear above the slideshow, but I have been unable to move <div id=”ja-slideshow”> below <div id=”ja-topbar” class=”wrap “>.

The only way I was able to do that was by making <div id=”ja-slideshow”> position:absolute; but that creates all sorts of other problems, including everything under the slideshow disappearing below it.

I realize I will encounter the same problem once the slideshow is off the page and I think I have a solution for that, but I really need to have the slideshow appear below <div id=”ja-topbar” or I won’t be able to achieve the effect I need.

I am attaching a sample of what I am trying to achieve and a screenshot of what I have so far
This is what I am trying to emulate. Please note how the background reaches the very top of the page under the top menu

And this is what I have so far. My background only goes as high as below <div id=”ja-topbar” class=”wrap “> creating a dark band.
Note that I was able to achieve what I wanted but setting slideshow to position:absolute creates more problems than it solves.

Thank you very much for any help you can provide.

---

Attachments:

1. 
2. 

[sotjoom2 Friend sotjoom2Join date: January 2010Posts: 47Downloads:0Uploads:10 Thanks: 5 Thanked: 3 times in 1 posts]

#470802

I wanted to update this issue. I have a much bigger problem that involve stripping this template of its major property. Essentially I need to make the whole template non-responsive as it won’t allow me to make the layout follow the design I was given.

I also doubt that I would be able to change the design to be responsive. Too many pixel precise elements.

On the good news side, I solved my initial problem by moving the slideshow XML block above the header. Works beautifully.

[Author]

Posts