how to fix this position [Archive] - Dynamic Drive Forums

View Full Version : 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:

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

<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" />


</head>

<body>
<div id="contentContainer">

<div id="navbar">
<a href="#portfolio"><img src="http://imaxxo.net/position/mm.png" border="0" /></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:

/* 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. :p And it's extremely slow. Anyways - it's positioned like that because:

/* 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%;
}

davelf

03-02-2010, 03:35 AM

so how to make it right? is there some css to change that bottom into the other, but i still can set it's position?

Nile

03-02-2010, 03:43 AM

Just delete it.

davelf

03-02-2010, 03:54 AM

thx nile i try to implement it