Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help needed with CSS for logo and background images

    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

  • #2
    New Coder
    Join Date
    Jan 2008
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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..

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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:
    Code:
    <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:
    Code:
    <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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •