YELCHH! Help me AUTO-RATIO & center? It's just horrible (margins, widths, IMG)

http://johns-jokes.com/downloads/sp-a/semicolon/john_betong.php

I have made a few modifications to the above and checked it with IEx10.

Let me know if it keeps IEx8 happy and what else is required.

[FONT=Verdana]Fun things to do with pix.

The same sample images again. This time the css is written at the top-of-the-page instead of inline. Get used to it!!! It’s already “old school” <grin>. Copy and Paste into a new file. See how it works… play with it. Compare this page to the previous page. Figure out how the CSS relates to the HTML. It’s pretty straight forward.

Notice how the images change size and notice when they stop changing size. The magenta box shows a 90% width applied to the .wrapper.

Any of the pix can scale to the full width of the browser window if the width is 100% and no limiting max-width is set, and if the wrapper is not limited by a percent width. The mushrooms and plaid images are pretty good playgrounds for this exercise.

I dorked with the last image just because I could. It was a non-scaling image anyway, so I made it a centered background image that is clipped at the edges if the window is narrowed enough. No particular reason. Just playing. Notice how empty the divs look?

Doctypes and validation sound like the least of your interests right now. Until you are ready to scrap the UPPERCASE code and transfer the deprecated HTML tags to css properties (as John’s first example stated), talk about validation sounds patronizing.

“Strict” is not “dumber” than “Transitional”. Quite the contrary, “Strict” is “forward-looking”, whereas “Transitional” accepts the “old school” UPPERCASE code and “old school” deprecated tags without balking. It also handles the space around inline objects differently than newer doctypes. If you have a choice, tune in to HTML 4.01 strict. XHTML is “stricter”, has more restrictions/expectations, than HTML “strict”. If you’ve never been there, I don’t recommend the trip. Stick with HTML 4.01 strict and start reading about HTML 5.

Your original example page seems to have been created to learn how to auto-resize images in a fluid/responsive environment. I probably clouded the focus by mentioning doctypes.
[/FONT]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?948914-YELCHH!-Help-me-AUTO-RATIO-amp-center-It-s-just-horrible-(margins-widths-IMG)
Thread: YELCHH! Help me AUTO-RATIO & center? It's just horrible (margins, widths, IMG) . . .
Jan 6, 2013 17:43
semicolon

1.  mushrooms
2.  pink plaid
3.  motorcycle
4.  fall leaves

IE8 does not scale the height correctly.  I do not know if there is a fix.
-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <title>auto-resizing images</title>
    <style type="text/css">
body {
    background-image:url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
    background-position:50% 0;
    font-family:helvetica, arial, sans-serif;
    text-align:center;   /* Center aligns inline objects. */
    padding:0;
    margin:70px 0 50px;  /* Applies {margin-top:70px} and {margin-bottom:50px} to the top and bottom of the page.  Zero's left and right side defaults. */
}
.wrapper {
    outline:1px solid magenta;   /* show-and-tell testing.  Delete whenever.... */
    width:90%;           /* the wrapper div will expand to 90% of the width of the window or whatever percentage you choose. */
    margin:35px auto 0px;
}
img {
    display:block;       /* eliminates extra white space beneath the image */
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;    /* the {box-sizing:border-box} property includes the dimensions of the border with the image. */
    margin:0 auto;       /* "auto" centers the image in its container */
}
.mushrooms {
    width:100%;          /* the image will expand to the width of the wrapper div or whatever percentage of it you choose. */
    max-width:600px;     /* you can assign a max-width here or in the .wrapper, if you wish. */
}
.plaid {
    border:4px dashed black;
    background-color:white;
    width:100%;          /* the image will expand to the width of the wrapper div or whatever percentage of it you choose. */
    max-width:450px;     /* you can assign a max-width here or in the .wrapper, if you wish. */
    padding:25px;
}
.dolphin {
    border:44px ridge gray;
    width:80%;           /* the image will expand to the width of the wrapper div or whatever percentage of it you choose. */
    max-width:800px;     /* you can assign a max-width here or in the .wrapper, if you wish. */
}
.leaves {
    background-image:url(http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-leaves.jpg);
    background-position:50% 50%;
    background-repeat:no-repeat;
    height:275px;
    margin:35px auto;
}
    </style>
</head>
<body>

<!-- 1. mushrooms -->
<div class="wrapper">
    <img class="mushrooms" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
</div>

<!-- 2. pink plaid -->
<div class="wrapper">
    <img class="plaid" style="" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
</div>

<!-- 3. dolphin -->
<div class="wrapper">
    <img class="dolphin" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
</div>

<!-- 4. fall leaves -->
<div class="wrapper">
    <div class="leaves"></div>
</div>

</body>
</html>

@ronpat;

I added the menu and linked the relevant stylesheet.css to your file and you can see the results here:
http://johns-jokes.com/downloads/sp-a/semicolon/ronpat-002.php

Check the Validation button on the top right and I will let you explain the following error:

Line 8, Column 207: there is no attribute “data-href”

…and also if it behaves nicely with IEx 8, etc :slight_smile:

Mornin’ John. Unfortunately, DOLPHIN doesn’t shrink as gracefully as Ronpat’s version. However, I really dig how you colorized that body column magenta for the purposes of seeing which elements are lining up and which aren’t. What a great technique; I’ll replicate it as we continue. because it makes it so much easier to see.

s

Well that at least is honest. :x

I assure you I wasn’t trying to be patronizing. I don’t code the way everyone else does; I code the way I can most comfortably read it. If some of the attributes you example are written in lower case, I’m not hiking them into uppercase to be provocative, I’m doing it because I’m learning. It would mortify you to see what I consider to be the most comfortable-to-navigate HTML code: Every < tag is on its own line; atttributes that have been customized are in ALL CAPS; and (horror of horrors) the entire page is blocked left. There is no indentation whatsoever. In time I may adapt to the universally-accepted norm for what is “acceptable” practice, but I would appreciate it if you could bear with me while I learn to crawl, and not criticize me for being unable to tango before I can even stand up.

I’ve had such a long-standing problem with being criticized for how “ugly” my code is Ronpat that by now I usually just drop it into Sea Monkey’s Composer (which does a neat job of instantly stripping out my hard work) before I post anything publically. I can’t read it of course, but some people won’t even do me the courtesy of a reply before it’s in a format they like (format being apparently more important to them than simply helping me to understand what’s happening). So no, Ronpat, you are not the first by a long shot to note the idiosynchranicity of my coding style. I apologize if it offends anyone and I’ll strip it in Sea Monkey before posting here, if you really insist. Just be aware that I have to then go in and change it all over again to feel comfortable working with it. I’m a writer you see, and I suspect that my eccentricity is directly related to how aesthetically repugnant a page of HTML code is to my tender sensibilities LOL. :stuck_out_tongue: No offense friends, please. I’m deeply grateful for your help.

What’s funny is that, if you were following closely, you may have noticed that I first posted this in the HTML forum. As though I could ever escape the tyranny of { } LOL! The moderators promptly lifted me and dropped me over here in CSS whether I liked it or not. I yield! I yield! :rofl:

Interesting. I learned something there.

You’re absolutely correct: This entire thread is primarily about the placement of IMAGES. Well . . . should I be doing this image-intensive page in HTML5? What do you think?

I’m going to examine your CSS now and – please don’t be offended if I reformat parts of it Ronpat. It’s the outcome that matters at this point, and coding style doesn’t come into it unless acutely relevant (eg. materially altering the outcome).

semicolon

Hi, John. I’m intrigued because FF and IE8 on my WinXP box don’t show the things that you mention.

I couldn’t explain that “data-href” thingy… I don’t see it; and the height still stretches out of proportion in IE8.

…And a couple of XHTML-style close tags (space forward-slash) have been inserted, too.

I would love to understand why it is working nicely for you but not for me! Maybe there is hope for that IE8 behavior.

Thanks,
Ron

Test Drive this on IEx 8 guys (I had to use a different image from DOLPHIN because it was, erm . . . swimming away :wink: heh heh).

What I’d like to accomplish is a “plumping out” of the hilighting that occurs in the footer text. Any thoughts?

Thanks.

s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>FONT STYLING with "STRICT" + <img style="display: BLOCK; . . .</title>

<!-- ======================================================================================== -->
<style type="text/css">

body {
    background-image: url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
    background-position: 50% 0;
    font-family: helvetica, arial, sans-serif;
    text-align: center;   /* Center aligns inline objects. */
    padding: 0;
    margin: 70PX 0 50PX;  /* Applies {margin-top: 70PX} and {margin-bottom: 50PX} to the top and bottom of the page.  Zero's left and right side defaults. */
}

img {
    display: block;       /* eliminates extra white space beneath the image */
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    /* the {box-sizing: border-box} property includes the dimensions of the border with the image. */
    margin: 0 auto;       /* "auto" centers the image in its container */
}

.WRAPPER {
    outline: 1PX solid magenta;   /* show-and-tell testing.  Delete whenever.... */
    width: 64%;           /* the WRAPPER div will expand to 90% of the width of the window or whatever percentage you choose. */
    margin: 35PX auto 0PX;
}

.MUSHROOMS {
    width: 80%;          /* the image will expand to the width of the WRAPPER div or whatever percentage of it you choose. */
    max-width: 600PX;     /* you can assign a max-width here or in the .WRAPPER, if you wish. */
}

.LEAVES {
    width: 80%;
    max-width: 400PX;
}

.HILIGHT1 {
    margin-top: 20PX;
    margin-left: 24%;
    margin-right: 24%;
    width: 100%;
    max-width: 552PX;
    font-size: 14PX;
    line-height: 16px;
    color: RED;      /* #444444 */
}

.HILIGHT2 {
    background-color: WHITE;
    margin-left: 24%;
    margin-right: 24%;
    width: 100%;
    max-width: 552PX;
    font-size: 10PX;
    line-height: 12PX;
    color: BLUE;     /* #666666 */
}

</style>
<!-- ======================================================================================== -->

</head>

<body>

<!-- 1. MUSHROOMS -->
<div class="WRAPPER">
    <img class="MUSHROOMS" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
</div>

<!-- 2. BORDER-PLAID (PINK) -->
<div style="text-align: center; margin-top: 35PX;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
    <div>
    <img style="display: BLOCK; max-width: 450PX; max-height: 450PX; margin: AUTO; width: 100%; padding: 25PX; border: 4PX dashed black; background-color: white;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
    </div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- 3. BORDER-ARCHWAY -->
<div style="text-align: center; margin-top: 35PX;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
    <div>
    <img style="display: BLOCK; max-width: 700PX; max-height: 509PX; margin: AUTO; width: 100%; border: 44PX RIDGE #BFBFBF;" src="http://www.fineliving.ro/wp-content/uploads/2012/11/vacanta_muntenegru1.jpg" alt="">
    </div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- 4. FALL LEAVES -->
<div class="WRAPPER">
    <img class="LEAVES" src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-LEAVES.jpg" alt="">
</div>

<!-- TESTING LINE-HEIGHT with HILIGHTING -->
<div class="HILIGHT1">
<span style="background-color: WHITE;">
XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</span>
</div>

<div class="HILIGHT2">
XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
XXX XXXXXXXX XXXX X XXXXXX
</div>

</body>
</html>

Oh and . . . yes, I have changed the % sizing on a few of the images, as well as assigning #BFBFBF; to ARCHWAY’s border because IEx was rendering it almost black. :mad:

I’ve basically given up hope that any image with a border (I have two) can render accurately with anything other than inline specifications . . . or the friggin’ thing just won’t work. Even now the image heights in IEx 8 are not true; but they’re the best I can get. Negative margins? Inquiring Minds want to Know . . . :smiley:

semiAWAKE

Oh and, me too: Win XP, Firefox, and (only when I must) IEx 8 phhhhhhlttt!

semicolon, my first code looked EXACTLY like yours… invalid doctype, mixed case inline styles, deprecated attributes… and for the same reasons, I was new. Fortunately, I didn’t know anything about the validator until AFTER I had figured out how to write css at the top of the page. THEN I was able to focus on choosing a valid doctype and losing the deprecated attributes and mixed case styles.

If inline styles are how you prefer to write at this stage of learning, that’s OK; they work. If you write uppercase because it’s easier to read, that’s OK, too; it works. Deprecated attributes and uppercase styles will fail validation, so don’t expect “clean”, valid code for awhile, OK? Your first goal should be to learn to read and write css by whatever route that takes. You know where you are and where you are going. Better-written, valid code will come in time.

Stray (unmatched) tags should ALWAYS be avoided. Indenting is a visual aid to writing balanced code and helps avoid strays; the validator usually spots them (but not always). In my life, there is no substitute for a text editor that highlights tags with tell-tale colors. There are several such editors on the market. I have used EditPad Pro for years.

I do not follow the HTML forum, so I did not know that you first posted there. The moddie rightly moved your post to the css forum since your questions are about styling.

If your post is primarily about resizing images, then why the tables? I never quite figured that out. They are working the way tables work. They obviously clutter the picture if you are only interested in the images.

I will encourage you to stick with an HTML 4.01 strict doctype and start reading about HTML 5. WHY? Because HTML 5 is still under development. Because HTML 4 is less “permissive” than HTML 5, it helps teach structure… and as John said, it’s easier to validate. Become abreast of HTML 5 because, although still under development, it is already being used and introduces new tags to encourage a new way of thinking about HTML code and CSS. There is a lot to learn.

By all means, reformat my code to suit yourself. It’s good practice :slight_smile: I wrote it as I did quite intentionally as a side-by-side comparison tool. A little push toward separating the CSS from the HTML. Reformatting is part of learning. Go for it. :slight_smile:

Last piece of advice: Don’t take “critics” personally. Some folks are entrenched in personal preferences whereas others are less dogmatic, but everyone means well. Evaluate advice always asking “why”. It’s called learning.

EDIT: You were posting while I was writing. Will catch up! :slight_smile:

Ron, any thoughts to helping me “plump out” the 2 hilighting classes at the footer of my most recent code? I do want it sitting on top of the background image, but I’d like to expand the white background on both to make the text a little easier to read.

Explorer is such a pita!!! lol

Okay, cleaned up, ((padded)), and the best I can do! . . .

s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>FONT STYLING with "STRICT" + <img style="display: BLOCK; . . .</title>

<!-- ======================================================================================== -->
<style type="text/css">

body {
    margin-top: 41PX;
    margin-bottom: 50PX;
    margin-left: 18%;
    margin-right: 18%;
    background-image: url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
    background-repeat: repeat;
    font-family: HELVETICA, ARIAL, SANS-SERIF;
    text-align: center;   /* Center aligns inline objects. */
    padding: 0;
}

img {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    /* the {box-sizing: border-box} property includes the dimensions of the border with the image. */
}

.HILIGHT1 {
    margin-top: 20PX;
    margin-bottom: 0PX;
    margin-left: AUTO;
    margin-right: AUTO;
    max-width: 552PX;
    font-size: 14PX;
    line-height: 16px;
    color: RED;      /* #444444 */
    text-align: center;
}

.HILIGHT2 {
    margin-top: 0PX;
    margin-bottom: 0PX;
    margin-left: AUTO;
    margin-right: AUTO;
    background-color: WHITE;
    padding: 4PX 7PX 4PX 7PX;
    max-width: 552PX;
    font-size: 10PX;
    line-height: 12PX;
    color: BLUE;     /* #666666 */
    text-align: center;
}

</style>
<!-- ======================================================================================== -->

</head>

<body>

<!-- 1. MUSHROOMS -->
    <div style="margin-top: 35PX; text-align: center;">
    <img style="display: BLOCK; max-width: 500PX; max-height: 145PX; margin: AUTO; width: 100%;" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
    </div>

<!-- 2. |||||||||||||||| BORDER-PLAID (PINK) |||||||||||||||| -->
<div style="margin-top: 35PX; text-align: center;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
    <div>
    <img style="display: BLOCK; max-width: 450PX; max-height: 450PX; margin: AUTO; width: 100%; padding: 25PX; border: 4PX dashed black; background-color: white;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
    </div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- 3. |||||||||||||||| BORDER-ARCHWAY |||||||||||||||| -->
<div style="margin-top: 35PX; text-align: center;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
    <div>
    <img style="display: BLOCK; max-width: 700PX; max-height: 509PX; margin: AUTO; width: 100%; border: 44PX RIDGE #BFBFBF;" src="http://www.fineliving.ro/wp-content/uploads/2012/11/vacanta_muntenegru1.jpg" alt="">
    </div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- 4. FALL LEAVES -->
    <div style="text-align: center;">
    <img style="display: BLOCK; max-width: 400PX; max-height: 275PX; margin: AUTO; width: 100%;" src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-LEAVES.jpg" alt="">
    </div>

<!-- LINE-HEIGHT, HILIGHTING & PADDING -->
    <div class="HILIGHT1">
<span style="background-color: WHITE; padding: 4PX 7PX 0PX 7PX;">
XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</span>
    </div>

    <div class="HILIGHT2">
XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
XXX XXXXXXXX XXXX X XXXXXX
    </div>

</body>
</html>

Damn it, I knew there was something I would forget. Now, originally you may recall I had a top margin of 76PX? So rather than have the first element in the page have a 0PX margin, I decided to make the body margin-top 41PX, so that that first element (MUSHROOMS) has the same uniform 35PX top margin as its fellows below.

Well (as with almost everything I have attempted to place into a CSS style header) the body isn’t rendering correctly. Now, I guess this was too much of a stretch but I thought that 41 + 35 = 76 would combine to create a top margin of 76PX. Obviously, no. So this isn’t possible (combining top margins)?

Vertical margins collapse to the height of the greater value, with certain exceptions of course. You would have to give that top item or the top of the body a full 76px margin.

@semicolon;

http://johns-jokes.com/downloads/sp-a/semicolon/semicolon-003.php

Above is the link to your script from post #31.

Please note I have made the following changes:

  1. changed doctype to show more errors and warnings.
  2. added a common stylesheet necessary for the top button links
  3. added the top menu button links and amended link to validator.w3.org - PLEASE TRY IT

Please note that the doctype is your friend and guide to minimise browser conflicts. All browsers are coded differently but all follow the w3.org standards. BIG problems arise when the errors and warnings occur because the coding team does not have standards to follow. No doubt heated discussions have eventually decided on how the coder’s browser should handle the discrepancies. Also no doubt a time consuming long series of tests also occur to guess a best match.

External style-sheets make it Oh so easy to standardise a site and future changes are simplified.

Eventually managed to track the elusive “data-href”…

Problem was I was viewing the source code of another page using Firefox Addon “Html Validator 0.9.5.1”. The single error was from the following: <div class=“g-plus” data-href="//plus.google.com/

Please accept my apologies.

No apology necessary, my friend. Thanks for the feedback.

Ron

Thanks for giving it a home John! I just created an account at
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads
so I’ll see if any of the developers there have a tweak for the IMG height problem that occurs in IEx 8

and an explanation for why it occurs :stir: nowhere else

and will post any fix here. Don’t hold your breath!! :lol:

semicodin