re: above post…
I meant the before/after code in the CSS.
Great to hear! :nanaman:
The @media code is the last item in the stylesheet.
The :before and :after code at the top of the page
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
changes the standard box model to the box model that Microsoft caught so much flack for in IE. It {box-sizing:border-box} includes the padding and borders inside the dimensions of the box instead of outside, as the orginal specs require. It’s a more natural way to work with boxes and MUCH easier to work with. Here are a couple of links that explain it much better than I can.
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
The other use of :before on this page involves the #container div,
#container:before {
content:"";
display:block;
padding-bottom:20%; /* sets the fluid padding over #banner */
}
Those styles add a box inside the top of #container that creates the scalable padding above #banner without requiring a set of empty tags in the HTML. The box is transparent, of course.
:before and :after allow the coder to create “generated content”, such as the padding box above, without adding HTML. It’s a very handy tool. The syntax requires the content: property.
http://reference.sitepoint.com/css/content
I can sent you a couple of examples of how it can be used, if you would like.
EDIT:
The code that I sent includes your new graphs.
Let me know when you have implemented the code on your test site. 
Here’s the layout for small devices that I think will work. I need more icons, but that’s the idea. What’s your opinion?
Looks like a good start to me
BTW - the HTML (ver: g) with the new CSS fixed several errors in the HTML code. Please do give it a good look.
Have implemented all the code, and all is working well. The nav renders well on iPhone. So all is good I think. Do you want screenshots?
You didn’t actually implement the new HTML page. It fixed several common errors in the code. Please do give it a good look, or better still, just use it.
If you are happy with the way the mobile devices are rendering the page, you can send screenshots for reference if you 'd like. Your call.
Hi Ron,
Had a look through the code on the index page, and one of the things I found was that you have changed the graph image dimensions. I copied and pasted that particular code for one of the graphics, and it rendered like this. https://www.dropbox.com/s/gq7yk9e9yr2sc3t/index.jpg
The two things you added to the code were alt=“”, and the height of the image. Now, as far as I know alt=“some text”> acts as a mouseover effect and displays the text. I almost never add alt text to images but I believe that option is optional anyway. (another question on this later)
I set the graph image width to display at a size that I think looks best for the page, in the graph image’s case 300px. The height is then calculated (by the browser) automagically, and renders as intended. I have found that adding height can sometimes cause problems, as in the link.
I understand that according to coding protocols I may be wrong in my assertions, but in general, I tend to use what works best. Your thoughts are appreciated.
Regards Mike…
Ron,
In regards to my comment on alt=“”, I have noticed that some sites have a box underneath the image with an explana tion of the image, like so… https://www.dropbox.com/s/n0o004gs1fe4gmi/graph01.jpg
I much prefer this approach and wondered how it can be accomplished by CSS…
Regards…
Hi, Mike.
I had only changed the dimensions for the graph that is floating to the right and did so for demonstration purposes.
There are properties in the CSS for the img.right selector that affects the width and height. The graph should be slightly wider in the desktop view and a lot wider in the mobile view. The transition is fluid. Change the width of your desktop browser and see the difference for yourself. Both sizes are achieved without using a media query. You can compare the CSS for the img.right to the that for the img.left to see the difference. You can change the width of img.right from 40% back to 30% and both images will look the same again in the desktop view.
Every foreground image should use the alt=“some text” attribute. Screen readers and other assistive devices rely on the alt text. ALSO, if an image cannot be found on the server, the contents of the alt attribute are shown in the browser by default. You can try that for yourself, too.
The title attribute provides the mouseover text.
I understand that you have developed a lot of practices based on the things that have worked for you in the past. Speaking from experience, you simply need to learn some new “rules” and requirements and why they exist. Until I learned the why, I was reluctant to change some of my practices, too. It’s worth it, though.
The HTML and CSS validators should be in your must use toolbox.
http://jigsaw.w3.org/css-validator/
Just for my information, which browser do you use or do you have several?
Also, do you use a PC, Mac, or Linux computer?
The width and height attributes should be supplied for foreground images, if possible/practical. IE has a history of “misbehaving” in certain contexts if one or both of those properties is missing. The safest bet is to make a habit of including them, then changing them in CSS, if needed. It’s not a must in all situations, but it is a good idea.
The text in the alt attribute should supply a description of the image for the benefit of someone who cannot see it.
Hope this is helpful.
Hi Ron,
Thanks for your input. I will certainly start using the validator(s). I didn’t know they existed. On some points I think we may have to agree to disagree. Particularly in the case of IE. I think, because of its inconsistencies with the mainstream, a lot of developers are giving it away. I think the only reason it has any credibility any more is the fact that it is shipped with Windows. Nuff said on that.
The primary browser I use is called Iron. It is an offshoot of Chrome, but is much faster than any other browser. I have IE and FF installed on my PC but use them mainly for checking out rendering.
I used to have a MAC but gave it away as more and more Open Source and Freeware became available for Windows. I also had Ubuntu installed, and played around with that for some time, but eventually ditched it for several reasons that I cannot remember now.
To be honest, I am very happy with the way Windows has been heading, and the plethora of free stuff is quite amazing now. I feel there are cases for and against all major OS’s and Linux has been helped along a lot with the evolution of Android.
I think though for the foreseeable future I will stck with Windows, even to the point of my next Tablet being one with a Windows OS. Maybe it’s familiarity, maybe it’s workflow, maybe it’s lots of little stuff, but that’s the way I’m staying…
Please do not consider a caption to be a replacement for the alt attribute. Many images are not captioned. Often, the text used in captions does not describe the image. HTML expects to find the alt attribute populated if the image is not found on the server. HTML standards require its use.
I’m not sure what we would be agreeing to disagree about concerning IE.
This is an example of a fluid image-with-caption container. Most properties are commented.
It will accommodate an image of any dimensions. Image and caption are fluid and will resize to fit their parent container. If the caption is shorter than one line, it will be centered. If the text wraps, it will be left-aligned.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>image + caption, fluid</title>
<!--
Will accommodate an image of any dimensions.
Image and caption are fluid.
If caption text is shorter than one full line, it will be centered as shown in this demo.
If text wraps to another line, it will be left aligned.
-->
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.outer {
outline:1px dashed blue; /* TEST Outline */
max-width:1000px; /* presumed to be the width of the page */
padding:0;
margin:0 auto;
}
.captioned {
width:50%; /* sets width of image and text container in a fluid setting */
border:1px solid #ddd; /* you seem to have a border around the box */
background-color:#222; /* background-color behind text (and the image) */
box-shadow:0 0 6px #bbb;
text-align:center; /* centers text when line first line is less than image width */
}
.captioned img { /* because of the dark background behind the text, images must be opaque, no transparency */
display:block;
width:100%; /* image will scale to fit its container */
height:100%; /* image will scale to fit its container */
}
.captioned p {
display:inline-block;
vertical-align:top; /* a reset */
color:#f8f8f8;
font-weight:bold;
font-family:Arial,sans-serif;
text-align:left; /* a reset so text will left-align if wrapped */
padding:0 .5em;
margin:.5em;
}
</style>
</head>
<body>
<div class="outer">
<div class="captioned">
<img src="images/graph.png" alt="" width="500" height="375">
<p>This image shows Global Warming Over Time</p>
</div>
</div>
</body>
</html>
EDIT: you’ll need to edit the path to the image.
Yes Ron, that is the effect I was after. BTW I took your advice, and will implement alt=“” in all images from now on…
A bit confused with the coding of the captioned image, but will look more, and try to digest it…
OK Ron, I noticed you used classes rather than ID, and understand why. But, supposing I have images that I want larget or smaller than 50%, but still captioned, in this respect am I limited?
My rule of thumb is to use tags and classes where styles need to be assigned and to add IDs where an item needs to be targeted by JavaScript (for example) or a link (fragment identifier). First of all, IDs can be used only once on a page (I’m sure you know that already), but I have also found that mixing IDs and classes can become a specifictiy nightmare. I keep IDs to a bare minimum.
I don’t quite understand the question… the caption will wrap as needed right now. Open the demo page in your favorite browser and drag the edge of the window narrow. The text will wrap at the width of the image. You can also change the width of .captioned to anything that you wish including a fixed value.
Are you asking if text can be allowed to extend past the left and right sides of a small image? If yes, then yes, but you will need to exercise more control (more settings) over that container. I would like to see what you have in mind before taking the time to code a guess . Besides, your graphics demos are cool
I guess I didn’t ask the question correctly, or maybe I don’t know how to ask the question correctly. I’ll try again. In the code that you sent me, the container was set at 100px or 100%. The image was set at 50% of that container.
The idea of classes is that they can be used more than once. What happens if I have images of i.e. 300px, 500px, and 750px, how do I regulate the container to the image size, not 50% and still be able to use the same class.
Jeez, I’m confusing myself, lol
I think the answer to your question (if I’m getting the right picture) is to add another class to div.captioned. See if this is on the right track.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image + caption, fluid b</title>
<!--
Will accommodate an image of any dimensions.
Image and caption are fluid.
If caption text is shorter than one full line, it will be centered as shown in this demo.
If text wraps to another line, it will be left aligned.
-->
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.outer {
outline:1px dashed blue; /* TEST Outline */
max-width:1000px; /* presumed to be the width of the page */
overflow:hidden;
padding:0;
margin:0 auto;
}
.captioned {
border:1px solid #ddd; /* you seem to have a border around the box */
background-color:#222; /* background-color behind text (and the image) */
box-shadow:0 0 6px #bbb;
text-align:center; /* centers text when line first line is less than cell width */
}
.captioned img { /* images must be opaque, no transparency */
display:block;
width:100%; /* image will scale to fit its container */
height:100%; /* image will scale to fit its container */
}
.captioned p {
display:inline-block;
vertical-align:top; /* a reset */
color:#f8f8f8;
font-weight:bold;
font-family:Arial,sans-serif;
text-align:left; /* a reset so text will left-align if wrapped */
padding:0 .5em;
margin:.5em;
}
.captioned {margin:1em 0;}
.pct30 {width:30%;}
.pct40 {width:40%;}
.pct50 {width:50%;}
.px300 {width:300px;}
.px500 {width:500px;}
.px750 {width:750px;}
</style>
</head>
<body>
<div class="outer">
<div class="captioned pct30">
<img src="images/graph.png" alt="" width="500" height="375">
<p>class="captioned pct30" yields an image that is 30% of the width of the parent container.</p>
</div>
<div class="captioned pct40">
<img src="images/graph.png" alt="" width="500" height="375">
<p>class="captioned pct40" yields an image that is 40% of the width of the parent container.</p>
</div>
<div class="captioned pct50">
<img src="images/graph.png" alt="" width="500" height="375">
<p>class="captioned pct50" yields an image that is 50% of the width of the parent container.</p>
</div>
<div class="captioned px300">
<img src="images/graph.png" alt="" width="500" height="375">
<p>class="captioned px300" yields an image with a fixed width of 300px.</p>
</div>
<div class="captioned px500">
<img src="images/graph.png" alt="" width="500" height="375">
<p>class="captioned px500" yields an image with a fixed width of 500px.</p>
</div>
<div class="captioned px750">
<img src="images/graph.png" alt="" width="500" height="375">
<p>class="captioned px750" yields an image with a fixed width of 750px.</p>
</div>
<div class="captioned">
<img src="images/graph.png" alt="" width="500" height="375">
<p>If NO additional class is declared, the width is effectively 100% because that's what blocks do.</p>
</div>
</div>
</body>
</html>
All I did was remove the width declaration from .captioned and assign it to a separate class.
Yes I see and understand now. It’s a bit late in the day for me to do it now, but I will integrate it tomorrow and you can see the result then…
Here’s what the code looks like on my mobile devices… https://www.dropbox.com/s/4qkgsdy4f0rfrco/caption.zip