Navigationsbereich und z.B iframe oder erstellte Boxen zanken sich

Moritz Vogt

Hallo Community,ich hab hier ein Problem, nämlich hab ich ein Navigationsbereich und immer wenn ich z.B einen iframe einbinden will und den mit Margin-top verschieben will, dann verschiebt sich der Navigationsbereich mit. Woran kann dass liegen ? Ich zeige euch mal meinen Code Und bitte nicht wundern bin nicht so gut in der Webprogrammierung drin
So schaut es aus wenn ich es mit Margin-top verschiebe, ich will,dass der Navigations bereich oben bleibt.

Ganz unten erstell ich meinen Container und füge einen iFrame hinzu Hier mein HTML Code zu dieser Seite - später kommt noch die dazugehörige CSS Datei Dazu

HTML

<!DOCTYPE html>




<html lang="de">




<head>
	<meta charset="utf-8">
	<title>Charts DE</title>
	<link rel="stylesheet" href="../IndexCSS.css">
	<script type="text/javascript" src="JavaScript.js"></script>
</head>




<body class="BackgroundDeutschland">




<nav>




  <ul>
    <li><a href="../Home.html" title="Startseite">Home</a></li>

    <li class="submenu"><a href="#" title="aktuelle Charts">Charts</a>
      <ul>
        <li class="submenu"><a href="DE.html" title="Charts Deutschland">DE Charts</a></li>

        <li class="submenu"><a href="UK.html" title="United Kingdom Charts">UK Charts</a></li>

		<li class="submenu"><a href="US.html" title="United States Charts">US Charts</a></li>
      </ul> 
    </li>


    <li class="submenu"><a href="#" title="Interpreter">Interpreter</a>

	<ul>

	<li class="submenu"><a href="../Interpreter/Pink.html" title="Musiker 1">P!nk</a></li>
	<li class="submenu"><a href="../Interpreter/CalvinHarris.html" title="Musiker 2">Calvin Harris</a></li>
	<li class="submenu"><a href="../Interpreter/Rihanna.html" title="Musiker 3">Rihanna</a></li>
	<li class="submenu"><a href="../Interpreter/JustinBieber.html" title="Musiker 4">Justin Bieber</a></li>
	<li class="submenu"><a href="../Interpreter/MarkForster.html" title="Musiker 5">Mark Forster</a></li>
	<li class="submenu"><a href="../Interpreter/Sido.html" title="Musiker 6">Sido</a></li>
	<li class="submenu"><a href="../Interpreter/AlanWalker.html" title="Musiker 7">Alan Walker</a></li>
	<li class="submenu"><a href="../Interpreter/ChrisBrown.html" title="Musiker 8">Chris Brown</a></li>

	</ul>
	</li>

    <li><a href="../Remix/Remix.html" title="Remix des Tages">Remix des Tages</a></li>
    <li><a href="../Wir/Wir.html" title="Das sind wir">Über uns</a></li>
  </ul>
</nav>
 <div class="box">     
<iframe class="1_CHARTSDEU" width="500" height="100" scrolling="no" frameborder="no"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/246573380&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
 </div>




</html>

Alles anzeigen

Hier meine CSS - Datei :

Code

nav {
    box-sizing: border-box;
    float: left;
    width: 100%;
    background: #424242;
    font-size: 16px;
}




nav ul {
    margin: 0;
    padding: 0;
}




nav a {
    display: block;
    color: #fff;
    text-decoration: none;
}




nav ul li{
    position: relative;
    float: left;
    list-style: none;
}




nav ul li:hover {
    background: #DF0101;
}




nav ul li a {
    padding: 20px;
}




nav ul ul {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: #333;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.6);
}




nav ul ul li {
    float: none;
    width: 200px;
    border-bottom: 1px solid #555;
}




nav ul ul li a {
    padding: 10px 20px;
}




nav ul li:hover > ul {
top:100%;
left:0;
}




nav ul ul li:hover > ul {
    top: 0;
    left: 200px;
}




nav ul li.submenu > a:after{
    position: relative;
    float:right;
    content: '';
    margin-left: 10px;
    margin-top: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    border-bottom: 5px solid transparent;
}




nav ul ul li.submenu a:after{
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}




nav ul ul li:last-child {
    border-bottom: none;
}




/*CHARTS_DEU*/
div.box {

            height : 300px;
            width: 1500px;
            float: center;
            border : 5px;
            background-color : black;


            background:#b5f5f5;

        }

Alles anzeigen

Woran kann dass liegen, dass er immer mein Submenü mit verschiebt ?
Danke im Vorraus für Antworten

djheke

wo ist dein html?

Moritz Vogt

Komisch in der Vorschau hat noch alles gut ausgeschaut
Aber jetzt hab ich es überarbeitet.
Danke für den Hinweis

djheke

Mit deinem gezeigten Code funktioniert's. Übrigens, float:center gibt es nicht.

iframe {
margin-top:100px;
}

Moritz Vogt

Ok Danke für die Antwort, aber wenn ich jetzt zum Beispiel ein Rechteck erstelle und das verschieben möchte, dass funktioniert nicht.

Und wenn ich mehrere iFrame einbinde funktioniert dass doch auch nicht oder ?

- - - Aktualisiert - - -

Ah Ok er ordnet es dann untereinander an

djheke

Code

div.box {
 width: 100%;
 display:inline-block;
 text-align:center;
 margin-top:10px;  
 padding:10px;                  
 background:#b5f5f5;
}

Wenn's nebeneinander sein soll

Code

div.box {
 width:calc( 50% - 20px);
 float:left;
 text-align:center;
 margin:10px ;  
 padding:10px;  
 box-sizing:border-box;                
 background:#b5f5f5;
}


iframe {
 width:100%;
 height:100px;
}

Alles anzeigen

Moritz Vogt

Danke für die Antwort

Navigationsbereich und z.B iframe oder erstellte Boxen zanken sich

Tags

Benutzer online in diesem Thema