Any ideas on how I can keep this logo the same on any monitor?

[mazman13]

This logo moves from left side to center on different monitor sizes. Any ideas?

 

http://bouncehousebuddies.net/newer/

 

 

[Maq]

Hmm looks centered to me both on a 20" and 17".  I'm not even sure what exactly you mean, maybe a screen shot?

 

Those ball creatures are scary...

[TheFilmGod]

Those ball creatures are scary...

 

I disagree. They're not exactly "cute" but they aren't scary either.

[Maq]

Those ball creatures are scary...

 

I disagree. They're not exactly "cute" but they aren't scary either.

 

Ok, maybe not scary, but a bit creepy.  Like the meatball in aqua teen hunger force.

[jlhaslip]

The Logo is positioned using position:absolute, so it will not centre properly.

 

Look at using margin: 0 auto; to centre the Logo.

[dbrimlow]

This is a good example why beginners to css should avoid using position:absolute and position:relative.

 

HOWEVER, this specific instance is one of the very few circumstances where position:absolute is actually the right tool for the desired layout effect - when used in proper conjunction with a parent block that is position:relative.

 

The key is to make it use "left:0" as positioned relative to the centered container and NOT "left: 225px;" as  currently positioned relative to the browser window. Play around with placing it in the centered block (div) and tweak the top/left elements.

 

<div id="wrapper">

<div id="header">

<div id="title"><p>Serving the DFW Area</p></div>
</div>

<div id="navbar">
<a href="index.php"><img src="images/links/home.gif" /></a> 
<a href="index.php"><img src="images/links/houses.gif" /></a> 
<a href="index.php?p=faq"><img src="images/links/faqs.gif" /></a> 
<a href="index.php?p=rules"><img src="images/links/rules.gif" /></a> 
</div>

<div id="content">
<div id="main_logo">
<img src="images/main_logo.png" />
</div>
<div id="main_left">
<p>We bring the party to you! Bounce House Buddies, are a family owned and operated business. We operate out of Arlington, Texas. Bouncehouses are great for parties, family reunions, advertisement, backyard BBQs, and anytime kids are in need of a great time!</p>

<p>Our goal is to provide safe quality equipment, clean and sanitized equipment, deliveries to be on time for the party or event, and the absolute best customer service.</p>


<p>We offer fair and competitive pricing. We realize how important your party or event is to you and strive to provide the best service and equipment at the most reasonable price.</p>


<p>Your safety is our number one priority. We go over all safety procedures at the time of every delivery. Our equipment is commercial grade material with a superior design that was carefully engineered with added safety features.</p>
</div>

 

When finished with this particular page, forget you ever used position:relative and position:absolute and learn to use floats properly.

 

If not, you will be tempted to try using it for other wire-frame page layouts and that's a path for suckers (because it is not flexible and will blow up depending upon browser/resolution other than yours)

 

[mazman13]

Cool. Thanks guys. Yeah they arn;t my favorite ball creatures. lol

 

The logo should be to the left and almost come off the page.

 

Depending on monitor res. it moves from the left to the center.

 

I guess keeping them in one spot no matter what red, is what I'm looking for.

Thanks

[noober]

Put your logo in your wrapper. I would position it, but alternatively, I'm sure you could float it left if you wanted to.