SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    Provo, UT
    Posts
    844
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    New beginner CSS woes - need help

    Here is my test project:

    http://www.oil-testimonials.com/newV...l.php?tID=6995

    Here are my questions:

    1. 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?

    2. 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?

    3. 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:

    http://www.oil-testimonials.com/newV...textStyles.php

    Thanks!
    Convert your dollars into silver coins. www.convert2silver.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by busboy View Post
    Here is my test project:

    http://www.oil-testimonials.com/newV...l.php?tID=6995

    Here are my questions:

    1. 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?
    First of all, let me show you something. You have all this above the doctype. Invalid (and also the problem, as I'll explain)
    Code:
    
    
    
    
    
    
    
    
    		<!-- 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?
    2. 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

    3. 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:

    http://www.oil-testimonials.com/newV...textStyles.php

    Thanks!
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    Provo, UT
    Posts
    844
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Like this? Because it's not working, even after I cleared cache:

    .box.full{
    clear:both;
    width:640px;
    margin-left:0px !important;
    margin-right:0px !important;
    display:block;
    float:none !important;


    }
    Convert your dollars into silver coins. www.convert2silver.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well the page you linekd to in your first post isn't loading so I can't check what went wrong .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    Provo, UT
    Posts
    844
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Convert your dollars into silver coins. www.convert2silver.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •