...

View Full Version : CSS Positioning



haysuess
09-25-2007, 09:03 PM
Hi. I am trying to position all these images together to make them seamlessly match. I have done it using a main body, then all the div's inside the main and floating left. The problem is that i had to use relative positions for the last 3 pieces because they end up floating out the bottom. Here is an image of what I'm talking about with the the slices shown and separated and numbered so you can see them better and what order they are in. Is there a way to put them together successfully without relative positioning, or is relative positioning totally ok to use for this purpose? I was thinking of maybe the slices being in a bad order but i don't know how to fix that to make it work exactly if that's the case. Thanks.

http://www.graphicdesignspecialists.com/helpimage01.jpg

effpeetee
09-25-2007, 09:17 PM
Hi. I am trying to position all these images together to make them seamlessly match. I have done it using a main body, then all the div's inside the main and floating left. The problem is that i had to use relative positions for the last 3 pieces because they end up floating out the bottom. Here is an image of what I'm talking about with the the slices shown and separated and numbered so you can see them better and what order they are in. Is there a way to put them together successfully without relative positioning, or is relative positioning totally ok to use for this purpose? I was thinking of maybe the slices being in a bad order but i don't know how to fix that to make it work exactly if that's the case. Thanks.

http://www.graphicdesignspecialists.com/helpimage01.jpg
We need to see your code.

Frank

haysuess
09-25-2007, 09:19 PM
Sorry, here is the html page, then the CSS sheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>product006</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel=StyleSheet href="styles/styles.css" type="text/css">
</head>
<body>
<div id="main">

<div id="banner"></div>

<div id="leftmenu"></div>

<div id="eyepiece"></div>

<div id="knob"></div>

<div id="iso"></div>

<div id="rightside"></div>

<div id="buttons"></div>

<div id="strip"></div>

<div id="last"></div>

</div>
</body>
</html>



<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}

body {
background-color: #000000;
margin-top:0px;
}

#main
{
width:1174px;
margin-left:auto;
margin-right:auto;
margin-top: 0px;
}

#banner
{
background-image:url(images/product006_01.jpg);
width:1174px;
height:145px;
margin-left:auto;
margin-right:auto;
clear:left;

}

#leftmenu
{
background-image:url(images/product006_02.jpg);
width:305px;
height:655px;
position:relative;
float:left;
}

#eyepiece
{
background-image:url(images/product006_03.jpg);
width:272px;
height:225px;
float:left;
}

#knob
{
background-image:url(images/product006_04.jpg);
width:597px;
height:102px;
float:left;
}

#iso
{
background-image:url(images/product006_05.jpg);
width:511px;
height:390px;
float:left;
}

#rightside
{
background-image:url(images/product006_06.jpg);
width:86px;
height:553px;
float:left;
}

#buttons
{
background-image:url(images/product006_07.jpg);
width:214px;
height:430px;
float:left;
position:relative;
bottom:430px;
left:305px;

}

#strip
{
background-image:url(images/product006_08.jpg);
width:58px;
height:267px;
float:left;
position:relative;
bottom:430px;
left:305px;
}

#last
{
background-image:url(images/product006_09.jpg);
width:569px;
height:163px;
float:left;
position:relative;
bottom:163px;
left:247px;
}
</style>

vtjustinb
09-25-2007, 09:50 PM
haysuess,

To me it looks like you're approaching this problem wrong. In the days before CSS image slicing was common, and often the only way to achieve layout with tabled approaches.

What I would suggest instead of all of this images slicing would be to merge them into one camera image, and then set that as the background of a containing div for the entire picture:


<div id="camera">
<h1>Banner</h1>
<h2>Menu</h2>
<ul>
<li>Item 1</li>
. . .
</ul>
</div>


CSS:

#camera {
height: ...
width: ...
background: #fff url(/img/camera.jpg) left top no-repeat;
}
#camera h1 {
text-align: right;
...
}
#camera h2 {
...
}
#camera ul {
...
}


You can specify a required height and width on the div if you want it to wrap exactly around the background image.

haysuess
09-25-2007, 09:53 PM
Hmmm... I guess you're right, for some reason I was thinking each thing HAD to be separate. It was just a learning experience anyways. Is there any major drawback do doing it the way I did?

vtjustinb
09-25-2007, 09:58 PM
Yes,

The big drawbacks are:

1.) images are difficult to slice together, as often pixel-to-pixel precision is difficult to achieve cross-browser (different browsers render CSS in quirky ways)

2.) the semantics of the markup are muddy with this method; you have to put entirely presentational divs in that code (for slices without content) which is kind of against the purpose of CSS and the separation of content and presentation

3.) employing that many floats and positioned elements will almost certainly bring out common browser rendering bugs (like IE6s peekaboo bug)

4.) it's difficult to maintain. If you had used one image in the background, if you ever need a new image or a larger image you just swap the image out and you're done. If you had used a sliced image not only do you have to go back and edit ALL of the slice code, you might have to change the slices completely to make them fit which will certainly be more effort than what it's worth.

And even though you're starting out, it's good to step back from things like these and start to look at them more critically--the more thought you put into your design upfront means the less work it'll take to change things down the road.

haysuess
09-25-2007, 10:14 PM
Cool thanks for the great response. I work professionally as a designer but have just done the graphic part in photoshop while the cms company i work for made the entire system and sliced up the images so i have been learning a ton of php, mysql, and am learning the more advanced features of CSS. It's pretty amazing. Thanks again!

vtjustinb
09-25-2007, 10:36 PM
No problom. If you're the type that likes to read check out books by Jeffery Zeldman, Dan Cederholm, Dave Shea, and Andy Budd. All great introductions to web standards and modern CSS design.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum