Jump to content
Killersites Forums

mzsade

Member
  • Content Count

    23
  • Joined

  • Last visited

Posts posted by mzsade

  1. "Not today"? You are scaring me now.. :lol:

     

    Be that as it may, i had a brief stint with chrome and i found that it wouldn't remember passwords, moreover the difference in speed wasn't so noticeable, what with my poor 600 kbps bandwidth. And i still stand by my statement that firefox, with it's add-ons and customization possibilities is a much more complete browser than any other. But to each his own, so with more uneducated prejudice i will bet that soon, firefox will have overcome these "javascript processing" defects that make chrome even a viable alternative.

  2. Far be it from me to contradict somebody much more knowledgeable than i, but with all due respect, it is my belief that there is no such thing as a "faster browser". Granted that some may be configured to load images faster, some to surf between links faster, but finally it boils down to the bandwidth allotted by your ISP. All this hype about chrome is just that, hype. Also i would like to add that firefox is the most complete browser that is available in my opinion, and linux distro developers aren't nuts when most of them choose it as the default browser.

    Please don't ban me! ^_^

  3. As they said, some html, basic css, then you can jump directly onto free layouts from here where they also happen to explained 'step-by-step'; www.maxdesign.com.au/articles/css-layouts/, then comes the most difficult part, Javascript with which i am still struggling, and PHP for server side stuff. This is only an opinion based on my very recently acquired, and ever so meager experience.

     

    On the other hand if you have no intention of becoming a full fledged web designer and only want to set up this one web page, then by all means begin with the free layouts, after understanding the basic concepts of html and css, of course.

     

    Edit: I forgot to mention, after you have finished with the css tutorials here and get down to making your first page, you will save yourself a lot of grief if you have a look at this first:

    www.alistapart.com/articles/css-positioning-101/

  4. Added a background banner slide show in the header using www.willmaster.com/library/features/background-image-slide-show.php,

    a clock and a time dependent greeting in the main column.

     

    This is too much fun to stop and get back to my struggle with JS.

     

    With sophisticated and complex scripts freely available for, as far as i can tell, every imaginable purpose..to be able write something even a fraction as complex, if ever, would clearly take me years of diligent study and practice..i am this close to abandoning my efforts to study Javascript from scratch. Earnestly request a little logical push from the more experienced here, that will motivate me not to do so.

     

    Edit: You have to realize that i have just learned of the existence of such resources and of their relevance to web designing; you will understand my acting like a kid in a candy store then.

  5. gifninja.com/,

    Sorry for not enlarging on my answer, but i am not making any progress with Javascript and am bitter and frustrated...

     

    And then there's our mutual friend Mr. Google whose search will yield results which you can possibly adapt to your needs..http: //www.google.co.in/#hl=en&biw=836&bih=491&q=how+to+join+gif+files+online&aq=&aqi=&aql=&oq=how+to+join+gif+files+online&fp=96e11be8b29b542e

     

    Once again, this is a very bitter man speaking, please bear with me.

  6. You are welcome, Joe. A couple of other pages that i intend to come back to in order to get a firmer grasp on basics are:

    http: //reference.sitepoint.com/css/demos

     

    and for ready-made layouts that don't require you to display their Copyrights in the footer:

    http: //www.maxdesign.com.au/articles/css-layouts/, but that's for later, Javascript, here i come... ;)

  7. Hi Joe, I managed to make something :ahem, cough: not half bad using example G from here:

    http:(remove space)//www.alistapart.com/articles/css-positioning-101/. (Refer last post here: http://www.killersites.com/community/index.php?/topic/4489-how-to-make-a-web-site-the-lazya-waycheat-sheet/page__pid__22542#entry22542). Example E looks just right to me for your needs. Try playing around with the positioning and sizes in that, hopefully you will be able to adapt it to your needs.

  8. Finally found something that even i could build on, http: //www.alistapart.com/d/css-positioning-101/example_g. html, using this building block method i have managed to make what i intended to in the first place, but i hope in a more logical way. (BTW, you guys are the kindest and most generous people i have ever met on the Internet, instead of dismissing and trashing the undisguised c%%% that i put up here as my first effort, you actually spent time on it to make it workable! Even years on from now, i will cringe with embarrassment when i read this thread and at the same time remember your kind act. with fondness.)

    I still don't have the control over the footer that i would like, i had to make it a child of the "maincolumn", because otherwise it would either stay in a fixed place and allow the main content to flow all over it, or get attached to the top. so there's still something wishy-washy about the code. Would you please have a look at the code and make it respectable? I don't want it fixed, i want it to scroll. After this i think i am ready to move onto javascript.

     

    </style>
    #container {
    margin: 0 auto;
    width: 100%;
    background: #44accf; }
    	#header { position: absolute; top: 4%; right: 2%; bottom: 80%; left: 2%; background: #ff9c34; }
                   #navbar { position: absolute; top: 22%; right: 2%; bottom: 72%; left: 2%; background: #000; }
    #navbar
    {
    float: left;
    width: 60%;
    background: #ccc;
           padding-left: 20%;
    }
    
    #navbar ul
    {
    margin: 0;
    padding: 0;
    }
    
    #navbar ul li
    {
    list-style-type: none;
    display: inline;
    }
    
    #navbar li a
    {
    display: block;
    float: left;
    padding: 6px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
           border-left: 1px solid #fff;
    }
    
    #navbar li a:hover { background: #383; }
    
    
    #maincolumn { position: absolute; top: 30%; right: 25%; bottom: 0; left: 2%; background: #fff; float: left; clear:right; }
    
    #sidebar { position: absolute; top: 30%; right: 2%; bottom: 0; left: 80%; background: #ccc; float: right;}
    
    #footer { position: relative; top: 2%; right: 2%; bottom: 0; left: 2%; background: #000; width: 100%; height: 12%; color: #fff}
    
    The Html
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>The GettingWiserGuy's Webpage</h1></div>
           <div id="navbar">
                   <ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="#">Services</a></li>
    		<li><a href="#">Contact us</a></li>
    	</ul>
    </div>
    
           <div id="maincolumn"><p>Enough loren ipsum to overflow over anything fixed..</p>
           <div id="footer">There's still something shady about this</div>
           </div>
    <div id="sidebar">The sidebar</div>
    
    </div>
    
    </body>
    </html>
    
    [b]The edited code:[/b]
    
    <style>
    #container {
    margin: 0 auto;
    width: 950px;
    background: #fff 
    
           border: 2px solid #fff;}
    	#header { /*position: absolute; top: 1px; right: 2px; bottom: auto; left: 2px;*/ width: 950px; height:104px; background: #ff9c34;border: 1px solid #fff; }
                   #navbar { /*position: absolute; top: 110px; right: 2px; bottom: auto; left: 2px;*/ background: #000; min-width: 948px; height: 30px; border: 1px solid #fff; }
    #navbar
    {
    float: left;
    width: auto;
    background: #ccc;
    
    }
    
    #navbar ul
    {
    margin: 0;
    padding: 0;
    }
    
    #navbar ul li
    {
    list-style-type: none;
    display: inline;
    }
    
    #navbar li a
    {
    display: block;
    float: left;
    padding: 6px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
           border-left: 1px solid #fff;
    }
    
    #navbar li a:hover { background: #383; }
    
    
    #maincolumn { /*position: absolute; top: 155px; right: 300px; bottom: 0; left: 2px;*/ width: 600px; padding: 10px 50px 10px 10px;  background: #fff; float: left; border: 1px solid #fff; }
    
    #sidebar { /*position: absolute; top: 155px; right: 2px; bottom: 0; left: 700px;*/ width: 200px; padding: 20px; background: #ccc; border: 1px solid #fff; float: right; }
    
    #footer { /*position: relative; top: 2px; right: 0; bottom: 0; left: 0;*/ background: #000; width: 948px; height: 60px; color: #fff; clear: both; }
    
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>The GettingWiserGuy's Webpage</h1></div>
           <div id="navbar">
    <ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="#">Services</a></li>
    		<li><a href="#">Contact us</a></li>
    	</ul>
    </div>
    
           <div id="maincolumn">
    <p>
    			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.
    		</p>
    
    <p>
    			Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. 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.
    		</p>
    
    
    
    
    
    </div>
    
           <div id="sidebar">Sidebar</div>
    <div id="footer"><p>There's still something shady about this, not anymore, this is a proper footer now</p></div>
    
    </div>
    
    </body>
    </html>
    

     

    PS: i have not bothered with the appearance of the page this time, and not bothered with finishing touches to fonts, paddings, margins, colors, etc., it's the appearance of the code that concerns me.

    Also, @Danhodge, i tried inserting a lot of text in the main column of your test template and it caused your scheme to collapse.

    Edit: Drat, forgot your warning about percentages, ok, i will rectify that, but i hope that's not the main flaw in the approach.

    Edit: I changed all units to "px" and the thing still collapses when i "Ctrl+scroll" the browser window. :sigh: and i thought i was finally coming to grips with css.

    Edit: Resolved: let all positions default to static, took the footer out of it's nest and stacked it at the bottom as is normal, used "clear: both", Yay!

    post-30899-022638300 1295959055_thumb.jpeg

  9. I am still struggling with CSS blocks and positioning, but after seeing all the troubles taken by the experts, in almost all the good tutorials over this "older browser" thingy, makes me scream out, "get the latest open source browser, bozos, it's not as if it's going to cost you!" Of course, there has to be something that i don't get, regardless of whatever that is, i feel your pain and do hereby scream...

  10. Thank you Ben for taking the time, greatly appreciate the detailed corrections, that wrapper was a life saver, managed to add a horizontal menu with styled links since then, have substituted the original attachment with the new image, already the code has begun to look ugly.. :)

    #nav li, a{
     display:inline;
     margin:0;
     padding:0;
    
    }
    
    a.one:link, a.one:visited
    {
    
    font-weight:bold;
    color:#FFFFFF;
    background-color:#CCC8B3;
    width:100px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    list-style-type:none;
    
    }
    a.one:hover, a.one:active
    {
    background-color:#BFBD93;
    
    }

     

    and this in the html:

    <div id="header"><h1>The Lazybones WebPage</h1><br />
    
    
    
    
    
                     <div id="nav">
                         <div id="ul">
                             <div id="li">
    
    
    
    	  <!-- start of navigation -->
    
    	    <ul>
    
    		  <li><a class="one" href="http://www.webaddresshere.com">Home</a></li>
    
    		  <li><a class="one" href="http://www.webaddresshere.com">Products</a></li>
    
    		  <li><a class="one" href="http://www.webaddresshere.com">Services</a></li>
    
    		  <li><a class="one" href="http://www.webaddresshere.com">Terms</a></li>
    
    		  <li><a class="one" href="http://www.webaddresshere.com">FAQ</a></li>
    
                             <li><a class="one" href="#link">forum</a></li>
    
    		  <li><a class="one" href="http://www.webaddresshere.com" style="no background">Contact Us</a></li>
    
    		</ul>
    
    		<!-- end navigation -->
    
                      </div>
                    </div>
                  </div>
    
    
    
    
    
    
    
    
      </div>

  11. Hi, Sorry to have misled you with the title, this is more a desperate cry for help than a “Cheat Sheet”(pun fully intended). Downloaded a css block layout with a header, one main column, one secondary right column and a footer..your practice css had too much going on that I couldn't follow so I made my own skeletal practice css..chopped the original down so as to have only 4 main divs, disfigured the elegance of the code, removed the Copyrights and totally intend to claim the final result as my own..managed after a lot of trial and error to arrange the blocks so as to abut each other as in the arrangement in the attachment (promise i will remove the clutter after a while), without the blocks over lapping each other, or jumping out of the screen, or below one another (it was a nightmare!).

     

     

    This is the castrated css:

     

    #header{
    
    height:150px;
    
    background-color:#F3F2ED;
    
    margin:0;
    
    padding:0;
    
           width:100%;
    
           text-align:center;
    
    
    
    }
    
    
    
    
    
    
    
    #maincolumn{
    
    height:300px;
    
           width:72%;
    
    background:#CCC8B3;
    
    border-top:#FFFFFF 2px solid;
    
    margin-top:2px;
    
    
    
    padding:10px;
    
           position:absolute;
    
    
    
    }
    
    
    
    #secondarycolumn{
    
    height:300px;
    
           width:22.25%;
    
    background:#CCC8B3;
    
    border-top:#FFFFFF 2px solid;
    
           margin-top:2px;
    
           float:right;
    
           border-left:#FFFFFF 2px solid;
    
           padding:10px;
    
           text-align:justify;
    
    
    
    }
    
    
    
    
    
    
    
    #footer{
    
    height:50px;
    
    background:#BFBD93;
    
    border-top:#FFFFFF 2px solid;
    
    margin-top:327px;
    
    padding:10px;
    
    }

     

    and the corresponding html:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    <title>240 Pixel Right Column, Single Main Column.</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    
    <link rel="stylesheet" type="text/css" href="styles.css">
    
    </head>
    
    <body>
    
    
    
       <div id="header"><h1><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></h1></div>
    
    
    
           <div id="maincolumn">Content Here</div>
    
    
    
         <div id="secondarycolumn">Secondary Column</div>
    
    
    
    
    
       <div id="footer">Footer</div>
    
    
    
    </body>
    
    </html>

     

    How can I position the blocks optimally without having to go through this trial and error exercise so as to be able to retain their positions relative to each other, (when nesting new blocks in each container individually, resizing them, whatever, on the fly); what can I do with this code that I have, to make it flexible, I would rather have my css nested in the same order as my html and would prefer to use classes or internal or inline styling where required. I intend to then put in a sub div in the header for a navigation bar, maybe a photo gallery in the main column or embed video or media player, the works..i don't think I am going to move on to forms, actions, php and javascript till I get a grip on this.

  12. Thanks, that looks very promising, something that will engage my fickle mind for quite a spell before i bother you again, meanwhile rest assured that i shall plod on with the html, xhtml, css and javascript tutorials in the hope of bettering myself. :)

  13. Hey Dan, that bakery site looked pretty good to me apart from the fact that i couldn't "view page source"..nice pudding colored background and all :) and how did you improve it?

     

    Which brings me, Ben, to a similar thought, far be it from me to be audacious enough to find faults in this website, most people think of having a website or learning how to make one when they have seen something they like, so what i was leading up to was, suppose i fancy "killersites.com" for eg., a site with it's own forum, if i were to grab it's home page source, would it be possible to 'reverse design' the style sheet and scripts on the basis of that? Just one tutorial on the process would be enough to make a professional out of anyone; it's my contention.

     

    Or, say any one of the templates so generously offered here, any one tutorial which explained the html, css, and scripts in detail, alignment and display options, their permutations and limitations within that template, how to change those, how to add a forum, embed video, the whole shebang with one good example..now that would be a tutorial, not this "Hello World" level stuff..i will understand if these are trade secrets and not to be shared freely, don't get around much so i wouldn't know.

  14. Hi, have finished reading the html, and css tutorials here, no offense, but they were too sketchy to build any confidence in me but good enough to get me hooked and look for more. Discovered this; http://www.w3schools.com/xhtml/xhtml_syntax.asp. Tried out validating the killersites page and got this; http://validator.w3.org/check?uri=http%3A%2F%2Fwww.killersites.com%2F. Similar thing happened with google.com, i know i am out of my depth bothering about these things at this stage having only picked up some html, but what's it mean? Are the sites which fail validation not quite up to the mark, less polished?

     

    Do check out their quiz section, i was aiming for something like that here, but a bit more sophisticated, something that would test actual task oriented coding ability and not just one's memory of documentation covered, more like mini-projects in increasing order of complexity. I would request the senior members to retrace their work right back to the time they made their first web page for this project (hope you will make it one).

     

    Edit: Something that takes one step by increasingly complex step beyond this: http://www.w3.org/Style/Examples/011/firstcss.en.html

  15. Ahh okay then :lol:

     

    Well, i am 15, and i only started website designing about 1 or 2 months ago, and i know basic HTML and CSS, a small amount(very small) of Javascript, and im going to attempt to learn PHP soon.

     

    The only issue i have is that i never know what i want my website to look like, or i never reach my drawn design...

     

     

    So basically, age doesn't matter, and im not disciplined whatsoever, so that doesn't matter...

     

    If you enjoy learning something new, it wont take you long at all :)

     

     

    Good luck ^_^

    ,

     

    Thank you, senior Comrade, i shall look to you for further guidance, and feedback as to my progress, starting tomorrow, as per my resolution to learn anew. :)

    Edit: Not being snarky or anything like that, re: your age, please believe me, am only gushingly respectful of your relative proficiency.

  16. Re: http://www.killersites.com/community/index.php?/topic/4380-hi-all-and-happy-birthday-larry-f/page__pid__22138#entry22138

     

     

    Thank you for your hospitality, but I would like to rephrase my query and replace “..it would take me..” with “..it would take one..”, also add more detail.

     

    1) You don't have to be so formal and non-committal, by all means feel free to hazard a guess on the basis of your own experience and those case studies that you know of, I won't hold you to it <_< ..as to the case studies, if none exist then I hereby volunteer to be the subject of one in which only your tutorials, and help are utilized, and the successful test result would be one where the subject, that would be me if there's no one else, is able to apply for a web designing job..again, only as generally agreed by web designing professionals in the matter of questions asked at interviews..and not be laughed at outright at the interview. You already know that I am a beginner and have been using a computer (incidentally OS: LMDE) only since the last 4 years or so, and am willing to spend 4 hours daily studying, no I take that back, make it 2 hours. Every week or so..you decide the interval..I would post the link of the page up to which I will have covered the tutorial and any experienced member of the forum could quiz me on the topics therein, hopefully, the administrators and moderators would step in to adjudge, and correct, and tell the subject if he is going too slow or too fast as per their standard, when the need arose..the result would be, like a killersites.com/community/testyourself page, yeah, let's make a project out of it, say when! Not today please...

    2) Details of Profile:

    a) Age and period since having last acquired a formal certificate in any discipline: 48 and 25 years respectively. I mention these because I read somewhere of a study that correlates these to the time taken to learn, for e.g. a new language or to understand new concepts in mathematics; especially as in the matter of their effect on the ability to muster the dedication and concentration required, and the inductively established physiological limitations of the human brain itself..vaguely remember reading something about it, don't remember where or when, see what i mean?

     

    b.) At present, very short attention span and lack of focus, because of lack of practice in using the faculties for a proper study of any discipline since ages. It is hoped that there shall be an improvement in this that could be indicated by the speed of progress in the tutorial.

     

    Regards,

    mzsade

     

    PS: There's another online case study like I would like to volunteer for as a subject, that correlates the use of marijuana or alcohol, or both, with their effect on the sense of aesthetics, physical and mental equilibrium, and social behavior, but I don't think you would be interested in that :lol: .

    Please excuse my presumption of familiarity, we Indians are a very “touchy-feely” people, can't help it, it's a cultural thing..remember Raj of the big bang theory? :D

×
×
  • Create New...