Right when the page loads you will see, for a split second, the brown navbar on the left side of the page. Then it disappears. If you maximize you web browser you will see a small portion of it. Does anyone know why this is happening?
The disclaimer paragraph at the bottom is using a class that spans the width of the white area, yet it’s showing up under my google ads. Any idea why?
What is the easiest way to center the class that the google as are in? I tried adding align:center; in the CSS but to no avail.
To see a normal working page in the same project, try using this URL. You will see the left navbar better:
First of all, let me show you something. You have all this above the doctype. Invalid (and also the problem, as I’ll explain)
<!-- sidebar -->
<div id="sidebar">
<div class="sidebar_top"></div><!-- curv for sidebar top -->
<!-- sidebar contents -->
<div class="sidebar_content">
<!-- logo -->
<div id="logo">
<a href="" title="RT-Theme 15"><img src="images/logo.png" alt="RT-Theme 15" class="png" /></a>
</div>
<!-- / end logo -->
<div class="clear"></div>
<!-- Navigation -->
<div id="navigation">
<ul>
<li class="current_page_item first"><a href="index.php">Home</a></li>
<li><a href="#">Testimonials</a>
<!-- secend level sub menu -->
<ul class="sub-menu">
<li><a href="myTestimonial.php">Basic search</a></li>
<li><a href="myTestimonial.php">Advanced search</a></li>
<li><a href="myTestimonial.php">Most recent</a></li>
<li><a href="myTestimonial.php">Most popular</a></li>
<li><a href="three-columns-portfolio.php">3 columns</a></li>
</ul>
<!-- / secend level sub menu -->
</li>
<li><a href="#">Oilers</a>
<!-- secend level sub menu -->
<ul class="sub-menu">
<li><a href="two-columns-portfolio.php">In my area</a></li>
<li><a href="three-columns-portfolio.php">With professional skills</a></li>
</ul>
<!-- / secend level sub menu -->
</li>
<li><a href="#">My Account</a>
<!-- secend level sub menu -->
<ul class="sub-menu">
<li><a href="two-columns-portfolio.php">Upgrade to silver or gold</a></li>
<li><a href="three-columns-portfolio.php">Edit personal info</a></li>
<li><a href="three-columns-portfolio.php">Add my first testimonial</a></li>
<li><a href="three-columns-portfolio.php">My searches</a></li>
<li><a href="three-columns-portfolio.php">My favorites</a></li>
<li><a href="three-columns-portfolio.php">My referrals</a></li>
<li><a href="three-columns-portfolio.php">My oilers</a></li>
<li><a href="three-columns-portfolio.php">Logout</a></li>
</ul>
<!-- / secend level sub menu -->
</li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="faq.php">FAQ</a></li>
</ul>
</li>
</ul>
<!-- first level sub menu -->
</li>
</div>
<!-- / Navigation -->
<!-- Contact Info Widget -->
<div class="box widget">
<!-- widget title-->
<h4>My Personal Guide</h4>
<!-- info list -->
<ul class="contact_list">
<li class="home"> </li>
<li class="phone"> </li>
<li class="help"><a href="mailto:support@company.com">Send Email</a></li>
</ul>
</div>
<!-- / Contact Info Widget -->
<!-- Twitter Feeds Widget -->
<div class="box dynamic_sidebar widget">
<!-- widget title-->
<h4>Twitter Feed</h4>
<!-- tweet list-->
<div class="tweet_list"></div>
</div>
<!-- / Twitter Feeds Widget -->
<!-- Social Media Icons -->
<div class="box">
<ul class="social_media_icons">
<li><a href="RSS link" class="j_ttip" title="RSS"><img src="images/assets/social_media/icon-rss.png" alt="" /></a></li>
<li><a href="mailto:info@conpany.com" class="j_ttip" title="Email"><img src="images/assets/social_media/icon-email.png" alt="" /></a></li>
<li><a href="Twitter link" class="j_ttip" title="Twitter"><img src="images/assets/social_media/icon-twitter.png" alt="" /></a></li>
<li><a href="Flickr link" class="j_ttip" title="Flickr"><img src="images/assets/social_media/icon-flickr.png" alt="" /></a></li>
<li><a href="Facebook link" class="j_ttip" title="Facebook"><img src="images/assets/social_media/icon-facebook.png" alt="" /></a></li>
</ul>
</div>
<!-- / Social Media Icons -->
<div class="clear"></div>
</div>
<!--/ end div .sidebar contents -->
<div class="sidebar_bottom"></div><!-- curv for sidebar bottom -->
</div>
<!--/ end div #sidebar -->
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
Since hte sidebar is loaded first in the HTML, that’s what’s shown first. It’s just as simple as that. It’s not really a big deal, but if you want you could just switch up the HTML order to have the background stuff appear first in the HTML :). Is nothing of the sidebar supposed to be showing?
The disclaimer paragraph at the bottom is using a class that spans the width of the white area, yet it’s showing up under my google ads. Any idea why?
Well it’s showing up under the google ads because since both the ads box and the left c ontent box are floated, it’s just snagging onto the floats :). You need to clear it. Add clear:both to that disclaimer div. That has it displaying below everything
What is the easiest way to center the class that the google as are in? I tried adding align:center; in the CSS but to no avail.
Yes I saw that you had that. There is no property align: in CSS. This isn’t HTML busboy ;). Make it text-align:center;. That centers the ads
To see a normal working page in the same project, try using this URL. You will see the left navbar better:
You changed the HTML. The disclaimer and the text for the disclaimer have no parent div or anything like it did before. Why did you mess with the HTML? Were you trying to get it valid?
RIght now, to fix it. If you put your <h3> disclaimer along with the <i> text AFTER your clearing div (the class=“clear” one), it will work. The clear div is right after the italic text. Not that far after.
The clearing div can act as a clearing mechanism between the flaoted sidebars and the disclaimer :).