Having trouble getting an ad block into the correct position

[rpb161]

I want to create an ad block below my content like you would see on an espn content page or on most major news sites. For the life of me I can't get it to display below my content the way i like it. It either goes into my content or sits way below just above my footer (my site is a XHTML 1.0 strict 2 column site with the content floated to the right and a sidebar floated to the left).

Another problem i also get is when i add anything to main body I lose my background in IE8 (and probably IE6/7) but in none of the other browsers. Any help would be greatly appreciated!

Should I post the relevant code regarding this from the drupal end of things or should i post the code I can get from viewing the source in firefox?

[Mathiaslylo]

Can you post the full markup codes?

[rpb161]

sure that won't be a problem at all...when you say markup code, do you mean the code i get when i view the source code through a browser like fire fox, and not the back-end code in something like drupal or wordpress?

[tedster]

Just post the mark-up that could affect the position of your adblock - probably part of the html and part of the css. Also make sure to take out any specific information that would identify a particular site.

[rpb161]

ok here's some of the code of everythign between the header and the footer (what what needs fixed, this is from firefox, but i can get the drupal end code if needed):

<div class="wrapper"><!--wrapper:defines whole content margins-->
 <div id="primary" class="short"> <div class="singlepage">
 <div class="path"><p><span>You are here</span>Exercise Physiology</p></div> 
<h1>Page Heading</h1> 
 <div class="drdot">
<hr />
</div>
<div class="node">
<div class="content">
<p><strong>Page Category</strong></p>
</div>
</div>
 </div>
</div>
<!-- left -->
 <div class="lsidebar">
<div class="defaultblock">
 <h2>Quick Links</h2><!--block title-->
 <div class="blockcontent"><ul class="menu"><li class="leaf first dhtml-menu active-trail"><a href="/drupal-6.13/exercise-physiology" title="" id="dhtml_menu-184" class="active">Exercise Physiology</a></li>
<li class="leaf last dhtml-menu "><a href="/drupal-6.13/nutrition" title="" id="dhtml_menu-186">Nutrition</a></li>
</ul></div>
</div> 
 </div><!-- end left -->
<div class="clear"></div>
</div>
</div>

and here's the layout css(although there is a few files of css that i have edited and there may be a few peices of layout code elsewhere but i tried to edit it as much as possible to keep the length to a minimum):

body {margin:40px 0 20px 0;}
#page { 
margin: 0px auto;
position: relative;
width: 970px;/* The entire template's width is set in this class. */
}
.wrapper{ /*wrapper:defines whole content margins*/
border-top:5px solid #F5F5F5;
} 
#primary {
 float: left;
 padding:10px;
 margin-bottom:5px;
/* width set with the two classe below */
}
#below_primary
 {
 float:left;
 width:658px;
 margin-bottom:5px;
}
.short{
width:640px; /* if we don't have the second sidebar */
}
.long{
width:745px; /* otherwise go wide... :) */
}
#primary .singlepage .path p {
letter-spacing:0px;
margin-top:-2px;
}
#primary .singlepage {
padding:0 0 15px 0px;
}
#page #primary .drdot{ /* sistema il float (use this to stop floating elements) */
 clear:both;
}
#page #primary .drdot hr{
 display:none;
}
#page #primary .tabs{ /* tabs */
 margin:20px 0 20px 0;
}
* html .admintab { padding: 5px 15px 6px }/* IE hack */
/*- Sidebar Subpages Menu */
.lsidebar { 
width: 305px;
 float: left;
margin-top:0px;
margin-right:px;
margin-bottom:0px;
margin-left:5px;
}
.rsidebar {
width: 180px;
float: left;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
/*block styles*/
.defaultblock{
margin:0px 0 5px 0;
}
.defaultblock .blockcontent{
margin:0px 0 20px 0;
}
.defaultblock .blockcontent, .loginblock .blockcontent{
padding:0 10px 0 10px;
}
.defaultblock h2{
padding:8px 4px 0px 12px;
margin-bottom:10px;
}
.clear {
clear: both;
margin: 0;
padding: 0;
}

[rpb161]

here's the code from the drupal end of things if this helps at all:

<div class="wrapper"><!--wrapper:defines whole content margins-->
  <div id="primary" class=<?php print '"'.marinelli_width( $left, $right).'">' ?>
    <div class="singlepage">
 <?php print $breadcrumb; ?>
 <?php if ($mission): print '<div id="sitemission"><p>'. $mission .'</p></div>'; endif; ?>
 <?php 
 if ($title): 
 if ($is_front){/* if we are on the front page use <h2> for title */
 print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; 
 }
else {print '<h1'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h1>'; /* otherwise use <h1> for node title */
 } 
 endif; ?> 
   <?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>
  <?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>
   <?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>
<div class="drdot">
<hr />
</div>
 <?php print $content ?>
  </div>
 </div>
  <!-- left -->
  <?php if ($left) { ?>
   <div class="lsidebar">   
   <?php print $left ?>
   </div><!-- end left -->
  <?php } ?>
<div class="clear"></div>
 </div>
</div>
<!-- Close Page -->

[tedster]

Which div is the adblock? the one that has the attribute class="clear"?

[rpb161]

here's the code with the adblock. its the best i can get it, but i cannot get it separated from the main content and when i add it elsewhere the right sidebar gets messed up. i also don't understand why i lose my wrapper background color that acted as a border around the content and each of the sidebar blocks whenever i add this code in internet explorer.

code on drupal end:

 <div class="wrapper"><!--wrapper:defines whole content margins-->
  <div id="primary" class=<?php print '"'.marinelli_width( $left, $right).'">' ?>
    <div class="singlepage">
 <?php print $breadcrumb; ?> 
 <?php if ($mission): print '<div id="sitemission"><p>'. $mission .'</p></div>'; endif; ?>
 <?php 
 if ($title): 
 if ($is_front){/* if we are on the front page use <h2> for title */
 print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; 
 }
else {print '<h1'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h1>'; /* otherwise use <h1> for node title */
 }
 endif; ?>
   <?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>
  <?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>
   <?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>
<div class="drdot">
<hr />
</div>
 <?php print $content ?>
  </div>
<?php if ($below_content): ?>
 <div id="below_primary"
 <?php print $below_content ?>
 </div>
<?php endif; ?>
 </div> 
  <!-- left -->
  <?php if ($left) { ?>
   <div class="lsidebar">
   <?php print $left ?>
   </div><!-- end left -->
  <?php } ?>
<div class="clear"></div>
 </div>
</div>

HTML from browser:

<div class="wrapper"><!--wrapper:defines whole content margins-->
  <div id="primary" class="short">    <div class="singlepage">
 <div class="path"><p><span>You are here</span>Exercise Physiology</p></div> 
<h1 class="with-tabs">Exercise Physiology</h1> 
   <div class="tabs"><ul class="tabs primary">
<li class="active" ><a href="/drupal-6.13/exercise-physiology" class="active">View</a></li>
<li ><a href="/drupal-6.13/node/5/edit">Edit</a></li>
<li ><a href="/drupal-6.13/node/5/outline">Outline</a></li>
</ul>
</div>     <div class="drdot">
<hr />
</div>
 <div class="node">  
 <div class="content">
<p><strong>Fatigue</strong></p>
</div> 
 </div>
  </div>
 <div id="below_primary"
 <div class="below_content_block">
 <h2>Secondary links</h2><!--block title-->
 <div class="blockcontent"><ul class="menu"><li class="leaf first dhtml-menu active-trail"><a href="/drupal-6.13/exercise-physiology" title="" id="dhtml_menu-196" class="active">EXERCISE PHYSIOLOGY</a></li>
<li class="leaf dhtml-menu "><a href="/drupal-6.13/training" title="" id="dhtml_menu-185">TRAINING</a></li>
<li class="leaf dhtml-menu "><a href="/drupal-6.13/nutrition" title="" id="dhtml_menu-195">NUTRITION</a></li>
<li class="leaf last dhtml-menu "><a href="/drupal-6.13/body-weight-body-composition" title="" id="dhtml_menu-197">BODY WEIGHT/COMPOSITION</a></li>
</ul></div>
</div> </div>
 </div>

[rpb161]

note: the ad block is below_primary above

[SuzyUK]

Hi it's quite hard to tell, but I see a couple of things.

first, you have a missing closing bracket in page.tpl.php at the end of the following line

<div id="below_primary"[b]>[/b]

apart from that, all I'm seeing in some conflicts in the CSS,

<div id="primary" class="short"> 

is 640px wide as per the "short" class, but the

#below_primary

div is 658px wide, therefore too wide to sit inside the column, try changing that 658px to 100%

when you say it goes "into your content" it shouldn't as the "node & content" divs are already closed under the

$content

variable, and if it's just that you require more spacing between it and the content area you can do that by adding margins to the "below_primary" div

the name you've given your extra block is a little confusing as it's not actually below the primary div, it's inside it, is that intentional? - not that it matters, just tring to figure out where it should be ;)

here's the skeleton of what I think you're after, I've added the page div in at the top as I presume the extra closing div at the end of your Drupal code above, was because you shortened the page.tpl.php code and the #page div is opened much further up the source.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
body {margin:40px 0 20px 0;}

#page {
margin: 0px auto;
position: relative;
width: 970px;/* The entire template's width is set in this class. */
}
.wrapper {
border-top:5px solid #F5F5F5;

background: #ffc; /* temporary to see if floats are contained */
float: left; /* to contain floated content */
width: 100%; /* to contain floated content */
}

#primary {
float: left;
padding:10px;
margin-bottom:5px;
/* width set with the (short) class below */

background: #cfc; /* temporary to see column */
}

.short {
width: 640px;
}

#below_primary {
float: left;
margin-bottom:5px;

margin-top: 50px; /* added as an example of spacing */

/*width: 658px;*/
width: 100%;
}

#primary .singlepage {
padding:0 0 15px 0px;
}

#page #primary .drdot{ /* sistema il float (use this to stop floating elements) */
xclear:both;
}
#page #primary .drdot hr{
xdisplay:none;
}

.lsidebar {
width: 305px;
float: left;
margin-left:5px;

background: #abc; /* temporary to see column */
}

.clear {
clear: both;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id ="page">
<div class="wrapper">
<div id="primary" class="generated-class short">

<div class="singlepage">
<p>single page, breadcrumbs, mission</p>
<p>tabs, etc</p>

<div class="drdot"><hr /></div>

<!-- genrated by $content variable -->
<div class="node"><div class="content">this is temporary fake div to show content</div></div>

<!--//singlepage--></div>

<div id="below_primary">below_primary div for ad block</div>
<!--//primary--></div>

<div class="lsidebar">left sidebar</div>

<div class="clear"></div>
<!--//wrapper--></div>

<!--//page--></div>

</body>
</html>

I took the relevant CSS added some colors and notes, can you tell us from there if this is where you want the adblock to appear?

[PS] ooops, Ignore my Doctype & headers, I know it's not the same as Drupals, but I copied and pasted and it shouldn't matter anyway

[ergophobe]

What theme and plugins are you using?

By the way, here's how I typically troubleshoot a layout problem in Drupal (or Wordpress or any other dynamic site) that has me tearing my hair out.

1. Generate a page that's causing you problems.
2. Save the complete page, images and everything.
3. Open the static, saved page in your browser and in your text editor.
4. Start deleting anything non-essential for layout such as long sections of text and any CSS rules that are not controlling layout (so basically any rules, with a width, height, float, margin, etc).
5. When you have the page looking fairly simple but still having the original layout issue, start commenting out, not deleting block-level elements and CSS rules that affect layout.
6. When the problem disappears, you know in the simplest case what's causing it. Now go back to the dynamic script to see where it's being generated.

The CSS and HTML in most drupal themes is horribly bloated and it makes it rather hard to troubleshoot a really bad layout issue by editing the theme itself.

A couple more tips

1. Get Aardvark for Firefox. This will help you see how your block-level elements interact.

2. Try giving some elements borders or background color to see how big they really are.

3. Use inline CSS where possible to troubleshoot because you know it will override any other rules applied to an element and it won't get cached by the browser.

4. Keep renaming files as you change them if you make progress so that you can get back to a known point and not need to start over.

[swa66]

2. Try giving some elements borders or background color to see how big they really are

I'd go for backgrounds only, do not add borders as they will a.o. change the size of the block changing all sorts of space issues.

[rpb161]

thanks for all the advice...after i get done with my workout, i'm going to work on it and i'll let you know how my progress goes from there

[rpb161]

i couldn't really do my planned workout so i did some design work instead

SuzyUK, you're tip about the missing ">" fixed the background color problem in IE...something i thought i'd have to worry about later

now i have one problem to correct and i'll be good as gold...in the two div's after "<?php print $content ?>", if i place "below_content" below the first i have margins to the left and right of this block i can't seem to get rid off (probably inherited from the #primary), and the border up top has those margins as well and i wouldn't be able to place my smaller 1px border on the top

if i put it after the second div, the left sidebar starts directly across from this new block and leaves a large gap up top, i tried the "below_content" block with and without it floated to right with no luck...is there any way to move the left sidebar back up and not have the large gap there?

[SuzyUK]

i have margins to the left and right of this block i can't seem to get rid off (probably inherited from the #primary)..

I think it's more likely it's a default "block" setting, inherited from drupal or your theme's default CSS, so the blocks width of 100% is getting padding added onto it too maing it wider than 100% and pushing the content column too wide..

to try and help narrow this down.. it's this bit in page.tpl.php code that is important, only I've added in closing comments to show which div is actually being closed to try and help.

...
<div class="drdot"><hr /></div>

<?php print $content ?>
<!-- close singlepage--></div>

<?php if ($below_content): ?>
<div id="below_primary"><?php print $below_content ?></div>
<?php endif; ?>

<!-- close primary div--></div>
<!-- left -->
...

Leave the block before the second closing div

<!--//primary--></div>

. It's the primary div which is making your right(content) column, if you put it after that it will want to be in your left sidebar but isn't because it's not open yet, that's where the gap is coming from.

Not sure how best to help you track down which CSS the default or theme block CSS is likely to be in, but not sure it matters, - do you have the FF web dev bar or some other tool that can track the all the CSS that's applied to that specific div?

I think it's likely that it's the default "blockcontent" div or the <h2> that has padding applied by the theme itself, but I don't think you need your adblock floated, if not then you don't need to know it's specific width so.. perhaps easier.. what happens if you unfloat the

below_primary

div and remove the width altogether - add a temporary background color to this div too so if there's still gaps you can see if it's padding or margin.

#below_primary {
margin-bottom:5px;
margin-top: 50px; /* added as an example of spacing */
background: #fcf;
}

what happens?

[ergophobe]

I'd go for backgrounds only, do not add borders as they will a.o. change the size of the block changing all sorts of space issues.

True enough. By preference I used Aardvark. If it isn't clear, change the background.

Last resort is the border because, like you say, it changes the layout, but sometimes it does make things easier to see, especially if it's a border setting that's causing issues.

[swa66]

@ergophobe : Alternatively, use a browser that support outlines and use them instead of borders.

[rpb161]

it looks like to get what i want i'm gonna have to put a borderless, padding-less, and margin-lesscontainer around "primary" and "below_primary"

container will have to have the background color of everything else

"primary" will have to keep its attributes but have a margin on the bottom so the background color of container will show through

"below_primary" can then be styled as i need it

the first time i did this i got it how it wanted, but the font everywhere got messed up so i'm gonna try this again because i think i mgiht of but a div closing tag in the wrong spot

[rpb161]

THAT WORKED! I never thought I would get this work! Thanks for all the input...it is greatly appreciated!

[ergophobe]

@saw66: I confess ignorance... I don't know about outlines.

Aardvark puts an outline around elements when you hover over them, so that's what I usually use.