Hello, im still very new to learning how to use html, css, php, javascript, php etc and im starting to like the way im making my website look but when i look at it on smaller screens the pages have scroll bars on the middle of the page. ive been told that they way i code is not very good which i agree with. was wondering if someone would be able able to help me through skype fixing my css and stuff to make my website more friendly to all screen sizes and stuff like that. my website is http://www.motorbikecentral.com (ignore the blank space on the main page, im working on a image rotator at the moment.) Before you think of helping me I CANNOT PAY YOU!!! im sorry but i barely can afford to have the website running. Thanks Kurt
If I am not entirely mistaken, just replace every px (pixel) declaration with a % (percent) declaration (except for <img )
1) your topic title ALONE is filled with misconceptions about how websites should be built and what the Internet is for. Trying to be "the same on all screens" is the antithesis of the point of HTML, making a website that is device independent... your layout should adjust to fit the available space if you actually care about users -- as such ANY fixed width design is going to be rubbish; no matter how many lazy photoshop jockeys and even lazier developers out there keep sleazing them out daily. 2) We don't need skype for this, let's do it in this thread -- that way others can learn from it. The first step in building a site properly is to start with the content, or a reasonable facsimile. The content should be simple enough that without CSS or javascript or any presentational markup, it is still useful and accessible. I recommend using XHTML 1.0 Strict since when validating "strict" the deprecated elements you shouldn't be using in the first blasted place will throw errors (something HTML 5 seems to have thrown out the window), and the stricter formatting rules of not letting you omit closings on any tag -- even "empty" ones -- can help prevent you from making mistakes in the first place... and it's the latest recommendation; NOT that I'd suggest using the steaming pile of manure known as HTML 5 since I can't believe anyone who actually knows HTML is DUMB ENOUGH to see merit in any of it from a markup standpoint. We'll skip the homepage content column for now and just leave a placeholder paragraph there... So, let's start with the document HEAD and doctype. <!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 name="keywords" content="motorbikes,dirtbikes,reviews,interviews,racing,motocross,supercross,GNCC" /> <meta name="description" content="Place for all your dirtbike riding needs" /> <link rel="shortcut icon" href="icon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Motorbike Central </title> </head><body> Code (markup): I cannot emphasize enough how extra formatting helps make the code clearer and easier to manage, instead of the re-re 'stuff everything onto one line' approach. Doctype, character encoding, the two standard search meta (Nice use of keywords BTW IF you have 100% relevance to what will be plugged into the content area -- if any of those words do not appear inside BODY, axe them!), the favicon and screen CSS LINK, and the title. Notice I use the TITLE as the title, not the domain name. That's already in the address bar, don't say it again. Also, notice the MEDIA attribute on the LINK for the CSS. This way your screen layout isn't being sent for print (waste of ink) or other less capable devices. projection is what many opera Kiosks use, and there are still screen devices that try to use "TV" as their identifier in circulation. Next, you have constrained width -- I'm going to be working semi-fluid and do this as a 100% min-height layout, so I'm going to give it a simple wrapping DIV for doing that which will wrap everything except the DIV#footer. <div id="pageWrapper"> Code (markup): Now, we have your first heading. Numbered heading tags exist to declare the start of subsections -- as a rule of thumb you should have a single H1 on a page, and ALL CONTENT ON THE PAGE should be a subsection of that... this is why the logical candidate for the H1 is the site logo and/or title... all your H2 are subsections of the H1 preceeding them, H3 indicate the start of subsections of the H2, and so forth. Horizontal rules are also handy from a semantic standpoint to indicate a change in topic when a numbered heading tag is unwanted and/or undesired. Varying from this, no matter how much your black-hat SEO scam artist {string of expletives omitted} tell you otherwise, is pitching accessibility out the window and failing to write the page for users -- which is the opposite of the advice you'll get from most of the search engine makers. Rule #1 of SEO, write for the user, not the engine! Used properly, headings can be used for heading navigation in browsers like Opera and screen readers - in other words the browsers that actually CARE about accessibility. (W and S on the keyboard in Opera page you through headings, forms and rules)... as opposed to say... Webkit browsers that go "accessibility, what's that?!?" Also, your logo is just plaintext, I'd not waste the handshake of an image on that. <h1> <a href="http://motorbikecentral.com/"> Motorbike <span>Central</span> </a> </h1> Code (markup): Always remember tags like anchor and span are 'inline-level', and as such cannot wrap block-level tags like H1 -- EVER. HTML 5 idiocy says you can, but in practice it still causes headaches. I tossed the span in there so that with the screen CSS we can make that text blue and put it on it's own line. The form is a perfectly good block level container, so it doesn't need any extra wrapping DIV. A properly written form should have at least one FIELDSET inside it, and a LABEL for it's INPUTS. You've got plenty of space over on that side of the header area, so use a label instead of the 'gee ain't it neat' javascript for nothing idiocy that also pisses all over accessibility. <form action="searchbar.php" method="get" id="searchBar"> <fieldset> <label for="searchBarText">Search Motorbike Central</label> <input type="text" name="kw" id="searchBarText" /> <input type="submit" value="Go" class="submit" /> </fieldset> </form> Code (markup): Notice that the FOR attribute on the label points at the ID for the input. This 'links' them together semantically which is good for search, screen readers, and even on screen user agents it helps since you can also click on the LABEL and it will focus the input. I usually throw in a .jumpTo menu for on-page navigation with accesskeys. On Opera (#1 browser for mobile!) and many screen readers these are a godsend. (at the same time you'll have some screen reader users who bitch about them -- can't please everyone!). Usually we just hide these menus for "screen", much as I do with semantic horizontal rules. <!-- one of two legitimate times to have title attributes identical to the content of the tag they are on is when building a accesskeys menu for Opera, screen readers, etc, etc... --> <ul class="jumpMenu"> <li> <a href="#pageWrapper" accesskey="1" title="Top of Page" >Top of Page</a> </li><li> <a href="#searchBar" accesskey="2" title="Search Website" >Search Website</a> </li><li> <a href="#mainMenu" accesskey="3" title="Main Menu" >Main Menu</a> </li><li> <a href="#content" accesskey="4" title="Content" >Content</a> </li><li> <a href="#socialLinks" accesskey="5" title="Social Media Links" >Social Media Links</a> </li><li> <a href="#facebookFeed" accesskey="6" title="Facebook Feed" >Facebook Feed</a> </li><li> <a href="#footer" accesskey="9" title="Footer and legal disclaimer" >Footer and legal disclaimer</a> </li> <!-- .jumpMenu --></ul> Code (markup): See the comment about title -- 99% of the time people use TITLE as an attribute it is NOTHING but code bloat -- in this case it serves a legitimate purpose in accesskey menus. Open up these forums in Opera, and hit shift-esc. That's an accesskeys menu. See how some of them list URL's and some of them have text? The ones with text, have the TITLE attribute. The main menu is no different -- I'd toss accesskeys on a couple more frequently accessed ones of those too; no need to go nuts throwing them at everything though. <ul id="mainMenu"> <li class="first"> <a href="/" accesskey="0" title="Home" >Home</a> </li><li> <span>Features</span> <ul> <li><a href="/Interviews/Interviews.php">Interviews</a></li> <li><a href="/Race Reviews/Supercross/Supercross Race Reviews.php">Supercross Race Reviews</a></li> <li><a href="/Off Road/Bike Specs.php">Bike Specs</a></li> </ul> </li><li> <span>Blogs</span> <ul> <li><a href="/Blogs/Kurts Blog.php">Kurts Blog</a></li> <li><a href="/Blogs/Camerons Blog.php">Camerons Blog</a></li> </ul> </li><li> <a href="/Business/About Us.php" accesskey="7" title="About Us" >About Us</a> </li><li class="last"> <a href="/Business/Contact Us.php" accesskey="8" title="Contact Form" >Contact</a> </li> <!-- #mainMenu --></ul> Code (markup): Again, don't waste title on it if there's no accesskey assigned. Also, UL is a perfectly good block level container, so it doesn't need a extra DIV or any other tag around it either. Now, you have a content first two column layout. Done properly this should be fluid or semi-fluid. automatically expanding and contracting between two points. The best way to do that is the 'double wrapper' method... with an extra container to hold the floats without interfering with a min-height layout. <hr /> <div id="columnWrapper"> <div id="contentWrapper"><div id="content"> <p> Page content here </p> <!-- #content, #contentWrapper --></div></div> Code (markup): The HR semantically indicates a change in topic 'area' just in case there's no H2 inside #content. The outer #columnWrapper we use to contain the floats and add padding for the footer to sit over, #contentWrapper and #content is used to do the 'negative margin trick' for columns. Hard to explain without the CSS, so I'll wait until I write that to cover it in detail. Suffice it to say 99% of the websites I write do this. Next inside #columnWrapper is the #sideBar. Notice I call it just 'sidebar' -- it might actually go on the left.. or the right, or be split into two, or not even be on the side; that's why saying 'right' or 'left' is bad practice. <hr /> <div id="sideBar"> Code (markup): Again, a horizontal rule just to say we have a change in topic. The advert is so simple, I'd not even waste a block level container on it. <a href="http://www.facebook.com/pages/Illusion/272659136154732" id="sideBarAdvert" class="subSection" > <img src="images/illusionadvert.gif" alt="Illusion - Motocross Apparal and Casual Wear" width="325" height="125" /> <!-- #sideBarAdvert.subSection --></a> Code (markup): The .subSection class we'll use for all subsections in the CSS, the ID is so we can target this particular one directly. ALWAYS include ALT text on a content image. Then the social media links, which I call... #socialLinks <div id="socialLinks" class="subSection"> <h2>Follow Us</h2> <ul> <li class="facebook"> <a href="http://www.facebook.com/motorbikecentral" title="Visit us on Facebook" > Facebook <span><!-- image replacement --></span> </a> </li> <li class="twitter"> <a href="https://twitter.com/motorbc" title="Follow us on Twitter" > Twitter <span><!-- image replacement --></span> </a> </li> <li class="youtube"> <a href="http://www.youtube.com/user/MotorBikeCentralAUS?feature=guide" title="Watch our Youtube Videos" > Youtube <span><!-- image replacement --></span> </a> </li> <li class="followgram"> <a href="http://followgram.me/motorbikecentral/" title="See our Followgram gallery" > Followgram <span><!-- image replacement --></span> </a> </li> </ul> <!-- #socialLinks.subSection --></div> Code (markup): We already have a h1, this is just a subsection. The HR is technically unnecessary, but looks better when CSS is disabled. We also have the other legitimate reason to use TITLE -- when the text inside does not convey the full meaning OR when that text is going to be hidden by a image replacement method. We have the latter here. Those images are just presentation for the site names, so IMHO they have no business in the markup. Using a mix of gilder-levin image replacement with overflow:hidden, we can also leverage the incorrectly named CSS sprites to use one image for all four of them -- three less handshakes speeds up the page load. The social media feed iframes are problematic -- there's no such thing as a iframe in STRICTand it's a tag you really shouldn't use. OBJECT is it's alleged replacement, but can have some minor issues. THIS is where IE conditionals should be used. (as opposed to in CSS where that's just lazy coding IMHO). <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="facebook_feed.html" id="facebookFeed" class="subSection" width="345" height="448" > <![endif]--> <!--[if !IE]>--> <object type="text/html" data="facebook_feed.html" id="facebookFeed" class="subSection" width="345" height="448" > <!--<![endif]--> <p> Unable to load Facebook feed, your browser likely does not support the OBJECT tag properly. </p> <!-- #facebookFeed.subSection --></object> Code (markup): Annoying that it's more code, but it works and is valid/proper/accessible... including fallback content to tell the user when something went awry. Now we just close up all the div down to #pageWrapper <!-- #sideBar --></div> <!-- #columnWrapper --></div> <!-- #pageWrapper --></div> Code (markup): ... and the footer. I would axe using a image logo there, axe the redundant second menu as a waste of code and space, and instead put a disclaimer in there. <hr /> <div id="footer"> Site contents © <b>Motorbike Central</b> unless otherwise noted. All rights reserved. <!-- #footer --></div> Code (markup): I wouldn't even go so far as to bother calling that a paragraph. Keep it short and simple, makes doing min-height layout easier. Finally: </body></html> Code (markup): ... and done. I'm out for dinner now, but later on I'll toss together the CSS I'd use for that, as well as a section-by-section breakdown of that CSS to explain the how/why/where. I'll even throw some media queries in to strip off the columns when the layout gets too narrow. Oh, you mentioned an image rotator -- those are usually a steaming /FAIL/ at web design, no matter how much the art chik-fil-a's think other wise... because they force you into a fixed width layout which craps all over accessibility -- which is why they are typically the LAST thing I'd EVER put in a content area of a home page. -- edit -- Oh, and pay attention to my commenting style. Incorrectly placed comments can trip rendering bugs in some versions of IE and FF, so it's better to just use a verbose ID or classname at the start of a section, work hard to keep the indenting sane, and then put the ending comment (so you know just what ID that /DIV is for) before the element. The bugs I mentioned occur if the comment ends up in-between a inline-level element and a block one, or between floats. Putting the comment before the closing tag instead of after it means neither of those conditions can ever occur. This is why many Dreamweaver templates need endless hacks and still don't work right in IE -- as their use of comments EVERYWHERE can actually do more harm than good. Really sad when COMMENTS can cause rendering bugs.