/    Sign up×
Community /Pin to ProfileBookmark

horizontal navigation – help

Copy linkTweet thisAlerts:
May 05.2008

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: [url]http://www.sitesbysarah.com/guru/guru.htm[/url]

Thanks for any help you can provide…

Sarb

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriMay 06.2008 — 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.
Copy linkTweet thisAlerts:
@sarbauthorMay 06.2008 — 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
Copy linkTweet thisAlerts:
@CentauriMay 06.2008 — 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>[/CODE]
Copy linkTweet thisAlerts:
@sarbauthorMay 06.2008 — 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).

[code=html]

<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>
[/code]

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
Copy linkTweet thisAlerts:
@CentauriMay 06.2008 — 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">
<[COLOR="Red"]font color="#b32811" size="1" face="Arial, Helvetica, sans-serif"><strong>*Required
Fields</strong></font> <br>
<br>[/COLOR]
<table class="style33">
<tr> [/CODE]

The right column is alos dropped in IE6 but not sure why yet - still trying to work out the unusual structure.
Copy linkTweet thisAlerts:
@CentauriMay 06.2008 — 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.
×

Success!

Help @sarb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...