Menü mittig setzten

ludgerf321

Hi,
ich habe mir ein menu zusammengebasstelt und wollte nun wissen, wie ich das ganze im browser mittig setzen kann.
Ich meine nur die Menüpunkte den Rest krieg ich schon hin.
http://www.ab-sofort-erfolg.de/test.html

Danke Ludgerf321[/url]

jojo87

z. bsp. mit text-align:center;

ludgerf321

ja nur wo soll ich das einfügen??

jojo87

ja woher soll ich das denn wissen? Kenn ich deinen Code? Dann musstn uns schon mal zeigen oder nen Link geben.

ludgerf321

ok
der link is oban oda hier nochma:
http://www.ab-sofort-erfolg.de/test.html

Hier is der Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style></style>
  <title>test</title>
</head>
<body>
<div style="text-align: center;">
<style type="text/css">
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #FF9900; background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; padding: 5px 10px 9px 10px; -moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #FFCC33; padding-top: 9px; padding-bottom: 5px; color: white;
}
.invertedshiftdown .current a{ background-color: #FF9900; padding-top: 9px; padding-bottom: 5px; color: white;
}
#myform{ float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #FFCC33;
background-color: black;
color: white;
}
</style></div>
<div style="text-align: center;" class="invertedshiftdown">
<ul>
  [*][url='http://www.ab-sofort-erfolg.de']Willkommen[/url]
  [*][url='http://www.ab-sofort-erfolg.de/Stufe_1.html']Stufe 1[/url]
  <li class="current"><a
 href="http://www.ab-sofort-erfolg.de/Stufe_2.html"
 title="Stufe 2">stufe
2</a>
  [*][url='http://www.ab-sofort-erfolg.de/Stufe_3.html']Stufe 3[/url]
  [*][url='http://www.ab-sofort-erfolg.de/Ueber_mich.html']&uuml;ber mich[/url]
  [*][url='http://www.ab-sofort-erfolg.de/Kontakt.html']kontakt[/url]
[/list]
</div>
<div style="text-align: center;"><br
 style="clear: both;">
</div>
</body>
</html>

Alles anzeigen

sejuma

1. Benutze diesen Doctype, damit auch der IE6 das Boxmodell richtig interpretiert:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

2. Räume deinen head-Bereich auf:
bisher:

Code

<head>
  <style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style></style>
  <title>test</title>




</head>

Alles anzeigen

neu:

Code

<head>
    <title>test</title>
</head>

3. Schneide deine CSS-Angaben aus und füge sie in den head-Bereich ein.
Ändere dabei die fettmarkierten Angaben (wobei du den width-Wert noch variieren kannst):

Zitat

<head>
<title>test</title>
<style type="text/css">
.invertedshiftdown{
padding: 0;
width: 600px;
margin: 0 auto;
border-top: 5px solid #D10000; background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; padding: 5px 10px 9px 10px; -moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #D10000; padding-top: 9px; padding-bottom: 5px; color: white;
}
.invertedshiftdown .current a{ background-color: #D10000; padding-top: 9px; padding-bottom: 5px; color: white;
}
#myform{ float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
</style>

</head>

Alles anzeigen

4. Viel Erfolg!

ludgerf321

danke, habe das jetzt hinbekommen.

jetzt wollte ich noch fragen, ob man nun noch 2 Balken an den Seiten machen kann die sich dem Bildschirm von der Person anpassen und bis zu dem punkt 600px zentriert gehen.
hier noch mal zum angucken:
http://www.ab-sofort-erfolg.de/test.html
also von der mitte nach außen.

wäre nett wenn ich auch das hinbekommen würde

sejuma

Nimm bei

Code

.invertedshiftdown

den border raus.

Füge das an der entsprechenden Stelle ein, bzw. ändere es wie folgt:

Zitat

<body>
<div style="border-bottom: 5px solid #FF9900; background: transparent;"></div>
<div class="invertedshiftdown">
<ul>

Schließlich solltest du noch den Doctype wie vorher angegeben ändern.

Tags