HTMLHelp Forums > Help with header/navigation

Full Version: Help with header/navigation

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

Steve Yelle

Dec 14 2008, 09:38 AM

Hey guys,

I am having some serious problems with my header and they are kind of driving me crazy. I have 3 issues. Check out the image below (code is at bottom). (1 shows Firefox, 2 shows IE, and Overview is just there for you to get some perspective)

IPB Image

First issue: I would like for the links ("concert photography" and "portraits") to be along the bottom edge of the header. It is already aligned left, so how do I do that?

Second issue: My CSS stylesheet is applying to the image, too. It put a border on that picture and applied my text rollover links to it (it is a link to the homepage). How can I get rid of this stuff?

Third issue: The disparity between IE and Firefox. Ugh. I don't even know where to start with this. There is a huge space between the edge of the image/text and the end of the header.

Thanks guys. I appreciate it. Here's the code:

CODE

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Frank Joseph Chapman Presents</title>

<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }

    #flashcontent {
        width: 100%;
        height: 600px;
    }
    /* end hide */

    body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #181818;
        color:#ffffff;
        font-family:verdana;
        font-size:13;
    }

    a {    text-decoration: none;
        color:#cccccc;
    }

A:link    { color: #888989 }
A:active  { color: #888989 }
A:visited { color: #888989 }
A:hover   { color: white }

    #header {
        text-align: left;
        background-color: #313131;
        width: 100%;
        height: 40px;
        padding: 3px 0 3px 0;


    }

    #footer {
        text-align: center;
        background-color: #313131;
        color:#FFFFFF;
        width: 100%;
        height: 20px;
        padding: 10px 0 10px 0;
    }
</style>
</head>
<body>
    <div id="header" >

<a href=../index.html><img src=Lsmall.jpg ALIGN=LEFT></img></a><a href="work.html">concert photography</a>   <a href="work2.html">portraits</a></p>

    </div>
div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
    <script type="text/javascript">

        var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");

        fo.write("flashcontent");
    </script>

    <div id="footer">All content Copyright 2008, Joseph Chapman.</div>
</body>
</html>

Darin McGrew

Dec 14 2008, 01:03 PM

Please see the FAQ entry How do I eliminate the blue border around linked images?

Steve Yelle

Dec 14 2008, 03:56 PM

QUOTE(Darin McGrew @ Dec 14 2008, 01:03 PM)

Please see the FAQ entry How do I eliminate the blue border around linked images?

Thank you! The other two questions still stand:

First issue: I would like for the links ("concert photography" and "portraits") to be along the bottom edge of the header. It is already aligned left, so how do I do that?

~~Second issue: My CSS stylesheet is applying to the image, too. It put a border on that picture and applied my text rollover links to it (it is a link to the homepage). How can I get rid of this stuff?~~

Third issue: The disparity between IE and Firefox. Ugh. I don't even know where to start with this. There is a huge space between the edge of the image/text and the end of the header.

pandy

Dec 15 2008, 12:05 AM

Can you post the URL to the page?

Steve Yelle

Dec 15 2008, 05:18 PM

QUOTE(pandy @ Dec 15 2008, 12:05 AM)

Can you post the URL to the page?

Sure.

http://fjchapman.com/portfolio/portfolio.html

Frederiek

Dec 16 2008, 03:36 AM

QUOTE

First issue: I would like for the links ("concert photography" and "portraits") to be along the bottom edge of the header. It is already aligned left, so how do I do that?

You have a <p></p> on the loose in the header div. Wrap the text links in the P tag and use margin(-top) for the P or use padding(-bottom) on the image to set the distance with the image.

I get javascript errors on your SWFObject:
- a parse error on line 8 of the js file
- Can't find variable: SWFObject on line 72 in the HTML file

Steve Yelle

Dec 16 2008, 05:10 PM

QUOTE(Frederiek @ Dec 16 2008, 03:36 AM)

QUOTE

First issue: I would like for the links ("concert photography" and "portraits") to be along the bottom edge of the header. It is already aligned left, so how do I do that?

Thank you so much for the help!

I can't for the life of me figure out why it can't find the SWF object. I have done everything I can think of but it just won't happen. It works fine locally.

Also, is there a way I can get my website to ignore case of characters? Like so INDEX.html would work just like index.html?

Thanks again!

pandy

Dec 16 2008, 06:03 PM

No browser seem to get more than about half of the JS file. When I try to view it in K-Mel it ends in a couple of hundred question marks. The others just cut it off. Could there be a character encoding issue here?

Did you upload the file you downloaded from deconcept.com as it was or did you do something with it? Copied, resaved?

Suzanne

Dec 23 2008, 06:10 AM

just review the java script and also the div tag once again...

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.