Wondering if someone could look at a page for me I am making for my Fire Department and let me know where you think I went wrong with some coding. The menu across the top has 7 links. The small images next to each link are all fixed in place and part of the top graphic (header.jpg). On 2 of the links (Audits and Elections) the full word is not acting as a link. Actually with the word elections on the letters "Ele" are clickable (at least in my browser using Firefox) I am sure it has something to do with the CSS file pertaining to the header section but cannot figure it out. I am using a PHP Include for the menu but even without having that in place and having the code for the links directly in the file .... it still happens. Any input would be appreciated. The Web Page is located at htfd5.org
File : Style.css Line No: 31 onward Content: #header li{ display:block; float:left; width:97px; } Reason for such a problem : width:97px; But if you will remove/ change the lines your menu will not look the same as it is looking now! Reason : http://htfd5.org/images/header.jpg Since Stars form designs are in the image. But you can always use CSS background feature to use/ embed the star like image and remove the star like image from from header image file!
Thanks Mike In I hear what you are saying.... never been too good with coding raw CSS but I got the ball rolling... I created a new css file to work on this (style2.css) and I edited the top header file to remove the maltese crosses from along the bottom and renamed it header2.jpg for now. I took one of the maltese crosses and named it maltese.png In the new style2.css file I added the coding.. #header ul li { background: url(images/maltese.png) no-repeat; } It gave me the result that you can see here... http://www.htfd5.org/test4.php I assume I have to enter some more coding with padding and such..... and suggestions on what to add and where to get it aligned properly?
Generally speaking you've built the site using broken and outdated methodologies -- In fact the first line of code proudly proclaims it; transitional, which is to say "In transition from 1997 to 1998 coding practices". The inaccessible fixed width and inaccessible fixed metric (px) fonts when mated to putting the most important information (the contact info) into an image is disastrously bad practice on a public service page -- MORE SO since people who need emergency services usually go right to the top of the list when it comes to accessibility needs! From the blind using a screen reader to the impaired using large fonts to the tetraplegic sitting there with a puffer and a stick in their mouth -- that's your target audience as an emergency services group! Under the hood it's even worse with the abuse of non-breaking spaces, absolute positioning of elements that should be in flow, tables for layout, gibberish use of numbered headings, use of presentational markup to do numbered heading's job... laundry list of how not to write markup any time after 1998. So when it comes to your 'problem' -- that's just not how you build a menu; or a layout for that matter. In particular the massive background image really is most of your issue -- said image by itself being the same filesize I'd have made that entire layout; that's talking HTML+CSS+SCRIPTS+IMAGES. That's just not how you build a website. First order of business in my mind is to drag your markup kicking and screaming into this century. Something like this: <!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" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <meta name="description" content="Providing high quality professional fire service along with educating the residents and businesses who reside in the Hamilton, NJ area." /> <meta name="keywords" content="hamilton, township, fire, department, district 5, emergency, medical, safety" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Hamilton Township Fire District #5 </title> </head><body> <div id="pageWrapper"> <h1> <span></span> Hamilon Township Fire District #5 </h1> <div id="addrAndPhone"> 61 Ruskin Ave<br /> Hamilton, NJ 08610<br /> 609-888-1277 <!-- #addrAndPhone --></div> <ul id="mainMenu"> <li><a href="index.php">Home</a></li> <li><a href="budgets.php">Budgets</a></li> <li><a href="minutes.php">Minutes</a></li> <li><a href="meetings.php">Meetings</a></li> <li><a href="audits.php">Audits</a></li> <li><a href="elections.php">Elections</a></li> <li><a href="contact.php">Contact</a></li> </ul> <div id="welcome"> <h2>Welcome</h2> <p> The goal of Hamilton Township Fire District 5 is to provide a high quality professional fire service, along with educating the residents and businesses who reside in the district on fire prevention and fire safety. </p><p> We also assists in emergency medical services to the residents and businesses within the District and provide mutual aide within the Township and surrounding communities. </p><p> This website has been developed in order to satisy the requirements of enacted law A3908 requiring all Fire Districts and other governing agencies to become more transparent to the general public by providing specific information pertaining to our fire district </p> <!-- #welcome --></div> <div id="personnel"> <h2>Personnel</h2> <div class="subSection"> <h3>Commissioners</h3> <ul> <li>Bernard Crammer Jr. - Chairman</li> <li>Jonathan Tomko- Treasurer</li> <li>Leonard J. Gadsby - Secretary</li> <li>Anthony Gulotta - Buildings & Grounds</li> <li>Robert A. Dill - Personnel</li> </ul> <!-- .subSection --></div> <div class="subSection"> <h3>Career Staff</h3> <ul> <li>Thomas Garey - Captain</li> <li>Vincent Jarzyk</li> <li>Ronald O'Hara</li> <li>Kinte Holt</li> <li>Jarrett Gadsby</li> <li>Eric Wojcik</li> </ul> <!-- .subSection --></div> <!-- #personnel --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): I tweaked up the keywords (if they don't exist inside BODY, they don't belong in the meta), fixed the heading orders -- it looks like you were using headings for their default sizes instead of their MEANING -- H1 being the header under which everything on the page is a subsection, h2 being the start of subsections of the h1, h3 being subsections of the h2 before them, and so forth. Swung an axe at the bold/underline which were being used to make headings -- that's H3's job in that case... and get the actual text in the document so people on screen readers and other accessbility aids actually have something to look at. Likewise the tables for layout get booted too. Out the door for lunch, but when I get back I'll toss together the CSS I'd use to build that page, and then give you a line-by-line breakdown of how/why I make the choices I do.
There, tossed together some quick CSS to show how I'd go about fixing the problems on that page, and put it up on my server: http://www.cutcodedown.com/for_others/captainron19/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/captainron19/ is wide open for easy access to the gooey bits and pieces. I redid/touched up the images while at it... In the CSS: http://www.cutcodedown.com/for_others/captainron19/screen.css I added media queries and bugfixes allowing the page to be functional all the way back to IE 5.x, while accessible on everything modern from 192px wide handhelds to massive resolutions thanks to the use of media queries. Sure, IE9/earlier doesn't get the text-shadow effects -- OH WELL. I don't sweat the 'pretty' stuff not working in legacy browsers so long as the page WORKS. That's the whole idea of CSS and separation of presentation from content: having 'graceful degradation'. You'll notice the layout is now semi-fluid, adjusting to the available width up to a point -- anything wider people find the long lines would be hard to read; but it shrinks and strips off formatting, columns and presentational elements to fit right down to the smallest handhelds. The h1/addr text is in pixels at large sizes, but is switched to EM's when the (too) massive logo image isn't there... content as always is in %/em fonts as it should be, so the entire layout will auto-adjust to the users default font size preference. Again, busy for a bit on one of my own projects, but I'll squeeze in some time to give you breakdowns of the how/what/why of the HTML and CSS when I get a chance.
HTML Breakdown I went with XHTML 1.0 STRICT -- partly because it's one of the two current recommendation doctypes, mostly because of the more consistent formatting rules. You'll notice I use a lot more carriage returns and tabs than others, I find it makes the code easier to read to have clear attribute/value pairs instead of stuffing everything into single lines like an incomprehensible run-on sentence that you can't tell where a thought begins or ends as it prattles on and on about nothing leaving you very confused what is even trying to be done. You'll notice I put <html><head>, </head><body> and </body></html> together as single lines. I do this as a reminder that NOTHING should EVER go in-between those elements. It's a VERY common mistake beginners make, and easy enough to avoid with a gentle 'nudge'. The meta[viewport] is there to tell mobile devices that we know what we are doing, so don't lie about the screen resolution or automatically try to rescale things to fit. Since most websites of the past 15 years aren't designed for mobile, browsers on things like phones and tablets lie and try to force them to work -- I'm gonna use CSS that targets those, so I tell them not to do that. In meta[keywords] I tweaked it so it only contains words inside BODY. That's what it's for, words that exist in the page you want to rank higher for. A LOT of people think keywords is ignored, when it's only ignored if you mis-use it. 7 to 8 words inside BODY you want to up-rank for. You seemed to at least grasp the other half of using them -- that it's keyWORDS... as opposed to stuffing it to the gills with phrases and sentences like a lot of the halfwits out there. You'll notice the CSS link targets screen, projection and TV with it's media attribute; screen layout usually makes sense for those devices -- many kiosks use projection when in fullscreen mode, and there are still a few that obey TV in circulation, so nab all three. Also notice I didn't use a needlessly pointlessly vague name like "style.css" on the stylesheet, and instead said what it's FOR. That screen layout most likely being gibberish for things like print, handheld, aural, etc... The outermost DIV, #pageWrapper is there for setting the width constraints and behaviors. You should always have at least one H1 on a page and no more than one H1 on a page -- as that's the heading underwhich EVERYTHING on the page is a subsection... and why it's the best candidate for the site title. I put the empty B tag inside it for our floated logo; this is called an "image sandbag" and is a easy way to put a presentational image in the markup without impacting semantics or wasting an IMG tag on something that's not content. The SPAN inside it is placed to add a 'white-space:nowrap" to it for certain widths so that "#5" doesn't end up on a line all by itself when the width changes. div#addrAndPhone is just the address line. Again, this should be text not an image so people who don't see images actually have access to what is possibly the most important data on the page. (that phone in particular) ul#mainMenu is a simple list. You don't need any non-breaking spaces or goofy positioning tricks if you just let flow do it's job. div#welcome and div#personnel are both pretty simple. Each starts with a h2, indicating they are the start of subsections of that h1. img.trailingPlate is what it says, a trailing plate image. That image is content to me so IMG tag it is. By putting it in the markup we can also flow the text around it. #personnel .subSection -- these subsections are both 50% width and floated, so we don't need a table. The ieSafe class is used to fix a minor IE bug called "perfect width drop". These get H3 inside them as each is a subsection of that H2. That's what headings are FOR and by the <b><u> you were using is accessibility trash and semantic gibberish -- especially since U has been deprecated since 1997 so it has no business in any page written after that time! Close 'em out and that's the markup. CSS breakdown to follow.
CSS Breakdown I always start my CSS with a reset. Resets exist because HTML does NOT nor should it specify the default appearance of elements. The entire original concept of HTML was to say what things are, so the user-agent (browser) could best determine how to show them. Customizing the appearance for specific targets by the author didn't come until later... because of that the default margins, paddings and borders on some elements are inconsistent across browsers... a reset should do what it says, reset them all the same. There are smaller resets, like the so-called 'universal reset' of * { margin:0; padding:0; } but it can cause problems with sizing form elements since FF and IE are total retards about those. There are larger resets like Eric Meyer's "reset reloaded", but that fat bloated steaming pile of manure borders on being a framework, setting values that don't have a blasted thing to do with resetting anything and usually makes page building harder, not easier. Resets like that give resets a bad name. The one I use (developed by Dan Schulz shortly before he passed away) is a nice clean middle ground -- it's a quarter of a K so it's bandwidth impact is negligable, and it just targets elements that need targeting. BASE LAYOUT ------------------------ I always start out with a semi-fluid mid-size desktop layout as my starting point, since IMHO the lowest common denominator is going to be IE8/earlier desktop users. A lot of people design for mobile first, but IMHO that's just short-changing both mobile and desktop users. Starting in the middle provides the easiest and best graceful degradation for the people who refuse to join us in this century -- and there's a LOT more of them than there are people using mobile devices that can't handle media queries. hr -- if you add a footer and it doesn't warrant a heading, or if you have multiple headingless subsections, you'd put a hr between them to semantically say "this is a new subsection of the page" (why HTML 5's "section" tag is redundant bull)... I hide them as a matter of habit. a, aseudos -- some colors for anchors on the page, I added a simple text-shadow glow for a fire-like effect. Said effect won't show up on IE9/earlier, OH WELL. (not a deal breaker IMHO) body -- I tend to set the most commonly used font size on the page here, that way I'm not saying it all over the page. Setting it to 85% delivers 14px for normal users, 17px for large font/120dpi users, and 12px for the handful of 75dpi users -- which in my experience is just right. Automatically scaling fonts and using EM's for elastic layout is as important a part of design as having it semi-fluid and responsive. I also threw a text-align on it for laughs, as it makes the page work in a useful fashion all the way back to IE 5.5. #pageWrapper -- The min-width is there for browsers that don't know media queries (IE8/earlier), with the max-width being to prevent text lines from being too long and hard to read. The 95% width is there to show a bit of border on each side at all resolutions just to make it pretty. Margin to center it, and text-align to return that to normal after our IE5 centering on body. * html #pageWrapper -- "* html" is a well known CSS hack to target IE6/earlier. Far cleaner IMHO than using a separate file and that IE conditional comment garbage in the markup; particularly since CSS can be cached across pages, markup is not. In this case the comment says it all, shove a fixed width at legacy IE that can't handle semi-fluid layout or media queries. h1 -- font and padding, nothing fancy. Went with PX as the auto-enlarge and auto-shrink actually results in some funky line-wrap behavior; usually PX fonts are inaccessible crap, but NOBODY is going to complain about 36px being too small. h1, #addrAndPhone -- since these share color and text-shadow I put them together. I used text-shadow to try and emulate what you were doing in your picture; older browsers don't get the glow effect -- OH WELL. (Oh well is a good attitude for minor visual things like text-shadow, box-shadow, border-radius -- aka the "cool stuff" from CSS3) h1 span -- nowrap on it so #5 doesn't end up on a line by itself when word-wrapped. h1 b -- the presentational logo image. #addrAndPhone -- size and alignment, nothing to write home about. #mainMenu -- clear the floats so we're sure it's past the menu, pad the top to space it out, turn off bullets, align it's contents. #mainMenu li -- setting these to display:inline basically strips formatting off them, so we can center our anchors. #mainMenu a -- inline-block means they will obey height and top/bottom padding in all browsers. The padding is mostly there to make sure they're big enough for those little stars to fit, with some margin to space them out even further. h2 -- set a consistent font-size since again, you can't trust the defaults. Colors, transform -- I made the red brighter to bring it up to accessibility minimums as red on blue is VERY hard to read. The black text-shadow further enhances the legibility. p -- where possible I try to avoid top/bottom margins due to the unpredictability of what's called "margin collapse". Since we reset margins and padding it's easy enough to just pad the bottom of them. #welcome, #personnel -- I added float wrapping since there's a plate inside the first and two floats in the latter. #welcome -- some padding to push it in equal to the menu, which I think is why you had them so narrow? #personnel -- centering... ooh, impressive. #personnel h3 -- I took some style liberties on these by setting a border instead of using underline. Underlines are for LINKS, these are not links so use a border instead. the side padding on the h3 pushes in those borders to make it a bit prettier. #personnel ul -- strip bullets, pad the bottom, nothing fancy. #personnel .subSection -- to put these side-by-side you just set them to float and 50% width. .trailingPlate, .leadingPlate, .plate - the three basic 'types' of content images... float left, loat right and centered on screen layout respectively. For narrow displays they may all be presented block and center; again we're saying what they are, NOT what they look like since appearance may not be the same on all media targets... which we'll prove shortly. .ieSafe -- a perfect width set of floats in IE can sometimes screw up and drop down a line. The 'fix' for this is to on the very last float use a negative margin. This makes that last one smaller in 'flow' so it doesn't drop below the others. MEDIA QUERIES ---------------- Media queries are conditionals used to change the layout or add certain behaviors, and are the cornerstone of responsive design. I set my media max-widths where the content needs them, instead of having any set planned widths. Planning ahead can paint yourself into a corner, while working to the contents needs keeps you agile and ready for anything. @media (max-width:480px) -- this targets certain mobile devices that try to play games with the text-size. Again, we know what we are doing and this 'assistance' can do more harm than good. HOWEVER if we set text-size-adjust globally for all targets it breaks zooming in Safari on desktop computers (REALLY herpafreakingderp since it doesn't break zooming on iOX) hence the media query. @media (max-width:50em) -- setting that span inside the menu to display:block forces three items to go to their own line below this width, instead of having an ugly single item drop. @media (max-width:44em) -- I drop the min-width to 192px since that's the smallest you'd ever really see. Again the global min-width we set above is basically for browsers that don't know media queries and can't handle responsive layout. I hide the logo as at this size it's just too damned big for the page, then switch the fonts to elastic/dynamic, centering each section and changing up the padding a bit. #welcome also gets it's padding changed since we start to run out of screen space. @media (max-width:30em) -- I switch the menu span back to inline so word-wrap can start splitting these up one or two per line normally. All h2 get centered and all our plates are forced to .plate style behavior instead of floated. Likewise I strip the columns off #personnel since there's no room to put them side by side. @media (max-width:20em) -- down this tiny I decided to shrink the page heading down even further, just to make it look nice... .... and that's a semi-fluid elastic responsive accessible layout in a nutshell. I know that's a lot to take in, take your time, digest it, any questions feel free to fire away.
Deathshadow Thanks a million for the input and the file syou uploaded.... I especially like the mouseover effect you did on the menu items. How was that accomplished?
The code for hover effects is pretty simple. Elements have what are called "psuedo states"... like active, visited, hover, and so forth. a { color:#FFF; } a:visited { color:#ACE; } a:active, a:focus, a:hover { color:#FF0; text-shadow: 0 -2px 2px #F80, 0 -4px 2px #F00; } Code (markup): White if it's a normal link, light blue if it's followed, yellow when the mouse is over it or it's selected by keyboard... the text-shadow is what does the glow effect as a 'bright shadow' makes it glow. You can layer multiple shadow effects, the first one declared being top-most in render. Ever heard of the painters algorithm? Same thing. Last one declared is the one drawn on the canvas first -- each one before it being drawn atop it. Each 'property' takes a X offset, Y offset, blur and color. In this case I have a bottom red shadow that's raised 4px above the text and blurred two pixels 0 (x), -4px (y), 2px (blur) and red #F00 then a orange one layered over it that's raised only two px. 0 (x), -2px (y), 2px (blur) and orange #F80 Pretty simple. Text-shadow is a CSS3 property, it's supported in all modern browsers, as well as IE 10 and 11. As I mentioned a few times it doesn't work in IE9/earlier - really I don't sweat that, people using outdated browsers should be thankful enough the layout renders right... That's where I differ from some developers, I still try to support back to at least IE6, but that doesn't mean I bend over backwards to make it look the same as modern browsers do. The whole reason HTML even exists and why we've been told for fifteen years to practice things like separation from presentation from content and progressive enhancement is so that in older, less capable browsers / user agents where the fancy bits are missing or don't work, the user still gets a usable page.