Jump to content
xisto Community

Saint_Michael

Members
 View Profile  See their activity

  • Content Count

    7,978

  • Joined

  • Last visited

  • Days Won

    4

Everything posted by Saint_Michael

  1. Saint_Michael
    Sounds like a plan, that all web designers can do is keep blocking the morons who have nothing else better to then spam and trying to steal to peoples info. Of course from an article that I read the "EXPERTS" are saying that hackers, crackers, Phisher's are going after community sites, expecting to find out more about a person.Think thats one of the reason I don't bother with my own design, to much work gets toss away because someone is bored.Either way good luck with the spammers.
  2. Saint_Michael
    On top of what haslip suggestion I would go with a bigger image and I mean big like website design big. Of course with that you would have to use a graphics program and design the drawer with folders in it. Because those links will be pretty small to see.Of if you have flash skills design it that way. so you can make the folders at a set size along with the text. But thats just me.
  3. Saint_Michael
    The next step will be to set up our header with a tab menu a search box and a header image. With these three parts you will be able to be make a somewhat dynamic header, so it can be seen more and not blended within the website and be lost or hard to find within the website. You have to remember the website is for other people and not for you, so you have to make it as user friendly as possible. Now with the Text with in the image you could say that this could use be used for important updates, or a slogan or two, with this your actual images will be a bit smaller in size (KB) and it will load faster as well. Which of course is a good thing since you want people who use dial up to be able to see it with in a few seconds after entering your site in their browser. Step 2. Before we start with the tab menu and the search box we will put our image in first just to give a general idea where everything else will be once we adjusted everything. So go ahead and design a dummy image so you will know what it will look like after you adjust it so it fits properly. Then when your done coding the header you can design your final image to be put inside the website. First we will insert our image in the following code With this set up: .img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: 49px; clear: both; float: left; width: 955px; height: 100px; margin: 0px; padding: 0px;} As you see our header will be in the background so when we put in our floating text our design won't break out and be jumbled up. NOTE: With the header you can design it however you want just make sure to pay attention to what you edit so not to break the design. So in your css file put the image code under your header code like so: /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } /* Main Body */#pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} /* Header */#header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} /* Header Image */.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: 49px; clear: both; float: left; width: 955px; height: 100px; margin: 0px; padding: 0px;}Now go to your html file and put in the following within your header div: <div class="img-header"></div>So your header code in the html file should look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&%2334; ><html xmlns="http://www.w3.org/1999/xhtml/ xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div id="header" ><div class="img-header"></div></div>Step 3. Now we are going to add in a tab nav into are header, the program that I use which is free is called CSS Tab Designer.. NOTE: You do not need to use this software their are plenty of css sites that tell you how to design a nav system. The tab menu code I will be using is Tab Menu 1 since the blue coloring matches with the rest of the site. So once you generated the code in the CSS Tab Designer, save it because the tab menu uses images. So once you saved it and move the image files over and then copy and paste the tab css code right under the image code you just placed there. So now your CSS File should look like this /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } /* Main Body */#pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} /* Header */#header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} /* Header Image */.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: 49px; clear: both; float: left; width: 955px; height: 100px; margin: 0px; padding: 0px;} /* Top Nav Menu *//*- Menu Tabs 10--------------------------- */ #tabs10 { float:left; width:100%; font-size:93%; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:10; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 0px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }-->Next copy and paste the html code for the website (it will look like this) <div id="tabs10"> <ul> <!-- CSS Tabs --><li id="current"><a href="Home.html"><span>Home</span></a></li><li><a href="Products.html"><span>Products</span></a></li><li><a href="Services.html"><span>Services</span></a></li><li><a href="Support.html"><span>Support</span></a></li><li><a href="Order.html"><span>Order</span></a></li><li><a href="News.html"><span>News</span></a></li><li><a href="About.html"><span>About</span></a></li> </ul> </div>Then place your tab code on top of the image div you just place in earlier. don't worry we will adjust everything that needs to be adjusted once we finish up. Step #4. Next we will set up our container for the search box so when we put in the actually html for the search box we can adjust the css to fit in nice and proper like. Ok first for the CSS container. /* Search Box */.container {position:relative; top: -25px; margin-top: 0px; margin-left: 780px; color: #EFEFEF;; }We will place the code on top of the tab menu which of course will be under the image css code. Next for the html <div class="container"> <form name="form1" id="form1" method="post" action=""> <input type="text" name="textfield" value="Search..." /> <input class=" button" type="submit" name="Submit" value="GO" /> </form></div>you will place this right under the tab menu since it is right along the lines of being on top of the image itself. As you notice the container breaks the header just a bit so it's adjustment time now. So after adjusting your css file your css file should look like this. /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } /* Main Body */#pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} /* Header */#header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} /* Header Image */.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 0px; position:relative; top: -54px; clear: both; float: left; width: 957px; height: 129px; margin: 0px; padding: 0px;} /* Search Box */.container {position:relative; top: -57px; margin-top: 0px; margin-left: 760px; color: #EFEFEF;; }/* Top Nav Menu *//*- Menu Tabs 10--------------------------- */ #tabs10 { float:left; width:100%; font-size:93%; border-bottom:1px solid #000000; line-height:normal; position:relative; top: -32px; } #tabs10 ul { margin:10; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 0px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }-->Since we are the in the css kind of mood how about we add some style to the search box. input.blue{background-color: #33729d;font-weight: bold; font-size: 12px; color: #000000;border: solid 1px;}input.blue1 {background-color: #33729d; font-size: 10px;color: #000000;border: solid 1px;}You will add that code under the search bar container so as to keep the css code a bit organized. Also you might have notice that your image might have adjusted so adjust as need be.in your forum just change the input class id's that follow the css and your set. Step 5. For the most Part I got this idea from another template designer that I somewhat know, emailed him from time to time about suggestions. Anyways we are now going to add text container within the image header. for the CSS you will copy and paste this /* Header Text Container */.site-slogan-container {width: 330px; height: 130px; position: absolute; top: 10px; z-index: 1; overflow: hidden; margin: 0px; padding-right: 15px; background-color: transparent;}.site-slogan {float: right; width: 700px; margin: 0px; padding: 0px; background-color: transparent; font-size: 10px;}.site-slogan p.title {float: right; width: 700px; margin: 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; font-size: 220%;}.site-slogan p.subtitle {clear: both; float: right; width: 700px; margin: -5px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; font-size: 200%;}.site-slogan p.text {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 140%;}.site-slogan p.readmore {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 120%;}.site-slogan a {color: #000000; text-decoration: underline;}.site-slogan a:hover {text-decoration: none; color: color: #000000;}With this you can put in some text in which it won't mess up the image and also keep you from changing the image every time you want to mention a big Update or something like that. Now for the HTML that will be needed to set up the container. <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">TEXT</p> <p class="subtitle">TEXT</p> <p class="text">TEXT</p> <p class="readmore">››› <a href="#">TEXT</a></p> </div> </div>You will place the html within the image div like so. <div class="img-header"> <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">TEXT</p> <p class="subtitle">TEXT</p> <p class="text">TEXT</p> <p class="readmore">››› <a href="#">TEXT</a></p> </div> </div> </div>Ok so after making many adjustments here and there in the header is complete. Of course you could add anything else to it if you want. If you want you could add in a divider bar to put in a small gap between your header and your content like so. /* Nav Menu replacement */.container2 {background: url("navbar.jpg"); background-repeat: no-repeat;position:relative; top: 150px; left: -50px; padding: 0px; margin: 0px 0 0px 0; border-bottom:solid 1px; width: 957px; height: 21px; }You will place this right under the image css so you can adjust both of them quickly if you need to. Then to show the border just place this right under the </div> for the image div. Like so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div id="header" > <div id="tabs10"> <ul> <!-- CSS Tabs --><li id="current"><a href="Home.html"><span>Home</span></a></li><li><a href="Products.html"><span>Products</span></a></li><li><a href="Services.html"><span>Services</span></a></li><li><a href="Support.html"><span>Support</span></a></li><li><a href="Order.html"><span>Order</span></a></li><li><a href="News.html"><span>News</span></a></li><li><a href="About.html"><span>About</span></a></li> </ul> </div><div class="container"> <form name="form1" id="form1" method="post" action=""> <input class="blue" type="text" name="T1" size="20" value="Search..."> <input class="blue1" type="submit" name="Submit" value="GO" /> </form></div> <div class="img-header"> <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">YOUR TEMPLATE PARTNER!</p> <p class="subtitle">Quality is our passion.</p> <p class="text">Serving the webcommunity<br />with XHTML/CSS designs</p> <p class="readmore">››› <a href="#">Go to templates</a></p> </div> </div> <div class="container2"></div>Then that’s it for the header. Of course with all this done it will be time to adjust accordingly and go through our first css validation and optimizing for this tutorial. So go to the following site to get your css optimized. So whats up with these tool? Simple, if you optimize your coding (removing of extra tags, white space) and validate (making sure your using the right tag structure), not only will your site look good but it will load nice and fast. We are talking fast for dial up users, basically meaning that it would load like someone using a cable modem on a 56k account. However you still want your site to load fast reguardless of what kind of connection you the web designer has. In which case I bring you to this website Website Optimization With online tool you will be able to tell how fast your site loads up and some other instresting info. Of course you need to have the website loaded, although I would provide one, it is best that you set up your own website account so as to learn about the tools better. Ok so first we are going to optimize are CSS so click on the following link. http://www.cleancss.com/ Then we will go to W3c CSS validator and see what errors come up [url=http://jigsaw.w3.org/css-validator/]CSS Validator Now if you have any errors (their was a few when I did it) you would want to correct them and then validate again. If you notice you would see a list of warnings although they won't hurt your overall design fixing them would help the css be more efficient. Of course We will do all major Optimization near the end of the Tutorial. So at this point in the tutorial we are done with the header. But before you close down your editing software make sure your design doesn't break from the optimization and validation. It happens sometimes so double check to make sure. So at this point the css is validated to some extent that you have no major errors, so the next thing to do is optimize your html and validate it as well. Lucky us we don't have much to optimize and validate so you should have very few errors. Ok so now this is what our CSS File and html should look like if you followed this tutorial in a somewhat loose fashion for the basic Idea. CSS @media print {#twocols,#maincol {width:100%;float:none;}#leftcol,#rightcol {display:none;}}/* generated by csscreator.com */html,body {text-align:center;margin:0;padding:0;}/* Main Body */#pagewidth {width:95%;text-align:left;margin-left:auto;margin-right:auto;}/* Header */#header {position:relative;height:151px;background-color:#33729d;width:100%;}/* Header Image */.img-header {background:url("logo.jpg");background-repeat:no-repeat;border:solid 0;position:relative;top:-52px;clear:both;float:left;width:937px;height:100%;margin:0;padding:10px;}/* Nav Menu replacement */.container2 {background:url("navbar.jpg");background-repeat:no-repeat;position:relative;top:161px;left:-10px;border-bottom:solid 1px;width:957px;height:21px;margin:0;padding:0;}/* Header Text Container */.site-slogan-container {width:330px;height:130px;position:absolute;top:50px;z-index:1;overflow:hidden;padding-right:15px;background-color:transparent;margin:0;}.site-slogan {float:right;width:700px;background-color:transparent;font-size:10px;margin:0;padding:0;}.site-slogan p.title {background-color:transparent;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;font-size:220%;margin:0;padding:0;}.site-slogan p.subtitle {background-color:transparent;clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;font-size:200%;margin:-5px 0 0;padding:0;}.site-slogan p.text {background-color:transparent;clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;line-height:1em;font-size:140%;margin:10px 0 0;padding:0;}.site-slogan p.readmore {background-color:transparent;clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;line-height:1em;font-size:120%;margin:10px 0 0;padding:0;}.site-slogan a {background-color:transparent;color:#000;text-decoration:underline;}.site-slogan a:hover {text-decoration:none;color:#000;}/* Search Box */.container {position:relative;top:-54px;margin-top:0;margin-left:760px;color:#EFEFEF;}input.blue {background-color:#33729d;font-weight:700;font-size:12px;color:#000;border:solid 1px;}input.blue1 {background-color:#33729d;font-size:10px;color:#000;border:solid 1px;}/* Top Nav Menu - Menu Tabs 10--------------------------- */#tabs10 {float:left;width:100%;font-size:93%;border-bottom:1px solid #000;line-height:normal;position:relative;top:-32px;}#tabs10 ul {list-style:none;margin:10px;padding:10px 10px 0 50px;}#tabs10 li {display:inline;margin:0;padding:0;}#tabs10 a {float:left;background:url("tableft10.gif") no-repeat left top;text-decoration:none;margin:0;padding:0;}/* Commented Backslash Hack hides rule from IE5-Mac \*/#tabs10 a span {display:block;background:url("tabright10.gif") no-repeat right top;color:#FFF;float:none;padding:5px 15px 4px 6px;}/* End IE5-Mac hack */#tabs9 a:hover span {color:#FFF;}-->#leftcol {width:140px;float:left;position:relative;left:0;background-color:#33729d;border:solid 1px;}#twocols {width:81.5%;float:right;position:relative;}#rightcol {width:140px;float:right;position:relative;left:0;background-color:#33729d;border:solid 1px;}#maincol {background-color:#33729d;float:left;display:inline;position:relative;width:77%;border:solid 1px;}#footer {height:150px;background-color:#33729d;clear:both;border-top:solid 1px;}/* *** Float containers fix: [url="https://csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:block;}/* Hides from IE-mac \*/* html .clearfix {height:1%;}/* set millions of background images */.rbroundbox {background:url(nt.gif) repeat;width:100%;margin:1em auto;}.rbtop div {background:url(tl.gif) no-repeat top left;}.rbtop {background:url(tr.gif) no-repeat top right;}.rbbot div {background:url(bl.gif) no-repeat bottom left;}.rbbot {background:url(br.gif) no-repeat bottom right;}/* height and width stuff, width not really nessisary. */.rbtop div,.rbtop,.rbbot div,.rbbot {width:100%;height:7px;font-size:1px;}.rbcontent {margin:0;}#tabs10 a:hover,#tabs10 #current a {background-position:0 -42px;}#tabs10 a:hover span,#tabs10 #current a span {background-position:100% -42px;}HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en"><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth"> <div class="rbroundbox"> <div class="rbtop"></div> <div class="rbcontent"> <div id="header" > <div id="tabs10"> <ul> <!-- CSS Tabs --> <li id="current"><a href="Home.html"><span>Home</span></a></li> <li><a href="Products.html"><span>Products</span></a></li> <li><a href="Services.html"><span>Services</span></a></li> <li><a href="Support.html"><span>Support</span></a></li> <li><a href="Order.html"><span>Order</span></a></li> <li><a href="News.html"><span>News</span></a></li> <li><a href="About.html"><span>About</span></a></li> </ul> </div> <div class="container"> <form name="form1" id="form1" method="post" action=""> <input class="blue" type="text" name="T1" size="20" value="Search..." /> <input class="blue1" type="submit" name="Submit" value="GO" /> </form> </div> <div class="img-header"> <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">TEXT</p> <p class="subtitle">TEXT</p> <p class="text">TEXT</p> <p class="readmore">››› <a href="#">TEXT</a></p> </div> </div> <div class="container2"></div> </div> </div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> <div id="rightcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> </div> <div id="leftcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> </div> <div id="footer" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> <!-- /rbcontent --> <div class="rbbot"></div> </div> <!-- /rbroundbox --> </div></div></body></html>Next Part we will work on the footer with some css and who knows even more css.
  4. Saint_Michael
    Online tools to design a complete website Tutorial By Saint-Michael AKA Mike A. With this tutorial I will show you how to use specific online tools to create a fully functioning website in pure css with little to no JavaScript to be used. Also their will be some moderate editing to make everything fit and of course to make sure everything is working like it should. The links that you will need to either book mark or save to a file, will be in bold and blue. Also we will be using the Firefox web browser to design this website as it more web complaint then IE, Opera and any other browser. Also make sure your computer is in 1024x768 as this is the standard resolution for all computers and most users. Step #1. First step is that we need a core layout meaning how big we are going to make the website in terms of height and width and also what we will be using to make our website complete. So the first online tool we will be is the cssCreator Page layout generator. Also for some reason they change this to a members only thing (sign up is free) so you will be making account with them in order to use this tool. Now you have to remember you don't have to make it ridiculous wide or long, usually you want to be at about 750-900 pixels wide to be able to fit with in the 800x600 resolution users. But you have to remember once you go past the 800 pixel make your users will have to scroll from left to right. Of course by now most computer users have monitors that are 1024x768 would be roughly in the time line of 99-now when 1024x768 was introduced as the standard computer resolution. Of course that how a fluid design works it will stretch or shrink itself depending on the resolution of the users computer. although length is not important depending on what kind of site you have like tutorial sites or say like documentation, but anything 4000 pixels and beyond is just annoyance. However if you can keep it below 1500 pixels and break it down to several sites then you will still be good. Due to the fact that one your giving the users a break to adjust their eyes or stretch their hands. Anyways since you will be the one designing the website it will be up to you where you want to set you website at. So at This point we know that are website will be at least 1024 pixels wide and 768 pixels long, although since we are using percentages, best way to determine the width of your site as long as you don't see the scroll bar at the bottom then your good. However that will change when you go to a 800x600 resolution then you will see it. So click on the link above and we will begin the process. First option is doctype. A list Apart Since we will be using the standard doc type we will be picking either XHTML Transitional XHTML Strict XHTML Frameset NOTE: Unless you plan on using frames for a fun site don't bother using it for anything else. Due to the fact that search engine bots will not pick it up and thus you won't get properly index into search engines. Now we will be using XHTML Transitional due to the fact it will except most html tag formats without error on us when we validate it. This of course will cause less of a head too, because if you strict and you plan to have this site validated you will have to pay very close attention to which ones you use. Best place to find out the standard tags are here W3.org and W3Schools.com, these two sites keep users up to date on the current standards of web design and also teach you the basics as well. Now your next option is how do you want the core layout to look meaning, do you want the website to fill out the whole page have it centered within you browser or move to the left? For this tutorial we will be centering this. So go ahead and select the center option. Now as you can see the page the with is set at 100% leave as such, because once you start filling in the website the 100% page with will accommodate and adjust accordingly to what ever you put in. Next we want to set the minimum and maximum width of the website. With these settings we will able to have the site adjust to the 600x800 resolution and be usable beyond the standard 1024x768 resolution on your computer. NOTE: This will be adjusted to fit any changes you might make in the future so make sure to remember that. Now we want a header, footer, left column, right column, so click all of them and then for the header and footer select 200px (which will be adjusted later) and for the columns we want to select 50% so as both columns will equal 100% (also they will be adjusted as we make edits to the site).now to make sure we know what we will be editing choose different colors for each part so you will be able to recognize them until you start setting your own colors. So with that set click on the generate layout then save the html file and the css into a folder. Now we will be rename the html and css and use these names for future reference. Name the html file index and the css file main. NOTE: Make sure to edit the html and replace the css link to main as well like this <link rel="stylesheet" href="saintmichael207476179.css" type="text/css" />to <link rel="stylesheet" href="main.css" type="text/css" />So this is what we should have in our two main files CSS /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:100%; text-align:left; margin-left:auto; margin-right:auto; } #header{ position:relative; height:150px; background-color:#3C20F3; width:100%;} #leftcol{ width:50%; float:left; position:relative; background-color:#565959; } #twocols{ width:50%; float:right; position:relative; } #rightcol{ width:100%; float:right; position:relative; background-color:#565959; } #maincol{background-color: #FFFFFF; float: left; display:inline; position: relative; width:0%; } #footer{ height:150px; background-color:#9F8C99; clear:both; } /* *** Float containers fix: [url="http://forums.xisto.com/no_longer_exists/; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /></head><body><div id="pagewidth" > <div id="header" > Head </div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" > Main Content Column </div> <div id="rightcol" > right Column </div> </div> <div id="leftcol" > Left Column </div></div> <div id="footer" > Footer </div> </div></body></html>Now the final process we will be using is the Lorem ipsum text block in which this will use to adjust height and width for everything. So copy this and paste it 2-3 times in each portion of the html and then save it. As you can see it is pretty messed up so we will make the following adjustments. /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:100%; text-align:left; margin-left:auto; margin-right:auto; } #header{ position:relative; height:150px; background-color:#3C20F3; width:100%;} #leftcol{ width:170px; float:left; position:relative; left: 0px; background-color:#33729d; } #twocols{ width:81%; float:right; position:relative; } #rightcol{ width:170px; float:right; position:relative; left: 0px; background-color:#33729d;} #maincol{background-color: #33729d; float: left; display:inline; position: relative; width:77%; border:solid 0px; } #footer{ height:150px; background-color:#9F8C99; clear:both; } /* *** Float containers fix: [url="http://forums.xisto.com/no_longer_exists/; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}As you can see with this we got everything to fit without the need to use scroll bars going left to right to see our website. Save any changes you made and your core set up is basically done at this point. Also I highly suggest that once you start the major coding that you have a back up copy just in case your html editor crashes after a save or your computer crashes after a save, which of course should rarely happen but you know how computer like to mess with us when we least expect it. Of course you could click the exit/close button by accident, I must admit I done it myself and had to figure out what I did wrong and then delete it. By now you may want to choose your primary color for your website usually for a background you would want to stay with one for now and then adjust later. So the color I will pick will be #33729d. Also you will need to add borders to everything at least for now until you can clearly separate everything so you add the following to your css: /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:100%; text-align:left; margin-left:auto; margin-right:auto; border:solid 1px;} #header{ position:relative; height:150px; background-color:#33729d; width:100%; border:solid 1px;} #leftcol{ width:170px; float:left; position:relative; left: 0px; background-color:#33729d; border:solid 1px; } #twocols{ width:81%; float:right; position:relative; } #rightcol{ width:170px; float:right; position:relative; left: 0px; background-color:#33729d; border:solid 1px;} #maincol{background-color: #33729d; float: left; display:inline; position: relative; width:77%; border:solid 0px; border:solid 1px; } #footer{ height:150px; background-color:#33729d; clear:both; border:solid 1px; } /* *** Float containers fix: [url="http://forums.xisto.com/no_longer_exists/; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}Although this optional but it does give a little spice to the website the use of corners and a drop shadow effect. Although they are considered eye candy it usually helps to make it look better. But again it is optional, so for this tutorial I will be using just the corners. I will start with the corners, in which I bring you to this site CSS Corner Generator Now are corners have to match the inside and outside colors of the website so we will need to use the following: Square Color=#33729d Background C0lor=#FFFFFF Click on the generate button and it will produce the images you will need along with the code so first download the images to your folder and if you want to create a images folder you can make sure to adjust the location of the images to images/. So now we copy and paste the code at the bottom of our css file like so. /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} #header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} #leftcol{ width:140px; float:left; position:relative; left: 0px; background-color:#33729d; border:solid 1px; } #twocols{ width:81.5%; float:right; position:relative; } #rightcol{ width:140px; float:right; position:relative; left: 0px; background-color:#33729d; border:solid 1px;} #maincol{background-color: #33729d; float: left; display:inline; position: relative; width:77%; border:solid 1px; } #footer{ height:150px; background-color:#33729d; clear:both; border-top:solid 1px; } /* *** Float containers fix: [url="http://forums.xisto.com/no_longer_exists/; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really necessary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 0px; }.rbroundbox { width: 100%; margin: 1em auto; }As you can see we change the styles of the border for the header and footer, this is done so we can keep them separate but yet keep the corners we just added look cleaner. Also I made some adjustments to my columns to fit the 800x600 resolution some may still have and also changed the overall size of the lay to 95% so to be able to see everything. Now we have to make edits to our html file and adjust it so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main1.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div id="header" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> <div id="rightcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> </div> <div id="leftcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div></div> <div id="footer" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div><!-- /rbcontent --> <div class="rbbot"><div></div></div></div><!-- /rbroundbox --> </div> </div></body></html> Well that is it for the Core Design of the layout it maybe boring now and completely messed up, but after many many adjustments and hours of hard work it will look awesome. It could also look like a website to with loads of fun for all users.
  5. Saint_Michael
    // snipped //
  6. Saint_Michael
    The use of Online tools to design a complete website Tutorial By Saint-Michael AKA Mike A. On a side note will provide all the files for the complete site from each of the parts just in case you have problems With this tutorial I will show you how to use specific online tools to create a fully functioning website in pure css with little to no JavaScript to be used. Also their will be some moderate editing to make everything fit and of course to make sure everything is working like it should. The links that you will need to either book mark or save to a file, will be in bold and blue. Also we will be using the Firefox web browser to design this website as it more web complaint then IE, Opera and any other browser. Also make sure your computer is in 1024x768 as this is the standard resolution for all computers and most users. Step #1. First step is that we need a core layout meaning how big we are going to make the website in terms of height and width and also what we will be using to make our website complete. So the first online tool we will be is the cssCreator Page layout generator. Also for some reason they change this to a members only thing (sign up is free) so you will be making account with them in order to use this tool. Now you have to remember you don't have to make it ridiculous wide or long, usually you want to be at about 750-900 pixels wide to be able to fit with in the 800x600 resolution users. But you have to remember once you go past the 800 pixel make your users will have to scroll from left to right. Of course by now most computer users have monitors that are 1024x768 would be roughly in the time line of 99-now when 1024x768 was introduced as the standard computer resolution. Of course that how a fluid design works it will stretch or shrink itself depending on the resolution of the users computer. although length is not important depending on what kind of site you have like tutorial sites or say like documentation, but anything 4000 pixels and beyond is just annoyance. However if you can keep it below 1500 pixels and break it down to several sites then you will still be good. Due to the fact that one your giving the users a break to adjust their eyes or stretch their hands. Anyways since you will be the one designing the website it will be up to you where you want to set you website at. So at This point we know that are website will be at least 1024 pixels wide and 768 pixels long, although since we are using percentages, best way to determine the width of your site as long as you don't see the scroll bar at the bottom then your good. However that will change when you go to a 800x600 resolution then you will see it. So click on the link above and we will begin the process. First option is doctype. A list Apart Since we will be using the standard doc type we will be picking either XHTML Transitional XHTML Strict XHTML Frameset NOTE: Unless you plan on using frames for a fun site don't bother using it for anything else. Due to the fact that search engine bots will not pick it up and thus you won't get properly index into search engines. Now we will be using XHTML Transitional due to the fact it will except most html tag formats without error on us when we validate it. This of course will cause less of a head too, because if you strict and you plan to have this site validated you will have to pay very close attention to which ones you use. Best place to find out the standard tags are here W3.org and W3Schools.com, these two sites keep users up to date on the current standards of web design and also teach you the basics as well. Now your next option is how do you want the core layout to look meaning, do you want the website to fill out the whole page have it centered within you browser or move to the left? For this tutorial we will be centering this. So go ahead and select the center option. Now as you can see the page the with is set at 100% leave as such, because once you start filling in the website the 100% page with will accommodate and adjust accordingly to what ever you put in. Next we want to set the minimum and maximum width of the website. With these settings we will able to have the site adjust to the 600x800 resolution and be usable beyond the standard 1024x768 resolution on your computer. NOTE: This will be adjusted to fit any changes you might make in the future so make sure to remember that. Now we want a header, footer, left column, right column, so click all of them and then for the header and footer select 200px (which will be adjusted later) and for the columns we want to select 50% so as both columns will equal 100% (also they will be adjusted as we make edits to the site).now to make sure we know what we will be editing choose different colors for each part so you will be able to recognize them until you start setting your own colors. So with that set click on the generate layout then save the html file and the css into a folder. Now we will be rename the html and css and use these names for future reference. Name the html file index and the css file main. NOTE: Make sure to edit the html and replace the css link to main as well like this /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:100%; text-align:left; margin-left:auto; margin-right:auto; } #header{ position:relative; height:150px; background-color:#3C20F3; width:100%;} #leftcol{ width:50%; float:left; position:relative; background-color:#565959; } #twocols{ width:50%; float:right; position:relative; } #rightcol{ width:100%; float:right; position:relative; background-color:#565959; } #maincol{background-color: #FFFFFF; float: left; display:inline; position: relative; width:0%; } #footer{ height:150px; background-color:#9F8C99; clear:both; } /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}} HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /></head><body><div id="pagewidth" > <div id="header" > Head </div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" > Main Content Column </div> <div id="rightcol" > right Column </div> </div> <div id="leftcol" > Left Column </div></div> <div id="footer" > Footer </div> </div></body></html> Now the final process we will be using is the Lorem ipsum text block in which this will use to adjust height and width for everything. So copy this and paste it 2-3 times in each portion of the html and then save it. As you can see it is pretty messed up so we will make the following adjustments. /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:100%; text-align:left; margin-left:auto; margin-right:auto; } #header{ position:relative; height:150px; background-color:#3C20F3; width:100%;} #leftcol{ width:170px; float:left; position:relative; left: 0px; background-color:#33729d; } #twocols{ width:81%; float:right; position:relative; } #rightcol{ width:170px; float:right; position:relative; left: 0px; background-color:#33729d;} #maincol{background-color: #33729d; float: left; display:inline; position: relative; width:77%; border:solid 0px; } #footer{ height:150px; background-color:#9F8C99; clear:both; } /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}} As you can see with this we got everything to fit without the need to use scroll bars going left to right to see our website. Save any changes you made and your core set up is basically done at this point. Also I highly suggest that once you start the major coding that you have a back up copy just in case your html editor crashes after a save or your computer crashes after a save, which of course should rarely happen but you know how computer like to mess with us when we least expect it. Of course you could click the exit/close button by accident, I must admit I done it myself and had to figure out what I did wrong and then delete it. By now you may want to choose your primary color for your website usually for a background you would want to stay with one for now and then adjust later. So the color I will pick will be #33729d. Also you will need to add borders to everything at least for now until you can clearly separate everything so you add the following to your css: /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:100%; text-align:left; margin-left:auto; margin-right:auto; border:solid 1px;} #header{ position:relative; height:150px; background-color:#33729d; width:100%; border:solid 1px;} #leftcol{ width:170px; float:left; position:relative; left: 0px; background-color:#33729d; border:solid 1px; } #twocols{ width:81%; float:right; position:relative; } #rightcol{ width:170px; float:right; position:relative; left: 0px; background-color:#33729d; border:solid 1px;} #maincol{background-color: #33729d; float: left; display:inline; position: relative; width:77%; border:solid 0px; border:solid 1px; } #footer{ height:150px; background-color:#33729d; clear:both; border:solid 1px; } /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}} Although this optional but it does give a little spice to the website the use of corners and a drop shadow effect. Although they are considered eye candy it usually helps to make it look better. But again it is optional, so for this tutorial I will be using just the corners. I will start with the corners, in which I bring you to this site CSS Corner Generator Now are corners have to match the inside and outside colors of the website so we will need to use the following: Square Color=#33729d Background C0lor=#FFFFFF Click on the generate button and it will produce the images you will need along with the code so first download the images to your folder and if you want to create a images folder you can make sure to adjust the location of the images to images/. So now we copy and paste the code at the bottom of our css file like so. /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} #header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} #leftcol{ width:140px; float:left; position:relative; left: 0px; background-color:#33729d; border:solid 1px; } #twocols{ width:81.5%; float:right; position:relative; } #rightcol{ width:140px; float:right; position:relative; left: 0px; background-color:#33729d; border:solid 1px;} #maincol{background-color: #33729d; float: left; display:inline; position: relative; width:77%; border:solid 1px; } #footer{ height:150px; background-color:#33729d; clear:both; border-top:solid 1px; } /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really necessary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 0px; }.rbroundbox { width: 100%; margin: 1em auto; } As you can see we change the styles of the border for the header and footer, this is done so we can keep them separate but yet keep the corners we just added look cleaner. Also I made some adjustments to my columns to fit the 800x600 resolution some may still have and also changed the overall size of the lay to 95% so to be able to see everything. Now we have to make edits to our html file and adjust it so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main1.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div id="header" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </div> <div id="rightcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </div> </div> <div id="leftcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </div></div> <div id="footer" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div><!-- /rbcontent --> <div class="rbbot"><div></div></div></div><!-- /rbroundbox --> </div> </div></body></html> Well that is it for the Core Design of the layout it maybe boring now and completely messed up, but after many many adjustments and hours of hard work it will look awesome. It could also look like a website to with loads of fun for all users.
  7. Saint_Michael
    http://ww2.codeless.org/?folio=7POYGN0G2 This could help in your problem since the coding is somewhat similar to what you have maybe a bit different. HTML <a href="download.php?file=file.extension">download</a> PHP <?php// Type, leave this unchangedheader('Content-type: application/force-download');// What the file will be called if downloaded$file=$_GET["file"];if(file_exists($file)){header('Content-Disposition: attachment; filename="'.$file.'"');// The file source...readfile($file);}?>
  8. Saint_Michael
    Quatrux is referring to this php redirct. <?phpheader("Location: http://forums.xisto.com/no_longer_exists/;'>http://forums.xisto.com/no_longer_exists/; For the htaccess you would set it up like so: redirect /~youraccount/index.html http://forums.xisto.com/no_longer_exists/ As you can see you would need to list the whole directory for this to work and that should help you out a little bit.
  9. Saint_Michael
    Pointless and expensive due to the fact you would be replacing the whole system if you break the screen.Also talk about hurting your finger tips tapping at a screen like that for long periods of time. Also if it comes with a touch screen pen it would defeat the purpose altogether.
  10. Saint_Michael
    I would say regeneration would be a mutation and not a function of the brain. Unlike some reptiles who can regenerate whole parts, I believe researchers are trying to figure out how and what genes are doing that.From what your post is referring to then, is that some functions of the brain would cease to exist. Like eye sight and hearing, then of course memory loss and all that good stuff (not really).Although I never really read anything about abnormal regeneration, I know that is what scientist and researchers are trying to do with stem cell. Of course if we could could figure out what is moral about cloning then that could be the next step. We are capable of cloning but due to the huge ramifications that go with it. It will be a long time before human can be accept.
  11. Saint_Michael

    Cacls Or Xcacls

    Saint_Michael replied to BArS's topic in Software

    Google came up dead for me but Search in yahoo using these strings how to set up XCACLS how to set up Cacls For what do you need these permissions for. From the search I got one is for a vbscripting/excel http://forums.xisto.com/no_longer_exists/ One without excel http://www.computerperformance.co.uk/vbscript/vbscript_cacls.htm Setting up secure accounts ( the blurp mentioned the use of it) http://www.microsoft.com/err/technet/ Basic Info from the looks of it http://forums.xisto.com/no_longer_exists/ Some stuff on XCACLS http://forums.xisto.com/no_longer_exists/ Hopefully that will help in setting this up unless someone in the forums knows about this.
  12. Saint_Michael
    Not bad although at the bottom corners are cut off a bit, Although I didn't notice it here when you posted but that what drop shadow you have around it should be taken out or change the background color so as to make invisible.But other then that it looks good, colors go well.
  13. Saint_Michael
    Of course I learned something new about the index's and I always thought the index's would have been overridden regardless of the doc type.Of course I just got confused by your last post Nick . But I think I got it though. Glad one of those responses helped out .
  14. Saint_Michael
    With CSS you can create tables, they take a bit longer to design because of accuracy, but hopefully when I redesign my core then I can start adding in stuff like CSS frames, tables and other stuff that I find.
  15. Saint_Michael
    Well the shoes I would ballpark it around ancient Babylon when footwear start there foot march to greatness.Also who side that electricity was invented?Of course without fire you don't have the steel for your cars, and homes. Fire to heat your homes before gas and electric heat.
  16. Saint_Michael
    Call me stupid unless no one else knew this but the 10% of the brain usage is a myth, I was going to do some searching on this and I saw quite a few sties about the 10% myth. Go figure on that so the actual usage could be more or could be less. http://faculty.washington.edu/chudler/tenper.html Brainless what about A.I, it is run by computers although with the human hand, so in a way a computer brain learns like we do although in a limited capacity. Although I somewhat get the memory from bunlytek posts the world wide web might need some explaining. What about internet viruses and search engines bots, yes the are program to do something but after that most of them "think" and I put that loosely to look around for other computers. I don't remember where I saw this but it said something in the likes of that are brain can do like 1 trillion tasks a minute. I think that was broke down to come to that conclusion, but thats how fast are brain is. As I type right now my brain is telling me to type the letters I see on the keyboard with my fingers. Then look at the screen at the same time to make sure I am spelling this correctly and making complete sentences, although I am not for some strange reason. ( ) How could you explain someone going senile? to dumb this down good, your brain is basically breaking down and so all the messages your brain is trying to send out is getting confused and so instead of doing one thing your brain is doing something else. So with that your trying to force your brain to work hard to get the right signals. I believe that it would be impossible to bring something from the sub-conscious, because then your brain is aware of it and then it becomes conscious and then you know it. Of course I don't think anyone would want to take the risk of forcing electric signals into someone's brain with out messing them up for life or make them brain dead.
  17. Saint_Michael
    Well since my name did get mention although I wonder why? But anyway my question is whats the big deal so some people say x-mas instead of Christmas. Is the word so offending that people would go to war bush.? I am not saying you would do BF (maybe) but would you want schools to get rid the school x-mas play as well since it's mixing religion with school? Prayer got thrown out might as well finish it off. X-mas is a store thing to begin with, people just caught on thats all. Plus I can say Christmas's too..ready..CHRISTMAS To me I don't see it as a big deal, instead of fighting over the meaning of the word how how about doing what the Christmas stands for besides giving me presents and that is giving to other less unfortunate then you.
  18. Saint_Michael
    Making sure not to offend to anyone this year eh haslip? :lol:Well you did forget Kwanza ^_^Anywoo happy thanksgiving, merry x-mas and a HAPPY SM YEAR!!
  19. Saint_Michael
    From what I know is that we use 105 of our brain, but from you post yeah I agree that if our brain was like a computer then most of our consist of RAM. Because or memories are floating around until we need to call upon them to do a simple task like blinking.Even the Smartest people in the world can't tap into the other parts, although their brain has unlock parts to make them remember more and of course think better. Of course I don't know if they solved this or not but I do believe that people with photographic memories are somewhat a key into unlocking the mysteries of how our mind works.Of course all we see from sci-fi couldn't even possibly happen like reading minds or being psychic.Who knows maybe when the next evolution of man happens then maybe we will unlock another part of the mystery.
  20. Saint_Michael
    Wow buff you right that could work by changing the .html to .htm .shtml .php .asp then in a way you have you main index's for the site. Then of course you still have to redirect either through the cpanel, php, htaccess, javascript.
  21. Saint_Michael
    Problem with solar sails is that if you damage enough of the them and repair them then your supplies are gone for that so you will be strand with no way to get back.Gravity is a tricky business, remember the stats they give on our planets are assumptions. They could be accurate but it's all about the timing and precise calculations for that to work. Also they would have to stop by each planet and then for a couple of days rotate around it to gain the sling shot speed that they would need in order to the leave orbit.Well the next step would to go nuclear engine, that will get rid of the fuel problem, nuclear cells do lats a very long time, only problem would be radiation leaks and what not.Of course the biggest problem is motion, it is not so easy to stop a ship going 17,000 MPH. Of course I don't think the urrent engines on the space shuttle could handle a reverse like that..Let see it took about what 4-5 days for the apollo craft to get ot the moon, with the current space shuttle, I would say at least 2 days are knock off just because of the bigger thrust the engine has. Now with the new Orion space craft coming out for the new era of NASA that could trim it down another day or a few hours at the most.I think they mention that it would take like what 4--6 months to reach Mars. The isolation will get anyone like that especially in the emptiness of space. How I think, instead of one crew on the shuttle you build the shuttle to hold 2 4 man crews. Then do shifts got one crew maintain operations while the other sleeps. That way the lack of sleep won't be a problem.Of course then their is SPACE MADNESS!!
  22. Saint_Michael
    I never had the pleasure have looking inside the programming of rom, for one didn't think spent to much time playing them. Of course I stopped playing the Nintendo roms for awhile. When I was looking at Playstation Roms those things were huge one I saw was 15 mb's, of course the site I found this at was slow on the download so I stop bothering to play ps roms.
  23. Saint_Michael
    The Wheel, fire (debatable), and shoes (you don't realize how some peoples feet smell not mine of course).Would have to be the greatest inventions, because if it was not for these, then everything else would be made out of stone and tree bark.
  24. Saint_Michael

    Imvu

    Saint_Michael replied to Nani Cheri's topic in Software

    Yeah i know the program took one look at it and though wasted effort in using it. Like pleno I used what I have and get it over with, of course thanks to im clients kids these days are losing necessary writing skills. Due to the fact that they are typing short messages and what not.
  25. Saint_Michael
    Yep that is the only downside to have a laptop is inaudible speakers, but to make sure check your volume settings on your desktop and then check your volume settings through your control panel and see if that helps.EDIT: talk to you on msn so this is just a friendly reminder post.
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept