barnum — 2012-01-25T18:26:04-05:00 — #1
I want to understand how to use the "div" element on my website. Is there a good tutorial here or somewhere that is easy to understand? For whatever reason I have trouble grasping it. My website takes a while to load, and many have said I need to have columns or something speed it up.
ralphm — 2012-01-25T19:35:25-05:00 — #2
Having columns won't make any difference. It's more likely to be big image files etc slowing down the page load, or a slow internet connection.
A div is just a container you can wrap around other elements for the purpose of organizing those elements on the page. You can apply styles to it, like a width, floating it etc. to create columns and so on. We'd need to know what layout you want to give more specific advice.
barnum — 2012-01-25T19:44:17-05:00 — #3
Okay let me share my site, but please don't beat up on me. A few of your have been a real help to me with it, and a few have torn me to pieces. I know my site is full of problems.... I post mostly anymore in "Latest News" link, and some have told me it loads too
slow. I want to know how to add columns anyway so any help would be appreciated. www.stoutstandards.com
ralphm — 2012-01-25T19:57:26-05:00 — #4
OK, I won't beat you up.
So, what page(s) / content would you like to break into columns? If lots of pages, perhaps pick one so we can do a trial run. Consider how wide you'd like the various columns, too.
barnum — 2012-01-25T20:20:39-05:00 — #5
I post most frequently in the "Latest News" link, and want to know how I can get it load quicker. For that matter all my pages are similar so any suggestions will work for them too. Thank you...
ralphm — 2012-01-25T20:33:09-05:00 — #6
The page does load quite slowly for me, but there's a lot on there. I would suggest that you perhaps just post on that page a snippet of, say, the past ten news items, each one with a link to its own page—like on standard blogs etc. That way the page won't get too long and hard to read.
The images aren't too large, but I guess once you have a lot of them it slows down the page anyway. It might be a big job to add columns to that page, and I don't think it's really needed. But the question would be, what content goes in what column? That is, how are you going to break up each news item? Anyhow, columns are not the issue in terms of page load. It's just the length of the page to blame, so I'd say break it up.
victorinox — 2012-01-26T11:43:04-05:00 — #7
Have you taken a close look, Ralph? All the images I checked were either lacking compression or larger than the display dimensions. Even if the content were split to different pages there would be a great benefit in optimising the images.
For example, the image with the caption "Gary, Jim and Scott", named "Mitchen.jpg" is set in the markup to display at 540x400, but the image file is 1800x1201 and has a file size of 754KB. If the original image were resized and saved with 60% compression it would be around 70KB, less than a tenth of the current file size and therefore considerably faster to download.
I hope this isn't too severe, Barnum.
ralphm — 2012-01-26T17:33:53-05:00 — #8
I only checked a few pics at random, that seemed reasonably sized (around 100kb), but well spotted. @Barnum; if you have Photoshop, you can easily optimize these images with the Save for Web option, where you can change the dimensions of the images and reduce their (pixel) size dramatically.
dresden_phoenix — 2012-01-26T22:26:08-05:00 — #9
Barnum, here are some BASIC tips:
FIRST gather all the info you would want to present on your site. NO, not how you want it to look.. but what you NEED IT TO SAY.
Structure that into HEADERS ( which are demarcations of topics and not to be confuse with headlines or sub headlines) , paragraphs, quotes and lists ( making the distinction of which lists NEED to imply order, a countdown for example, which do not. The appropriate semantic tags for these: H1-6, P, BLOCKQUOTE, UL , OL.
OK now you have your document basically set up and you can START to BEGIN to think about DIVs
Some rules: you CANT put a DIV within a P or as a CHILD of ANY of the aforementioned tags EXCEPT BLOCKQUOTE. Clarifications, you can use DIVs within LIs but only LIs can be direct children of OL or ULs. If you need to wrap or drop anything in the tags in question it is best to use SPAN and give the span in question display:block;
( essentially a SPAN in the inline equivalent of a DIV)...see?
So what happen when you cant define something as a heading, list, paragraph..etc? Thats another good use for the DIV tag, assuming the information in question is intended to be block-type. Let's say for example you have a slogan... that would be a good candidate for a DIV. Apple "Think diferent." is not a P, it really isnt an item in a list, it is NOT a quote!! Really, it isn't anything... as such you COULD, for the sake of this example do this:
<DIV class="slogan"> Think Differently</DIV>
OK, so that is your crash course in semantic use of DIVs.
Once this is done DIVs ALSO serve another important role in your code and that's to group information that you want to go together.. for , preferably , logical or even presentational reasons.
For example lets say you had the above info.. and you wanted that to be the header part of a page.. then you could segment your info using DIVS... You can then use CSS on THOSE segment divs to color and position create nifty layouts, etc....
<DIV class="slogan"> Think Differently</DIV>
Try to keep this segmenting to a minimum as it BLOATS your code. but if you NEED it YOU NEED it.
ALSO... remember what I said about DIVs being BLOCK elements? Sometimes, novices for get they already have a block in elements suck as UL and will wrap a DIV around a UL... in MOST CASES this is redundant and you could just get rid of the DIV.
In a well structured document(see step #1), you will find there is little need for EMPTY divs or multiple wrapping divs, tho it does happen on occasion. Still try avoid getting painted into this corner.
I hope that condensed course sheds light on the subject and helps you avoid DIVitis.
Your site might load quicker if you make separate MUCH SMALLER and better compressed thumbnails. It may seem like a pain at first but this can be automated ( if you have Photoshop) and the rewards will be worth it.
barnum — 2012-02-01T21:13:27-05:00 — #10
Thanks, need to digest all this...the compression is something I need to obviously do.