Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS positioning!! - help please

Status
Not open for further replies.
7724

7724

Programmer
Feb 25, 2005
28
GB
Hi Guys,

I have a site full of tables and I want to move it over to css. The current URL of the site full of tables is at
Now I tried re-creating the site using css without ANY tables, and got to this stage at
I created the above in a 1400 x 1050 resolution. Now the trouble I have is that on different resolutions and also on a Mac (i'm using a PC) the navigation menu and .rhsmenu are all over the place.

Can someone advise how I can place my navigation I have on my CSS page and .rhsmenu in the same place as the table layout of the site (www.thisisslough.com) on all different resolutions - and on PC and Mac!?!

Many Thanks

Chris

PS: Here's my css code:

Code: 
<html>
<head>
<title>CSS Menu Test</title>
</head>
<style>
body {font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #FFFFFF;
font-size: 11px;}

#navigator {background-color: #FFFFFF;
margin-top: 20px;
width: auto;
margin-left: 22.0%;
margin-right: 66.5%;
text-align: left;
padding: 8px;}

.navigationbutton {font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;}

.navigationbutton a {padding: 4px;
text-decoration: none;
display: block;
color: #ffffff;
background-color: #000099;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;}

.sectionbutton {font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;}

.sectionbutton a {padding: 4px;
background-color: #0066ff;
font-weight: bold;
text-decoration: none;
color: #ffffff;
border-top: 2px #ffe5c3 solid;
border-left: 2px #ffe5c3 solid;
border-bottom: 2px #7f6645 solid;
border-right: 2px #7f6645 solid;
display: block;}

.mainbutton {font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;}

.mainbutton a {padding: 4px;
background-color: #cccccc;
font-weight: bold;
text-decoration: none;
color: #4f5942;
border-top: 2px #edf8de solid;
border-left: 2px #edf8de solid;
border-bottom: 2px #727f5e solid;
border-right: 2px #727f5e solid;
display: block;}

.mainbutton a:hover {border-top: 2px #727f5e solid;
border-left: 2px #727f5e solid;
border-bottom: 2px #727f5e solid;
border-right: 2px #727f5e solid;
background-color: #eeeeee;}

.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>
<body bgcolor="#FFFFFF">
<p class="centeredImage"><img src="banner.jpg" width="743" height="98"></p>
  <p></p>
<div id="navigator"> 
  <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
  <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
  <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
  <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
  <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Observer</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Property</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a> 
  <div id="rhsmenu" style="position:absolute; width:178px; height:413px; z-index:1; left: 64%; top: 14%">Does 
    this appear in the right place?</div>
  <p class="mainbutton">&nbsp; 
  <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a> 
</div>
</body>
</html>
 
Sort by date Sort by votes
I suppose you shouldn't set margin-left and margin-right on the #navigation in percentages because that will make your menu float around at different resolutions. I suggest you put the whole thing in another container and use the [tt]margin: 0 auto;[/tt] on that container which will center it horizontally on the screen, as long as you provide some kind of width (other than 100%). Using that technique, you will have absolutely no problem positioning your .rhsmenu as well (don't use absolute positioning for that, there is absolutely no need for that).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
812
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
637
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
692
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
225
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top