Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Can not change my css to make alignment correct on some div tags

    ok, at the top of my page, there is an area that is called #maintop in the css. I am trying to get the scrolling text to fit into the box in the background, stopping in the center (vertically an horizontally), and entering and exiting at the edges of the box. Can anyone help me get this to happen?

    www.billboardfamily.com

    HTML
    Code:
    <?php include("header.php"); ?>
    
    
    <div id="maintop">
    	<div class="border">
    	
    	
    	<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/largedots.png" alt="Welcome To The Billboard Family Online!" />
    
    	</div>
    
    <div class="columns">
    	<div class="welcome">
    	<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/welcome.png" alt="Welcome To The Billboard Family Online!" />
    
    	<p>We are <span style="color: #00afef;"><strong>The Billboard Family</strong></span> -- a REAL family of 4 (with one on the way) who wears YOUR COMPANY SHIRTS all day long, taking loads of photos and videos. We then promote your company online on Facebook, Twitter, Flickr, YouTube, and our Website, as well as to all of the many people who ask us why we are all wearing the same shirts :). We live in the St. Louis, Missouri area, but we travel and take vacations frequently. Some of the places we travel to include Chicago, IL, Seattle, WA, Walt Disney World™ Orlando, FL, and the Southern Illinois University (SIU) area in Illinois. We have plans to travel much more in the near future.</p>
    
    
    	</div>
    
    <div class="welcomeimage">
    <img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/main_photo.png" alt="Welcome To The Billboard Family Online!" />
    
    </div>
    
    <div class="update">
    <?php if (function_exists (gAnnouncement)) gAnnouncement(); ?> 
    </div>
    
    </div>
    
    <div class="border">
    	
    	<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/largedots.png" alt="Welcome To The Billboard Family Online!" />
    
    	</div>
    
    </div>
    
    <div style="clear">&nbsp;</div>
    
    <?php include ('sidebar_index.php'); ?>
    
    <!-- BEGIN content -->
    <div id="content" style="margin-top: 10px;">
    	
    	<div class="post"><?php
     $lastposts = get_posts('numberposts=1&category=6');
     foreach($lastposts as $post) :
        setup_postdata($post);
     ?>
     <h2><a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h2>
     <?php the_content(); ?>
     <?php endforeach; ?>
    	</div>
    	
    </div>
    <!-- END content -->
    
    <?php get_footer(); ?>
    CSS
    Code:
    /** BEGIN index top **/
    
    	#maintop {
    		background: url("../images/maintop_bg.png") no-repeat transparent;
    		float: left;
    		font-family: Arial;
    		height: 200px;
    		width: 1000px;
    	}
    	#maintop .border {
    		background: url("../images/largedots.png") repeat-x bottom transparent;
    	}
    	#maintop .welcome {
    		float: left;
    		font-size: 15px;
    		padding: 7px 0 10px 3px;
    		width: 495px;
    	}
    	#maintop .welcome p {
    		padding-top: 10px;
    	}
    	#maintop .welcomeimage {
    		display: inline;
    		padding-left: 5px;
    	}
    	#maintop .welcomeimage {
    		display: inline;
    		float: left;
    		padding-left: 5px;
    		padding-top: 12px;
    	}
    	#maintop .update {		
    		float: right;
    		height: 200px;
    		padding-left: 13px;
    		padding-top: 20px;
    		width: 260px;
    		overflow: visible;
    	}
    	#maintop .update a {
    		color: #00AFEF;
    	}
    	#maintop .update a:hover {
    		color: #00AFEF;
    	}
    
    /** END index top **/
    Last edited by CarlMartin10; 08-20-2010 at 04:47 AM.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Try reducing the width on #maintop .update to something like 238px.

  • Users who have thanked SB65 for this post:

    CarlMartin10 (08-20-2010)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Try reducing the width on #maintop .update to something like 238px.

    That was the first thing I tried.....That works for the alignment issue ..... BUT, it also causes the bottom <div class="border"> to move away....up to the top of #maintop, as you can see:

    www.billboardfamily.com
    Last edited by CarlMartin10; 08-20-2010 at 10:13 AM.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    That's because all the elements within your div class=columns are floated, so the element has no height unless you clear the floats at the end of the div. Adding clear:both to #maintop .border should sort that.

  • Users who have thanked SB65 for this post:

    CarlMartin10 (08-20-2010)

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    That's because all the elements within your div class=columns are floated, so the element has no height unless you clear the floats at the end of the div. Adding clear:both to #maintop .border should sort that.
    Well, thanks, that is getting closer. Before I originally posted this question, that <div class"border"> at the bottom was actually touching the graphic in #maintop .welcomeimage, which is exactly what I wanted it to do, and this also made good space between the bottom of the border and the rest of the page.

    I think if I can get this to be right...the rest of the page should be much easier, lol.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Remove the height from #maintop .update

  • Users who have thanked SB65 for this post:

    CarlMartin10 (08-20-2010)

  • #7
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Remove the height from #maintop .update

    duh...what was I thinking ... I have been looking at the code for this site all day, I need a break, I guess. I was working on this sliding menu for hours and I could not get it right ... I am gonna need massive help with that, I guess I will come back here if I absolutely can not get it to work right. Thanks!
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)


  •  

    Posting Permissions

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