...

View Full Version : logo left, ad right



giants10
04-04-2009, 02:43 AM
I'm having trouble putting my logo and advertisement side by side each other at the header
http://www.giantstalk.com

that is not my logo, but a sample, how can I adjust it so that my logo is shown, then the ad is placed right after near the edge?

heres the code:

<!-- BEGIN header -->
<div id="header">
</div>

average header file

my logo is logo.gif and I have a long advertisement code from Chitika

PitbullMean
04-04-2009, 03:09 AM
Your problem is the header is only 970px wide but your asking to put something that is 1046px wide. So you have 2 options

1 ) Increase the width of your Headr to 1046px

2 ) Shrink the width of the flash image or your logo.

Excavator
04-04-2009, 03:27 AM
Hello Giants10,
Your logo is 318px wide.
The ad seems to be 728px wide.
That's 1046px that your trying to squeeze into a 994px wide wrapper.

See box model (http://www.w3.org/TR/CSS2/box.html)here.

To put things side by side you would float one or both but they need to fit in their container.

PitbullMean
04-04-2009, 03:38 AM
LOL Excavator you just pretty much repeated what i just said.

giants10
04-04-2009, 05:14 AM
thank you so far, ive changed to a smaller sample logo, but it still appears to overlap and i dont know how to fix it.

once again, http://www.giantstalk.com

here is the code i have:

<!-- BEGIN header -->
<div id="header">
<div align="left"><img src="http://www.paranormalknowledge.com/photos/logo.gif">
</div>
(Chitika Ad Code)
</div>
<!-- END header -->

Excavator
04-04-2009, 07:59 AM
giants10, add this to your CSS and you'll have a start -

#header img {
width: 259px;
float: left;
}
#ch_ad274 {
margin: 0 0 0 259px;
}

You're still too wide though. Your image and ad together add up to 987px now. You're #header is only 970px wide.

giants10
04-04-2009, 06:23 PM
ok, i added the code you said to the css and it still comes up big and out of place, i also cut the logo in half just to test it out

http://www.giantstalk.com

giants10
04-04-2009, 06:31 PM
ok i took it down but if you were given this code

<!-- BEGIN header -->
<div id="header">
</div>
<!-- END header -->

how would you code it to add your logo to the left and advertisement on the right

Excavator
04-04-2009, 06:33 PM
Hello giants10,
#header is empty in the online version. Can you update that so we can see what you've got?

Excavator
04-04-2009, 06:38 PM
ok i took it down but if you were given this code

<!-- BEGIN header -->
<div id="header">
</div>
<!-- END header -->

how would you code it to add your logo to the left and advertisement on the right

Have a look at the header on this site - http://nopeople.com/agua/

giants10
04-04-2009, 07:04 PM
thanks for the link, i used the code and placed this into the website

<!-- BEGIN header -->
<div id="header">
<img src="http://www.paranormalknowledge.com/photos/logo.gif" alt="logo" width="124" height="44" id="logo" />
<Chitika Ad Code>
</div>
<!-- END header -->

http://www.giantstalk.com, however, how can i get the image to be on the left and teh ad on the right to finish it?

Excavator
04-04-2009, 08:04 PM
In that example I linked you to, the two images have id's (id="logo" and id="anim_gif" ). Those id's are styled in the linked CSS (http://www.w3.org/TR/REC-html40/present/styles.html)like this -

#logo {
float: left;
margin: 20px 0 0 10px;
}
#anim_gif {
float: right;
margin: 20px 10px 0 0;
}
It would have been easier for you if I'd pointed out where the CSS file was for you. You can see it at http://nopeople.com/agua/global_agua.css

====================

If your using FireFox you should get firebug (http://getfirebug.com/), it will really help you a LOT. You would have easily seen the CSS right away with it.

====================

You have some things in your CSS that are not in your markup
#header h1 {
float: left;
font-size: 0;
padding: 36px 24px 0;
}
#header h1 a {
display: block;
outline: none;
text-indent: -9999px;
width: 286px; height: 32px;
background: url(images/logo.gif) no-repeat 0 0;
}
#header .ad468x60 {
float: right;
padding: 22px 20px 0;
}

And some things in your markup that you are not styling in your CSS - #logo and #ch_ad534

---->Try making your CSS look like this -

/** BEGIN header **/
#header {
height: 104px;
}
#logo {
float: left;
}
#ch_ad534 {
float: right;
}/** END header **/

/** BEGIN body **/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum