Okay - here are the first couple of questions lol I just put together a page (apple_cider_rub.php) and my first question is: if I wanted to have a larger image on this page would I need to have it coded special? When I get page down to about mobile screen size, the image (the way it is now) expands nicely and looks good (at least to me). On my desktop view, the image looks way too small for the page. If this makes sense. Now I may not be looking in the right place(s), but I don't find anything that addresses this and all I know to try is to style it a larger width and height. For some reason that doesn't quite seem like the correct solution. Also, when you look at this particular page, I wanted to move "The Process" down a bit from the list of ingredients so I did some searching and about all I could find was to style a <div> that looks like: <div style="padding-top: 3em;"></div> <h3>The Process</h3> <p> Combine the dry rub ingredients and mix well in a small bowl. </p> <p> Save a tablespoon of the rub for the liquid seasoning mixture. </p> <p> Generously apply the dry rub onto the front and back sides of ribs. </p> And my question is, is this the right way to do this?
1) don't use inline style. 99.99% of the time you use style="" you're doing something wrong. Much less an EMPTY DIV instead of wrapping what it's for. The style="" attribute should only be used when that style is conveying meaning -- a rare occurrence only usually found in charts, progress bars, or tag clouds. 2) those look like steps/instructions, in which case those would be <li> inside of an <ol> and not paragraphs. Honestly, I wouldn't add that big a gap, looks more like a rendering error than intentional design. I think once you get an OL there instead of the paragraphs it'll look better with the 1.5em gap. If you do need more, wrap the h3 and the list in a DIV (I'd do both ingredients and instructions) with a class like "instructions" and apply padding to that in your stylesheet. As to your image, as H3 are set to float clearing I'd make that a trailing plate and move it AFTER the image. I would also make it an anchor to a high res copy of the image keeping it a thumbnail. This way users on higher res displays can click on it to see 'detail' while retaining the smaller size behavior. Usually going bigger than a thumbnail as part of a page is a waste of bandwidth and a middle finger to usability, no matter how many PSD jockeys cream their shorts over the idea. Making it a link to a higher quality large size image is most always the sounder choice.
Took your advice on the recipe pages and have put the <li> inside <ol> and it does look better. Thanks I am going to leave images as they are. Your advice on the topic makes sense so if it ain't broke . . . don't fix it! Now for my next few questions . . . For pages where I am going to let the content dictate the keywords, I assume that I can just remove the comment portion so that it looks like: $namedMeta['keywords'] = ''; Is this correct? My next question is: I have put together a table on one page (cooking_time_temperatures.php). The code I added to the screen.css looks like: table { width: 100%; } th, td { padding: 15px; text-align: left; } and is added between #content and #extras. I don't know if this type of placement is of any importance, but I do remember reading somewhere along the line that style sheet should flow along with html. Anyway, my question is a case of am I doing this the right way? And finally, if i wanted to add a favicon, I assume that I would modify line 68 in the common.template to reflect the path to the favicon I want to use? Thanks . . .
Notice how in the template it does a foreach on $namedMeta? If you omit an index in a user-callable .php that meta won't be included -- so yes, if you remove that line entirely that meta won't exist. Though I would suggest determining which 7 or 8 words are most important and unique to the page regardless, and plug them in. it's a hair more work but should be considered a part of writing the content. JUST as you should write a unique summary of each page for your description meta... but yes, anything you don't set in your user-callable content .php will be skipped entirely render-side. Keeping your CSS in a logical order most always makes sense -- though i'd be a bit hesitant to put it between #content and #extras as it spaces apart the two elements that control the layout itself and have numbers that "reference" each-other. Really, so long as specificity isn't an issue (the order in which elements are applied) it doesn't matter, do whatever method you are most comfortable with! Just be CONSISTENT in doing so. You want a favicon, put it in the root where I've got it pointing at it. That's where they go as not all user-agents will even check the <link> and will just blindly assume it's going to be called "favicon.ico" and it exists in the domain root. That's why SO many sites that don't place it in the root end up broken with no favicon in older versions of IE and most every other damned version of FF -- and why people's error logs usually fill up with requests to "/favicon.ico" REGARDLESS of what that link tag says. It's just like how you should always have a robots.txt even if it is empty unless you want your log filling up with attempts to access it. The <link> is more useful if you want to add alternative favicons, like those in .png format or higher resolution - you would declare those after the .ico for the UA's that can use them, and those you can place anywhere in the directory tree. But really, that path was hardcoded for a reason, put it to that hardcoded location (alongside all your user-callable .php files) so that UA's that don't even use the <link rel="shortcut icon"> will still find it.
Thanks again for your guidance. So if, for instance, the table is a one-time thing on a given site, it's order is of no real significance and can therefore be added at the end of the css? If that's the case, then I will move the table code to the end of the css. At least my thinking of the order seems to be along the right lines. Another question (surprise . . . surprise). I am setting up different directories for articles, how-to, etc just to keep things a little better organized. I have modified the popularArticles.php and howToArticles.extras.php to refelect the new patch. When I go to call one of those pages up, I get an error message that reads: Warning: include(template/common.template.php): failed to open stream: No such file or directory in /web/sites/pimpdaddy/amazingbarbeque.com/how-to/how_to_smoke_on_a_charcoal_grill.php on line3 Warning: include(): Failed opening 'template/common.template.php' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in /web/sites/pimpdaddy/amazingbarbeque.com/how-to/how_to_smoke_on_a_charcoal_grill.php on line 3 Fatal error: Call to undefined function template_header() in /web/sites/pimpdaddy/amazingbarbeque.com/how-to/how_to_smoke_on_a_charcoal_grill.php on line 11 I have looked at the files and can't figure out what is going on or even the slightest idea what I did wrong. Since I am so well versed in php . . . I have no clue what I am doing. Maybe I should just stick with unorganized gobbledy goop. lol
The way my approach is set up to only ever link down-tree, in the current state you cannot make user-callable files in subdirectories. EVERYTHING relies on the placement of the files where they are, so that user-callable files can only go in the root. There are two ways to address this. First you have to get the PHP to recognize where things are. You could do "../" in your /how-to/xxx.php files so those includes work, but that still won't make the paths in the template when it tries to call the .php file function properly. The proper approach to fix that is: http://php.net/manual/en/function.set-include-path.php in your case, that would be: set_include_path('/web/sites/pimpdaddy/amazingbarbeque.com'); Code (markup): Which you'd need to call at the start of every one of your subdirectory user-callable files so that the default root of inlcude/require is the root of the hosting. The second approach would be to implement the next major step in developing the site -- one index to rule them all. This approach means that no matter what, your http root is always the main root as the ONLY file users can call is index.php. This results in that "get data" style ?= being the default behavior, but if we leverage mod_rewrite we can use a whitelist to force ALL non-static files to index.php, which can then use $_SERVER['REQUEST_URI'] to split up the requested path into the data we want. It's a MUCH more complex approach, but has the advantage that you can then simply implement "friendly URI's" that lack the .php at the end of the filename. With either approach, a change has to be made to the template to set the <base> tag. As your page is relatively simple and running from the root on your hosting, you could probably get by with: <base href="/"> Code (markup): I use the latter approach on my own sites for a number of reasons, and have calculations in place to recreate all the values so the index.php can be in a sub-directory for local testing... but there's nothing really "wrong" with the former approach. Either way, I advise against trying to up-tree link (../) or absolute path includes, or anything of that nature. Spent twenty years being told it was bad practice for good reasons, and don't understand why about ten years ago that went tits-up and completely forgotten. Bottom line though, in its current form you can't put user callable files in sub-directories, it's just not set up to do that without some changes to the codebase. That was INTENTIONAL so that logical directory structure could be maintained without up-tree linking.
I guess I will wait to try playing with this idea for the next site I try from scratch. Thanks again for your answer to my questions
Great information here, thank you. I have noticed that when using: <base href="/"> Code (markup): The site is not correctly viewed from Google translator. Instead I use the full domain url.
I have several WP blogs and see that they are not responsive. So I did some searching on google to see what it would take to make the WP themes responsive. I found the following article (https://colorlabsproject.com/tutorials/make-your-wordpress-theme-responsive/) and basically it says that about all you need to do is modify the CSS. I would like your opinion on this? If it is, I may give this a try after I tackle my next responsive project from scratch. Thanks . . .
In theory, all it should take is modifying the CSS, yes. However, depending on the theme you're using, and custom code, that might not be the complete truth.
Given the train wreck of non-semantic halfwit dumbass ignorant dipshit bullshit gibberish that most turdpress templates are, "simply modifying the CSS" is VERY unlikely. It's certainly possible as a well written page with separation of presentation from content, semantic markup, and logical styling hook DIV and SPAN SHOULD be as simple as 1 or 2k of CSS on top of their desktop layout to fix... 99.99% of existing turdpress templates lack those things, and are so ineptly cobbled together by people who have no business making templates that simply is not the case. Of course most of the dumbasses sleazing out turdpress templates are just following the example of the stock template, which out of box is a train wreck of how not to build a website. ... and why IMHO turdpress is cute for a blog for grandma that nobody other than family will give a flying purple fish about, but that "insecure by design" laundry list of how NOT to create a website has ZERO damned business being used for business! It's just another of the sleazy nube-predating scams that "pump out sites cookie cutter" snake oil doctors use to prey on the ignorance, hopes, and fears of those who just don't know any better. There's a reason I refer to ThemeForest and TemplateMonster as "nube predating whorehouses filled with scam artists who have no business telling others how to make websites" as pretty much EVERYTHING on there is telling visitors to sites that they don't matter and to go **** themselves! It's all about stroking the designer's... ego -- let's say ego -- while duping some "suit with a checkbook" to fork over money for "ooh shiny" and vague meaningless unfounded promises. -- edit -- Oh, there are also a LOT of design concepts that have zero business on websites in the first damned place that are amazingly common on off the shelf templates and even most custom turdpress templates. These ideas will fight you non-stop the moment you start caring about accessibility and usability... things such as fixed height elements, equal height elements side-by-side, and all sorts of other artsy fartsy BS that just shows how utterly unware of accessibility and proper design most of the PSD jockeys under the DELUSION they are "designers" and the mouth-breathers vomiting up templates actually are! Poke your head into the "Graphics and Multimedia" area here for endless examples of artists who have duped themselves into believing their own BS and thinking they are "designers".
Okay deathshadow . . . I get the hint that you are not impressed with WordPress, but - no disrespect - why is it that so much of what I read says that Google just loves WordPress blogs? Is there a good alternative to WordPress for those of us that are not experts at coding blog type sites from scratch? What does one need to know or learn about to be able to create blog's from scratch? I am not a huge fan of WordPress, but I do use it first, because of everything I have read about how much love Google gives them, but secondly,I don't have the skills/knowledge to even think about trying to build from scratch. From my personal experience, I have static sites that do not do as well in the SERPS as do my WordPress blogs with both having basically the exact same keywords and similar content (try real hard not to get slapped for duplicate content). The more I learn here, the more frustrated I get that every thing I have learned and tried over the past several years has been a waste of time. I like building websites and learning all about it, but if I have been doing it wrong from the get-go, then that explains why I am not making any real progress. And now I have to re-learn everything all over again. Thanks again for your input . . .
Back on topic with a new, hopefully simple, question. You showed me your code for embedding video: <video controls preload="metadata" poster="../images/1.jpg" class="fullVideoPlate" > <source src="*/*" type="video/mp4"> <!-- Don't forget your other "required" source formats I'd probably also have a flash fallback here as well as a flash off fallback text. --> </video> I have been trying to find out if there is a way to make this so that when you click on the video (not the play button), it send you to an external url and I cannot find anything. There is a WordPress pluging that does exactly what I am asking about and it looks like: [hana-flv-player video="path to video link" width="600" height="450" player="5" autoload="true" autoplay="false" loop="false" autorewind="true" clickurl="external url to another site" clicktarget="_self" splashimage="path to poster image" /] The WordPress plugin has the line clickurl="*/*" and this is what I am trying to find out and if there is a way to add something like this to your video code, or any run-of-the-mill code to embed a video. Thanks . . .
That... would be very counterintuitive... click instead of playing takes you somewhere else, why the hell would you have a <video> tag instead of an <img>? Doesn't sound right to me at all... You want it a link to somewhere else, you don't want a video, you want an anchor with a static img... That's not <video>'s job! Unless you're trying to make an animated link, at which point you're treading into animated gif style asshattery we've been told since the 1990's NOT to do on websites. Admittedly, a LOT of the things we've been told NOT to do on websites for two decades are once again hot and trendy, from massive screen filling images with no content, to flash pages, to goofy animated crap that distracts from the actual contnet... *SIGH* ... because there is money to be made by PRETENDING that is actually true -- which it isn't. Whenever there's money to be made scamming people or letting them sleaze themselves into a corner, you'll see unfounded praise being heaped on the worst trash ever. With the bloated markup and train wrecks people vomit up with wordpress you're no more or less likely to be on the big G's good side with or without turdpress. ALL of the claims in it's favor aren't just unfounded, for the majority of sites built with it thanks to how Google slaps down poorly coded bloated sites, the exact opposite is true! I've NEVER seen one. EVER. There's a line between quality websites and "cute toys for making a blog for grandma" and unfortunately that line is about the width of the Grand Canyon. The biggest part of the problem is simply the notion of it being "one size fits all" - lemme tell you a tale. When aircraft first entered military service designers took measurements of all the pilots on hand to create an "average size" used for the distances to controls, sizes of the seats, and so forth. As the technology progressed there started to be issues but nobody really addressed it until late in the second world war and the beginnings of the jet age. New aircraft cockpits were rescaled to address that the average of pilot sizes had grown in height and reach -- and suddenly there were endless problems with pilot error and crashes. A study of actually putting pilots in cockpits discovered that the problem was that the average, well... it fit nobody. It was not the correct size for ANYONE to use. That's the "flaw of averages". Simply put, NOBODY is actually average. ... and that is the lie of "one size fits all" and why off the shelf CMS -- along with off the shelf templates -- are a big giant fat stinking lie. It's a sleazy shortcut that if you want to do things right, generally will prevent you from being able to do so. If you can't be bothered to do things right, don't mind telling large swaths of users to go **** themselves, and are just out to sleaze out cookie-cutter train wrecks, go ahead and use an off the shelf answer, just don't bullshit yourself about what you are getting into or why you did it. More so don't be surprised when you want it to do something it wasn't designed for if it does the job poorly, opens massive security holes, and of course you have the problem that because you don't now it's internals when something REALLY goes wrong, you end up lacking the skills to even try and fix it. At the same time it takes a LOT of skill and experience to fly solo and do it properly. That's why it's called "work" and not "happy happy fun time'. Sadly many people and even large companies hobble themselves because they're unwilling to put in the work, though that's often the litmus test of how serious (or not serious) they are about their web presence. SQL is probably the biggest hurdle, though you CAN use static files to make a blog without SQL if you really know what you are doing and take special care. Things like comments for example can often go "scripting only" via things like disqus. Normally you'll hear me rail against "JS that doesn't degrade gracefully" but that's for YOUR content. User generated replies to your content I'm much more forgiving of for practical reasons, particularly in the age of social media. Using something like disqus means you don't need to manage user logins yourself for commenting and means higher likeliness of your comments being seen elsewhere besides just your own site. Again, it's a balancing act. YOUR content, as accessible as possible. Additional stuff like user comments? There's some wiggle room. I would suspect there's likely something wrong with those static site's markup and/or promotion then. Wordpress' markup may be gibberish bloated rubbish, but it's CONSISTENT gibberish. The semantics might be a joke, but they abuse the semantics and piss all over the place the same way every time. A site with nonsensical/nonexistent semantics coded to what you want it to look like and not what things ARE, will probably rank lower than a crappy bloated turdpress template. A fast loading properly written site with proper semantics, graceful degradation, and accessibility minded design should utterly and completely bitch-slap a wordpress site at the same task. Not using a CMS is no guarantee you'll be better any more than using a CMS guarantees the same. The content itself, the accessibility and semantics, and how you promote the site around the web via forums, social media, etc -- THAT's what matters either way. It's just in my experience I've NEVER seen an off the shelf answer that did the on-site stuff in a manner worth a damn -- BUT I'll freely admit that even turdpress' train wreck of how not to build a website is better than the garbage people vomit up using the WYSIWYG in Dreamweaver or outright rubbish WYSIWYG's like Frontpage, Expression Web, Komposter, NVU, etc, etc... There are degrees of scale, and sadly the granularity of those degrees is pretty damned high. I started programming in 1977, the only thing I can tell you on that is "get used to it". There is ALWAYS something new to learn, and if you think you can learn any of this "once" and then coast on what you've learned, you're doing it wrong. To be truly proficient you have to have a love of two things -- research and learning. Quite often that research side means digging into the convoluted legalese used to write the specifications and discerning the original intent of why said specification came into being. These are aspects that most tutorials fail to touch upon as they were written by people who never did that research either. See how outright disinformation rubbish like W3Schools continues to be supported and promoted by people who really have no business making websites. On the hardware side, the joke is we're a industry where 3 years is obsolete and 5 years is the scrap-heap. The software corollary simply doubles those numbers. Simply put the majority of what was acceptable practice just six to ten years ago is unacceptable today -- sadly, when it comes to HTML, a LOT of what people treat as acceptable practice any time between 1990 and today was NEVER actually doing it properly and flat out ignoring why HTML even existed or what it was for. See the presentational garbage that wormed it's way into 3.2, the proprietary garbage that wormed it's way into HTML 4 Tranny, and how people STILL sleaze out the same broken, bloated, illogical, giant middle finger to what HTML is even FOR and now slap 5 lip-service around it... to then pat each-other on the back over how "modern' they are with thier WORST of 1990's browser war development practices. Relearning all over again? That's just the nature of the beast. It's gotten WORSE in the Internet age as outdated tutorials often get ranked higher BECAUSE they're older, and people who don't know any better keep sharing and promotion out of date information. The end result is people touting bad practices circa 1997 to 2003 as bleeding edge techniques -- most of which again completely fly in the face of why HTML exists, why CSS exists, how to use either properly, much less having no clue what actual design even is, or why things like accessibility are important. Again, just "view source" on 99.99999999999% of turdpress websites and be prepared to recoil in horror if you have the SLIGHTEST understanding of proper HTML. That is the result of a decade or more of developers parroting bad practices as good, ignoring the entire reason any of the specifications even exist, willfully telling users with accessibility needs where to stick it, and worst of all, just sleazing things out any old way because they really could give a shit about if the client is successful or not so long as they can rape their wallet in passing. Sadly such idiocy has even dug it's way into the newer specifications, hence my dissatisfaction with HTML 5 as a whole.
Okay . . . last night I started to toy with a new site. I did the html first following your advice throughout this thread. Second I did the css, again following your advice throughout this thread. When I look at it on my laptop, it looks fine to me, but when I bring it up on my phone I see that the text does not resize and the images are out of whack. When I play with the browser size, it does not seem to resize either. To address the problem with the <h2> text not resizing, I tried wrapping it with a width: 100% and that didn't work so I can't figure out what the problem is. Secondly, my images do not stack when it goes to mobile. I am also seeing that these images don't seem to be sized correctly so as to be centered in the #wrapper, but if I make them any larger, only one image will fit. My html looks like this: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <link rel="stylesheet" href="screen2.css" media="screen,projection,tv" > <title> New Test Site </title> </head><body> <div id="wrapper"> <h1> <a href="/"> My New Test Site <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <h2>This Is Just Some Plain Text To Occupy Some Space For The Time Being.</h2> <div id="contentWrapper"><div id="toppics"> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li> <h2>This Is Just Some Plain Text To Occupy Some Space For The Time Being.</h2> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li> <img src="/images/click.jpg"> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*"> <img src="/images/1.jpg"> </a> </li> <h2>This Is Just Some Plain Text To Occupy Some Space For The Time Being.</h2> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li> <h2>This Is Just Some Plain Text To Occupy Some Space For The Time Being.</h2> </div> </body> </html> And my styling looks like: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } /* fix for legacy iOS and windows Mobile devices */ @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* fix for HDX displays like the Kindle Fire HDX */ @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) { html { font-size:200%; } } body { min-width:55em; /* for pre CSS3 capable browsers */ font:normal 85%/150% arial,helvetica,sans-serif; color:#FFF; background:#660000; } .heightWrapper { background:#600; } #wrapper { margin:0 auto; width: 65em; } h1 { padding-left:2em; font-size:100%; /* prevent FF reverse inheritance bug */ } h1 a { position:relative; /* so we can absolute position span over this */ display:block; padding:40px 0; /* 40px top + 40px bottom + 64px line-height == image height */ text-decoration:none; font:bold 60px/64px arial,helvetica,sans-serif; color:#FFF; } h1 span { position:absolute; top:0; left:0; width:1275px; height:141px; background:url(images/header-new.jpg) center left no-repeat; } h2 { width: 100%; padding: 1em 0 0 .75em; font:bold 175%/145% arial,helvetica,sans-serif; } #contentWrapper { width:100%; } #toppics { clear:both; /* make sure this is past both columns */ padding:2em 0 1em; margin:0 2em; border-top:2px solid #400; } #toppics ul { list-style:none; text-align:center; padding-bottom:1em; } #toppics li { display:inline; vertical-align:top; } #toppics a { width:385px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #toppics a:active, #toppics a:focus, #toppics a:hover { background:#800; } #toppics img { display:block; margin:0 auto 0.5em; max-width:100%; } #footer { padding:1em; text-align:center; } @media (max-width:50em) { body { min-width:192px; /* CSS3 possible, so let it go narrower */ } #contentWrapper { float:none; width:auto; } #content { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } #toppics { padding:1em 0 0; margin:0 0.5em; } #toppics a { padding:0.5em; } } @media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 300%/150% arial,helvetica,sans-serif; } h1 span { display:none; } } @media (max-width:340px) { #toppics a { width:auto; margin:0 auto; -webkit-box-sizingadding-box; box-sizingadding-box; } } Your thoughts on this would be greatly appreciated. Does it look like I might be starting to get a handle on any of this? Thanks . . .
Driveby post, I'll take a deeper look later... but so far? You have a DIV#wrapper that's unclosed, you aren't closing your UL, if it's just plaintext why do you have it in heading tags? Are those ACTUALLY the start of new subsections? You are also declaring fixed widths, something of a no-no.
Crap! Sometimes my fingers work way faster than my brain. I closed the #wrapper as well as the UL (major brain fart). I have reviewed the html and the only place that has a fixed width is #toppics a { and that is based on your example: #otherVideos a { width:266px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } What am I not understanding here? I have done some work on both the html and the css so what is shown in previous post might not be relevant at this time. The current css now looks like this: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } /* fix for legacy iOS and windows Mobile devices */ @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* fix for HDX displays like the Kindle Fire HDX */ @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) { html { font-size:200%; } } body { min-width:55em; /* for pre CSS3 capable browsers */ font:normal 85%/150% arial,helvetica,sans-serif; color:#FFF; background:#660000; } .heightWrapper { background:#600; } #wrapper { margin:0 auto; width: 68em; text-align:center; } h1 { padding-left:2em; font-size:100%; /* prevent FF reverse inheritance bug */ } h1 a { position:relative; /* so we can absolute position span over this */ display:block; padding:40px 0; /* 40px top + 40px bottom + 64px line-height == image height */ text-decoration:none; font:bold 60px/64px arial,helvetica,sans-serif; color:#FFF; } h1 span { position:absolute; top:0; left:0; width:100%; height:170px; background:url(images/header2.jpg) center left no-repeat; } #top { padding: 2em 1em 0 1em; text-align:center; } h2 { padding: 1em 0 1em 0; font:bold 175%/145% arial,helvetica,sans-serif; } #contentWrapper { width:100%; } #toppics { clear:both; /* make sure this is past both columns */ padding:2em 0 1em; margin:0 2em; border-top:2px solid #400; } #toppics ul { list-style:none; padding-bottom:1em; } #toppics li { display:inline; vertical-align:top; } #toppics a { width:29.75em; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #toppics a:active, #toppics a:focus, #toppics a:hover { background:#800; } #toppics img { display:block; margin:0 auto 0.5em; max-width:100%; } #footer { padding:1em; text-align:center; } @media (max-width:50em) { body { min-width:192px; /* CSS3 possible, so let it go narrower */ } #contentWrapper { float:none; width:auto; } #content { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } #toppics { padding:1em 0 0; margin:0 0.5em; } #toppics a { padding:0.5em; } } @media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 300%/150% arial,helvetica,sans-serif; } h1 span { display:none; } } @media (max-width:340px) { #toppics a { width:auto; margin:0 auto; -webkit-box-sizing:padding-box; box-sizing:padding-box; } } Code (markup): and the html looks like this: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <link rel="stylesheet" href="screen3.css" media="screen,projection,tv" > <title> New Test Site </title> </head><body> <h1> <a href="/"> My New Test Site <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="top"> <h2>This Area Is For A Brief Description Of What The Site Is About</h2> </div> <div id="wrapper"> <div id="contentWrapper"><div id="toppics"> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li> </ul> <h2>This Is Just Some Additional Text To Further Describe What The Site Offers.</h2> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li> </ul> <img src="/images/click.jpg"> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*"> <img src="/images/1.jpg"> </a> </li> </ul> <h2>This Is Just Some Additional Text To Further Describe What The Site Offers.</h2> <ul> <li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li><li> <a href="*/*.html"> <img src="/images/1.jpg"> </a> </li> </ul> <h2>This Is Just Some Additional Text To Further Describe What The Site Offers.</h2> </div></div> </div> </body> </html> Code (markup): I look forward to your thoughts, suggestions and comments on this. Cheers . . .
Just an update . . . I have been over this code time and time again and I just cannot figure out what I am doing wrong. I cannot figure out why the images will not stack or the text below the images will not resize (if that is the correct way to put it). I realize that there is much I need to re-learn, but if I can get an idea as to where to start to look. Maybe someone could share a good site where I could learn how to build based on deathshadow's way of doing it?
Could you upload the whole thing to a service like Codepen? Remember to include the real images too (you can use data URIs). It will be much easier to test that way. Also, always check the code in https://validator.w3.org before posting. You have a lot of errors in the current one.