www.webdeveloper.com
Results 1 to 7 of 7

Thread: put image slices in HTML or CSS??

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    351

    put image slices in HTML or CSS??

    I have created a site and sliced it in fireworks, and exported it and I am now piecing it together using dreamweaver. I am using CSS to position the slices. Is there a better way to do what I'm doing. The way I am doing it seems rather tedious. I have attached screenshots of my HTML and CSS.

    Thanks,
    Kris.
    Attached Images Attached Images

  2. #2
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    351
    OR is this a better way to do it (see screenshots).

    Thanks.
    Attached Images Attached Images

  3. #3
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    351

    Is this the best way to position slices?

    I have created a site and sliced it in fireworks, and exported it and I am now piecing it together using dreamweaver. I am using CSS to position the slices. Is there a better way to do what I'm doing. The way I am doing it seems rather tedious. I have attached screenshots of my HTML and CSS. Are screenshots Untitled-1 and 2 correct, or screenshots Untitled-3 and 4?

    Thanks,
    Kris.
    Attached Images Attached Images

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    CSS:
    HTML Code:
    <style>
    .images {clear:left; float:left;.... }
    ...(etc)
    </style>

    HTML Code:
    <div>
      <img src="#" class="images" />
      <img src="#" class="images" />
      <img src="#" class="images" />
      <img src="#" class="images" />
      <img src="#" class="images" />
      (etc.)
      ....
      <img src="#" class="images" />
    </div>
    but would need to see you actual code to know if this is closer to what you are trying to do...
    You do no need to 'DIV-itis' this... no need to wrap every image in a "DIV" and no need to bloat your CSS with a CLASS or ID for every DIV thereof... let the CSS 'cascade' through your HTML... state it once and let it be re-used.. Smaller code is faster-loading, less bandwidth, easier to maintain, etc.

    Or, smaller still:

    CSS:
    HTML Code:
    <style>
    #images img {clear:left; float:left;.... }
    ...(etc)
    </style>
    HTML Code:
    <div id="images">
      <img src="#" />
      <img src="#" />
      <img src="#" />
      <img src="#" />
      <img src="#" />
      (etc.)
      ....
      <img src="#" />
    </div>
    and says exactly the same thing.
    Last edited by WebJoel; 02-08-2009 at 09:25 PM.
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    351
    Very good point Joel. That makes a lot more sense. I have heard some people say that it's better to put the image URL in the css code rather than the HTML code. Does it really matter?
    Kris.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Images that are decorative place as background in css.
    Images that add to the 'content' place in the html.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    351
    Okay, thanks for the clarification Fang

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles