SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image liked to flash include

    I have a div with a background image repeat-y
    Code:
    #mainContent {
               background: #000000 url(../img/solutions_mid.png) top left repeat-y;
    	width: 950px;
    	padding: 0;
    	margin: 0;
    	padding-left: 28px;
    	}
    and three divs inside that div

    Code:
    #wording1 {
    	position: relative;
    	float: left;
       width: 320px;
    	padding: 0;
    	margin: 0;
    	padding-top: 10px;
    	}
    
    #wording2 {
    	position: relative;
    	float: left;
       width: 320px;
    	padding: 0;
    	margin: 0;
    	padding-top: 10px;
    	margin-left: 10px;
    	}
    
    #flashNavi {
    	position: relative;
               height: 100%;
    	padding: 0;
    	margin: 0;
    	padding-top: 5px;
    	margin-left: 10px;
    	}
    in the flashNavi div I have a flash include.
    the effect is to have a three column layout with text in the first two columns and a vertical flash navigation bar in the third.

    The problem is that the backgrond image won't streach all the way down to the bottom of the mainContent div. It will only go as far down as the the flash navigation is tall. if I display none to the flashNavi div the background disapears all together.

    How is this possible? I've checked it on Firefox Safari and Opera

    here is the html.

    Code:
    <div id="mainContent">
      <img src="../img/title.png" alt="#" />
    				
      <div id="wording1">
        <h2>Text</h2><hr />
        <p>Long text</p>
      
      <div id="wording2">
        <h2>text</h2><hr />
        <p><img src="../img/sm_icon_portal.png">Long Text</p>
      </div>
    				
      <div id="flashNavi">
        <!--[if IE]><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"	width="214" height="360"><script>/*<![endif]-->
        <object type="application/x-shockwave-flash" data="../flash/navi_functions.swf" width="214" height="360"><script type="text/javascript">/**/</script>
          <param name="movie" value="../flash/navi_functions.swf" />
        </object>
      </div>
    </div>
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  2. #2
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this is not a problem with the flash include because if I use the standard flash include I get the same results.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  3. #3
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay I figured out that it's the float: left; aplied to the three inside div's.
    For some reason the browser won't place them inside the containing div if they have that float: left; applied. I found out by putting a border on the mainContent and saw that it was not surrounding any of the divs. but it surrounded the image at the top. So I started taking out styles one by one to see what would happen and sure enpugh when I remove the floats they move inside the border.

    the problem is that I need them to be side by side and not vertical. So I tried display: block inline; and nothing. So now i'm stuck. I've never encountered this before.

    Does this mean that there is no way to place divs inside divs and float them?
    Do I have to convert them to spans? Surely someone has had this problem before. I feel like I'm missing an important CSS Rule or something.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  4. #4
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried turning the divs into spans but that didn't work because now the p tags are not placing inside the spans. Is there anyone who has dealt with this?

    I'm not bumping myslef. I just thought I'd update what I've figured out in case anyone else has the same problem later.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you're probably after a solution known as faux columns

    http://www.alistapart.com/articles/fauxcolumns/

    However, in your initial post the words "flash navigation" rung alarm bells.

    1 - How are people without flash going to navigate your site?

    2 - Search engines cannot follow flash links so how will you ensure that your pages are indexed?

    3 - Flash files are generally larger so how will you ensure that the navigation loads quickly for users on broadband?

    4 - How will you ensure that users that rely on screenreaders have access to your content?

    Flash has it's uses and hopefully you'll have considered these options but for critical functionality you should always ensure that a site works with just HTML. Then add CSS for presentation and then any JavaScript, Flash or other plugins to enhance the behviour.

    Hope this helps.

  6. #6
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added the same links at the top in html. The flash is just for vistors to find the links that are directly related to the current page.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com


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
  •