Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Am I desgining my site wrong?

    I am desgining my site from photoshop, slicing it and then coding the images/links in with Div tags.

    I have 41 slices images, and right now am making a structure with them by using the div tags to place those images as backgrounds for the each related div tag. Then containing all those div tags in a single div tag so I can position it in the browser.(such as centering)

    Is this approach wrong? I mean, is this the normal procedure or is this an obscure method that's gone out of date?

    Im having to use absolute positioning too btw. Any thoughts on this would be nice Since I want to eventually do this professionally, I don't want to start doing a method if it means that any other web designer will have trouble modifying it.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I am desgining my site from photoshop, slicing it and then coding the images/links in with Div tags.
    Is this approach wrong?
    Definitely!
    Have a look at http://codingforums.com/showthread.php?p=761153
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Thanks for the link and reply.

    Hmm. Im still a bit iffed.

    Letme restate my question with a bit more information.

    I've sliced my webdesign into 41 sections. Certain images will be backgrounds, while other slices are for content, links, headers, ad sections ect.

    Now, So far I don't see a problem with taking a design and slicing it up. For the structural part, I am using Div tags. If this is a bad idea someone please tell me .

    So basically I need to create multipul div sections to structure my site. In some cases I will use pure CSS to fill the specific div tags as opposed to the image slices, as most of the slices are for background image parts, with navigation/text placed ontop of it(or around it).

    I know you've posted me a thread, but Im having a bit of trouble applying what they are trying to say with how i am approaching this. Sorry :S

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I've sliced my webdesign into 41 sections. Certain images will be backgrounds, while other slices are for content, links, headers, ad sections ect.

    Now, So far I don't see a problem with taking a design and slicing it up. For the structural part, I am using Div tags. If this is a bad idea someone please tell me
    VIPS had given a good reply in that thread, in the first para itself.

    FYI: <div> a single tag in the set of all tags in html and there are many others. A site made only with <div>s will end up in divitis!

    Could you upload a rough sample of your layout image here?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Using absolute positioning for your site's page presentations is going to present a lot of problems when viewed in different browsers along with viewing in browsers with different viewing sizes. Think you'll find that your pages will fall apart on many and the pages will not be cross-browser compatible without a lot of work and/or changes made.

    Might help:

    Choosing Dimensions for Your Web Page Layout:

    http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

    Care With Font Size: http://www.w3.org/QA/Tips/font-size

    Create a Dark and Sleek Web Layout Using Photoshop: http://sixrevisions.com/tutorials/ph...ing-photoshop/

    Why Validate?
    CSS Validator
    HTML Validator
    ☠ ☠RON☠ ☠

  • #6
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Hmm I think I need a new approach at explaining my use of DIVS. It'd be better if you guys just said this is a bad idea lol


    Below is one example of how I am using div tags. It's crude, single leveled, but I believe this can work. If I substitute individual backgrounds images/css coding for the appriopriate floats, I can create a webdesign that flows. And once I get the basic structure and build it more on the Z/float level I can build ontop of the floats with floats/standard div boxes.

    I can add features into the appropriate positions...
    Though im so worried ive learnt this entirely wrong lol I suppose it works, what I am more curious about is what wont work or why its a bad idea to run a side like this.

    Besides the fact it's a deck of cards of coding, it's solid in my opinon and works in ie/ff.

    Rip it apart if you want, it'll open my eyes to other possibilities
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html>
    <head>
    <style type="text/css">
    
    body {
    background-color:black;
    color:#ffffff;
    }
    
    div.box1 {
    float:left;
    width:100px;
    height:100px;
    border:1px solid blue;
    }
    
    div.box2 {
    float:right;
    width:100px;
    height:100px;
    border:1px solid green;
    position:relatitive;}
    
    div.box3 {
    border:1px solid red;
    overflow:auto;
    min-height:10px;
    height:100px;
    }
    
    
    div.box4 {
    margin-left:auto;
    margin-right:auto;
    width:900px;
    height:1000px;
    border:1px solid orange;
    }
    
    div.box5 {
    width:100px;
    height:100px;
    border:1px solid purple;
    
    }
    
    div.box6 {
    float:left;
    width:100px;
    height:100px;
    border:1px solid yellow;
    }
    
    div.box7 {
    width:100px;
    height:100px;
    border:1px solid pink;
    position:relative;
    top:0px;
    left:0px;
    }
    
    div.box8 {
    width:100px;
    height:100px;
    border:1px solid gold;
    position:relative;
    top:0px;
    left:0px;
    }
    
    div.box9 {
    width:100px;
    height:100px;
    border:1px solid blue;
    position:relative;
    top:0px;
    left:0px;
    }
    
    div.box10 {
    border:1px solid red;
    overflow:auto;
    min-height:100px;
    height:100px;
    }
    
    div.box11 {
    float:left;
    border:1px solid green;
    min-height:800px;
    width:100px;
    }
    
    div.box12 {
    border:1px solid orange;
    overflow:auto;
    min-height:100px;
    }
    
    div.box13 {
    float:right;
    border:1px solid yellow;
    width:100px;
    height:200px;
    }
    
    div.box14 {
    float:right;
    width:200px;
    height:700px;
    border:1px solid pink;
    }
    
    </style>
    </head>
    
    <body>
    <div class="box4">
    
     <div class="box1">
      </div>
     
     <div class="box1">
      </div>
      
     <div class="box1">
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box3">
     This is test textThis is test textThis is test textThis isThis is test 
    
     textThis is test textThis is test textThis is test textThis is test textThis 
    
     is test textThis is test textThis is test textThis is test textThis is test 
    
     text test textThis is test textThis is test textThis is test textThis is 
    
     test textThis is test text
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box10">
      </div>
    
     <div class="box11">
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box2">
      </div>
    
     <div class="box12">
      </div>
    
     <div class="box14">
      </div>
    
    </div>
    </body>
    </html>
    Last edited by Zeke2; 11-02-2010 at 05:09 PM.

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Any reason why you are using the frameset doctype as there will be errors flagged by validator. Looks good to me, but this might be better:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html  xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Div Test Layout</title>
    <style type="text/css">
    
    body {
    background: #000;
    color: #fff;
    }
    
    div.box1 {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #00f;
    }
    
    div.box2 {
    float: right;
    width: 100px;
    height: 100px;
    border: 1px solid #0f0;
    position: relative;}
    
    div.box3 {
    border: 1px solid #f00;
    overflow: auto;
    min-height: 10px;
    height: 100px;
    }
    
    div.box4 {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    height: 1000px;
    border: 1px solid #ffa500;
    }
    
    div.box5 {
    width: 100px;
    height: 100px;
    border: 1px solid #800080;
    
    }
    
    div.box6 {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #ff0;
    }
    
    div.box7 {
    width: 100px;
    height: 100px;
    border: 1px solid #ffc0cb;
    position: relative;
    top: 0;
    left: 0;
    }
    
    div.box8 {
    width: 100px;
    height: 100px;
    border: 1px solid #ffd700;
    position: relative;
    top: 0;
    left: 0;
    }
    
    div.box9 {
    width: 100px;
    height: 100px;
    border: 1px solid #00f;
    position: relative;
    top: 0;
    left: 0;
    }
    
    div.box10 {
    border: 1px solid #f00;
    overflow: auto;
    min-height: 100px;
    height: 100px;
    }
    
    div.box11 {
    float: left;
    border: 1px solid #0f0;
    min-height: 800px;
    width: 100px;
    }
    
    div.box12 {
    border: 1px solid #ffa500;
    overflow: auto;
    min-height: 100px;
    }
    
    div.box13 {
    float: right;
    border: 1px solid #ff0;
    width: 100px;
    height: 200px;
    }
    
    div.box14 {
    float: right;
    width: 200px;
    height: 700px;
    border: 1px solid #ffc0cb;
    }
    </style>
    </head>
    
    <body>
    <div class="box4">
    
    <div class="box1">
    </div>
     
    <div class="box1">
    </div>
    
    <div class="box1">
    </div>
    
    <div class="box2">
    </div>
    
    <div class="box2">
    </div>
    
    <div class="box2">
    </div>
    
    <div class="box3">This is test text This is test text This is test text This isThis is test text This is test text This is test text This is test text This is test text This is test text This is test text This is test text This is test text This is test text test text This is test text This is test text This is test text This is test text This is test text</div>
    
    <div class="box2">
    </div>
    
    <div class="box2">
    </div>
    
    <div class="box10">
    </div>
    
    <div class="box11">
    </div>
    
    <div class="box2">
    </div>
    
    <div class="box2">
    </div>
    
    <div class="box12">
    </div>
    
    <div class="box14">
    </div>
    
    </div>
    </body></html>
    Last edited by Major Payne; 11-02-2010 at 11:06 PM. Reason: Added code.
    ☠ ☠RON☠ ☠

  • #8
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    No, I'm actually not sure why I put the frameset doctype. It's one of those things Ive turned a blind eye to atm, which probably is a bad idea
    Thanks for the right one

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    You're welcome. Hope that works ok for you.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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