can u provide a link so we can take a look?
MAC 🙂
Sure! I’d like to do this for my homepage, a website for 3dsMax Tutorials.
I’m looking to extend the Wide SkyScraper at the bottom of the right column. It’s pretty basic. 🙂
Why do you have your skyscrpappers absolute positioned?
.bg {
background-color:#E4ECF0;
border:0 solid #C8D8DF;
height:18px;
position:absolute;
width:18px;
}
Overall your markup is, to say the least, a BIT complicated, that’s why you can’t target your elements properly.
Consider simplifying your #sidebar markup, it will be much easer to get it done.
MAC 🙂
True, it isn’t as simple as I’d like. I basically re-purposed a template I found online, and replaced the images and some CSS elements. .bg doesn’t sound like something I’d make though- my names are much more descriptive. =)
The whole skyscraper code is as follows (within a <ul>). The trouble is that everything is so nested, I can’t tell if a CSS solution even exists. I’m a PHP nooblet, so figuring out where I can rig WP up to apply a custom ID to the last
<li> isn’t readily obvious:
<li>
<div id="text-3" class="widget widget_text">
<div class="textwidget">
<div class="Sidebar_WideSkyscraper">
<script type="text/javascript">
<!--
...
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
</li>
Just wanted to see if anyone’s done this before, I guess. =)
I’ll keep poking around tonight and see if I can tighten things up a little.
The trouble is that everything is so nested
Exactly! Why?!
Just cut off the crap and only use the elements you absolutely need to.. Adjust their CSS properties to fit your needs and you’ll find much easer to control them.
The code above looks medieval, like something from the “table layout ages” 🙂
Just style your <li> and get rid of all the useless divs within divs.
MAC
I completely agree. I just have to find them. My widget insertion is literally just the div and the script. The other <div> wrappers aren’t my business.
Let me explore the code a little more. Here’s what I’m thinking:
1. Leave the <li> CSS the same,
2. Leave the id="text-3" div, and get that to extend 100% vertical with a #text-3 CSS entry, and
3. Get the WideSkyscraper container <div> to be bottom aligned to it’s container (the text-3).
I’m not sure exactly what attributes are needed to invoke that kind of functionality, but I’ll look it up when I get home from work today and add to this thread.
That did it. The intermediate div didn’t matter because they had no CSS cluttering up their rendering. I promise the things I make from scratch are super organized and clean. 🙂
For those who want to do this same optimization, you need to get the highest-level div to span 100% of the height of the page and then get the skyscraper absolutely positioned at 0px.
I.E.
<li>
<div id="OuterWrapper" style="height:100%;">
...
<div id="LastSkyscraperAdvert" style="position:absolute; bottom:0px;">
## Advert Goes Here ##
</div>
</div>
</li>
