Problem mit XHTML u. CSS

[Gast]

Hallo ich versuche gerade ein Webdesign für meine Seite zu erstellen, doch es hapert leider an einigen Codes.

Sehe ich mir meine Seite in einer Auflösung von 1280x1024 wird alles richtig dargestellt, bei 1024x768 verrutschen die Knöpfe.

Ich habe mir die Menüleiste unterhalb meines zentrierten Headers vorgestellt, und habe die Buttons mithilfe von


position:absolute;
top:XYZpx;
left:XYZpx;


formatiert. Jedoch klappt das nicht bei jeder Auflösung...
Gibt es eine elegantere Methode?

[Scream]

Könntest du ein wenig mehr vom quellcode posten oder evtl nen link geben?
Dann kann ich dir sicher helfen!

[Patrick_LNB]

Ich klinke mich mal hier rein, habe ein ähnliches Problem.

Hier mal meine Seite: www.pc-union.de

Das Menü habe ich nicht alleine erstellt, möchte es aber mit dem Header zentrieren. Das soll auch auf den meisten Auflösungen der Fall sein, also dynamisch.

Ich habe das Menü mit dem Header in ein div namens Layout gepackt, Befehle wie text-align:center; bringen aber nichts.

Hier mein Stylesheet:

* {
margin:0px;
padding:0px;
}

img {
border:none;
}

body {
background-color:rgb(201,201,201);
}

#Layout {
position:absolute;
top:8px;
width:920px;
height:auto;
background-color:#FFFFFF;
border:1px solid grey;

}

#MainMenu
{
height:37px;
width:921px;
background:#FFF;
border:0;
margin-top:-5px;
}
#tab
{
top:0;
height:0;
background:repeat-x top;
margin:0;
}
#tab ul
{
list-style:none;
float:left;
margin:0;
padding:0;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:url(images/bright_109.gif) no-repeat right top;
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
}
#tab a span
{
display:block;
background:url(images/bleft_109.gif) no-repeat left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
font-weight:700;
line-height:37px;
padding:0 63px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#000;
font-weight:700;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0;
background:#FFF;
color:#FFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
list-style:none;
margin:0;
padding:0;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link,.dropmenudiv a:visited
{
width:180px;
display:block;
border:0;
color:#FFF;
background:url(images/bleft_109.gif) no-repeat left top;
font-weight:700;
font-style:normal;
text-decoration:none;
margin:0;
padding:0;
}
.dropmenudiv a span
{
display:block;
line-height:37px;
background:url(images/bright_109.gif) no-repeat right top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
float:left;
padding:0 63px;
}
.dropmenudiv a:hover
{
border:0;
background-position:left bottom;
font-weight:700;
font-style:normal;
text-decoration:none;
color:#000;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000;
font-weight:700;
}


Ein Freund hat mir geholfen, hier die Lösung:


#Layout {
margin: 0 0 0 -460px;
left: 50%;
position:absolute;
top:8px;
width:920px;
height:auto;
z-index:1;
background-color:#FFFFFF;
border:1px solid grey;
text-align:center;
}