SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flash banner & text not positioning

    It's been a while since I've coded, I apologize for my ignorance, I am a bit rusty. I am rebuilding this website, link, and I have run into a few problems. I use this website as a template.

    Here is the link to the site with the problems: link

    I can't get the text in #content to align equally on both sides? I have tried increasing the padding-right and margin-right and I have had no luck. I even tried messing around with overflow: and I had no success.

    Also, I tried placing the flash banner in the <h1> header, but I can't get it to work? I have very little knowledge with flash. I had a friend build this for me a few years ago. The banner also seems to be displaying padding and/or margin on the bottom. I can't remove the small space beneath the flash banner?

    Any help is greatly appreciated!

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    #pageWrapper and #content both have a fixed width of 750px. The 20px horizontal margin applied to #content forces it 20px to the right, causing it to spill out of #pageWrapper. As the text color is black, and #content has no background, the spilled content blends into the black part of the body background image.

    Remove the margin from #content. To provide space to the left and right, add horizontal padding to #content or margins on the individual children i.e. p and h3.

    Also remove the following rule, which is redundant. If you find it necessary to use a hasLayout trigger on #content, use zoom:1; instead.
    Code CSS:
    h1, #content {
        width:750px; /* trip haslayout */
        margin-left:0px;
    }

    For the gap below the Flash, you could add:
    Code CSS:
    embed {
        vertical-align: bottom;
    }

    If this adversely affects other embedded elements, you'll need to find how to apply a class to this particular one. I'm not very familiar with Flash and this seems to rely upon javascript to generate the necessary code.

  3. #3
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    #pageWrapper and #content both have a fixed width of 750px. The 20px horizontal margin applied to #content forces it 20px to the right, causing it to spill out of #pageWrapper. As the text color is black, and #content has no background, the spilled content blends into the black part of the body background image.

    Remove the margin from #content. To provide space to the left and right, add horizontal padding to #content or margins on the individual children i.e. p and h3.

    Also remove the following rule, which is redundant. If you find it necessary to use a hasLayout trigger on #content, use zoom:1; instead.
    Code CSS:
    h1, #content {
        width:750px; /* trip haslayout */
        margin-left:0px;
    }

    For the gap below the Flash, you could add:
    Code CSS:
    embed {
        vertical-align: bottom;
    }

    If this adversely affects other embedded elements, you'll need to find how to apply a class to this particular one. I'm not very familiar with Flash and this seems to rely upon javascript to generate the necessary code.
    Thank you so much, that worked great! I have one more question. Is it possible to place the flash banner in an <h1> tag?

  4. #4
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just opened the page in IE and the flash banner does not appear? I tried this conditional statement but had no luck.

    Code:
    <!--[if IE]>
    	<div>
    		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="750" height="200">
    		<param name="movie" value="btc_banner.swf" />
    		<param name="quality" value="high" />
    		<embed src="btc_banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="750" height="200"></embed>
    		</object>
    	</div>
    <![endif]-->
    Any help is appreciated it!


Bookmarks

Posting Permissions

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