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]
Menü mittig setzten
-
-
z. bsp. mit text-align:center;
-
ja nur wo soll ich das einfügen??
-
ja woher soll ich das denn wissen? Kenn ich deinen Code? Dann musstn uns schon mal zeigen oder nen Link geben.
-
ok
der link is oban oda hier nochma:
http://www.ab-sofort-erfolg.de/test.htmlHier is der Code:
HTML
Alles anzeigen<!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']ü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> -
1. Benutze diesen Doctype, damit auch der IE6 das Boxmodell richtig interpretiert:
2. Räume deinen head-Bereich auf:
bisher:Code
Alles anzeigen<head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style></style> <title>test</title> </head>neu:
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):ZitatAlles anzeigen<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>
4. Viel Erfolg!
-
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
-
Nimm bei
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.