Runboard.com
Слава Україні!



🙂       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2  3 ... 5  6  7 

 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Code Formatting


Hi LG,

I've been muddling around with trying to pick up HTML since 96, though only by reading code, copying snippets from this place and pasting them there to see if they to what I want them to and so forth, never really understanding anything much. More recently, I've been using an editor with a blank document, adding one element or changing one attribute so I can see what the code looks like for that and then proceeding.

Early in the month, I looked at Lynda.com, then a couple of days ago, I started working through the tutorials on w3schools.com, keeping text document notes about tags and anything else I think I might want to refer to again in one place, in a way I'll remember easily. I've noticed as I see other people's code here, on CodingForum.com and by viewing the source code when I see something interesting in my browser, that people use indentations to organize their code to visually make it relate to what's happening with the code.

I've never used an editor with CSS. Some of the CSS I've pulled together and, more recently written, is sloppy looking. When I organized it in a way that visually made better sense, it no longer fit in my Runboard CSS box and I had to go back to the old version; I even used used your shorthand tips to reduce the code in as many ways as I could find. From that, I gathered that the extra spaces and indentations are similar to adding code. Does this potentially add time to the download of a document for someone with a dial-up connection?

One of my earliest, multi-page websites was a site about Peafowl & Guineas dated 7/12/96; it included the genotypes of the 14 color variants of Guineas, including a graphical display I made to illustrate. The research was a great deal of work and kind of over my head. I had not backed up those documents and they were all lost (I figured they were safe on the server until someone there mis-understood my directions about something I wanted to do), or so I thought. Yesterday, I found them intact on the Wayback Machine. I think I'll entirely hand code (never have done that) those pages this time and in the process, learn how to link CSS (I have a better grip on CSS than on HTML) to my HTML documents.

Anyway, what sort of conventions are there for the indentations in markup and in CSS? Am I missing a reason, other than visual organization, for indenting?

Dave

Last revised by Forestelves, 5/25/2007, 6:18 pm


---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/25/2007, 12:12 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


Hi Dave,

I'm glad to hear you're learning from w3schools, as they're a very good source for learning many different types of code.

Does this potentially add time to the download of a document for someone with a dial-up connection?

Any slowdown would be so minimal that it wouldn't be noticeable, even when our connections are as low as 26.6kbps (which is usually about where mine is).

I think the only time anyone really has to worry about that kind of thing is if they get hundreds of thousands of hits or more every day, because it does take a little more bandwidth (however minute), and it does add up if there's a lot of traffic. This makes it understandable that Thor would limit the amount of space available for code (both HTML and CSS have limited space) when he hosts so many boards, but it can make it difficult to fully customize your board without either (1) cramming things into one line or (2) remotely hosting some or all of your CSS and linking to it.

If you look at my source code, you'll see that I crammed a lot of CSS together, because I didn't want to use my own domain for this board's CSS.* But I eventually decided to move some of my more insignificant CSS definitions to a remote style sheet and put a few carriage returns in the CSS section of the page (through the cpanel), for just a little semblance of tidyness.

* Although my domain has very good uptime (I've only witnessed it being down on one occasion and for a very short time), there's always a chance that the site hosting the CSS will go down, and the board would look very plain without the CSS. Also, the content can sometimes start loading before the style sheet (because you are actually accessing a separate domain for that when it's remotely hosted), so the board would look plain until the remotely hosted CSS loads. For these reasons, I chose to only remotely host the more insignificant definitions.

When building a website where you can have a style sheet that's separate from the page's code but still on the same domain, it's always best to keep them separate. Truth be told, I really should still be remotely hosting all of my CSS, because once the style sheet is loaded in the cache, it doesn't need to be downloaded by that computer again until changes are made to it, or until that computer's temp files are cleared. I guess the main reason I don't do that is because of the miniscule chance that someone new will drop by on the rare occasion that my website is down for two minutes, and they would get a plain black-and-white page. Yes, I can be a little anal about some things. emoticon

Anyway, I drifted a bit there, but it's a bit related to your question and doesn't hurt to learn. If your site allows you to store CSS files and hotlink to them on another site (Runboard in this case), then that is certainly an option for you. emoticon

I had not backed up those documents and they were all lost (I figured they were safe on the server until someone there mis-understood my directions about something I wanted to do), or so I thought.

Ouch! I was just going to leave it at "ouch," figuring you had already learned your lesson, but just in case it was a lesson in not letting others edit your site, I want to make sure you've also considered this: Even if you don't give someone else access to edit your site, you should still keep backups of everything, whether they be on a server somewhere else in the world, or on your own computer. There's always a chance that a cracker (aka malicious hacker) and/or virus could wipe everything out, or even a power outage could cause technical problems and wipe everything out.

Yesterday, I found them intact on the Wayback Machine.

Good thinking! emoticon It was also very fortunate that Wayback had those pages, because it doesn't store everything.

I think I'll entirely hand code (never have done that) those pages this time and in the process, learn how to link CSS (I have a better grip on CSS than on HTML) to my HTML documents.


Here's the basic layout of the page. You can have multiple stylesheets and/or multiple javascript files (I rarely use them, and should leave that line out if you don't use it), as well as multiple meta tags, but do not use multiple doctypes, html, head, title, or body tags, and do not put things that belong in the head in the body or vice versa.

<!doctype...> (You might want to choose one of the transitional doctypes)
<html>
<head>
<title>Text for blue bar/Search engine link</title>
<meta....>(Description, keywords, etc.)
<link rel="stylesheet" href="URL.css" />
<script type="text/javascript" src="URL.js"></script> (optional)
</head>
<body>
Content of the page
</body>
</html>

There is another way to link CSS using @import instead of <link>. The benefit of using @import is for any browser that's too old to understand certain layout CSS (layout, as in positioning, not to be confused with colors and other styling), it will ignore the style sheet entirely. The drawback that I've witnessed is the content often being loaded before the style. Because of the drawback, as well as the improbability of people using an ancient browser to visit one of my sites, I tend to use the <link> method, as shown above.

Anyway, what sort of conventions are there for the indentations in markup and in CSS? Am I missing a reason, other than visual organization, for indenting?

Whatever makes it easiest for you to read your own code, that's how you should indent it. Also feel free to add /* comments */ because you might know exactly what you're styling now, but it's easy to forget what you've done several months later when you want to change something.

Of course, using descriptive class names can be just as good as comments sometimes. For example, I know that the main table surrounding all the default Runboard content has the class name of ak_msg_master_table. Likewise, it's pretty unnecessary to use a comment that says /* this styles all blockquotes */ because it's pretty obvious just by looking at the CSS itself.

I hope this gives you a better understanding, and I'm more than happy to answer any more questions you may have on the topic. emoticon

I should probably also mention server-side includes (SSI), in case your site has a lot of pages with sections that are the same on every page (like navigation). While ASP is a programming language, learning how to use "includes" is somewhat like learning how to use one more HTML tag, in my opinion, and the only probable confusion I can forsee is using root-relative paths to the include files themselves. If you've ever had to edit every page of your site just to add the same link to all of them, then I'm sure you can see how this would come in handy.

I use PHP instead of ASP myself, but using PHP would require you to rename all your pages to end in .php, and then we would have to get into htaccess and 301 redirects to account for the changing urls.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/26/2007, 1:43 am Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


Thanks for such a thorough response to such a rambling question.

It makes the most sense to keep style sheet on the same server as the markup. With my Runboard site, I was willing to work within the limits set on the size of the respective boxes. Someday, I'm sure I'll want to revisit that code and whittle away stuff that just doesn't need to be there. The origin of that board, the one you visited with the triquetra in the background, was Josh's Underground Skin which used to be published on the old Club Pandemonium. It had the sidebar I wanted and was otherwise beautifully spare. I talked with him about it on CP before it disappeared but it was a long time between responses. I think he was already beginning to move away from it. This was last summer.


Even if you don't give someone else access to edit your site, you should still keep backups of everything, whether they be on a server somewhere else in the world, or on your own computer.



Yeah, this was a good way to learn a lesson and, according to when the pages were last updated, nearly 10 years ago, in 10/97, my computer crashed and I lost my files locally but as they were on the server, I didn't worry about loosing them and wasn't actively doing anything with that site. A short while later, I registered my domain (forestelves.com) and was forced to upgrade to a business account at that ISP (I'm long gone from there) so decided to opt for a better service plan (unlimited connection hours; remember those days?) at the same time. That put me on a different internal server at the ISP and in the process of moving me there, everything was deleted; they figured I could upload it again. So, I learned all about backing up my files.

Ever since then, all my hard discs have been partitioned with one partition assigned just for the storage of data I need to back up nightly. I keep back-ups now on another machine in my house as well as a remote machine elsewhere in case of fire or such here. The email and other files that I've chosen to keep go back to the time of that server loss.


Here's the basic layout of the page.



Thank you. I have a lot of the basics, can work a little with tags, have a recent, better understanding of elements, can read source code and figure out how to use the classes that already exist to write CSS that will affect what I want to in the way I want to without a lot of help.

My .com site is a stock site run for booksellers. It taps into the Amazon servers, uses their images, descriptions and reviews, gives my buyers the option to use either Amazon's shopping cart or PayPal's and in return, Amazon gets a healthy cut when the buyer chooses their shopping cart. That site has a very easy-to-use control panel with a huge number of options that write to a style sheet called Styles.css. Within this many paged control panel is a box where a supplemental style sheet can be written or linked. I linked mine using @import url(http:etc.

Andy, the site's owner & programmer, has (somewhat reluctantly at times) added quite a number of classes for me & many of those times, has made additions to his control panel so that the changes can be made there. However, as his markup is based on tables and tables within tables, he's been having more trouble with his control panel's CSS than I have with the CSS I've been writing directly. This, or something else, (perhaps just the fact that I am using so much CSS and have made my site look so different from his prototype, perhaps that I've asked him for those class changes...maybe a dozen or so...some of which he's ignored) has annoyed him; his responses are coming less quickly and with few words, now.

For a while, he was asking about what each thing I was writing did and I detailed each thing as he asked. He also wondered how the style sheets would work together, specifically, if mine would override any his control panel wrote to Styles.css or Main.css; I told him that it was my experience that I could make my Forestelves.css will override Styles.css in some instances, that I wanted it to and why (changing how some links look, for example); I could not override Main.css. He settled down after that. It would seem no one else is using that feature of his sites. Better for me. The rest look all the same, just with different colors and banners.

I also used some 1px high background images to create subtle gradients and I really like how they worked out. In one case, I wanted an area to be black that displayed the background image; I used CSS to place a 1px black image over the other image in the cells with that class name to conceal it...fun stuff.

Divs still totally befuddle me and I am looking forward to going through the tutorials involving them. Writing classes into my markup is also a veil yet to be lifted. I know how they look, just not entirely sure how and when and where I can add them yet. I read the posts of a lot of people on CodingForum.com who are pretty opposed to using tables anymore, preferring the simplicity and elegance of CSS to do the same thing (though there are plenty there who still like tables and feel CSS works perfectly well with HTML tables). I am also looking forward to trying the CSS alternative and have a place for it in the pages I'll rebuild. Their data really aren't important at all anymore; they'll only serve as some basis for a project providing much of the text and background work needed for the documents, allowing me to concentrate on the code itself.

Thanks for the confirmation about the indents and the bandwidth with regard to the spaces they create. But maybe you could ask Thor for more space in our CSS boxes so we could format our code. You have clout around here. emoticon

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/26/2007, 2:40 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


This is weird. I just previewed my post and none of the emoticons are showing up. Oh well, just pretend you see little graphics instead of my text-icons, lol.

You're very welcome, Dave. :D

It makes the most sense to keep style sheet on the same server as the markup.

Agreed, especially the most important styles. :yep:

A short while later, I registered my domain (forestelves.com) and was forced to upgrade to a business account at that ISP (I'm long gone from there) so decided to opt for a better service plan (unlimited connection hours; remember those days?) at the same time. That put me on a different internal server at the ISP and in the process of moving me there, everything was deleted; they figured I could upload it again. So, I learned all about backing up my files.

The host of one of my clients moved all of their websites to different servers last September or October. While there was the problem of ISPs (at least AOL/Netscape) directing users to the wrong (old) IP when the domain was typed in the browser (causing a website doesn't exist error message), none of the actual files were deleted, at least none of hers were; and once the old IP was finally cleared from AOL's cache, their users were able to access the site again. That said, I'm surprised that your host didn't move your files like the other host moved all the files pertaining to the sites they relocated internally, and I'm deducing that they didn't even warn you of this before moving your site, otherwise I'm sure you would have backed everything up and had it ready for re-uploading.

Ever since then, all my hard discs have been partitioned with one partition assigned just for the storage of data I need to back up nightly. I keep back-ups now on another machine in my house as well as a remote machine elsewhere in case of fire or such here. The email and other files that I've chosen to keep go back to the time of that server loss.

Very good thinking. :yep: Another option is an external drive that plugs into your computer, which you can keep in a fire-proof safe if you have one (which I don't).

However, as his markup is based on tables and tables within tables...

Yikes! :omg:

This, or something else, (perhaps just the fact that I am using so much CSS and have made my site look so different from his prototype, perhaps that I've asked him for those class changes...maybe a dozen or so...some of which he's ignored) has annoyed him; his responses are coming less quickly and with few words, now.

For class changes, maybe looking at his style sheet yourself will help with that.

Andy could be an excellent programmer (if he did indeed create the program your site runs on himself), but even some of the most excellent programmers don't keep up on the best ways to code a page. Witness Runboard, which uses tables inside tables inside tables, plus inline CSS in places that overrides any CSS that admins might define, deprecated html tags like <center>,<b>,<i>, etc... well, I'm sure you get the idea. In Thor's defense, changing some of these things now could cause most existing boards to lose some of their current customizations and send most admins screaming frantically to the support board all at once for help with fixing what they might perceive as bugs. I can just imagine the chaos that would cause.

For a while, he was asking about what each thing I was writing did...

It sounds like Andy doesn't have a clue in this area, unfortunately for you. If he knew anything, he should be able to determine what everything does just by reading the code you've written. For example, just glancing through his Styles.css file, I can see that he had some white backgrounds with black text, where I see no white backgrounds nor black text on your current page. And if I compare those class names to the HTML of your page, I could tell you exactly what used to have those white backgrounds with black text. If Andy knew what he was doing, he should be able to do this as well.

... and I detailed each thing as he asked. He also wondered how the style sheets would work together, specifically, if mine would override any his control panel wrote to Styles.css or Main.css; I told him that it was my experience that I could make my Forestelves.css will override Styles.css in some instances, that I wanted it to and why (changing how some links look, for example); I could not override Main.css. He settled down after that. It would seem no one else is using that feature of his sites. Better for me. The rest look all the same, just with different colors and banners.


I wonder if it would help if you sent him to http://csszengarden.com so he could see the true power of CSS and hopefully prompt him to learn more about it.

I also used some 1px high background images to create subtle gradients and I really like how they worked out. In one case, I wanted an area to be black that displayed the background image; I used CSS to place a 1px black image over the other image in the cells with that class name to conceal it...fun stuff.

Hehe. If you were redefining Andy's classes, then you're not concealing his background images, rather replacing them completely. Your style sheet is basically saying, "No, scratch that. I want this instead." And since your style sheet comes after his, yours has the ultimate say in the matter. =D

Divs still totally befuddle me and I am looking forward to going through the tutorials involving them.


I'm not sure in what way they confuse you, but just think of a div as a box. This box surrounding your content can be invisible, or it can have borders, backgrounds, padding, margins, etc. It can be floated to the left or to the right, it can be absolutely positioned on the page or moved relatively to the left, right, up, down, etc. Its default width is to stretch 100% of the available space, and its default height is however tall it needs to be in order to accommodate the content inside. You can make it taller or narrower than its default width, and even make it smaller to fit into a confined space, with a scrollbar appearing inside it, like my code boxes here...

alksjdflaskfjdalsdfjaslfjasdasdkaslkslajdlkafasksdflldkfdfksfsdlfjslfsdlkjdlksjdfskfskfddfsaljsal

That was done on the <pre> tag (another block-level element), but it works the same way. To understand more about divs, maybe it would help to read up on block-level elements and compare them with inline elements.

Writing classes into my markup is also a veil yet to be lifted.

You can name them just about anything you want, as long as they start with a letter, and they can't contain any spaces or weird characters... numbers and underscores are fine, as long as the class name doesn't start with them.

Bad: 1note
Ok: onenote
Ok: note1
Bad: note one
Ok: note_one

If you want to give something a class name, you just add class="myclass" to the html tag (examples: <div class="myclass">, <span class="myclass">), then you would refer to it in your css with .myclass or whatever you decided to name the class in your HTML.

I know how they look, just not entirely sure how and when and where I can add them yet.

You can add them just about anywhere. But also consider this...

<div class="nav">
<a href="...">Link</a>
<a href="...">Link</a>
<a href="...">Link</a>
<a href="...">Link</a>
</div>

... is better than ...

<div>
<a class="nav" href="...">Link</a>
<a class="nav" href="...">Link</a>
<a class="nav" href="...">Link</a>
<a class="nav" href="...">Link</a>
</div>

Since, in this example, all the <a> tags have the same class, you don't need to keep adding the extra markup to each one. The way to refer to these links in your CSS for the first (better) way would be with:

.nav a:link, .nav a:visited, .nav a:active, .nav a:hover

Of course, you can define each state of the link differently, or you can lump them all together like I did in the above line. That line means, btw:

the unvisited links inside the nav div, the visited links inside the nav div, the active links inside the nav div, the hovered links inside the nav div

It lists parent, then child (.nav is the parent to the a child, meaning <a> is inside the .nav div), and you can actually add grandchildren and great grandchildren, etc., in order.

I am also looking forward to trying the CSS alternative and have a place for it in the pages I'll rebuild.

I love to hear that, and I look forward to seeing you succeed. :D

Thanks for the confirmation about the indents and the bandwidth with regard to the spaces they create. But maybe you could ask Thor for more space in our CSS boxes so we could format our code. You have clout around here. =D

You're welcome, but I don't really have as much clout with Thor as some might think. :lol: I actually re-created the default style sheet and gave it to him, but that was several months ago and he never implemented it. ;) However, if you can hotlink files from forestelves.com for use at other sites, you could still do like I did and put your more minor definitions in a remote style sheet. Trust me, I can't think of anyone who needs more CSS space than I do, since I keep the default CSS turned off, due to the default's fixed px sizes of the fonts. Everything else can be overwritten, but I like to give even IE users the chance to resize their fonts, and I just didn't see a way to redefine the default font sizes in that way without using even more custom CSS than I already do. :escher:

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/26/2007, 7:48 pm Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting



I'm surprised that your host didn't move your files like the other host moved all the files pertaining to the sites they relocated internally, and I'm deducing that they didn't even warn you of this before moving your site



The ISP was small and local as were many in the day. The first one I signed on with was a tiny, local phone company, now no longer in business. This ISP has now been purchased by another, larger, regional company and has a new name. I could drive to their office in 5 minutes or so. I had no clue they would not move my files and every reason to believe they would. That was a long time ago. I stopped worrying about it at the time.


Another option is an external drive that plugs into your computer, which you can keep in a fire-proof safe if you have one (which I don't).



I actually bought an external drive to do maintain my files away from home but the problem is remembering to do the transportation thing. the remote machine coupled with a backup on a second machine here works perfectly for me.


I can see that he had some white backgrounds with black text, where I see no white backgrounds nor black text on your current page. And if I compare those class names to the HTML of your page, I could tell you exactly what used to have those white backgrounds with black text.



The mystery is easy to solve. Styles.css, the doccument to which your link pointed, is the CSS that his new control panel writes when I make choices there. He's been playing with the software for this control panel for many months and I've gotten to see the thing as he's been working on it. White background with black text is the default position for many classes when he turns the keys over to a new user. In the cases where there is currently black text on a white background in Styles.css, they are exclusively involved in the right column, which I have toggled off and have never adjusted any but one or two of the settings just to see what the column would look like. It does seem like, if the column is toggled off, the CSS involved in it should also be dropped from the style sheet. I have no CSS written to affect any of those classes in Forestelves.css.


I wonder if it would help if you sent him to http://csszengarden.com so



I'm glad to see that site. I may hold off a while before showing it to Andy.


If you were redefining Andy's classes, then you're not concealing his background images, rather replacing them completely. Your style sheet is basically saying, "No, scratch that. I want this instead." And since your style sheet comes after his, yours has the ultimate say in the matter.



oh, I see! That makes sense. Thanks.

I need to keep reading about divs, children, grandchildren and so on. I'm not in the dark but the light isn't all the way on yet, either. I think it's just going to come down to when I need to use those tags in some of my own code rather than just in the code snippets I copy / paste.

I hunted down a code box like yours when I saw one used on one of either Josh's or Pastor Rick boards. Forestelves.css is entirely my own coding but there's nothing very complex in there at all. The comments there are as much for Andy as for me but I don't think he's ever even looked at my CSS; it was easier for him to just ask. Programmers, many of them, need human translators to communicate effectively with people (so above the rest of us they consider themselves).

When I first started looking at the code and really tried to figure out which bits made what happen in my browser, it looked like magic. The more I learn about coding, the more like magic it seems.

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/26/2007, 9:44 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


Hi Dave,

I had no clue they would not move my files and every reason to believe they would. That was a long time ago. I stopped worrying about it at the time.

They really should have. But like you said, it was a long time ago and you're past that now.

I actually bought an external drive to do maintain my files away from home but the problem is remembering to do the transportation thing. the remote machine coupled with a backup on a second machine here works perfectly for me.

I'm glad you have a method that works well for you. emoticon

It does seem like, if the column is toggled off, the CSS involved in it should also be dropped from the style sheet.

Not really. When you enter values into the control panel that writes Styles.css, that information is going to either a text file or database (depending on how the program was written, but more than likely to a text file). In order to eliminate the toggled-off styles from the stylesheet, those styles would have to be deleted from the text file or database completely, which means that toggling the column back on would just about have to result in either an unstyled column, or some default definitions would have to be reinserted at the time of re-enablement, without more extensive programming to make it do otherwise. I suppose it's possible to write the program in a way that stores different sections of definitions separately (different text files or different tables within the database), but that would involve either a separate style sheet for each toggle-able section, or a way for the program to pick and choose which information gets inserted into the global style sheet. In a nutshell, it's just easier from a programmer's standpoint to have the program keep the entire style sheet intact, especially if most of their customers will be using those columns.

I'm glad to see that site. I may hold off a while before showing it to Andy.

I'm sure you'll find it very interesting. emoticon


If you were redefining Andy's classes, then you're not concealing his background images, rather replacing them completely. Your style sheet is basically saying, "No, scratch that. I want this instead." And since your style sheet comes after his, yours has the ultimate say in the matter.

oh, I see! That makes sense. Thanks.

You're very welcome! emoticon

I need to keep reading about divs, children, grandchildren and so on. I'm not in the dark but the light isn't all the way on yet, either. I think it's just going to come down to when I need to use those tags in some of my own code rather than just in the code snippets I copy / paste.

It also helps to know in advance that using parent/child relationships in this way is possible. I'm always amazed at how "professionals" label every tag inside something when they can just label its container, and the extra HTML markup created in doing so almost defeats the whole purpose of using an external style sheet... Well, it doesn't really defeat the purpose, but it doesn't maximize the use of it.

Take for example, Runboard. If you look at the source code for this very page, you'll find this:

<table class="ak_miscoptbar_table" border="0" width="100%"><tr><td align="left" valign="bottom"><span class="miscoptbar">

First, that could easily be accomplished with a <div> instead of a <table>.

Second, the alignment of the <td> can easily be accomplished in the CSS with this:
.ak_miscoptbar_table td { text-align: left; vertical-align: bottom; }

Third, a <div> would automatically have 100% and no border, but even for someone who insists on using a table here, those attributes can be defined in the CSS. As it stands, we as admins already have the ability to redefine it with CSS, since CSS overrides HTML attributes (border="0" for example) -- although inline CSS will override style sheets if the inline CSS appears after the class name (<div class="..." style="...">), the very same way forestelves.css overrides Styles.css.

Fourth, there is no need for adding that <span> nor another class name, because the span merely surrounds a bunch of links.

Fifth, there is no need for all of those non-breaking spaces (&amp;nbsp;) or vertical lines (|), because margins, left&right padding, and borders can all be added to the <a> links. These are presentational elements, not content, so they really shouldn't be in the HTML.

By using parent/child relationships (and divs instead of tables), I'm sure you can see how drastically one could cut down on their code.

The comments there are as much for Andy as for me but I don't think he's ever even looked at my CSS; it was easier for him to just ask. Programmers, many of them, need human translators to communicate effectively with people (so above the rest of us they consider themselves).

Some people can look at code and envision what it does, just like some people can read a novel and picture the setting when they read the author's description. To me, {border:1px solid #ccc; background:#fcc;} reads just like "a pale yellow background with a thin, light-gray border," except the CSS is actually more descriptive to me than words, because it allows me to actually envision the exact shade of yellow and the exact shade of gray, plus it tells me exactly how thin that border is.

Of course, it does help if the stylesheet's definitions are listed in an order that makes sense, with related items appearing near each other in the code. After all, it would be more difficult to picture a scene in a book if the author didn't describe things in the order that one might normally notice each detail if they were there in person or seeing it on a movie screen. An author wouldn't say, "The sky was blue, there was dew on the grass, the trees were tall, the sky had little clouds in it, the air was humid, the clouds were fluffy, and the grass was turning brown." They would describe the sky and clouds together, along with the setting sun or whatever else is happening in the sky; then maybe talk about the humidity, then mention that the grass was turning brown and had dew on it. Then they might go in to how tall the trees are and what they look like, etc. The point is, they'd describe everything about the sky at one time, everything about the air at one time, everything about the ground at one time, in whatever order, but in an order that makes sense, and grouped together so it's easy to follow.

When someone says, "Somebody told me to put this in my CSS, but I don't know if it's supposed to go at the top, the bottom, or somewhere in the middle," it's really a matter of where it flows best within the description of the overall scene (aka page).

When I first started looking at the code and really tried to figure out which bits made what happen in my browser, it looked like magic. The more I learn about coding, the more like magic it seems.

Simplified, it's a matter of looking at the HTML source code, finding (ctrl+F) text within the area you're looking at, and looking for a tag with "class=" that surrounds it.

<div class="myclass">
<p>Here is a <a href="url">link</a>.</p>
</div>

Here, you can use definitions that include but are not limited to: background, border, padding, margins, font size, font weight and color, width, height, and positioning for the div (a block-level element). You can also define these same things on the <p> (another block-level element) contained within "myclass", using the parent/child relationship. You can define the link itself (an inline element) using the parent/child relationship, although width and height do not work on inline elements, top&bottom padding on inline elements doesn't work in all browsers, and a border might look a bit strange.

It's not magic (of course, I know you know this). Rather, it's a combination of English and logic which describes, in very specific terms, the scenery surrounding the content of a web page. emoticon

Last revised by Lesigner Girl, 5/27/2007, 8:47 pm


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/27/2007, 8:36 pm Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


Hello,

I've got a situation I've run into before and don't know how to deal with very well. I have 3 divs; DivLesa is a header, is 680px wide and spans the other 2 divs. DivWill is 488px wide and contains 6 of it's own divs that need to behave as though they were one...for the most part. DivDave is 180px wide and contains no other divs. 12px separate the divs. Currently, DivLesa & DivWill are positioned using their left-margin padding and DivDave is given an absolute position from top left.

So, my question is about how to get these Divs to behave together (they are all contained in a parent Div we'll call DivIne ( emoticon couldn't resist...love John Waters) so that no matter what width monitor the user is viewing the document, DivIne is centered in it? Will and I both use wide screen monitors with our primary machines but I have a standard monitor next to me, also; the divs' combined widths with margins visually fit on a standard monitor but on a widescreen, of course, are pushed to the left because of the way I've positioned them. What's a better way?

Dave

Edit: I forgot to show you where I am with the CSS for trying to get DivIne centered. It looks just right on a standard monitor, as I say, but not on a widescreen.

#DivIne{
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
      }


Last revised by Forestelves, 5/28/2007, 5:52 pm


---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/28/2007, 1:14 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


Aww, you named a div after me? I'm honored. emoticon
I also love your DivIne div. How cute! emoticon

Did you put relative positioning on any of the parent divs? In order to absolutely position a div inside another, that parent div has to be either relatively or absolutely positioned.

If you post the rest of your CSS and accompanying HTML, I can see what the divs are doing.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/29/2007, 12:25 am Link to this post PM Lesigner Girl Read Blog
 
Forestelves Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2006
Posts: 52
Karma: 3 (+3/-0)
ReplyQuote
Re: Code Formatting


Hey there,

You have a PM with a link. I've got only a portion of the graphics work done so far and am not even ready for anyone else to see what the project is yet. I was hoping to keep that totally secret for a while yet, especially from you emoticon , but I'm stuck on those divs.

The divs I named here yesterday were for illustrative purposes; they aren't the names I used (no real choice about that) in my CSS but you'll see that in a bit. There is another div called extraDiv1 which looks like a long, brown architectural element of some sort. The graphic isn't finished yet and it may not even stay in the form it is; I was anxious to get something in place to see how it was going to work before I spent too much more time on it.

The big issue with it is that I seem to have to set it's height in px; 100% doesn't make it 100% of the parent div size (at least, not yet) but of the image size itself. Setting the px size isn't so bad except that when I set it for a wide screen monitor, it hangs down too far on a standard monitor. That might be okay, too, as I could hide the tail behind the footer div, the next big part of this project. But then, I'm wondering, why is monitor width making that tail hang down in the first place? I'm not using % widths in any of my divs, only in the body and the text contained by the divs.

So, getting all of those divs to move together in the parent, #container as it's called in my CSS, so #container will always be centered in the monitor no matter it's width is the biggest issue and then second, to know if the only way to control the height of #extraDiv1 is to sex it's height in px.

Thanks in advance!

Dave

---
All mimsy were the borogoves, and the mome raths outgrabe. ~Lewis Carroll
5/29/2007, 12:53 pm Link to this post PM Forestelves
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Code Formatting


I'm impressed with what you've done so far, Dave. emoticon

I sent you a PM reply about centering the #container div on the page, but I hadn't seen your post yet.

The big issue with it is that I seem to have to set it's height in px; 100% doesn't make it 100% of the parent div size (at least, not yet) but of the image size itself.

That's one of the weak spots in standards-compliant code. In order to set something to 100% height, either its parent has to be in fixed pixels, or every single parent has to be set at a % height. For the #container div, that be easy, just set html, body, and #container to 100% height. But with the div you're talking about, it wouldn't work because it has to stay below the banner.

Because of this issue, a lot of people will make a faux column with a background image going down the whole side of the page. In your case it would be done down the whole side of a div which contains both your content and your sidebar, but not the header. Here's a handy little tool you can pop into your address bar and hit "go" while looking at your page:
javascript:var t=document.getElementsByTagName('div');for(i=0;i<t.length;i++){void(t[i].style.padding='5px;');b=t[i].id;h=t[i].innerHTML;void(t[i].innerHTML='<p style=\'color:red;font-weight:bold;\'>'+b+'</p>'+h);void(t[i].style.border='2px solid blue');}

Bolding this because it's a short line in the middle of a long post...
It looks like supportingText is the div you want to put that beam in. Don't set the height or width on it, just let the div grow to accommodate the content.

That said, I have another recommendation at the end, after addressing these other comments and questions.

Setting the px size isn't so bad except that when I set it for a wide screen monitor, it hangs down too far on a standard monitor.

Some people use a 1024×800px resolution, others use bigger, others (very few people) use smaller. The fact is that nobody can use pixel sizes and have it fit perfectly into every monitor, simply because of these different screen resolutions. If you have a CRT monitor, you can actually change the resolution on your own monitor. If it's LCD, you may or may not be able to do this, depending on its capability.

That might be okay, too, as I could hide the tail behind the footer div, the next big part of this project. But then, I'm wondering, why is monitor width making that tail hang down in the first place?

It's not the width of the monitor, but the pixel height of the screen's resolution.

I'm not using % widths in any of my divs, only in the body and the text contained by the divs.

It's never necessary to define 100% width for the body, since that is the default.

Now, for my recommendation. Let's suppose you were doing an entire website in this format, and you have a page with very little content, making the content area shorter than the sidebar. Since the sidebar is absolutely positioned, it will simply extend the content area and cause your beam to be longer than the box beside it.

So instead of using absolute positioning, you can use floats.

#quickSummary { float: left; }
#preamble, #explanation, #participation, #benefits, #requirements { clear: left; float: left; }
#footer { clear: left; }
#linklist { float: right; }

You do not want to float the footer. If you do float it, then the quickSummary div won't extend down to surround it, causing you to lose your beam.

If you take out the absolute and relative positioning and replace them with those floats and clears, this should give you the same layout. On second thought, you might want to put position:relative; in all of those anyway, to work around IE's peek-a-boo bug that sometimes occurs in floats.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/30/2007, 12:45 am Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion

Jump to Page:  1  2  3 ... 5  6  7 



You are not logged in (login)
Back To Top

This board's time is GMT.