how to fix this position

**davelf** · 03-02-2010, 02:48 AM

i have a problem with my layout, it's always change in different resolution and different monitor.

you can see it at: http://www.imaxxo.net/position/

this is my html code:

Code:

<!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" />
<title>Untitled Document</title>
<!-- slide up start -->
<script src="slide-up/jquery-1.2.1.pack.js" type="text/javascript"></script>
	<script src="slide-up/site.js" type="text/javascript"></script>

	<link href="slide-up/styles.css" rel="stylesheet" type="text/css" />

<!-- slide up end -->
</head>

<body>
<div id="contentContainer">

	<div id="navbar">
		<a href="#portfolio"><img src="http://imaxxo.net/position/mm.png" border="0" /></a>
<!--
		<a href="#slogan">dream|design|develop?</a>
		<a href="#projects">projects</a>
		<a href="#about">about commadelimited</a>
		<a href="#contact">contact</a>-->
	</div>
	<div id="content">
			<div id="portfolio">

				<img src="http://imaxxo.net/position/menu.png" />

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

this is my CSS:

Code:

/* reset some stuff */
ul, li, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
}

img {
	border: 0px;
}



/* set the page font formatting. */
body, p, div, td, ul, li {
	/*font-family: "Trebuchet MS", verdana;
	font-size: 11pt;
	color: #ffffff;*/
}

#contentContainer {
	position: absolute;
	bottom: 21px;
	left: 500px;
	height: 201px;
	width: 670px;
	overflow: hidden;
	/*background: #c51c70;*/
	color: #ffffff;
}

#logo {
	text-align: right;
	height: 170px;
	background: #ffffff;
}

#navbar {
	height: 30px;
	margin: 0;
}

#navbar a {
	display: block;
	float: right;
	height: 30px;
	margin: 0 0 0 0;
	padding-left:100px;
}

#navbar a:link, #navbar a:visited, #navbar a:active {
	text-decoration: none;
}
#content {
	margin: 0 6px;
}

#content div {
	display: none;
}

#content div p {
	font-size: .8em;
}

#content div p b {
	font-size: 1.1em;
	display: block;
}

#about h2, #slogan h2, #portfolio h2, #contact h2 {
	font-size: 1.3em;
}

#portfolio div p {
	width: 50%;
}

#about img {
	float: right;
	margin: 5px;
}

#about .badges {
	width: 101px;
	margin: 0 10px 0 20px;
}

p span {
	text-decoration: underline;
}

table {
	width: 100%;
}

	table td {
		width: 33%;
	}

if you need the JS you can get it at http://www.imaxxo.net/position/slide-up/

thx for your all of your help...

**Nile** · 03-02-2010, 02:49 AM

Broken links =/

**davelf** · 03-02-2010, 02:53 AM

it work's nile

http://www.imaxxo.net/position/index.html

please try again

**Nile** · 03-02-2010, 03:21 AM

It didn't before.

And it's extremely slow. Anyways - it's positioned like that because:

Code:

/* reset some stuff */
ul, li, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
}

img {
	border: 0px;
}



/* set the page font formatting. */
body, p, div, td, ul, li {
	/*font-family: "Trebuchet MS", verdana;
	font-size: 11pt;
	color: #ffffff;*/
}

#contentContainer {
	position: absolute;
	bottom: 21px;
	left: 500px;
	height: 201px;
	width: 670px;
	overflow: hidden;
	/*background: #c51c70;*/
	color: #ffffff;
}

#logo {
	text-align: right;
	height: 170px;
	background: #ffffff;
}

#navbar {
	height: 30px;
	margin: 0;
}

#navbar a {
	display: block;
	float: right;
	height: 30px;
	margin: 0 0 0 0;
	padding-left:100px;
}

#navbar a:link, #navbar a:visited, #navbar a:active {
	text-decoration: none;
}
#content {
	margin: 0 6px;
}

#content div {
	display: none;
}

#content div p {
	font-size: .8em;
}

#content div p b {
	font-size: 1.1em;
	display: block;
}

#about h2, #slogan h2, #portfolio h2, #contact h2 {
	font-size: 1.3em;
}

#portfolio div p {
	width: 50%;
}

#about img {
	float: right;
	margin: 5px;
}

#about .badges {
	width: 101px;
	margin: 0 10px 0 20px;
}

p span {
	text-decoration: underline;
}

table {
	width: 100%;
}

	table td {
		width: 33%;
	}