• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

moving divs down about 20px

hi guys,

I want to move down the footer.php about 20 px on my site piratescove.yourcitybeats.com as everything looks abit squashed at the moment?

How can i do that?
0
jonathanduane2010
Asked:
jonathanduane2010
  • 6
  • 5
  • 4
1 Solution
 
jonathanduane2010Author Commented:
here is css code if this helps

#foo_widget-2 { background: url("images/latest_news_bg.png") repeat scroll 0 0 transparent;
    border: 1px solid #444444;}
#text-3 { background: url("images/latest_news_bg.png") repeat scroll 0 0 transparent;
    border: 1px solid #444444;}
	height: 280px
#foo_widget-2 h2 { color: #8B210A;
    float: left;
   font-family: 'fjalla_oneregular';
    font-size: 16px;
    font-weight: 100;
    margin: 2px 5px;
    padding: 0;
    text-transform: uppercase;
    width: 99%;
}
#foo_widget-2 h2 a { color: #8B210A; text-decoration:none; font-family: 'fjalla_oneregular'; letter-spacing:0px; }
#foo_widget-2 h2 span { color: #389C1D;
    float: right;
    font-family: 'fjalla_oneregular';
    font-size: 14px;
    font-weight: 100;
    margin: 2px 5px;
    padding: 0;
    text-transform: uppercase; }
	#foo_widget-2 p { color: #444444;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    margin: 2px 5px;
    padding: 0;
	line-height:18px;
	}
.photos_videos {
    background: url("images/latest_news_bg.png") repeat scroll 0 0 transparent;
    border: 1px solid #444444;
    float: left;
    height: 280px;
    margin: 0;
    padding: 0;
    width: 344px;
	overflow:hidden;
	}	
.photos_videos h2 {
    color: #0A4A8B;
    font-family: 'fjalla_oneregular';
    font-size: 30px;
    margin: 3px 0px 7px 5px;
    padding: 0;
    text-transform: uppercase;
}	
.photos_videos img { width:326px; height:154px; margin-left:9px; }	

Open in new window

0
 
Alex_WCommented:
You can add a padding style to it, e.g.

<DIV style="padding-top: 20px;"> </DIV>
0
 
Alex_WCommented:
If your DIV has a class you can do it in your CSS:

.DIVClass
{
padding-top: 20px;
}

Or by the DIV's ID:

#DIVID
{
padding-top: 20px;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jonathanduane2010Author Commented:
ok i have tried adding the padding to it but no luck :(
0
 
Julian HansenCommented:
You have 28 errors on this page including a stray </div> tag - fix that first and you will probably find the margin-top setting for your footer will start working.
0
 
Julian HansenCommented:
You already have a margin-top set for the footer - but it is not pushing the main site up - probably because of the errors mentioned above. Run your page through and html Validator and fix the errors first
0
 
Alex_WCommented:
Can you post your HTML for the DIV you want to move?
0
 
jonathanduane2010Author Commented:
</div>
      <div class="photos_videos">   
       <h2>PHOTOS &amp; VIDEOS</h2>
      <div id="banner-fade">
        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
       <?php  query_posts("cat=4"); 
         while (have_posts()) : the_post(); ?>
         <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
        <li><a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" title="<?php the_title(); ?>"></a> </li>
         <?php endwhile;
	    wp_reset_query(); ?>
      
        </ul>
        <!-- end Basic jQuery Slider -->
      </div>  
     </div> <!-- #photos_videos -->  
    <div class="widget widget_foo_widget new1" id="foo_widget-2" >
    <h3>Latest News</h3>
   <?php query_posts("cat=3&showposts=3"); 
         while (have_posts()) : the_post();
		echo '<h2><a href="'.get_permalink().'">'.get_the_title().'</a><span>'.get_the_date('d-M-Y').'</span></h2>';
		echo '<p>'.substr(get_the_excerpt(),0,100).'...</p>';
		endwhile;
		wp_reset_query(); ?>
    </div>
   </div><!-- #content -->

Open in new window

0
 
Alex_WCommented:
Which DIV did you want to move down?  It it was foo_widget-2 then add the padding style to the setting for this in your CSS (on line 1 in your pasted CSS code).  Have you tried inspecting the DIV from the dev tools in a browser, like fire bug in fire fox?  You can insepct the CSS being applied and alter it at runtime to see the changes that take effect.
0
 
jonathanduane2010Author Commented:
its the two boxes labelled "photos & videos" and "latest news"
0
 
Julian HansenCommented:
Wrap those two divs in a container and give the container a margin-top of 20px;

.photo_news_container {
 margin-top: 20px;
}
<div class="photo_news_container">
<div class="photos_videos">   
       <h2>PHOTOS &amp; VIDEOS</h2>
      <div id="banner-fade">
        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
       <?php  query_posts("cat=4"); 
         while (have_posts()) : the_post(); ?>
         <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
        <li><a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" title="<?php the_title(); ?>"></a> </li>
         <?php endwhile;
	    wp_reset_query(); ?>
      
        </ul>
        <!-- end Basic jQuery Slider -->
      </div>  
     </div> <!-- #photos_videos -->  
    <div class="widget widget_foo_widget new1" id="foo_widget-2" >
    <h3>Latest News</h3>
   <?php query_posts("cat=3&showposts=3"); 
         while (have_posts()) : the_post();
		echo '<h2><a href="'.get_permalink().'">'.get_the_title().'</a><span>'.get_the_date('d-M-Y').'</span></h2>';
		echo '<p>'.substr(get_the_excerpt(),0,100).'...</p>';
		endwhile;
		wp_reset_query(); ?>
    </div>
</div>
   </div><!-- #content -->

Open in new window

0
 
jonathanduane2010Author Commented:
ok, i am an absolute idiot....

but i have tried that and the siite has gone all over the place

i have added the css above to my style.css

then i replaced my html with the html you posted?
0
 
Julian HansenCommented:
Ok don't do that - you posted incomplete code - I was giving you an idea of what you need to do not he actual solution.

Also, as per my earlier post you have an orphan </div> tag in your document which is going to cause problems.

Another option is to do this - add a margin bottom to this line.

<div class="box_row1" style="margin-bottom: 20px;">

Or add this to the box_row class on line 1796 of your style sheet
.box_row1 {
  float: left;
  height: auto;
  min-height: 522px;
  margin-bottom: 20px;
}

Open in new window

0
 
jonathanduane2010Author Commented:
thank you so much!

( i changed it to 30px) just to be sure  :)
0
 
Julian HansenCommented:
You are welcome - thanks for the points.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 6
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now