PDA

View Full Version : CSS Positioning Question



nctarheelsc
Mar 17th, 2010, 02:25 AM
Ahh...can someone give me some advice on this. It's enough to make me nuts!

I have uploaded my issue to my website here:
www.onboardweb.net/ryan

Basically, I have used CSS and Positioning to place the bio link where I'd like it to sit. I used absolute positioning with percentages and I've tested it on two different monitors with different resolutions and it looks good.

Now, I have 4 other links (images) that I need to place right after this. My thinking is that I need to position these images to be relative to the previous image.

Example.
Bio is the parent.
Link 2 is relative to Bio.
Link 3 is relative to Link 2.

And so forth.

Maybe someone can decipher what I'm trying to say and help me understand this.

Thank You!

MrEnder
Mar 17th, 2010, 04:01 AM
Ahh...can someone give me some advice on this. It's enough to make me nuts!

I have uploaded my issue to my website here:
www.onboardweb.net/ryan

Basically, I have used CSS and Positioning to place the bio link where I'd like it to sit. I used absolute positioning with percentages and I've tested it on two different monitors with different resolutions and it looks good.

Now, I have 4 other links (images) that I need to place right after this. My thinking is that I need to position these images to be relative to the previous image.

Example.
Bio is the parent.
Link 2 is relative to Bio.
Link 3 is relative to Link 2.

And so forth.

Maybe someone can decipher what I'm trying to say and help me understand this.

Thank You!

Ok I ran into the absolute problem before. I came up with this solution.
The problem with absolute and percentage is if its absolute nothing can relate off it. Also percentage won't be 100% accurate.

So I do this

I use JS to check the size of the persons browser window like this


if (self.innerWidth) {
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body) {
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}

I put IDs on the objects I wanted to be positioned
and I called for those IDs like this and saved it in a variable


var id = document.getElementById("id");

Then I have all the absolutes positioned acording to the frameWidth and Height like so


id.style.top = (frameHeight - 45) + "px";
id.style.left = (frameHeight - 45) + "px";

Now all your stuff will position properly. All you have to do is change the number. In this case its 45 to the positioning you want. basically its the size of the frame minus 45px.

However sometimes this screws up. The persons screen becomes to small.
Then you add an if statement.



var frameCheck = (frameHeight - 45);
if(frameCheck<=0) {

id.style.left = (frameHeight - 25) + "px";

}


sorry if thats to confusing. I tried to do it step by step. But thats how I do it to make sure it always works.
also sorry if I missunderstood the question I've been known to do that ^.^

Excavator
Mar 17th, 2010, 04:57 AM
Hello nctarheelsc,
Your site doesn't have a DocType. You need one - see the link in my sig about DocTypes. I would suggest HTML 4.01 Strict.
While you're there, check out the links in my sig about validation.

Try your site like this, with the links placed in an absolute positioned div -
<!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>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container {
width: 100%;
height: 100%;
background: #323232;
}
#bgImg {
width: 60%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#logo {
height: 120px;
width: 518px;
position: absolute;
top: 13%;
left: 38%;
z-index: 2;
}
#links {
width: 100px;
position: absolute;
bottom: 13%;
left: 57%;
z-index: 2;
overflow: auto;
}
links a {float: left;}
</style>
</head>
<body>
<div id="container">
<img src="http://www.onboardweb.net/ryan/bkground.jpg" alt="background image" id="bgImg" />
<img src="http://www.onboardweb.net/ryan/tag.png" alt="logo" id="logo" />
<div id="links">
<img src="http://www.onboardweb.net/ryan/link_bio.jpg" alt="bio" width="64" height="43" />
<img src="http://www.onboardweb.net/ryan/link_bio.jpg" alt="bio" width="64" height="43" />
<img src="http://www.onboardweb.net/ryan/link_bio.jpg" alt="bio" width="64" height="43" />
<img src="http://www.onboardweb.net/ryan/link_bio.jpg" alt="bio" width="64" height="43" />
<!--end links--></div>
<!--end container--></div>
</body>
</html>