HTML 5.

Recommended Posts

I have created a small SynWrite ( version 6.40.2770, if I remember correctly ) project file ( named "The_Holy_Bible_1.synw-proj" ), which contains a small HTML 5 file ( named "index.htm" ) and a small ".jpg" file ( named "Holy_Bible_KJV_1611_EDITION_2_CROP (640x632).jpg" ). My html file is is adapted from an example html file from the website ( named "www.w3schools.com" ). I have included the proper "meta" tag ( <meta> ) near the top of my html file, in order to enable Responsive Web Design ( RWD ). My web site ( named "The Holy Bible" ) appears fine ( for the most part ) in full screen mode in the Chrome web browser, for example. However, when I click on the "Restore Down" button in my web browser, the image on the left side of the web page does not fill that portion of the web page. Furthermore, when I edit the "image" tag ( "<img>" ) in my html file, to enable responsive web design for my image, the image actually shrinks in size when I view it in the Chrome web browser locally ( by typing in "file:///j:\index.htm" in the address bar of my browser ). I have included the screen capture files in this posting for your consideration. Do you have any suggestions? I have edited the html code in various ways, but nothing seems to work for my image size, so that it resizes to fill the left side of my web page. Thank you ( see Colossians 3:15, for example ) for your help. Keep in touch.

Sincerely in Christ,

Russell E. Willis

P.S. - Please read Proverbs 23:23.

P.P.S. - I will have to post the remaining screen capture files in additional posts, since there is a limit to the number of files to include per posting.

Share this post

Link to post

Share on other sites

Since I do not seem to be allowed to post any addition screen capture files at this time, maybe I can do so in response to someone's reply to my previous posting. Thank you ( see Colossians 3:15, for example ) for your help. Keep in touch.

Sincerely in Christ,

Russell E. Willis

P.S. - Please read Proverbs 23:23.

Share this post

Link to post

Share on other sites

Screen capture images are inappropriate for posting code. Use the code block <> provided in the online editor and paste in your code. SynWrite is merely an editor and has no relevance to your question. I have no idea what a "restore down" button is supposed to do. If your web page is live online then simply supply the link.

Share this post

Link to post

Share on other sites

Attention: Davej:
Yes, my web page is live online, the domain name is "theholybible1.ga ." The SynWrite editor reveals the HTML 5 code for my "index.htm" file. Your point regarding screen capture files seems to be mute, though, since I receive an error message that I am only allowed to upload 61.44kb ( and most of my screen capture files appear to be larger than that ). The "Restore Down" button is the one in the upper right-hand corner ( the middle symbol ) of the web browser ( with two squares in full-screen mode, and a single square in minimized mode ). As you suggested, I used the "Code" button ( "<>" ) to insert the code for my "index.htm" file, as shown below. I tried to copy and paste the original code from the Tryit Editor v3.5 ( the code for the example from which my html file was adapted ), but it would not work. The original code can be found at w3schools.com ( https://www.w3schools.com/html/html_layout.asp ). When I click on the "Restore Down" button to minimize the size of my web browser, the text in the right-hand column of my web page automatically resizes, but the image in the left-hand column does not, and my web page has an awkward appearance. The image tag ( "<img>" ), nested within the "<nav>" tag and the "<ul>" tag ( unordered list tag ), just above the "<article>" tag, is where the problem occurs. I have tried some other edits involving this section of code, but nothing has worked up to this point. Thank you ( see Colossians 3:15, for example ) for your help. Keep in touch.

Sincerely in Christ,

Russell E. Willis

P.S. - Please read Proverbs 23:23.

Davej:
This is the HTML 5 code for my "index.htm" file:
<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"> /* This line is the <meta> tag required for Responsive Web Design ( RWD ). */
<title>The Holy Bible.</title><style>
div.container {
width:100%;
border:1px solid gray;}
header, footer {
padding:1em;
color: white;
background-color: purple;
clear: left;
text-align: center;}
nav {float: left;
max-width:160px;
margin:0;
padding:0em;}
nav ul {
list-style-type: none;
padding:0;}
nav ul a {
text-decoration: none;}
article {
margin-left:616px;
border-left:1px solid gray;
padding:1em;
overflow: hidden;}</style></head><body><divclass="container"><header><h1>King James Version; 1611 Edition.</h1></header><nav><ul><imgsrc="Holy_Bible_KJV_1611_EDITION_2_crop (640x632).jpg"style="width:616px;height:739px;"></ul></nav><article><palign="justify">When, with my parents, I was visiting the Albany Mall in Albany, Georgia, on Friday, October 30,
2009, I was perusing the shelves in the "Bibles" section of the Books-A-Million
store. As soon as I saw this version of the Holy Bible, I knew I had a find.
I approached the cashier behind the counter, and asked her its price. I then
purchased it. </p><palign="justify">This particular copy is what Bible scholars call a "He" Bible
because Ruth 3:15 reads as follows: "15 Also he said, Bring the &#8214 vaile that thou
hast vpon thee, and holde it. And when she helde it, he measured sixe <i>measures</i>
of barley, and laide it on her: and <ins>he</ins> went into the citie." There were also
corresponding copies, in which the final phrase in verse fifteen reads ". . . <ins>she</ins>
went into the citie." This discrepancy indicates that this version of the Holy
Bible was produced by two presses. The word "she" was accepted as the correct
rendering in later editions. [ See <i>The Bible Almanac</i>, Edited by: PACKER,
JAMES I., A.M., D.Phil, TENNEY, MERRILL C., A.M., Ph.D., and WHITE, WILLIAM, JR.,
Th.M., Ph.D., THE OLD-TIME GOSPEL HOUR, LYNCHBURG, VIRGINIA, Copyright &#169 1980
by Thomas Nelson Publishers, p. 77. ]</p><palign="justify">On the page prior to page one, in this version of the Holy
Bible, we find the line "A reprint of the edition of 1611," with the following
line further down the page: "Third Printing Hendrickson Publisher's Edition &#8212
January 2008." The last line on this page reads "<i>Printed in the United States
of America.</i>" Clearly, then, this copy is not an original print produced by
the late Robert Barker, printer to the king's most excellent majesty, but a later
reprint.
<palign="justify">This version of the Holy Bible consists of eighty-one books (
the sixty-six canonical books, plus all fifteen of the Old Testament Apocyphal
books ). Concerning the fact that the Old Testament Apocryphal books are not
canonical, the following quotation is provided: ". . . . 3. Jesus and the New Testament
writers never once quote the Apocrypha, although there are hundreds of quotes
and references to almost all of the canonical books of the Old Testament. . . ." [
See <i>The NEW EVIDENCE THAT DEMANDS A VERDICT: Evidence I & II</i>, McDOWELL,
JOSH, THOMAS NELSON PUBLISHERS, Nashville, Copyright &#169 1999 by Josh D. McDowell,
p. 32. ] Please begin reading on page twenty-nine to get the immediate context.
</p><palign="justify">Roman numerals are employed to designate the chapter numbers
of the books ( e.g., "CHAP. IIII" ), and in the upper margin, following the beginning of the book, to
indicate the book number ( e.g., "I Corinthians," "II Corinthians," etc. ). Cross-references,
and other notations, which are relatively sparse, are provided on the inside and outside
margins of the page. On page thirty-nine ( in the Bibliographical Introduction ),
under the heading "<i>The Rules to be observed in the Translation of the Bible</i>,"
the following two rules are found: (1) ". . . . 6. No Marginal Notes at all to be
affixed, but only for the Explanation of the <i>Hebrew</i> or <i>Greek</i> Words,
which cannot, without some circumlocution, so briefly and fitly be express'd in
the Text. . . ." and (2) ". . . . 7. Such Quotations of Places to be marginally
set down as shall serve for the fit Reference of one Scripture to another. . . ."
</p><palign="justify">Please study the Holy Bible ( which is God's word - see Psalm
119:65-73, 142, and 151; John 17:1, 3, and 17; Romans 15:1-4 ( especially verse
4, for example ); and 2 Timothy 2:15; 3:16, 17, for example ). God has commanded
that the Scriptures be searched daily ( see Ecclesiastes 12:13 and Acts 17:11, for
example ). Life on this earth is short ( see James 4:13, 14, for example ).
</p><br><ahref="https://rewillis1.joomla.com"target="_blank">Click here to
visit my weblog.</a><br><ahref="mailto:rewillis1_1@juno.com">Click here to send me an e-mail message.</a><br><br>
Web page design by: Russell E. Willis.
</p></article><footer>How I found this copy of this version of the Holy Bible.</footer></div></body></html>

I have also adapted the following code ( found at https://www.w3schools.com/html/html_responsive.asp ):
<imgsrc="img_girl.jpg"style="width:100%;">
for my "index.htm" file, which is:
<imgsrc="The_Holy_Bible_KJV_1611_EDITION_2_crop (640x632).jpg"style="width:100%;">
But this line of HTML 5 code does not solve my problem. I am trying to get the image to fill the left-hand column of my web page regardless of whether the web browser is in full-screen mode or minimized mode.

Share this post

Link to post

Share on other sites

You have nav element with max-width of 160px; the image with width: 100%; will only extend to available width of its parent I.E 160px; by adding inline styling of 616px, you are extending image width beyond that of the nav element it is in.

To be responsive you should use percentages not fixed width with pixel units, and then media queries to stack each column above each over with width 100%; for smaller devices.

Share this post

Link to post

Share on other sites

I changed the pixel values to percentages in two places, and have noticed a marked improvement, but the problem is not quite solved. When I click on the "Restore Down" button to minimize the size of my browser window, the vertical size appears to be okay ( if I remember correctly ), but the horizontal size appears to be fixed ( the right edge of the image overlaps the border between the left and right columns ). I have included the edited code below for your consideration. I have briefly reviewed the media query concept, and am thinking, at this point in time, that perhaps a percentage value will be needed there, as well. Maybe something like:

@media only screen and (max-width: 40%) {

body {

<!-- I have to figure out what goes here. -->

}

}

Any suggestions you may have would be helpful. Thank you ( see Colossians 3:15, for example ) for your help. Keep in touch.

Sincerely in Christ,

Russell E. Willis

P.S. - Please read Proverbs 23:23.

<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>The Holy Bible.</title><style>
div.container {
width:100%;
border:1px solid gray;}
header, footer {
padding:1em;
color: white;
background-color: purple;
clear: left;
text-align: center;}
nav {float: left;
max-width:50%;
margin:0;
padding:0em;}
nav ul {
list-style-type: none;
padding:0;}
nav ul a {
text-decoration: none;}
article {
margin-left:40%;
border-left:1px solid gray;
padding:1em;
overflow: hidden;}</style></head><body><divclass="container"><header><h1>King James Version; 1611 Edition.</h1></header><nav><ul><imgsrc="Holy_Bible_KJV_1611_EDITION_2_crop (640x632).jpg"style="width:616px;height:739px;"></ul></nav><article><palign="justify">When, with my parents, I was visiting the Albany Mall in Albany, Georgia, on Friday, October 30,
2009, I was perusing the shelves in the "Bibles" section of the Books-A-Million
bookstore. As soon as I saw this version of the Holy Bible, I knew I had a find.
I approached the cashier behind the counter, and asked her its price. I then
purchased it. </p><palign="justify">This particular copy is what Bible scholars call a "He" Bible
because Ruth 3:15 reads as follows: "15 Also he said, Bring the &#8214 vaile that thou
hast vpon thee, and holde it. And when she helde it, he measured sixe <i>measures</i>
of barley, and laide it on her: and <ins>he</ins> went into the citie." There were also
corresponding copies, in which the final phrase in verse fifteen reads ". . . <ins>she</ins>
went into the citie." This discrepancy indicates that this version of the Holy
Bible was produced by two presses. The word "she" was accepted as the correct
rendering in later editions. [ See <i>The Bible Almanac</i>, Edited by: PACKER,
JAMES I., A.M., D.Phil, TENNEY, MERRILL C., A.M., Ph.D., and WHITE, WILLIAM, JR.,
Th.M., Ph.D., THE OLD-TIME GOSPEL HOUR, LYNCHBURG, VIRGINIA, Copyright &#169 1980
by Thomas Nelson Publishers, p. 77. ]</p><palign="justify">On the page prior to page one, in this version of the Holy
Bible, we find the line "A reprint of the edition of 1611," with the following
line further down the page: "Third Printing Hendrickson Publisher's Edition &#8212
January 2008." The last line on this page reads "<i>Printed in the United States
of America.</i>" Clearly, then, this copy is not an original print produced by
the late Robert Barker, printer to the king's most excellent majesty, but a later
reprint.
<palign="justify">This version of the Holy Bible consists of eighty-one books (
the sixty-six canonical books, plus all fifteen of the Old Testament Apocyphal
books ). Concerning the fact that the Old Testament Apocryphal books are not
canonical, the following quotation is provided: ". . . . 3. Jesus and the New Testament
writers never once quote the Apocrypha, although there are hundreds of quotes
and references to almost all of the canonical books of the Old Testament. . . ." [
See <i>The NEW EVIDENCE THAT DEMANDS A VERDICT: Evidence I & II</i>, McDOWELL,
JOSH, THOMAS NELSON PUBLISHERS, Nashville, Copyright &#169 1999 by Josh D. McDowell,
p. 32. ] Please begin reading on page twenty-nine to get the immediate context.
</p><palign="justify">Roman numerals are employed to designate the chapter numbers
of the books ( e.g., "CHAP. IIII" ), and in the upper margin, following the beginning of the book, to
indicate the book number ( e.g., "I Corinthians," "II Corinthians," etc. ). Cross-references,
and other notations, which are relatively sparse, are provided on the inside and outside
margins of the page. On page thirty-nine ( in the Bibliographical Introduction ),
under the heading "<i>The Rules to be observed in the Translation of the Bible</i>,"
the following two rules are found: (1) ". . . . 6. No Marginal Notes at all to be
affixed, but only for the Explanation of the <i>Hebrew</i> or <i>Greek</i> Words,
which cannot, without some circumlocution, so briefly and fitly be express'd in
the Text. . . ." and (2) ". . . . 7. Such Quotations of Places to be marginally
set down as shall serve for the fit Reference of one Scripture to another. . . ."
</p><palign="justify">Please study the Holy Bible ( which is God's word - see Psalm
119:65-73, 142, and 151; John 17:1, 3, and 17; Romans 15:1-4 ( especially verse
4, for example ); and 2 Timothy 2:15; 3:16, 17, for example ). God has commanded
that the Scriptures be searched daily ( see Ecclesiastes 12:13 and Acts 17:11, for
example ). Life on this earth is short ( see James 4:13, 14, for example ).
</p><br><ahref="https://rewillis1.joomla.com"target="_blank">Click here to
visit my weblog.</a><br><ahref="mailto:rewillis1_1@juno.com">Click here to send me an e-mail message.</a><br><br>
Web page design by: Russell E. Willis.
</p></article><footer>How I found this copy of this version of the Holy Bible.</footer></div></body></html>

P.P.S. - I may need to change the "style" attribute in the "<img>" tag, perhaps to "style = width:40%" or "style = max-width:40%."

Share this post

Link to post

Share on other sites

After just a few minutes of editing, I think I am close to a solution. If you will copy and paste the following code into a file ( named "<file_name>.htm" ) and type in "file:///<drive>:\<file_name>.htm" into the address bar of your browser, let me know what you think. The only quibble I have at this point in time is that the image and the text abuts the left and right outside borders. If I am not able to make this adjustment, I may just upload this code to my free web hosting site as is. Keep in touch.

Sincerely in Christ,

Russell E. Willis

P.S. - Please read Proverbs 23:23.

<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>The Holy Bible.</title><style>
div.container {
width:100%;
border:1px solid gray;}
header, footer {
padding:1em;
color: white;
background-color: purple;
clear: left;
text-align: center;}
nav {float: left;
max-width:50%;
margin:0;
padding:0em;}
nav ul {
list-style-type: none;
padding:0;}
nav ul a {
text-decoration: none;}
article {@media only screen and(max-width:35%){
body {
margin-left:35%;
border-left:1px solid gray;
padding:1em;
overflow: hidden;}}}</style></head><body><divclass="container"><header><h1>King James Version; 1611 Edition.</h1></header><nav><ul><imgsrc="Holy_Bible_KJV_1611_EDITION_2_crop (640x632).jpg"style="max-width:97%"></ul></nav><article><palign="justify">When, with my parents, I was visiting the Albany Mall in Albany, Georgia, on Friday, October 30,
2009, I was perusing the shelves in the "Bibles" section of the Books-A-Million
bookstore. As soon as I saw this version of the Holy Bible, I knew I had a find.
I approached the cashier behind the counter, and asked her its price. I then
purchased it. </p><palign="justify">This particular copy is what Bible scholars call a "He" Bible
because Ruth 3:15 reads as follows: "15 Also he said, Bring the &#8214 vaile that thou
hast vpon thee, and holde it. And when she helde it, he measured sixe <i>measures</i>
of barley, and laide it on her: and <ins>he</ins> went into the citie." There were also
corresponding copies, in which the final phrase in verse fifteen reads ". . . <ins>she</ins>
went into the citie." This discrepancy indicates that this version of the Holy
Bible was produced by two presses. The word "she" was accepted as the correct
rendering in later editions. [ See <i>The Bible Almanac</i>, Edited by: PACKER,
JAMES I., A.M., D.Phil, TENNEY, MERRILL C., A.M., Ph.D., and WHITE, WILLIAM, JR.,
Th.M., Ph.D., THE OLD-TIME GOSPEL HOUR, LYNCHBURG, VIRGINIA, Copyright &#169 1980
by Thomas Nelson Publishers, p. 77. ]</p><palign="justify">On the page prior to page one, in this version of the Holy
Bible, we find the line "A reprint of the edition of 1611," with the following
line further down the page: "Third Printing Hendrickson Publisher's Edition &#8212
January 2008." The last line on this page reads "<i>Printed in the United States
of America.</i>" Clearly, then, this copy is not an original print produced by
the late Robert Barker, printer to the king's most excellent majesty, but a later
reprint.
<palign="justify">This version of the Holy Bible consists of eighty-one books (
the sixty-six canonical books, plus all fifteen of the Old Testament Apocyphal
books ). Concerning the fact that the Old Testament Apocryphal books are not
canonical, the following quotation is provided: ". . . . 3. Jesus and the New Testament
writers never once quote the Apocrypha, although there are hundreds of quotes
and references to almost all of the canonical books of the Old Testament. . . ." [
See <i>The NEW EVIDENCE THAT DEMANDS A VERDICT: Evidence I & II</i>, McDOWELL,
JOSH, THOMAS NELSON PUBLISHERS, Nashville, Copyright &#169 1999 by Josh D. McDowell,
p. 32. ] Please begin reading on page twenty-nine to get the immediate context.
</p><palign="justify">Roman numerals are employed to designate the chapter numbers
of the books ( e.g., "CHAP. IIII" ), and in the upper margin, following the beginning of the book, to
indicate the book number ( e.g., "I Corinthians," "II Corinthians," etc. ). Cross-references,
and other notations, which are relatively sparse, are provided on the inside and outside
margins of the page. On page thirty-nine ( in the Bibliographical Introduction ),
under the heading "<i>The Rules to be observed in the Translation of the Bible</i>,"
the following two rules are found: (1) ". . . . 6. No Marginal Notes at all to be
affixed, but only for the Explanation of the <i>Hebrew</i> or <i>Greek</i> Words,
which cannot, without some circumlocution, so briefly and fitly be express'd in
the Text. . . ." and (2) ". . . . 7. Such Quotations of Places to be marginally
set down as shall serve for the fit Reference of one Scripture to another. . . ."
</p><palign="justify">Please study the Holy Bible ( which is God's word - see Psalm
119:65-73, 142, and 151; John 17:1, 3, and 17; Romans 15:1-4 ( especially verse
4, for example ); and 2 Timothy 2:15; 3:16, 17, for example ). God has commanded
that the Scriptures be searched daily ( see Ecclesiastes 12:13 and Acts 17:11, for
example ). Life on this earth is short ( see James 4:13, 14, for example ).
</p><br><ahref="https://rewillis1.joomla.com"target="_blank">Click here to
visit my weblog.</a><br><ahref="mailto:rewillis1_1@juno.com">Click here to send me an e-mail message.</a><br><br>
Web page design by: Russell E. Willis.
</p></article><footer>How I found this copy of this version of the Holy Bible.</footer></div></body></html>

P.P.S. - It appears to resize rather nicely.

Share this post

Link to post

Share on other sites

I originally thought your display name was an unusual foreign name, until I considered it further. Now I realize otherwise. I would just like to kindly suggest that you find a respectable display name ( see Romans 12:3, for example, and cf. 1 Thessalonians 5:22, for example ). I suppose I need to be corresponding with someone on this forum who has a respectable display name.

Sincerely in Christ,

Russell E. Willis

P.S. - Please read Proverbs 23.23.

Share this post

Link to post

Share on other sites

I should look up w3schools tutorial on media queries, they use pixels to represent different device width, which adjust the column layout from two column to single column, from normal dropdown to a burger menu dropdown, by using percentages in this case it wont be able to adjust because 30% is non fixed width, it changes as viewport width changes, and so it will never take effect.

The name is not disrespectful name, in your mind you might think it may disrespectful but that is your mind giving way to misguided thoughts of somthing that does not exist, so i suggest you keep your thoughts to yourself and keep it shut until you know the facts.

P.P.S. - My previous response was based on the assumption that your display name was a cryptic form of "ThisOneSuck." I have had negative experiences with social media in the past, so I figured your display name was just another example of that. I do not freely use social media, but I have used this social media technical support site ( and another one for web hosting assistance ). If I was wrong about my assumption, then I will stand corrected on this issue ( see Proverbs 12:1, for example ). If you do not wish to provide me with any further assistance on this forum, then I will understand. Thank you ( see Colossians 3:15, for example ) for your help. Keep in touch.

Share this post

Link to post

Share on other sites

Thank you ( see Colossians 3:15, for example ) for finally clarifying your display name. I do not think that this forum is the proper place for a debate. I will officially ignore you through social media.

Link to post

Share on other sites

Yeah this whole topic is just bizarre. This is a forum for helping people learn how to program, this is not the correct venue to push your chosen morality or pass personal judgment on other people. If you'd like further help through this forum Rewillis, please leave religion and morality out of it and stick to programming. If you find yourself unable to separate those then it's probably best to look for help elsewhere. I'm going to close this topic, if you'd like to start over you're welcome to do that.