Position for all screen resolutions?

noobwebdesign · April 7th, 2009, 06:33 AM

Hi all,

Just trying to make a smart website fora friend although having problems with different screen resolutions.

I am making the site using dreamweaver on a 1024x768 px and it looks fine on that resolution although viewing it through different resolutions it looks pretty bad - all goes to one side etc.

I would like it centered for all screen resolutions if possible. I have tried various solutions although can't seem to get it to work, maybe i am doing something wrong...

Pukoon · April 7th, 2009, 07:04 AM

What have you tried? Post your code.

noobwebdesign · April 7th, 2009, 07:40 AM

Well at the min i have got a container which is happily centering on all screen resolutions. The thing is I have four div's that need to go inside it.

#Table, #maincontent, #animatedbanner & #footer

I can't seem to nest them.

Is this right?

<div id="container">
<div id="maincontent">
<h1> Main Content </h1>
<p>Lorem ipsum </p>
</div>
<div id="animatedbanner"></div>
<div id="footer"></div>
</div>

the #Table is the naviagation section or a header, which i made from a sliced image in photoshop and now it seems to have its own javascript code because of the roll over buttons.. so not sure how to nest that into the container either.

this may sound very confusing so any help is great.

the CSS is:

@charset "utf-8";
/* CSS Document */
body {
width:100%;
height:auto;
margin:0;
padding: 0;
background-color:#000;
}
#container{
position:relative
width:800px;
margin: 0 auto;
padding:0;
margin:0 auto;
border:1px solid;
height: 568px;
border:1px solid #FFF;
visibility: visible;
width: 750px;
}
#Table{
position: absolute;
height: 70px;
width: 561px;
left:227px;
top: 15px;
right: 106px;
bottom: 15px;
margin:0px;
border:0px;
}
#maincontent{
position:relative;
width:36em;
height:30em;
left:1em;
top:99px;
text-align:left;
padding:0px;
margin:0;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
border:solid 1px #CCC;
color:#FFF;
}
#footer{
position:absolute;
width:562px;
left:226px;
height:35px;
padding:0px;
margin:0 auto;
top:526px;
border:#CCC solid 1px;
}
#animatedbanner{
position:absolute;
width:7em;
height:414px;
top:99px;
left:674px;
border:#CCC solid 1px;
margin:0 auto;
text-align: right;
}

i have also been playing with the px, em, %, on width etc trying to solve my problem so you may notice that some may not be consistent

Pukoon · April 7th, 2009, 09:04 AM

Something like is?

HTML Code:

<div id="wrapper">

<div id="banner">banner</div>
<!-- end banner -->

<div id="maincontent">
<h1>Main Content</h1>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<!-- end maincontent -->

<div id="Table">
<p>Table</p>
<p>Table</p>
<p>Table</p>
<p>Table</p>
</div>
<!-- end Table -->

<div id="footer">
<p>footer</p>
<p>footer</p>
</div>
<!-- end footer -->

</div>
<!-- end wrapper -->

Code:

* {
margin:0;
padding:0;
}

body {
text-align:center;
}

#wrapper {
height:auto;
width:800px;
margin:0 auto;
border:1px solid red;
text-align:left;
}

#banner {
height:100px;
width:auto;
}

#maincontent {
height:auto;
width:auto;
}

#footer {
height:auto;
width:auto;
}

#Table {
height:auto;
width:auto;
}

noobwebdesign · April 7th, 2009, 10:26 AM

Thanks for the posts, your on the right lines.

im trying to position the #maincontent to the left of the #animatedbanner with the #Table (the Table is a sliced up navigation bar made from photoshop) just above both of these. then the #footer just underneath the #maincontent and the #animatedbanner

Sorry if this sounds too confusing, i can't post a link at the moment for you to view it.

at the moment i have a #wrapper that is centered, the #Table (navigation bar) is also in its desired place (top and centered). the #maincontent is also in its correct position, just underneath the #Table. so i must be doing something right... but now the #animated banner just won't go next to the #maincontent.....? and it's the 'Top' what seems to be the problem. it doesn't seem to want to go up and next to the #maincontent it's just sitting at the bottom of it with the 'Top' not really responding...

Does anyone even understand this post lol?

Apologies