SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question about divs

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The images aren't too large, ...
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Have you taken a close look, Ralph?
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:

    <H1>Apple Computers</H1>
    <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 id="head">
    <H1>Apple Computers</H1>
    <DIV class="slogan"> Think Differently</DIV>
    </DIV>
    <DIV id="content">
    <DIV id="main">
    </DIV>
    <DIV id="aside">
    </DIV>
    </DIV>
    <DIV id="foot">
    </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.


    PSIt
    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.

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, need to digest all this...the compression is something I need to obviously do.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •