...

View Full Version : Help needed with CSS for logo and background images



wmakara
07-14-2008, 04:42 AM
Hi there,

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

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 ie. <a href="./index.html" class="logo"></a>.

<body <?php if($s5_body_color != "xxxxxx") { ?>style="background-color:#<?php echo $s5_body_color ?>"<?php } ?>>
<a href="./index.html" class="logo"></a>
<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

ratareina
07-14-2008, 08:08 AM
If I understand your problem correctly, the problem should be found here:

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

your logo is floated at the left; this is causing it to float at the left of the browser window, no matter what its size. Floating doesnt always work this way, but because of some other styles in your site, that is what the float is doing. Whatever element your logo is inside of is where the root of the problem should lie. For example, if the logo is inside of a header, then the width of the header is probably what is causing this effect. I'm not sure though..you would have to show the css file. I dont see a problem with how it looks now though..

wmakara
07-15-2008, 04:44 AM
Hi Ratareina,

The CSS bit that the logo fits into is the code above a.logo - the code that starts with body }. The template has been created with the header area as body which I think isn't very logical.

How can I position the logo to the left without it moving.

At the moment if your browser is at full page then it looks fine but if you shrink down your browser then you'll see how the banner drops.

Thanks for your help.
Wendy

harbingerOTV
07-15-2008, 05:59 PM
Hey Wendy,

you need to move the line <a href="./index.html" class="logo"></a> to be inside the <div id="s5_header"> div in your HTML.

like change this:


<a href="./index.html" class="logo"></a>
<div id="s5_outer">
<div id="s5_wrapper" style="width:900px">
<div id="s5_header">
<div id="s5_banner_pos">
<a href="index.php?option=com_banners&amp;task=click&amp;bid=2" target="_blank"><img src="http://www.abcbabyland.com/images/banners/osmbanner2.png" border="0" alt="Advertisement" /></a> </div>

</div>


to look like this:



<div id="s5_outer">
<div id="s5_wrapper" style="width:900px">
<div id="s5_header">
<a href="./index.html" class="logo"></a>
<div id="s5_banner_pos">
<a href="index.php?option=com_banners&amp;task=click&amp;bid=2" target="_blank"><img src="http://www.abcbabyland.com/images/banners/osmbanner2.png" border="0" alt="Advertisement" /></a> </div>

</div>


Since you logo is inside a div without a fixed with currently, it's placing itself to the top left corner of a div that will always be 100% of the screen. By placing it inside a div that has a with set at 900px this should fix it.

wmakara
07-16-2008, 04:13 AM
Hi HarbingerOTV,

Unfortunately, that didn't work. The banner position moved downwards straightaway even when the browser was at 100%.

Any more ideas greatly appreciated.

Thanks
Wendy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum