SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu seizure works in Opera

    The plan was to design a simple header - horizontal menu, background image, small graphic and title in <h1>.
    It worked fine, but looked a little flat so Stage 2 began: add some depth by offsetting the text using absolute and relative positoining, z-indices and a bit of colour.
    The result can be seen here.
    Does it look good?
    Anyway - it's an improvement.
    Now mouse over the menu.
    Works on a Mac using Opera v9.23.
    I've tested it using Safari 2.0.4, Firefox 2.0.0.6 and Sunrise 0.895 on a G4 iBook running OSX 10.4.10. In all cases (excepting Opera) the menu seizes up.
    Both html and css codes validate.
    I'm new to this game.
    Is it normal?

    HTML Code:
    <div id="header">
     <div id="head">
      <h1 class="float1">cornwall (uk)</h1>
      <h1 class="float2">cornwall (uk)</h1>
     </div><!--head-->
     <div id="headertext">
      <ul>
       <li class="active">home</li>
       <li><a href="history.html">history</a></li>
       <li><a href="legend.html">legend</a></li>
       <li><a href="industry.html">industry</a></li>
       <li><a href="gallery.html">gallery</a></li>
      </ul>
     </div><!--headertext"-->
      <img src="flag.gif" alt="st.piran's flag" width="42" height="25"
          id="flag" />
     </div><!--header-->
    css code:
    Code:
    .float1 {
     color: #333;
     position: relative;
     top: -1px;
     left: 2px;
     z-index: 2;
     }
    .float2 {
     color: #abc;
     position: absolute;
     top: -1px;
     left: -1px;
     z-index: 1;
     }
    Hoping I've not offered too much or too little code.
    Any ideas how I can achieve the effect I'm after without sacrificing the navigation?
    Thanks for taking a look.
    Best wishes
    David

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <h1> elements are covering over the links, preventing their use. Setting a width for the <h1> solves this :
    Code:
    #header h1 {
     margin-top: -1px;
     font-size: 250&#37;;
     font-weight: bold;
     /*color: #333;*/
     padding: 5px 0 5px 0;
     width: 10em;
     }
    Edit: removed the font-family from the style, as the body default Verdana font looks much better here.
    Last edited by Centauri; Sep 11, 2007 at 21:55.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Does it look good?
    Not terribly no. I'm not a fan of black and gray pixelated text with a shadow.
    2 identical H1's is a bad move also. You can achieve it much easier and with more control using an image.


Bookmarks

Posting Permissions

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