• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Container verschieben

Status
Für weitere Antworten geschlossen.

FreakySlimeHD

Neues Mitglied
Heii, ich bin es noch mal. :)
Tut mir echt leid das ich so ungeschickt bin, es ist jetzt fast alles perfekt.
Undzwar habe ich zwei probleme, einmal will meine weiße Box nicht richtig unters Menü und die Menüpunkte beim Dropbown verschwinden unter der Box.

Könntet ihr bitte nochmals drüber schauen? :)

HTML:

Code:
<html>
    <head>
        <title>Startseite</title>
        <link href="css/style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="nav">
            <ul>
                <li>Startseite</li>
                <li>Minecraft
                    <ul>
                        <li>Statuscheck</li>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Musik Bots
                    <ul>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Kontakt</li>
                <li>Server Status</li>
                <li>Kundenlogin</li>
            </ul>
        </div>
        <section class="container">
           
        </section>
        <footer>
            <section class="footer">
                <a style="color:white;">PrepaidMiner.de &copy; 2016 - <a href="/impressum.php" style="color:white;">Impressum</a></a>
            </section>
        </footer>
    </body>
</html>

CSS:

Code:
body {
  background-image:url("../images/background.jpg");
  font-family:Melvetica, sens-serif;
}
* html body {
  text-align:center;
}
.nav {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}
.nav > ul {
  position: relative;
  left: 50%;
}
.nav ul {
  margin:0;
  padding:0;
  float:left;
  height:38px;
  box-shadow:0px 0px 32px 0px #lll;
  border-radius:10px:
}
.nav ul li {
  list-style:none;
  float:left;
  background:#222;
  padding:10px;
  width:85px;
  text-align:center;
  transition:all 500ms;
  color:#999;
  border-right:1px solid #444;
  position:relative;
  border:none;
}
.nav ul li:first-child {
  border-radius:10px 0 0 10px;
}
.nav ul li:last-child {
  border-radius:0 10px 10px 0;
  border:none;
}
.nav ul li:hover {
  background:#09C;
  color:#FFF;
}
.nav ul li:hover ul {
  height:auto;
  opacity:1;
}
.nav ul li ul {
  height:0;
  overflow:hidden;
  opacity:1;
  position:absolute;
  left:0;
  padding-top:15px;
}
.nav ul li ul li {
  width:130px;
}
.nav ul li ul li:first-child {
  border-radius:10px 10px 0 0;
  border:none;
}
.nav ul li ul li:last-child {
  border-radius:0 0 10px 10px;
  border:none;
}
.container {
  height:90%;
  width:1000px;
  top:50px;
  background-color:#fff;
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
  border-radius:15px 15px 15px 15px;
}
.footer {
  position:fixed;
  left:1px;
  top:98%;
  background-color:#222;
  border-radius:0 10px 10px 0;
}

Danke & Mit Freundlichen Grüßen,
FreakySlimeHD.
 
Werbung:
Zwecks der Schichtposition für das Menü, damit die Untermenüs nicht vom nachfolgenden Seiteninhalt über-/verdeckt werden:
CSS:
.nav {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
  z-index:500 /* Schichtposition */
}
Zwecks der horizontalen Ausrichtung von .container analog zum Menü:
CSS:
.container {
  height:90%;
  width:1000px;
  top:50px;
  background-color:#ddd;
  /*float:right;*/ /* auskommentiert */
  position:relative;
  /*left:-50%;*/ /* auskommentiert */
  text-align:left;
  border-radius:15px 15px 15px 15px;
  margin:auto /* ergänzt */
}
Demo: https://jsfiddle.net/spicelab/ue56x3tq/
 
Zwecks der Schichtposition für das Menü, damit die Untermenüs nicht vom nachfolgenden Seiteninhalt über-/verdeckt werden:
CSS:
.nav {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
  z-index:500 /* Schichtposition */
}
Zwecks der horizontalen Ausrichtung von .container analog zum Menü:
CSS:
.container {
  height:90%;
  width:1000px;
  top:50px;
  background-color:#ddd;
  /*float:right;*/ /* auskommentiert */
  position:relative;
  /*left:-50%;*/ /* auskommentiert */
  text-align:left;
  border-radius:15px 15px 15px 15px;
  margin:auto /* ergänzt */
}
Demo: https://jsfiddle.net/spicelab/ue56x3tq/

Ich Danke dir!
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben