SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <divs> or leave it as it is?

    Hi All

    Recently joined the forum, been a poster in many forums, but only those where its just idle chit chat and very few where i can actually learn and improve my skills - this has now changed and in time i will contribute what i know to this one.

    12 months ago i agreed to have a go at designing an eCommerce site for a mate. I had never touched web design before, however i had been involved in IT for some 10 years - so had the brain to take it in and learn etc. Basically my mate paid alot of money for a website (approx 5k) which failed miserably for 16 months, only earning him a 1/5th of the money he had outlayed on the development. He lost all faith in the web and this was a shame as his industry needs to be online BIGTIME.

    Throughout the build i always thought i could probably get it to 80-85% complete and then turn to a few friends who had offered their services (they were already web developers). As time went by, i felt more confident and ultimately i managed to finish the build with very little help - although a huge amount of learning and research.

    Sadly, i built the site using a table, which i do not think i would do, if i started the build today as i have been learning about CSS, divs, (x)html etc. I also have made a few mistakes which i would not do nowadays - but hey has anyone ever designed a perfect website as their first ever? i hope not!!

    As the site had been around for 18 months, there was no problem with Google etc. all that was needed was a site that Google would like to take a look at - SEO on the old one was horrendous and yielded nothing at all. Currently the site is taking an amazing amount each month and this is shortly to be improved by offering secure payments. The new site had (in 15 days) taken more that the old one had in 16 months, which felt awesome - a noob creating a far more successful website than an established designer. Bit like playing Tiger Woods as an amateur and beating him.

    Anyway, it has been gnawing away at me the last few weeks that the way in which i have laid the site out could and probably should be changed now. The way in which i laid the site out means to move over to <divs> and a much cleaner design would be quite some work for me.

    Tables are slowly being removed and replaced with better methods and my main question is whether a website with so many columns and rows (which offered itself to a table design initially) is practical to move over to divs.

    I cannot come up with a definitive answer as i do not have the skills or knowledge to answer this and this is where i would like to ask some of you far more experience guys what you would do. For a huge amount of very competitive keywords, the website is listed in the top 3 spots on Google, which feels great to have achieved, especially taking my experience into consideration. Sites like this and the resources online are a testament to you guys for the time and effort you put into them. I have been a large contributor on other forums on other subjects and in time i hope i can add to this site, rather than just bleed from the resources. Anyone interested in poker for example, will (i'm sure) have seen my name before.

    The site is here if anyone would like to offer any advice. I am concerned on damaging the current positions within the search engines and also whether removing tables is the correct method for this site. Any helpful tips or answers on this, will be greatly appreciated.

    Many thanks

    Lee

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the site owner's happy with the site and the results he's getting from it, I'd leave it as is, definitely for the time being seeing as the site's only just recently been getting good traffic.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tyssen

    Thanks for responding.

    The website has been high up in Google for about 7 months now and some recent changes have typically moved it up a few spots ie from 5th to 3rd etc.

    My main question is whether a site laid out like that which has so many rows and columns is possible (sensible) to move over to divs? This is a question where i am 50/50 and need some guidance.

    Whatever the answer is, there is shortly to be some development as the eCommerce software is being upgraded and secure payments are shortly to be offered, so we are not worried about any short term effect.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that's a design that could easily be converted away from tables. From a quick look, it's only the home page that has the 'rows' and for those you'd use lists instead with the list items floated left in which you'd contain your image/caption pairs.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does that mean for each row i would have a <div> with floated left divs inside it as containers for the titles and images etc?

    Where i have blank columns currently to separate the images, would you recommend replacing these with auto margins so the spacing is auto and controlled by the browser, rather than set in stone by me?

    In simple terms would the first row with the cars/trucks, helicopters etc. be surrounded by a div and have 4 nested left floating divs with margins set OR would you have 7 nested divs with 4 containing the images and 3 to do the spacing?

    Really appreciate your time - many thanks.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Netherlands
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't have to change it and you're high in google on the right keywords then keep it that way. If you make a new site I'd recommend doing it in div's but don't change it if not nessecary.

    your site then again has a good layout to be converted to div's

  7. #7
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stop it with the divs, man!

    Only use divs where you need to - almost every other HTML element is just as capable of being styled and in many cases something else is much more semantically correct. Most of your home page could be done using lists of some sort, e.g.
    Code:
    <ul id="products">
         <li>Batteries</li>
         <li>Chargers</li>
         <li>Nitro Fuel</li>
         <li>Nitro Engines</li>
         <li>etc...</li>
    </ul>
    Obviously you'd need to add the link and the image in there. Style that accordingly and you'd have the same layout, but without the need to wrap it in a div.
    Olly Hodgson
    thinkdrastic.net

  8. #8
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and yes, I'd use CSS to do the margins around the diffrerent items. Keep as much of the visual presentation as you can in the CSS files
    Olly Hodgson
    thinkdrastic.net

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leehack
    Does that mean for each row i would have a <div> with floated left divs inside it as containers for the titles and images etc?
    Like I said, and Gnarly followed up, use unordered lists instead.

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the do or don't game of tennis i'm playing with myself at the moment. When i designed it, i had never heard of CSS but have now been converted and love it. The amount of styling i have on the page is quite ridiculous and contributing heavily to the size of the page. This is not terrible as to use the site, broadband is needed really because of the spare parts listings.

    If i create something now, i am eager to validate it and have it built to the best of my knowledge, this site having been my first ever, is sadly behind and some of the code makes me want to puke.

    Having said that, the current positions in Google and far more importantly the money it is taking, lead me to the old adage "don't touch what isn't broken".

    I am certainly not asking for someone to do all the work or even show me most of it, but any chance that you could show how you would convert the above section i mentioned into a div layout? Would it be a spanner div with nest divs floating left? and would you have blank divs for the spacing or use margins?

    would it be something like:

    <div>
    <div id ="firstCol"></div>
    <div id ="secondCol"></div>
    <div id ="thirdCol"></div>
    <div id ="fourthCol"></div>
    </div>

    Then use CSS to position these as the current site does or is there a far better way to approach?

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SORRY about the above, i was typing while you guys responded.

    I understand lists to create horizontal menus using CSS. Is this the same principle you guys are talking about?

    Where you see i have the 4 main categories(9 columns) at the top and then i have smaller images for the sub categories(11 columns) are you saying to create all of the headers as a list and let them automatically wrap onto the next line (once 5 instances have been shown) or do you still separate each row still?

    Sorry to keep asking, if anyone knows of a good tutorial for this, please point me there. I am always conscious of not abusing peoples help and learning myself, i find myself sometime just needing a push in the right direction and then i will go learn.

    Thanx guys

  12. #12
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd create one list for the first four items cos they're a different width and make the width of the list items equal 25% (with padding/margins included). Then you should only need one other list for the remaining categories cos they're all the same width (ie 20% instead of 25%).
    You could also set the width of the images to be 100% of the list item so that when the page was resized smaller, the images would contract proportionally.

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    I'd create one list for the first four items cos they're a different width and make the width of the list items equal 25% (with padding/margins included). Then you should only need one other list for the remaining categories cos they're all the same width (ie 20% instead of 25%).
    You could also set the width of the images to be 100% of the list item so that when the page was resized smaller, the images would contract proportionally.
    Cheers guys, think i'm almost there. Am i correct in saying that the top section - cars/trucks, helicopters, airplanes and marine would be coded as follows:

    <ul id="mainProducts">
    <li>Cars/Trucks</li>
    <li>Helicopters</li>
    <li>Airplanes</li>
    <li>Marine</li>

    <li>Cars/Trucks IMAGE</li>
    <li>Helicopters IMAGE</li>
    <li>Airplanes IMAGE</li>
    <li>Marine IMAGE</li>
    </ul>

    I then need to control these with CSS, this is where i think i'm a little lost, is it something like:

    li {
    width: 25%;
    margin: 20px;
    float: left;
    }

    And what styling needs to be added to the "mainProducts" id.

    Does this move them all up to the same line and then once the 4 headers have been rendered, how do you get the images to wrap underneath the headers and line up?

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need separate lists for the headers and images, they both go in the same one, like so:

    Code:
     <ul id="mainProducts">
     <li>
    <h2>Cars/Trucks</h2>
    <img src="truck.jpg">
    </li>
    </ul>

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    You don't need separate lists for the headers and images, they both go in the same one, like so:

    Code:
     <ul id="mainProducts">
     <li>
    <h2>Cars/Trucks</h2>
    <img src="truck.jpg">
    </li>
    </ul>
    AAAh i see what you mean, in my mind i was picturing an image sitting next to the text, rather than under it. By using the h2 tag, the image will wrap underneath it. So for my use i could do:

    Code:
    <ul id="mainProducts">
     <li>
       <h2>Cars/Trucks</h2>
       <h3>kits | spares | accessories</h3>
       <img src="truck.jpg">
     </li>
    </ul>
    I then need to add CSS styling to the <li> item, would that be like this?

    #mainProducts li {
    width: 25%;
    margin: 20px;
    float: left;
    }

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think ive got it kind of working, so many thanks for your help.

    One thing it has brought up which i have never known how to solve is the space you automatically get underneath when you have a <h> tag.

    i.e.

    cars/trucks

    kits | spares | accessories


    instead of


    cars/trucks
    kits | spares | accessories


    how do you stop that gap?

    Cheers

  17. #17
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the margins explicitly on each tag, e.g. h2 { margin: 0; }

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx man, that has bugged me for sometime and the solution is so easy. sometimes you just look for something far too hard.


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
  •