...

View Full Version : Can not change my css to make alignment correct on some div tags



CarlMartin10
08-20-2010, 05:44 AM
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

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

/** 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 **/

SB65
08-20-2010, 08:43 AM
Try reducing the width on #maintop .update to something like 238px.

CarlMartin10
08-20-2010, 11:08 AM
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

SB65
08-20-2010, 11:42 AM
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.

CarlMartin10
08-20-2010, 11:56 AM
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.

SB65
08-20-2010, 12:04 PM
Remove the height from #maintop .update

CarlMartin10
08-20-2010, 12:08 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum