SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A very complicated header

    Hi,

    I'm putting together a site based of a PSD design, I've got the footer and the content done without a problem, but the header is bamboozling me. I wondered if anyone could give me any advice or help on how to style it.

    Here's the page:


    I've got the logo down using Fahner image replacement method, and I'm doing ok with the search box.
    My first issue is the nav menu: As these are all different shapes I take it I just have to upload the seperate images for each one, I think this is going to be really inefficient though (the design has already been signed off). Is this the only way to do this or is there some possible cheat way that's better? (As I write this I realise there probably is not).

    Secondly, the waves. The waves (that the children are standing on) will connect at each end meaning that this will be one image that will be repeated on the X-axis. Should this just be one large image and perhaps been laid out like so:


    That is; Give the masthead div a defined height then just place the image in as a background, aligned to centre.

    If this is the case I have one more question: The Welcome area. It is envisigned that this will be a hidden area and clicking it will reveal more. How can I get this so it is 'under' the waves? Positioning top -XXpx?

    I look forward to hearing from you!

    Thanks v. much. Jonno.

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    For the navigation, I'd recommend making it into a background image. After that, you can overlay the navigation and text on top of he background image. That'll help you to keep the image and still have the navigation clickable and linkable.

    For the waves, you can use a div set at width:100% and then repeat-x it. That seems easiest.

    ~TehYoyo

    Edit: This is the problem w/ having a design with no development compatibility in mind.

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    • re: the nav images - you can do it one of two ways. You can create each as an individual image (those are small, so the cost shouldn't be that high) or you can use a CSS sprite technique, and create one large image, then position it using the background-image position property by assigning a class to each list element.
    • re: the wave - yep, just create one image and set it to the background of that div.
    • re: the welcome - absolute position it and set the z-index to be below the header. That should be the easiest way to accomplish it.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, glad I was on the right lines. Should I put all content within a DIV class called content that has the width of say 960px;?

    So it might look something like this:
    Code:
    <body>
    <div id="container">
    <div id="header">
    	<div class="wrapper">
            <h1>
            	<a href="index.html" title="Home"> 
    	        	Thomas Ferens Academy
                    <span></span>
                </a>
            </h1>
            <form action="" method="get">
                <input type="search" placeholder="Search..." name="Search website" />
                <input type="submit" />
            </form>    
            
            <div id="nav">
                <a href="#">Home</a></li>
                <a href="#">Parents</a>
                <a href="#">Education</a>
                <a href="#">Our Academy</a>
                <a href="#">News</a>
                <a href="#">My Academy</a>
                <a href="#">Contact</a>
                <a href="#">Information</a>
            </div>
            <span class="waves"></span>
        </div>
    </div>
    <div id="main">
    ...
    </div>
    I just coded it up and it looks right. I was having such a mind blank yesterday, thanks for clearing this up for me.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In the future, avoid coding PSDs to HTML. Often times the designer of hte PSD doesn't realize the limitations HTML/CSS have. Well, really what feasibility it is to create some sites .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    For the navigation, I'd recommend making it into a background image. After that, you can overlay the navigation and text on top of he background image.
    Nah, that's dangerous. The chances of the text not aligning with the background image are high (imagine what happens when text is enlarged).

    @JonnoW
    It's better to mark up your menu with an unordered list. E.g.

    Code:
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Parents</a></li>
      <li><a href="#">Education</a></li>
      <li><a href="#">Our Academy</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">My Academy</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Information</a></li>
    </ul>
    That's considered the best-practice menu markup. Set the <li>s to float: left or display: inline-block to make then sit horizontally. Use image replacement for the links, as others have said, preferably by nesting an empty <span> inside the <a>s (as you did on the header) and set them to position: absolute (with position: relative on the <li>s.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding the Welcome section; the whole z-indexing thing just isn't working at all. I've tried every combination but with no luck. Is there a better alternative?

    Cheers, yeah, I did actually do that before. Originally I was using HTML5's NAV element, but found that IE doesn't support it at all so went back. Thanks for pointing it out, I'll make the change now.

    Many thanks,

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, also, I want to use the HTML5 placeholder attr, again, IE doesn't support this so in order to cover both bases (and avoid using javascript) I've put this hack in:

    Code:
    <form action="/search" method="get" id="search">
               	
                <!--[if !IE]>-->
     
    
                <input name="q" type="text" size="30" placeholder="Search..." />
                <!--<![endif]-->
               	<!--[if IE]>
    				<input name="q" type="text" size="30" value="Search..." />
    			<![endif]-->
            </form>
    Is this acceptable? I've tested it across several different browsers and it seems ok...

  9. #9
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Nah, that's dangerous. The chances of the text not aligning with the background image are high (imagine what happens when text is enlarged).
    Really? Basically what I was suggesting is a sprite...that's dangerous?

    I haven't done a lot of work w/ sprites, so I don't know what happens when text is resized.

    ~TehYoyo

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Really? Basically what I was suggesting is a sprite...that's dangerous?
    Ah, no. It sounded like you were talking about setting a background image for the whole menu and then trying to position text on top of that. The key here is to tie the text of each link directly to the sprite image.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ah, no. It sounded like you were talking about setting a background image for the whole menu and then trying to position text on top of that. The key here is to tie the text of each link directly to the sprite image.
    Oh. OK. Again, I don't have a lot of experience w/ sprites - maybe I made a mistake or was confusing.

    ~TehYoyo


Tags for this Thread

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
  •