ein Element überlagert ein anderes Element

-1

Ich erstelle eine Website ähnlich wie Jsbin in dieser Website ich erstellt haben Menüleiste in schwarzer Farbe und unter Menüleiste gibt es Code-Container, der in grauer Farbe ist, wo Benutzer einen Code eingeben mein Problem ist die codecontainer wird overlaping die Menüleiste wenig nicht zu 100% i auf über Schoß wollen donot es so wie ich dieses Problem lösenein Element überlagert ein anderes Element

hier ist mein Code

HTML

<html> 
<head> 
<title>CodePlayer</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css"> 
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
</head> 
<body> 
<div id="wrapper"> 
<!--------------------MENUBAR----------------------------------> 
<div id="menubar"> 
<div id="logo">CodePlayer</div> 
<div id="btnrun"><button id="runbtn">Run</button></div> 
<div id="menubar"> 
<ul id="menulist"> 
<li>HTML</li> 
<li>CSS</li> 
<li>JavaScript</li> 
<li style="border:none;width:15%">Output</li> 
</ul> 
</div> 
</div> 
<!--------------------------------------------------------> 
<div class="emptydiv"></div> 
<!------------------CODECONTAINER----------------------------------------> 
<div class="codecontainer" id="htmlcontainer"> 
<textarea>Example</textarea> 
</div> 

</div> 
<!---------------------------------------------------------------> 
<script> 
</script> 
</body> 
</html>

CSS

body{ 
    margin:0; 
    padding:0; 
} 
#menubar{ 
    background-color: #000000; 
    width:100%; 
    height:50px; 

} 
#logo{ 
    font-family: 'Lobster', cursive; 
    color:white; 
    font-size:30px; 
    padding:5px 0 0 15px; 
    float:left; 
} 
#runbtn{ 
    float:right; 
    font-size:15px; 
    background-color:rgba(0,0,0,1.00); 
    border:1px solid #FFFFFF; 
    width:60px; 
    height:20px; 
    border-radius:10px; 
    color:white; 
    cursor:pointer; 
    position:relative; 
    top:8px; 
} 
#btnrun{ 
    padding: 12px 20px 0 0; 
} 
#menulist{ 
    list-style:none; 
    margin:0 auto; 
    border:1px solid #FFFFFF; 
    width:296px; 
    height:30px;  
    padding:0; 
    position:relative; 
    top:2px; 
} 
#menulist li{ 
    float:left; 
    color:white; 
    border-right:1px solid white; 
    padding:5px 12px 7px 15px; 
    cursor:pointer; 
} 
li:hover{ 
    background-color:#FFFFFF; 
    color:rgba(0,36,255,1.00) !important; 
} 
.emptydiv{ 
    clear:both; 
} 
.codecontainer{ 
    background-color:rgba(177,177,177,1.00); 
    color:black; 
    float:left; 
    height:100%; 
    width:25%; 
}

Quelle

2016-07-03 Mandar Sant

die folgende Änderung

#menubar { 
    background-color: #000000; 
    width:100%; 
    height:auto; 
    padding: 10px; /* you can change this, but it's to add some spacing on your menubar */ 
}

Quelle

2016-07-03 11:39:38 pzelenovic

nein, es tooo viel Platz fügt –

so ändern, wie Sie es brauchen, padding nicht notwendig ist :) das ist, warum ich nach links Dieser Kommentar dort für dich. – pzelenovic

ein Element überlagert ein anderes Element

Antwort

Verwandte Themen