PDA

View Full Version : Picture postitioning problems

l Squid l
11-09-2007, 02:29 AM
Hi guys, it been a while since i was here. I made a new website. http://xgodxextinction.freehostia.com/

As you can clearly see the left column is not starting at the top of the page. And it is not next to the banner. As seen here.

http://xgodxextinction.freehostia.com/endofstory.png

CSS coding
@charset "utf-8";
/* xGoDx EXTiNcTi0N */

body {
text-align:center;
background:#000000;
margin:auto;
padding:0;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
}

#content {
width:960px;
margin:auto;
}

/* Banner */

.gapless {
background:url(images/Banner.png);
width:679px;
height:197px;
margin: 0 auto;
}

.leftcolumn {
background:url(images/Right-Column.png) ;
width: 138px;
height:1100px;
float:left;
background-repeat:no-repeat;
margin-left:0px;
}

Any help is appreciated.
gnomeontherun
11-09-2007, 02:40 AM
Try if you want the columns to be flush with the edge of the window...otherwise how do you want it to work exactly?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@charset "utf-8";
/* xGoDx EXTiNcTi0N */

body {
text-align:center;
background:#000000;
margin:auto;
padding:0;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
}

#content {
width:960px;
margin:auto;
}

/* Banner */

.gapless {
background:url(images/Banner.png);
width:679px;
height:197px;
margin: 0 auto;
}

.leftcolumn {
background:url(images/Right-Column.png) ;
width: 138px;
height:1100px;
position:absolute;
top: 0px;
left: 0px;
background-repeat:no-repeat;
margin-left:0px;
}

.rightcolumn {
background:url(images/Right-Column.png) ;
width: 138px;
height:1100px;
position:absolute;
top: 0px;
right: 0px;
background-repeat:no-repeat;
margin-left:0px;
}

</style>

<title>xGoDx EXTiNcTi0N</title>
</head>

<body>

<div class="leftcolumn">
</div>

<div id="content">

<div class="gapless" align="center">
</div>

</div>

<div class="rightcolumn">
</div>



</body>
</html>
l Squid l
11-09-2007, 02:48 AM
That is how I want but I also want to pull them towards the middle so they are right next to the banner. I am not sure how to explain that.

Edit: I got it. I increased px amount for right and left.
gnomeontherun
11-09-2007, 02:56 AM
So you want it fluid so that as the browser gets narrower than the page, the sidebars will hug the content DIV, and as it gets wider the sidebars will hug the edge of the browser?
l Squid l
11-09-2007, 03:04 AM
Well right now I am just gettin the position of everything.When it does get narrow I want it will hug sidebars, and when it gets wider I want it to hug the columns.

Also is using "left, right, top, and bottom" Are those good ways to code?
gnomeontherun
11-09-2007, 03:43 AM
The debate rages on about what type of positioning should be used. See here. (http://codingforums.com/showthread.php?p=625577)

If you want to go with the absolute position route they are good. My site uses them but with relative positioning.

A few links to resources about which kind of positioning you might want.
http://www.maxdesign.com.au/presentation/page_layouts/
http://www.glish.com/css/