SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Header & Footer Troubleshooting Help

    I need an extra set of eyes to troubleshoot an existing website…

    I decided to re-write the stylesheet (from a previous outsourcer) because it was too code heavy and in the process i've managed to move the footer to the far right of the main content instead of falling to the bottom. Also, when I add a transparent image to the header, I'm losing the header bg. Oh, and there's an added empty line between the nav image and the main content.

    I’ve mucked around with this for so long that I’ve lost track of what I’m looking for and can’t “see” the problems.

    Anyone feel like taking a stab at this??

    I uploaded the original site to http://offlinenet.com/test1 and the “do over” is at http://offlinenet.com/test1/do-over

    Thx in advance for your help :)



    <body>
    <div id="heading">
    <div id="container">

    <div id="logo">
    </div> <!-- END LOGO -->

    <ul id="nav">
    </ul> <!-- END NAV -->

    <div align="center"> <!-- BEGIN Image Map -->
    <img src="image.png" border="0" width="897px" height="227px" usemap="#map" />
    <map name="map" id="map">
    <area shape="rect" coords="10,46,142,218" href="#" />
    <area shape="rect" coords="159,71,291,218" href="#" />
    <area shape="rect" coords="306,85,439,218" href="#" />
    <area shape="rect" coords="456,87,590,217" href="#" />
    <area shape="rect" coords="605,72,739,217" href="#" />
    <area shape="rect" coords="754,48,889,218" href="#" />
    </map>
    </div> <!-- END CENTER --> <!-- END Image Map -->
    </div> <!-- END CONTAINER -->
    </div> <!-- END HEADING -->

    <div class="main">

    <div class="left">
    </div> <!-- END LEFT -->

    <div class="right">
    </div> <!-- END RIGHT -->

    </div> <!-- END MAIN -->

    <div class="clear"></div>

    <div id="footer">
    <div class="footer-container">
    <div class="wrapper">
    <div class="fleft">
    <img src="image.png" alt="" />&copy; All Rights Reserved
    </div>

    <div class="fright">
    <a href="#" target="_blank">Privacy</a>&nbsp; | &nbsp;
    <a href="#" target="_blank">About Us</a>&nbsp; | &nbsp;
    <a href="#" target="_blank">Contact</a>&nbsp; | &nbsp;
    <a href="#" target="_blank">Home</a>
    </div>

    </div> <!-- END WRAPPER -->
    </div> <!-- END FOOTER-CONTAINER -->
    </div> <!-- END FOOTER -->
    </body>



    CSS

    #container { margin:0 auto; width:960px; position: relative; font-size:.8525em; }
    .wrapper { width:100%; overflow:hidden; }
    .clear {clear: both and height: 0}
    #heading { height:380px; overflow:hidden; background:url(images/bg-hdrx.jpg) 0 0 repeat-x; }

    #map { margin-left: 30px; }
    .main {margin:0 auto; width:891px; }
    .main .left {float:left; padding:0 20px 0 45px;width:550px;font-size:.95em;}
    .main .right {float:left; background:url(images/content-separator.png) no-repeat; padding:0 51px 0 33px; width:187px; height: 313px; font-size:.95em; }
    .main .right {overflow:visible; zoom:1;}

    #footer {color:#000000; padding:20px 0 22px 0; border-top:5px solid #eee;}
    #footer .footer-container { margin:0 auto; width:960px; font-size:.8525em;}
    #footer .fleft { padding-left:20px; width:550px; overflow:hidden; }
    #footer .fright { padding-right:40px; width:250px; }
    #footer .fleft img { margin-left:-20px; overflow:hidden; }

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    First thought: WHOA.

    Question: Is the thing you're trying to do just cleaning up code, or was the main page ALSO supposed to do something different? It sounded from your text like you only wanted a code cleanup, but some of the text looks different in the offline version.

    Second thought: both pages are wildly invalid, but the original is actually friendlier to those who read text (the new version leaves the blind completely lost). I also noticed the original page had a clearfix class on Main... so likely it was making Main contain left and right floats. The clearing div in the new version doesn't do that: clearfix helps elements contain floats, while "clear" clears them... those are actually two different but related things (often one wants to do both things).


    I'm hugely NOT a fan of image maps, mostly because of the way they're more difficult for accessibility. There's a CSS way that can get you the same result using image replacement which is generally favourable to image maps. otherwise, if the map's to stay, you'll need to add some text to that menu.

    The old site has a bunch of "click here" links, which don't do much better.

    First thing I would do is switch your doctype over to Strict (instead of Transitional) and decide if you are writing this page in XHTML or HTML4 (either are fine, so long as they are Strict, but you're getting lots of annoying little errors because your doctype and your markup are two different types).

    It's evening over here and I'm on someone else's computer, but if you post a reply on your intentions (do you want to completely copy the original site and just have better code? or do you want to make some visual changes as well?), tomorrow I can post some code that is both accessible (your code and the original code both are slapping wet trouts at the blind!) and clean and generally does what you want, with explanations.

    What level would you say your CSS is at? Do you know what the clearfix is?
    Assuming left and right continue to be floated left and right, Main will need to do something to enclose its floats, though I'd probably use the overflow: hidden method because it would work here.

    This is absolutely a site where you will SAVE TIME by chucking the original code entirely and doing a rewrite. I see what happened on each individual page: that's indeed one way to let code get out of control. Usually the basic layout of a page doesn't change dramatically from one page to another, and it shouldn't.
    You also want to take advantage of the tags you are using: you have multiple h1's (when usually one is all you want), and they don't even all have text. You DO want search engines to find your site even if it's targeted locally. Google is your number 1 blind visitor. Which is awesome, because building accessibly ends up building well for search engines too.

    Anyway, cheers,
    poes

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Okay, so you've got the good doctype and you've chosen XHTML Strict.

    You've reintroduced the clearfix but actually, I wouldn't say you need them (they were working on the other page but you can definitely have just a Main box holding Left and Right inside, enclosing those floats using overflow: hidden and then for extra measure having the Footer itself clear:both;).

    Here's a screenshot using a developer tool showing how Left is still overflowing over the footer:
    http://stommepoes.nl/leftcol.png

    You are also going to have trouble with markup like this:
    Code:
      <footer>
        <div class="footer-container">
    <footer> is an HTML5 tag. Not all browsers understand HTML5 yet, which is not surprising: it's not out of draft yet. It's still being written. That said, <footer> is unlikely to change, so if you want to use tags like that, you'll want to change your doctype over to <!Doctype html> (the HTML5 doctype) instead of the XHTML1.0 doctype you have now.
    Also, for the Modern Browsers who don't understand HTML5, you'll have to tell them <footer> is supposed to be a block element by saying
    footer {
    display:block;
    }
    in your CSS.

    For the other browsers, I see an "ie9.js" which I'm unsure that that also helps IE deal with HTML5. But, not everyone lets Javascript run on their browser (even from a church) so it's a gamble you're taking. IE is still the most popular browser out there if you add all three versions together, and none of them yet support HTML5 without a boatload of scripts to help them shuffle through it.

    Personally, since this isn't an HTML5 showcase but a site dedicated to getting a message out to as many people (and don't forget search engines) as possible, I'd stick to HTML4/XHTML1. You certainly don't gain anything at this point by using HTML5 tags. Right now, it's just more work for the right to claim to be "cutting edge code".

    .....
    I'm still going to take issue with this:
    Code:
    				<div id="logo">
    					<h1><a href="http://ErskineFree.com" title="Evangelical Free Church of Erskine" id="logoimg" target="_blank"></a></h1>
    					<h2><a href="http://ErskineFree.com" title="Evangelical Free Church of Erskine" id="logotxt" target="_blank"></a></h2>
    				</div> <!-- END LOGO -->
    Headers, with anchors, with no text. And they take you to the page you're already on (assuming that's where the site is), except in a new window. While having logos click back to home is a general practice on the web, your logo is
    a) in an unusual place (it's on the right and looks rather more like a decorative image than a "logo")
    b) it doesn't look clickable (clear logos separate from the rest of the page invite clicking)
    c) every time someone clicks it to go home, Yet Another Window opens (unless they're like me and block new windows). So potentially someone may have 15 windows open to your site just from navigating it.

    of course I'm talking about the h1.

    The h2 has more promise: it's on the left, looks like a site name, and therefore might be clickable to home. But you are relying on the image to convey the message. The tag itself should have it. And, for the main page, the name of the site and the church itself would be your h1 (on all other pages, it would be what those pages were about... this means using a p or some other tag for the logo on those pages... h1 is the topic of the page, h2 is next-level header).

    I'd make the h2 the h1, put the same text as in the image inside the tag, and use another tag inside to hold the image on top (covering the text), while the current h1 just becomes a background image with a link laying on top. It doesn't say anything and it doesn't tell people where they are going (where do you expect to go if you click on a cross?), so I'd be uneasy even making that image a link at all.

    Another contender for h1 is the "welcome to..." text. Again, image replacement would mean this can be a header with real text, and then the image laid on top for those who load images. The "This week" text would be an h3... similar to the original page.

    Anyway, you've got it closer to how you want it to look (just make <footer> a block or make it div id="footer"> really) but I don't know if it's where you want code-clean wise.

    Cheers,
    poes

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Poes - thx for the feedback. I know it's not written properly (I've never taken the time to learn CSS from scratch - no lectures, plz.. I know but at least it's looking like I want it to. It definitely doesn't have to be html5 and I only threw that in because i copied from my own site and knew that it worked (again, I know...) :|

    I'll be going thru your reply more thoroughly and already know I can change a couple of things -- the h1/2 tags bothered be too but, being a slave to time, I don't change most things as long as they work.

    One day... it would be nice to do myself the favor and really learn this stuff instead of hacking away at someone else's work.

    Anyhoo... thx very much for the input. I've sent you a PM in the mean time...

    cheers!

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was trying to have a look at both sites but in every browser I got this message:

    Warning: require(/home/usanyou/public_html/offlinenet/wp-includes/compat.php) [function.require]: failed to open stream: No such file or directory in /home/usanyou/public_html/offlinenet/wp-settings.php on line 265

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I also got that message on all inner pages. I assumed it was because neither site was completely set there (that offline server was a testing server).

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Okay, since I only have some screenshots and the current site to work with, what I've come up with, markup-wise, is maybe not exactly what you are going for with the changes. But it will start out in the right direction.

    I have a beginning of markup here. It's ok that it doesn't look like much, because good HTML should look like an ugly college paper : )

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="en" />
        <title>Erskine Evangelical Free Church</title>
    XHTML strict, language settings on the HTML element, the content-type with charset meta should always come first (technically browsers hit that, affirm that it matches the server headers if there are any, and begin to reload the page), language meta as an extra, then the title. I keep title before all the rest of the stuff like css and javascript links. Browsers stop to fetch those files before continuing to load the HTML page, so let it hit the title right away.
    Then I left the description and keyword tags, except I made NAME lowercase (XHTML is a lower-case markup lang) and added the closing slashes on those (XHTML wants EMPTY elements closed... so even though this page is going to be served as HTML4, we are using an XHTML doctype so might as well follow all the rules).
    Currently I have inline <style> tags in the <head> because I'm just beginning to build the very basic boxes. When I get basic boxes done, I move those out into their own sheets as your dev had.

    You really want just one CSS sheet, not a separate one for resets. Each separate file is a whole separate request to the server, and no matte how small the files themselves are, each handshake (connection with the server, confimation, start sending packets) takes additional loading time. So, one CSS sheet for screen, another for print or handhelds or alternate stylesheets if you want. I tend to put any hacks needed for IE in the main stylesheet, rather than using IE Conditional Comments. You can do either one, but CC's means you'll probably have an IE stylesheet.
    If the hacks are few, I wouldn't bother with some whole other sheet, because that's two places to keep track of stuff and of course IE users ask for two stylesheets.
    Code:
    <body>
      <div id="container">
        <ul class="access">
          <li><a href="">possible skip link</a></li>
        </ul>
        <div id="heading">
          <h1>Evangelical Free Church of Erskine <small>Presenting a changeless Christ to a changing world</small></h1>
          <ul id="site-nav" role="navigation">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="jesus.html">About Jesus</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
    
          <ul id="church-nav">
            <li class="hours"><a href="hours.html">Hours of Worship</a></li>
            <li class="events"><a href="events.html">Upcoming Events</a></li>
            <li class="art"><a href="articles.html">Articles</a></li>
            <li class="pod"><a href="podcasts.html">Podcasts</a></li>
            <li class="mini"><a href="missions-and-committees.html">Missions and Committees</a></li>
            <li class="study"><a href="further-study.html">Further Study</a></li>
          </ul>
        </div>
    I have a holding place for a skip link, if we add one. It kinda depends on what most pages will have for content and if the service links are only on the main page.

    I still haven't decided what I'm going to do with the h1, but I have decided having four separate calls to the server for images seems silly looking at this page. Looking around the live site, it seems the church name and everything is there every single page, so what I've done is made a single image: http://stommepoes.nl/Tests/erskine/images/bg.jpg
    That image can be cached by user agents and get re-used on each page. It's 56kb (prolly someone can make it smaller) but gets called just once, instead of 4 separate calls.
    Since there's a lot of space above the top menu, I'm thinking of just having it there in the same colour, so generally invisible for users with CSS and images on. Images off, the text is there for everyone.
    The <small> tag as used here is something I picked up from Deathshadow, and I like it. Small is great for taglines: I don't see it as a presentational tag (if you want to make something small, you use CSS for that, not markup) but the reason these types of text are small are content reasons: it's lesser content, it's shuffled a bit to the side, it's getting pushed out of the limelight by the larger main header text. They'll get styled later.
    On ALL other pages on this site, that text will NOT be an h1. H1 is the title of the page, not the title of a site. Each page of a site are independent documents, so they each have their own titles. The name of the church makes sense as the h1 of the main intro page, but for the rest of the pages, I'd make it a p element. The h1 of the other pages is likely to be the first header after the site menu.

    Top menu I've renamed: you don't have to use the name I used, but "top menu" is currently clearly "the menu at the top". However, the menu's list items don't have anything to do with where you've decided to place it on the page. Try to think of a name for that menu that would still make sense if it later became a left-hand vertical site menu.

    Similarly, I've called the other one church-nav (keeping the original style of class names, I personally don't like -'s in my names but they are fine) because it looked like church-specific menu, not to do with the website (articles could be argued either way I guess). I've left the class names on there as there will probably be image replacement (to use http://stommepoes.nl/Tests/erskine/i...v-buttons2.png) but we will need to add at least one more tag in those anchors to do it (I'm still mulling that over). Most importantly, there is text in the anchors that tells users where they are going. People who can see the images will read the text on the images... a nice extra, which is what images are for.

    Code:
        <div id="content" role="main">
          <div class="main">
            <h2>Welcome to Our Web Site<span></span></h2>
            <blockquote>
              <p>We are a growing church in a small town just 12.6 km (13 minutes) west of Stettler, Alberta. Attendees come from Erskine and surrounding area. We are an imperfect group of Christians serving a perfect Lord.</p>
              <p>The simple, biblical presentation of Jesus and His message of hope and salvation is at the center of all that we do. We invite you to come and visit with us and if possible – stay with us!</p>
              <p>I believe that we are small enough to need you and large enough to meet your needs! </p>
            </blockquote>
            <p class="source">- <cite>Pastor Ross Helgeton</cite></p>
          </div>
          <div class="sidebar" role="complementary">
            <h3>Faith &amp; Reflection Articles<span></span></h3>
            <p>Every week, the <i>Stettler Independant</i> publishes Pastor Ross’ <b>Faith and Reflection</b> articles.</p>
            <p>Now you can have these same articles delivered to your inbox by submitting your name and email address below.</p>
            <form action="?" method="post">
              <fieldset>
              <legend><span>Subscribe to our events!</span></legend>
                <input name="" type="text" value="coming soon" />
                <input name="" type="submit" value="SUBSCRIBE" />
              </fieldset>
            </form>
          </div>
        </div>
    The "role" stuff is optional; you'll decide if you want to try it. Originally an XHTML2 attribute, it's being developed for accessibility reasons by the W3C under ARIA. However, the validators currently don't recognise them and will report them as errors. I use this plain-english page to determine which ones I used: http://www.paciellogroup.com/blog/?p=106
    But you can take them out if they are too weird. I've only recently started using them myself. Browsers and accessibility software that don't understand them will ignore them, so they are safe.

    I couldn't see what #content and #main were doing so I left #content as the main wrapper, and changed the presentational names "left" and "right" to "main" and "sidebar" (they kinda seemed like that, but you can choose whatever makes more sense to you). Here, even if the content were to switch places, the names main and sidebar make more sense than left and right. Just a hypothetical.

    Since the main text in #main looked to be a large quote, I wrapped it in a <blockquote> element, which must have blocks as its direct children (p's). Then the last p I use the <cite> element around the pastor's name. Cite doesn't do whatever it was originally intended to do in browsers, but oh well, I think it fits the content. We'll style the blockquote so browsers don't use any default blockquote styling, and style the cite to have italic text.

    I have empty spans inside both the h2 and the h3, because I remember you had some image text you wanted to use. The spans will hold those texts directly over the actual header text, hiding them. Image replacement. Since I recall the text was different in your version, I don't have id's on the headers but they would have to have unique id's or classnames so you can assign the correct image to the correct header.
    Where there was em and strong tags, I actually turned them over to i and b tags. Why?
    Code:
    <i>Stettler Independant</i> publishes Pastor Ross’ <b>Faith and Reflection</b>
    The reason those tags haven't been deprecated (made illegal and unfashionable) is because they have a reason to exist: they are considered correct to use in marking up typography. Here, you are italicising the "Stettler Independant" because it's a periodical title. Depending on the markup style you use, you'd either italicise it or underline it or both. The Faith and Reflection might not be best as a b but possibly should also be an i, as it's the name of a series:
    It’s difficult to tell if readers of Jane Austen's Pride and Prejudice and Zombies should praise it or be astonished.
    Doyle's Sherlock Holmes series were published as four novels and 56 short stories
    <em> is for text that need emphasis. Do <em>not</em> feed the bears!
    <strong> is for important text that's not a header: <strong>DO NOT FEED THE BEARS</strong>

    I had little clue what the form was going to do, but I did wrap spans around the legend so it can be safely hidden away from view. I'm assuming in the future people will type in their email addresses? So it's written for that currently.
    Code:
        <div id="footer" role="contentinfo">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="privacy.html">Privacy</a></li>
            <!--li><a href="#">Sitemap</a></li-->
            <li><a href="contact.html">Contact</a></li>
          </ul>
          <address>Box 105, Erskine, Alberta T0C 1G0</address>
        </div>
      </div>
    </body>
    </html>
    Pretty much unchanged. I might wrap a block around the address tag, not sure: I've forgotten if it's a block element itself or not! We usually don't want blocks and inlines sitting next to each other, though it's not illegal.

    Anyway I'll let you look at that, ask questions, or tell me where I've screwed up. In the meantime I'll start into styling it more, but markup-wise, this is mostly what you'll want to start with.

    I would need examples of header images as I don't have access to those anymore.

    If you end up having lots and lots of headers and they will change regularly, then instead of image replacement, you'll want either sFIR, a Javascript like Cufon or Typekit, or you could try using the CSS3 @fontface, which can work with IE if you get the right font file type. In the last two cases you have to have the legal ability to let users' browsers download the fonts, so it's either got to be a free font or you have to buy permission.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    First page done, but hope to get an example for the middle ones; they're not too different from each other but quite different from the main page.

    Mostly I was thinking of just pulling the .main box up high with a negative top margin is all and not floating it or setting a width limit like on the home page.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Okay, a lot of things changed, but I see why your dev had all those different styles: each page was sometimes wildly different from the others. That's not good design, especially not for visitors.

    What I have now is an example page for each type.

    erskine.html represents the main page, where mostly the big difference is the church menu is only there, and on all inner pages #content is pulled up over the bottom of #heading.

    events.html represents an inner page with a full-width content. Instead of having a single large image with both borders and everything, I turns the white borders into a single top-bottom image of static width and the grey area, because it needed to be flexible and because it did not need transparent corners, got a single circle which does each corner.

    Traditional image-based rounded corners does this: sets empty elements (in this case divs, but you can actually use anything: semantics are not involved if there is no content inside these tags, as user agents ignore empty tags like these) to each corner and hold the rounded image.

    This way, no new images need to be called when users go to a page like hours.html which has a new menu that appears. IE6 doesn't let them overlap, but I didn't want to bother making it do that. There are enough statements in the CSS just for IE6 and 7 due to all the stuff being pulled around with negative margins, so Haslayout needed to be tripped a lot.
    Remember to test with images off. The arrow buttons have a lot of code for that, and the image was changed from transparent to white background in order to pull that off.

    I did not style the content inside the .inner grey box, because I got lazy. But, this ought to get you started. I see already a sexier footer image on the current site.

    Indeed there is more code in my version than preferable and this is because of at least three different page styles.


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
  •