WordPress.org

1. JanChristian
   Member
   Posted 2 years ago #

   I had a friend help me get my nav bar to where it is but it still needs work.

   1) when you increase or decrease font size within a browser it screws up the nav bar links, and

   2) I want the font to match "Jan Christian" (Trajan Pro)

   Since this font isn't standard, I need to use a picture of some sort. What would be the best way to do this? Could I have the underline and film strip as a background image and have each word (Photos, Blog, etc.) be a .png with transparency? I really don't know. I've learned a lot so far but not nearly enough. :)

   http://www.AmbrotosPhotography.com

2. Edward Caissie
   Member
   Posted 2 years ago #

   Following your ideas ...

   If you want that specific font the only way to guarantee its use is with images versus the font itself.

   Depending on your expected user base, transparent PNG may be fine, but given that it is a white font on a "black" background you could go with GIF as they will not look "bad" in older browsers.

   I would suspect a specific <DIV> for each individual image/link "positioned" correctly may work.

   PS: I really like the look of your design!

3. JanChristian
   Member
   Posted 2 years ago #

   Thanks, cais!

   re PNG vs. GIF, it was just a shot in the dark. I didn't really know which would be better. If GIF is more universally accepted, I'll go with that.

   When you said correct "positioning" of the <DIV>, would that be "absolute"?

   I appreciate the help!

4. Edward Caissie
   Member
   Posted 2 years ago #

   When you said correct "positioning" of the <DIV>, would that be "absolute"?

   The position element method you use will depend on how you write the code, I imagine absolute would be fine, you might also consider "relative" positioning.

   Here is a link to a bit more details:
   http://www.w3schools.com/Css/pr_class_position.asp

5. JanChristian
   Member
   Posted 2 years ago #

   Ok, I think I've got it. However, when styles are disabled, none of the transparent img links show b/c they're white. Is there a way to show a black version when styles are off but show the standard white version when styles are on?

   PS, I'm developing locally, so you won't notice any changes to my site

6. JanChristian
   Member
   Posted 2 years ago #

   I updated my site with my progress. I just gave the words a slight black stroke so that they can be seen with styles turned off. Now it "works" with all combinations of styles/images on/off.

   Now my next problem: my footer is locked in the middle of the page. Any ideas?

7. Edward Caissie
   Member
   Posted 2 years ago #

   Your footer <div> appears to be inside your page <div>.

   You may have moved a </div> to underneath the footer call:
   

   <?php get_footer(); ?>

   Try to closely check the start and end of each <div></div> pair and make sure they are starting and ending where you expect. You may be checking across a few files doing this, but should be able to pin down the basic by checking header.php, index.php, (sidebar.php,) and the footer.php

   Hope that helps a bit more ...

8. JanChristian
   Member
   Posted 2 years ago #

   I found the problem. Because of how I formatted my nav bar, it pushed everything else further down the page. I used position:absolute to bring #site_content back up, and that's what messed up the footer. I changed that to relative, tweaked the top value, did the same for #footer, and all is good.

   Does anyone have any good JavaScript event tutorials? I tried using the stuff from w3schools but didn't get it to work. Then I tried Dreamweaver's image rollover generator. I got the hover effect to work but couldn't get it to work with onmousedown (so that the link stays in 'focus' while that page is active).

   edit: one more thing. When cycling through the links, the background image refreshes (flashes). Why?

9. Edward Caissie
   Member
   Posted 2 years ago #

   I'm thinking as you click on each page link you are calling the entire page, not just the content. The "flashes" are just the images reloading on each page click, especially if you are clearing your browser caches.

   If you are able to optimize your images more you may see less "flash" but I am barely noticing it myself.

10. JanChristian
    Member
    Posted 2 years ago #

    It doesn't seem to be doing it anymore. Earlier it was fine in Firefox and only flashed in Safari. A reboot must've fixed the "problem."

    Is how I've coded the header kosher? Can it be improved or anything?
    

    <h1 id="navtitle">
            <a href="/" title="Jan Christian"><img src="http://localhost:8888/wp-content/uploads/2009/06/navbar_jan_christian.png" alt="Jan Christian" /></a>
    </h1>
    <h2 id="nav1">
            <a href="/photos/" title="Photos"><img src="http://localhost:8888/wp-content/uploads/2009/06/navbar_photos.png" alt="Photos" /></a>
    </h2>
    <h2 id="nav2">
            <a href="/blog/" title="Blog"><img src="http://localhost:8888/wp-content/uploads/2009/06/navbar_blog.png" alt="Blog" /></a>
    </h2>
    <h2 id="nav3">
            <a href="/about/" title="About"><img src="http://localhost:8888/wp-content/uploads/2009/06/navbar_about.png" alt="About" /></a>
    </h2>
    <h2 id="nav4">
            <a href="/about/" title="About"><img src="http://localhost:8888/wp-content/uploads/2009/06/navbar_contact.png" alt="Contact" /></a>
    </h2>

    Then in style.css I just positioned them using position:relative

11. Edward Caissie
    Member
    Posted 2 years ago #

    The code looks fine ... and I imagine it was just a caching issue that your re-boot solved.

Topic Closed

This topic has been closed to new replies.