www.webdeveloper.com
Results 1 to 7 of 7

Thread: horizontal navigation - help

  1. #1
    Join Date
    Feb 2005
    Posts
    76

    horizontal navigation - help

    Hi,

    I have set up a web page with 3 columns using css.

    I am trying to place the horizontal navigation bar in the header, but am unable to get it to line up where I want it. I am using a float, but am wondering if absolute positioning wouldn't be better. I've been trying a lot of tweeks (changing margins and paddings) to get it to sit right with no luck. When I do finally get it to sit in the proper place, then the 3 column layout gets completely thrown out of kilter in Firefox. It looks fine in IE. I'm not quite sure why it throws the rest of the layout in FF when I am messing with just the header.

    Link to page: http://www.sitesbysarah.com/guru/guru.htm




    Thanks for any help you can provide...

    Sarb

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Firstly, I would suggest you validate the page - there are a few errors there. Something on that page causes my Firefox to lock up before I can do much - I think it is something to do with the embedded movie - I would suggest swfobject to implement this better.

    What I did see though, was a bottom margin on the <a> elements causing the <li>s to hang out the bottom of the menu, and the floated #leftcol gets caught on this.

  3. #3
    Join Date
    Feb 2005
    Posts
    76
    Hi Centauri,

    I changed the <a> tag padding and that fixed the problem. Thank you. I tried just about everything else but that. Didn't realize that would cause a problem.

    That's weird about the video freezing up your computer. My friend, who I'm doing the site for, asked me to embed the Windows Media Player as he thinks it would be assessible to the most people. I really never work with videos so don't have an opinion one way or the other. If I use the flash player you mentioned, is there a chance some people would not have a flash player downloaded to see the video?

    Thanks,
    Sarah

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Sorry, though it was a flash movie at first. Try embedding using this code:
    Code:
    <object id="MediaPlayer" data="video/MyMovie.wmv" type="video/x-ms-wmv" 
           width="192" height="190">
           <param name="ShowStatusBar" value="0">
           <param name="src" value="video/MyMovie.wmv">
           <param name="autostart" value="1">
           <param name="ShowControls" value="1">
           <param name="ShowDisplay" value="0">
    </object>

  5. #5
    Join Date
    Feb 2005
    Posts
    76
    Hi Centauri,

    I embedded the code you attached. Can you try viewing it now on your browser to see if it still causes things to freeze up?

    Also, I noticed in the code you attached that it was minus the following code (this is the origininal code I used, the web page has been revised with your code).

    HTML Code:
      <OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
    STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" >
                  <PARAM NAME="FileName" VALUE="video/MyMovie.wmv">
                  <PARAM name="ShowControls" VALUE="true">
                  <param name="ShowStatusBar" value="false">
                  <PARAM name="ShowDisplay" VALUE="false">
                  <PARAM name="autostart" VALUE="true">
                  [COLOR="Red"]<EMBED TYPE="application/x-mplayer2" SRC="video/MyMovie.wmv" NAME="MediaPlayer"
    WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="1"> 
                  </EMBED>[/COLOR] </OBJECT>
    When I scanned the internet for help on embedding video, most of them included the portion that I put in red (at least I hope it appears in red). I didn't see this in the code you provided. Is it necessary to include that?

    When I uploaded the revision, it seemed to play ok with out it, but wanted your advice...

    http://www.sitesbysarah.com/guru/guru.htm

    Thanks,
    Sarah

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The embed section is not needed, and is invalid code anyway. Something still causes slow load time in FF and conficts with the Web Developer Toolbar. I note that the imroperly nested <font> tag in the table that the validator throws up is still there, and that may be the cause - the only things can be directly in a table is <th>,<tr>, <td> tags, not <font>. Move that outside the table :
    Code:
    <input name="requiredfields" type="hidden" id="requiredfields" value="Name,Email1">
                  <font color="#b32811" size="1" face="Arial, Helvetica, sans-serif"><strong>*Required 
                  Fields</strong></font> <br>
                  <br>
                <table class="style33">
                  <tr>
    The right column is alos dropped in IE6 but not sure why yet - still trying to work out the unusual structure.

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Found another couple of things that cause issues in IE6, due to it not respecting set widths, and not allowing content to overhang containers. The width of #welcome_box at 165px wide is too wide to fit inside #leftcol - remove the width and negative margin. Also #video_box p is too wide to fit into #video_box. Reduce the width of #video_box p to 280px.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles