Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Feb 2007
    Posts
    6
    Member #
    14896
    Hi all,
    I've been struggling with my site and hope to find some much needed guidance. #1: I wanted to code two links in the header of this site: http://www.berra.ca/photography.html
    They are supposed to be positioned on the far right and centred vertically. I noticed that it seems to be always going below the jpg in the header. But even worse than that, it does not seem to be working in IE7. #2: I want to use a no-right-click javascript but the one I have is not validating.
    If anyone has any suggestions, your time and advice would be really appreciated!
    Janice

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Can you be a little clearer on what the problem is with the header?

    As to the Javascript -- just don't. No right-click javascript is annoying and trivial to work around. In fact, I believe the default settings in Mozilla Firefox and Opera 9 disable such scripts. Remember, the web is a medium where you design *for* your users. Your site runs on their computer -- it's not for you to tell them how their computer should act.

  4. #3
    Junior Member
    Join Date
    Feb 2007
    Posts
    6
    Member #
    14896
    I'm having trouble positioning the text "Clients and Contact"(white in colour). When I look at the header in IE7, the text is below the jpg (in the white area where the text is not visible).
    I'm not sure how to fix the positioning or if that would be a bad thing?

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Try giving the containing element a higher z-index. To be honest, I can't quite see what's wrong because my usual debugging tool is Firebug, and your layout seems to have multiple problems in Firefox, so I can't use it to figure out where something's going wrong :-/

  6. #5
    Member Taffu's Avatar
    Join Date
    Dec 2006
    Posts
    34
    Member #
    14486
    After looking through some of your source code, your header problem may be attributed to the way you're floating the image, and the display of your inline list for the client/contact links.

    First thing I noticed is that it's displaying properly on IE6, however, your header isn't the defined 90px, it's actually 112px...which tells me your list is padding the lower portion of your header and throwing it out of whack. What I would do, is not float anything in the header. In your header, use your image in your background and position it to the "top left". This will remove your image from the header's content and place it as a background in the header itself. This -should- also offset the problem with your list, because it will no longer be padding the bottom of the header container in relation to the image you've placed into the floating div.

    See, your div with a class of "float" is filled with your 90px high image, and because of this...your list is padding the bottom. Depending on the browser, this will either a) do what I'm seeing and pad the bottom, creating a header thats 112px high to make room for you list, or b) do the same but contain your value of the header being 90px high and shove your list down into the white background of your image container.

    So remove the problem all together. Remove the div with a class of "float", and put your header image as the "background" of the header div, that way you're list links don't have to contend with other content in that area.

    HTML Code:
    <div id="header">
    <div class="floatleft"> <!-- Remove this -->
    <a href="index.html"><img src="images/theaderb.gif" alt="Go to HOME page" width="313" height="90" /></a> <!-- Put this image in your header background-->
    </div> <!-- This div removed -->
    <div id="last">
    <ul id="last">
    <li><a href="clients/main.php">Clients</a></li>
    <li><a href="about.html">Contact</a></li>
    </ul>
    </div>
    </div>
    Code:
    #header {
     border: 0px solid #ccc;
     margin: 0;
     height: 90px;
     padding: 0px;
     background-color: #000; // Change this to:
    (background: #000 url(images/theaderb.gif) no-repeat top left;)
     color: #fff;
    }
    With this method, simply add a "Home" link to your nav list, otherwise if you insist on using the image as the home link for your site, you -have- to float the "list" div as well, because if you don't, it's going to constantly align vertically under your image div. Both divs have to be floated if you want them to align horizontally. Good luck!
    Owner - http://www.project-guild.com (in development)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com