Help needed with CSS for logo and background images
Posted: 12 July 2008 04:03 AM   [ Ignore ]
Newbie
Rank
Total Posts:  3
Joined  2008-07-12

Hi there,

Apologies if this may seem a very simple solution but I’m new to all this CSS stuff.

Originally, I had my logo and header as the same code:

body {
background:url(../images/s5_logo1.png) no-repeat top center;
font-family: Helvetica; }

But the middle of the website’s background I could only change the colour.  This meant that the background image I used for the header area didn’t blend very well.

So I changed the code and created a logo class if this is what you call it (this code I got through a tutorial)

body {
background:url(../images/s5_logo1.png) repeat top center;
font-family: Helvetica; }

a.logo {
width:510px; height:95px; float:left; background:url(../images/logo.png) no-repeat top center;
}

I then added in the index.php under the first line of code below.

<body <?php if($s5_body_color != “xxxxxx”) { ?>style=“background-color:#<?php echo $s5_body_color ?>”<?php } ?>>
 
<div id=“s5_outer”>
<div id=“s5_wrapper” style=“width:<?php echo $s5_body_width ?>px”>
<div id=“s5_header”>
<?php if(mosCountModules(‘banner’)) { ?>
<div id=“s5_banner_pos”>
<?php mosLoadModules ( ‘banner’, -1 ); ?>
</div>
<?php } ?>
</div>

I’m not sure whether this code is correct or positioned incorrectly but when I reduce my browser my banner on my header drops down.  It looks like when you resize the browser the background moves but the actual logo text doesn’t.

Could anyone please help me with this.  You can view my site at http://abcbabyland.com.

Really appreciated.

Wendy

Profile
 
 
Posted: 14 July 2008 06:09 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  10
Joined  2008-03-08

Did the problem get fixed?  I checked out your site and it looks fine to me.

Profile
 
 
Posted: 15 July 2008 01:37 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  3
Joined  2008-07-12

It looks fine if you have your browser at full page view but if you shrink the browser, the banner drops down.  I’m sure it has something to do with my logo being set to float left but I don’t know how to position the logo left without it moving.

Any ideas?

Thanks
Wendy

Profile
 
 
Posted: 16 July 2008 04:26 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  8
Joined  2008-07-16

your websites is rendered very slowly here, so i prefer not to open in again but what i might suggest:
the right logo drops because you’ve put the both before the content wrapper - ie. your content in centered in the browser with a fixed width - i guess 800px. You’ve put the logos before that content-wrapper.. so now they are rendered at the begging of the page - i.e. from left to right. When you shrink the browser there is no enough space for them to be on one line.. so the second one drops below. The solution:

put them both in the content wrapper ( or the header, no idea how it’s called in your case ). Make the both floated or absolute positioned, cause i see that their total width is longer than the content width so you’re gonna need negative margins or negative left: value. In any case, the first thing to do it to put the code in the content-wrapper, not before it..

Profile
 
 
Posted: 16 July 2008 07:28 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  3
Joined  2008-07-12

Hi SteeleR,

I’ve tried putting the code within the header but it didn’t work.

Would you be able to give me examples of codes with absolute positioning and negative margins.  I have no idea how to code, I’m using a ready made template.

Thanks
Wendy

Profile
 
 
Posted: 04 September 2008 05:33 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  1
Joined  2008-09-04

When you shrink the broser there is enough space for them to be on one line. so that second drops below. I am give one suggetion to you . Make the both floated are obsolute posiotioned in any case the first thing to do it put the code in the content wrapper.

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

duncon

Foreclosure Auctions

Profile