...

View Full Version : Am I desgining my site wrong?



Zeke2
10-31-2010, 04:04 PM
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.

abduraooft
10-31-2010, 04:16 PM
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

Zeke2
10-31-2010, 11:13 PM
Definitely!
Have a look at http://codingforums.com/showthread.php?p=761153

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 :D.

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

abduraooft
11-01-2010, 08:48 AM
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 (http://csscreator.com/divitis)!

Could you upload a rough sample of your layout image here?

Major Payne
11-01-2010, 09:43 PM
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/choosing-dimensions-for-your-web-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/photoshop-tutorials/create-a-dark-and-sleek-web-layout-using-photoshop/

Why Validate? (http://validator.w3.org/docs/why.html)
CSS Validator (http://jigsaw.w3.org/css-validator/)
HTML Validator (http://validator.w3.org/#validate_by_uri+with_options)

Zeke2
11-02-2010, 05:06 PM
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 :D 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 :D

<!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>

Major Payne
11-02-2010, 10:59 PM
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:


<!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>

Zeke2
11-03-2010, 02:45 AM
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 :p
Thanks for the right one :D

Major Payne
11-03-2010, 02:58 AM
You're welcome. Hope that works ok for you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum