Web hosting for web scripting
- Thread starter rockytopva
- Start date
-
Welcome to Christian Forums, a Christian Forum that recognizes that all Christians are a work in progress.
You will need to register to be able to join in fellowship with Christians all over the world.
We hope to see you as a part of our community soon and God Bless!
Ill look into your CSS once I get out of work and come up with a solution. Most likely its just a second CSS sheet needed only for mobile devices. Sniff the browser for resolution and have it go to that CSS file.
But let me check.
But let me check.
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
After some testing with different screen resolutions I find 1100px in width the limits for the three column format... And then we redirect
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>The Merrimac Pentecostal Holiness Church</title>
<script type="text/javascript">
<!--
if (screen.width <= 1100) {
window.location = "http://www.merrimacchurch.com/remote/index.html";
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="merrimac.css" />
</head>
The next challenge is to get the webm or m4v videos to work with the Apple small devices (Iphone or IPad). I read that they do not like to load media to keep the cell phone data usage at a minimum.
<video id="PhChurch" src="media/Phchurch.webm" width="480" height="360" preload></video>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>The Merrimac Pentecostal Holiness Church</title>
<script type="text/javascript">
<!--
if (screen.width <= 1100) {
window.location = "http://www.merrimacchurch.com/remote/index.html";
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="merrimac.css" />
</head>
The next challenge is to get the webm or m4v videos to work with the Apple small devices (Iphone or IPad). I read that they do not like to load media to keep the cell phone data usage at a minimum.
<video id="PhChurch" src="media/Phchurch.webm" width="480" height="360" preload></video>
Ok first things first. I see in the CSS that you still have not set all the margins, padding and divs to percentages. Do this and see if that helps render it on mobile devices first.
Then kill those tables and use UL and LI tags and CSS them with the list-style-type: none to remove the bullets. If you need to make columns like a table use this as reference. Just change everything to percents except for the borders. Though seriously you don't really need borders anymore on columns they look cleaner without it.
IF all that percentage changes does not work, then make a mobile friendly CSS not a whole page and use media queries to send them to that CSS instead. You wont need all of these queries just keep it simple to the most used devices.
Now your flash/webm issue, switch to MP4 as that is supported on all browsers and will work on apple devices better than webm. Sadly the apple folks don't like webm, sad for them it is very good, and so they will support MP4. An online converter is https://www.flash-banner-converter.com/converter/that should do it. If not search around for a few more.
Then you should address the h1 h2 and other text css. Your header where your logo is should be an h1 tag of 200-250% so it stands out. Your h2 should be 125-150 and both should be bold. Use your h2 tag for the right section instead of using a bold tag for the first few words. Think: h2 how to be saved h2 and then the rest should be paragraph text weight and size.
Lastly use shorthand for css. Instead of naming each CSS element think for font {font: normal 105% sans-serif;} this will make it a bit smaller of a css file to load when mobile is on their air time instead of wireless.
ex.
body {
background-color: #FFFFFF;
font-family: Verdana,Geneva,sans-serif;
font-size: small;
margin: 0px;
}
Becomes
body {background-color: #fff; font: normal 85% sans-serif; margin 0;}
If you have any questions let me know.
Then kill those tables and use UL and LI tags and CSS them with the list-style-type: none to remove the bullets. If you need to make columns like a table use this as reference. Just change everything to percents except for the borders. Though seriously you don't really need borders anymore on columns they look cleaner without it.
IF all that percentage changes does not work, then make a mobile friendly CSS not a whole page and use media queries to send them to that CSS instead. You wont need all of these queries just keep it simple to the most used devices.
Now your flash/webm issue, switch to MP4 as that is supported on all browsers and will work on apple devices better than webm. Sadly the apple folks don't like webm, sad for them it is very good, and so they will support MP4. An online converter is https://www.flash-banner-converter.com/converter/that should do it. If not search around for a few more.
Then you should address the h1 h2 and other text css. Your header where your logo is should be an h1 tag of 200-250% so it stands out. Your h2 should be 125-150 and both should be bold. Use your h2 tag for the right section instead of using a bold tag for the first few words. Think: h2 how to be saved h2 and then the rest should be paragraph text weight and size.
Lastly use shorthand for css. Instead of naming each CSS element think for font {font: normal 105% sans-serif;} this will make it a bit smaller of a css file to load when mobile is on their air time instead of wireless.
ex.
body {
background-color: #FFFFFF;
font-family: Verdana,Geneva,sans-serif;
font-size: small;
margin: 0px;
}
Becomes
body {background-color: #fff; font: normal 85% sans-serif; margin 0;}
If you have any questions let me know.
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
Any idea on how I can keep these three columns centered without putting them in tables and using CSS?
http://merrimacchurch.com/
http://merrimacchurch.com/
The three columns in your #main?
Or the three columns of your table in the center of the page above your flash object?
Or the three columns of your table in the center of the page above your flash object?
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
I have 6 classed for formatting the structure of this web page...pom2014 said:
body - The background
header - The top row
cright - The right column
main - The center column
cleft - The left column
footer - The bottom row
The cleft and cright columns are 'stuck' to the left and right places on the screen.
float: right; - Sticks the cright column to the right of the screen
float: left; - Sticks the cleft column to the left of the screen
The site looks fine for the narrower computer screen, but as we get wider there is an annoying gap that grows between the columns.
body {
background-image: url("media/greentile.jpg");
background-repeat: repwat-y;
color: #rgb(21, 33, 15);
font-family: Verdana,Geneva,sans-serif;
font-size: small;
margin: 0px;
}
#main {
font-family: Verdana,Geneva,sans-serif;
background-image: url("media/greentile.jpg");
background-repeat: repwat-y;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
margin-right: 290px;
margin-left: 165px;
height: 620px;
}
#cright {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
float: right;
width: 240px;
height: 570px;
}
#footer {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: both;
height: 57px;
}
#header {
font-family: "lucida calligraphy", "Comic Sans MS", "Lucida Console";
font-size: 150%;
margin: 10px;
height: 90px;
}
#cleft {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
float: left;
width: 115px;
height: 480px;
}
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
Thanks and welcome to CB. I have done the whole project in notepad as I want to learn the CSS code.Igor Almeida said:
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
This is very basic but should give you an idea of how to get this done:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {max-width:100%;font: normal 105% sans-serif; color: #666;}
#pagewrap {padding: 1%; width: 100%; margin: 1% auto;}
header {height: 30%;padding: 0 1%;}
#content {width: 25%;float: left;padding: 1% 1%;overflow:none;}
#middle {width: 33%;float: left;padding: 1% 2%;margin: 0 1% 1% 1%;overflow:none;}
#sidebar {width: 25%;padding: 1% 1%;float: left; overflow:none;}
footer {clear: both;padding: 0 3%;}
@media screen and (max-width: 980px)
{#pagewrap {width: 94%;}
#content {width: 41%;padding: 1% 4%;}
#middle {width: 41%;padding: 1% 4%;margin: 0px 0px 1% 1%;float: right;}
#sidebar {clear: both;padding: 1% 4%;width: auto;float: none;}
header, footer {padding: 1% 4%;}}
@media screen and (max-width: 600px)
{#content {width: auto;float: none;}
#middle {width: auto;float: none;margin-left: 0;}
#sidebar {width: auto;float: none;}}
@media screen and (max-width: 480px)
{header {height: auto;}
h1 {font-size: 200%;}
{#content {width: auto;float: none;}
#middle {width: auto;float: none;margin-left: 0;}
#sidebar {width: auto;float: none;}}
</style>
</head>
<body>
<div id="pagewrap">
<header>
<h1>HEADER</h1>
</header>
<section id="content">
<h2>Left Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</section>
<section id="middle">
<h2>Middle Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</section>
<aside id="sidebar">
<h2>Right Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</aside>
<footer>
<h4>Footer</h4>
<p>FOOTER</p>
</footer>
</div>
</body>
</html>
Of course you can modify this to match your current theme and markup. But this should help you scale from small to large devices without so much consternation.
I would NEVER use a bootstrap as it often has elements you do not want or need. KISS, keep it simple stupid, is my way of handling it. Don't add code you will never use. And always, write once, run anywhere.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {max-width:100%;font: normal 105% sans-serif; color: #666;}
#pagewrap {padding: 1%; width: 100%; margin: 1% auto;}
header {height: 30%;padding: 0 1%;}
#content {width: 25%;float: left;padding: 1% 1%;overflow:none;}
#middle {width: 33%;float: left;padding: 1% 2%;margin: 0 1% 1% 1%;overflow:none;}
#sidebar {width: 25%;padding: 1% 1%;float: left; overflow:none;}
footer {clear: both;padding: 0 3%;}
@media screen and (max-width: 980px)
{#pagewrap {width: 94%;}
#content {width: 41%;padding: 1% 4%;}
#middle {width: 41%;padding: 1% 4%;margin: 0px 0px 1% 1%;float: right;}
#sidebar {clear: both;padding: 1% 4%;width: auto;float: none;}
header, footer {padding: 1% 4%;}}
@media screen and (max-width: 600px)
{#content {width: auto;float: none;}
#middle {width: auto;float: none;margin-left: 0;}
#sidebar {width: auto;float: none;}}
@media screen and (max-width: 480px)
{header {height: auto;}
h1 {font-size: 200%;}
{#content {width: auto;float: none;}
#middle {width: auto;float: none;margin-left: 0;}
#sidebar {width: auto;float: none;}}
</style>
</head>
<body>
<div id="pagewrap">
<header>
<h1>HEADER</h1>
</header>
<section id="content">
<h2>Left Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</section>
<section id="middle">
<h2>Middle Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</section>
<aside id="sidebar">
<h2>Right Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</aside>
<footer>
<h4>Footer</h4>
<p>FOOTER</p>
</footer>
</div>
</body>
</html>
Of course you can modify this to match your current theme and markup. But this should help you scale from small to large devices without so much consternation.
I would NEVER use a bootstrap as it often has elements you do not want or need. KISS, keep it simple stupid, is my way of handling it. Don't add code you will never use. And always, write once, run anywhere.
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
Thanks! I am wondering if I could nest a class within a class and have the nested classes...
LeftArea - Justify right
RightArea - Justify left
LeftArea - Justify right
RightArea - Justify left
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
Pom... I copied your html code into a text document and have been playing around with it. Thank you by the way.pom2014 said:
@rockytopva:
Have you ever heard of codeacademy.com ? That's a great place to start with html5 css and such. Check it out and let me know what you think.
Have you ever heard of codeacademy.com ? That's a great place to start with html5 css and such. Check it out and let me know what you think.
- Dec 31, 2010
- 5,608
- 2,759
- 113
- Faith
- Christian
- Country
- United States
Thanks for the suggestions everyone. I work as a LabTech and have a couple of IS associate degrees. While programming in Microsoft Access I found that I could use CSS to format some pretty impressive emails. The CSS makes all the difference. I have did the entire church site in notepad. I have did this as I wanted the practice with CSS. To center everything I nested everything within a content class...
#content {
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#main {
font-family: Verdana,Geneva,sans-serif;
background-image: url("../media/greentile.jpg");
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
height: 480px;
}
#cleft {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
font-size: 105%;
padding: 15px;
margin: 15px 10px 10px 10px;
float: left;
width: 115px;
height: 520px;
}
#cright {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
font-size: 105%;
padding: 15px;
margin: 15px 10px 10px 10px;
float: right;
width: 240px;
height: 570px;
}
Everything < 1100 px in screen width gets bumped down to a mobile version.
http://www.merrimacchurch.com/index.html
#content {
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#main {
font-family: Verdana,Geneva,sans-serif;
background-image: url("../media/greentile.jpg");
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
height: 480px;
}
#cleft {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
font-size: 105%;
padding: 15px;
margin: 15px 10px 10px 10px;
float: left;
width: 115px;
height: 520px;
}
#cright {
font-family: Verdana,Geneva,sans-serif;
background-color: #FFFFFF;
font-size: 105%;
padding: 15px;
margin: 15px 10px 10px 10px;
float: right;
width: 240px;
height: 570px;
}
Everything < 1100 px in screen width gets bumped down to a mobile version.
http://www.merrimacchurch.com/index.html
Thanks for the link Doug,Doug_E_Fresh said:
I have always been interested in coding since meeting BiggAndyy and HS. This is just super cool! "HS I am learning how to CODE!" Woohoo!
Similar threads
- Locked
