[CSS] Menübuttons Verschieben

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Menübuttons Verschieben

    HI, hab ein Problem:
    Ich kann die Buttons des Menüs nicht zentrieren, also dass sie immer in der mitte stehen.

    Hier der Link:
    http://msource.phpbb-de.com/test/index.htm

    index.htm:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Xbox</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
      <ul id="Navigation">
        <li><span>Home</span></li>
        <li><a href="anleitung.htm">Anleitung</a></li>
        <li><a href="betrug.htm">Betrug?</a></li>
        <li><a href="angebote.htm">Angebote</a></li>
        <li><a href="xbox.htm">Xbox</a></li>
     </ul>
    
    <center>
    <div id="Inhalt">
    <br>
    <img src="xbox.png" alt="freepay, anleitung, xbox360 kostenlos" border="0" align="left" hspace="20" />
    <h1>Xbox 360 gratis | Xbox 360 kostenlos<br>| Xbox 360 umsonst</h1>
    <h2>So kommst Du zu Deiner eigenen komplett <b>kostenlosen Xbox 360</b></h2>
    <hr>
    <br>
    <br>
    <p>
    Eine kostenlose Xbox 360 - wer träumt nicht davon?
    Hier wird Dir erklärt, wie Du deine <b>Xbox 360 komplett umsonst</b> erhalten kannst.
    Les Dir bitte alles genau durch, und Du wirst merken,
    dass es nicht sonderlich schwer ist, eine <b>gratis Xbox 360</b> zu erhalten.</p><p>
    Ihr findet hier Informationen über den Anbieter, die Funktionsweise der Seite und über die Xbox 360,
    sowie eine ausführliche Schritt für Schritt Anleitung.</p>
    <br>
    <h3>Kurz Anleitung</h4>
    <p>
    1. Melde Dich <a class="Farbe3"href="http://xbox360s.freepay.com/?r=27082697" alt="kostenlos, free, gratis, umsonst">HIER</a> an<br>
    2. Nehme ein (meist) kostenloses Angebot an<br>
    3. Überzeuge 8 deiner Freunde, sich auch anzumelden<br>
    4. Nun bekommst Du deine kostenlose Xbox360.
    </p>
    </body>
    </html>
    style.css:

    Code:
    body   { color: black; 
             background-color: #e7e7e7;
             font-size: 14px;
             font-family: Arial;
             margin: 0; 
             padding: 0;
    
             }
    
    
    
     
    div#Inhalt   { margin: 0;
                   padding: 0;
                   border-bottom: 1px solid silver;
                   background-image:url(bg.png);
                   background-repeat:repeat-y;
                   background-color: white;
                   background-position:left;
                   width: 733px;
                   height:100%;         
                   }
    
      * html div#Inhalt {
        height: 0px;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
      }
    
    
    
    
    
    
    ul#Navigation { margin: 0; 
                    padding: 0;
                    text-align:center;
                    border: 0px solid white;
                    background-color: white;
                    background-image:url(nav.png);
                    height:50px;
                    }
    
    ul#Navigation li { list-style: none;
                       display: inline;
                       margin: 0; 
                       padding: 0;
                       }
    
    ul#Navigation a {float: left; 
                     width: 179px;
                     height:20px;
                     margin-top: 10px; 
                     margin-left:5px;
                     padding-top: 5px;
                     text-decoration: none; 
                     font-weight: bold;
                     border: 0px solid black;
                     border-left-color: white; 
                     border-top-color: white;
                     color: #70bc1e; 
                     background-image:url(button.png);
                     }
    
    
    
    
    ul#Navigation span { float: left; 
                         width: 179px;
                         height:20px;
                         margin-top: 10px; 
                         margin-left:5px;
                         padding: 0;
    			padding-top: 5px;
                         text-decoration: none; 
                         font-weight: bold;
                         border: 0px solid black;
                         border-left-color: white; 
                         border-top-color: white;
                         color: grey; 
                         background-image:url(button2.png);
                         }
    
      * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
        width: 8em;
        w\idth: 6em;
      }
    
      ul#Navigation div { clear: none;
                          }
    
    
    div#Inhalt hr {  color:black; 
                     height:1px;
                     }
    
    div#Inhalt h1 {    COLOR: #70bc1e;
    	           font-family:verdana; 
    	           font-size:20px;
                       TEXT-DECORATION: none;
                       text-align:center;
                       margin-top: 50px; 
                       margin-bottom: 35px; 
                       }
    
    div#Inhalt h2 {    COLOR: #707070;
    	           font-family:verdana; 
    	           font-size:15px;
                       TEXT-DECORATION: none;
                       text-align:center;
    	           font-weight:bold;
                       }
    
    div#Inhalt h3 {    COLOR: #70bc1e;
    	           font-family:verdana; 
    	           font-size: 20;
                       TEXT-DECORATION: none;
    	           font-weight:bolder;
                       text-align:center;
                       }
    
    
      
    div#Inhalt p   { color: #707070;
    	         font-family:arial; 
    	         font-size: 14px;
                     text-align:justify;
                     text-decoration: none;
                     width: 600px;
                     }
    
    p#Fusszeile { clear: both;
                  font-size: 0.9em;
                  margin: 0; 
                  padding: 0.1em;
                  text-align: center;
                  background-color: #fed; 
                  border: 1px solid silver;
                  }
    
    
    A.Farbe1:LINK {Color: #70bc1e; font-size:16; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    A.Farbe1:VISITED {Color: #70bc1e; font-size:16; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    A.Farbe1:HOVER {Color: #70bc1e; font-size:16; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    A.Farbe1:ACTIVE {Color: #70bc1e; font-size:16; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    
    A.Farbe2:LINK {Color: #707070; Background-Color: white; font-size:12; font-family:verdana;}
    A.Farbe2:VISITED {Color: #707070; Background-Color: white; font-size:12; font-family:verdana;}
    A.Farbe2:HOVER {Color: #707070; Background-Color: white; font-size:12; font-family:verdana;}
    A.Farbe2:ACTIVE {Color: #707070; Background-Color: white; font-size:12; font-family:verdana;}
    
    A.Farbe3:LINK {Color: #70bc1e; font-size:18; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    A.Farbe3:VISITED {Color: #70bc1e; font-size:18; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    A.Farbe3:HOVER {Color: #70bc1e; font-size:18; font-family:verdana; font-weight:bolder; Text-Decoration: none}
    A.Farbe3:ACTIVE {Color: #70bc1e; font-size:18; font-family:verdana; font-weight:bolder; Text-Decoration: none}

    mfg

  • #2
    margin: 0 auto;

    auf das ul-element anwenden
    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


    Kommentar


    • #3
      HI, danke für den post!
      Ich kann margin: 0 auto; zwar auf div#Inhalt element anwenden (dann kann ich auch das <center> weglassen) aber auf das ul element hat es keine auswirkungen.. kann das sein?

      Kommentar


      • #4
        thx!
        Ich habs hinbekommen, mit nem neuen div ausenrum!

        Hab aber nochmal ne Frage:
        Wie schaff ich es, dass das der div#Inhalt Teil immer mindestens bis zum unteren bildschirmrand geht ( also der Weisse teil, in der die Schrift ist)??

        Wär echt super wenn des jemand wüsste!

        mfg

        Kommentar


        • #5
          min-height kann dir helfen. kann aber der IE nicht.
          INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


          Kommentar


          • #6
            hi,
            wie meinst du das genau mit dem min-height ??

            mfg

            Kommentar


            • #7
              INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


              Kommentar

              Lädt...
              X