Überlauf Logo außerhalb nav bar

Question

ich den Überlauf-y versucht haben: sichtbar in CSS, aber das Logo immer noch schneidet, ich stelle mir vor, es hat etwas, da mit dem Körper zu tun in allen Auf den anderen Seiten wird das Logo so angezeigt, wie ich es möchte.

<div class="nav-logo"> 
<img class="lightup-logo" src="image/logo.png" alt=""/> 
</div> 
    .nav-logo { 
    float: left; 
    overflow-y: visible; 
    width: 24%; 
    padding: 0px; 
    margin: 0px; 
    } 

Auf einer Seite zur Kenntnis des Logo in allen anderen Seiten wie vorgesehen funktioniert, es überläuft schön, es ist nur in der Index-Seite, die das Problem scheint zu erscheinen.

Für diejenigen, die nach einem vollständigen Codebeispiel suchen.

<header> 
    <div class="header-container"> 
     <div class="nav-logo"> 
     <img class="lightup-logo" src="image/logo.png" alt=""/> 
     </div> 
    </div> 
    </header> 
    <main> 
    <div class="body-container"> 
    <div class="large-container"></div> 
    <div class="clear"></div> 
    </div> 
    </main> 



header { 
    padding: 0px; 
    margin: 0px; 
    background: rgba(31,34,36,1); 
background: -moz-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%); 
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,34,36,1)), color-stop(25%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), color-stop(77%, rgba(0,0,0,1)), color-stop(100%, rgba(31,34,36,1))); 
background: -webkit-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%); 
background: -o-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%); 
background: -ms-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%); 
background: linear-gradient(to right, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f2224', endColorstr='#1f2224', GradientType=1); 
} 
.nav-logo { 
     float: left; 
     overflow-y: visible; 
     width: 230px; 
     height: 100%; 
     width: 24%; 
     padding: 0px; 
     margin: 0px; 
    } 
.header-container { 
    max-width: 1000px; 
    margin: auto; 
    border-left: 0px; 
    border-right: 0px; 
    border-top: 0px; 
    border-bottom: 1px solid transparent; 
    -webkit-border-image: url(/border.png) 28 stretch; /* Safari 3.1-5 */ 
    -o-border-image: url(/border.png) 28 stretch; /* Opera 11-12.1 */ 
    border-image: url(/border.png) 28 stretch; 

} 
main { 
    margin: 0px; 
    padding: 0px; 
} 
.large-container { 
     height: 478px; 
     background-image: url(../image/sliced1.png); 
    } 
.body-container { 
    margin: auto; 
    max-width: 1000px; 
    position: relative; 
} 

Wenn ich z-Index hinzufügen: -1 an den Körper-Behälter i das Ergebnis i (Logo überläuft) verbindet in den Körper-Behälter nicht mehr arbeiten jedoch wollen bekommen.

Answer 1

• screen_styles.css, line 48, entfernen z-index: 5px;. z-index hat nichts mit Pixeln zu tun.
• fügen Sie diese Regeln zu Headerline 14:

header { 
    position: relative; 
    z-index: 99; 
} 

, was darüber ist. Der Grund, warum z-index nicht funktionierte, war, weil Sie versuchten, es auf einem position:static Element zu verwenden. Es funktioniert nur bei Elementen mit position, die nicht static sind.

Ihr Projekt hat einige Fehler, Sie sollten einen anständigen Front-End-Entwickler vor dem Start haben, um es gelinde auszudrücken.

Answer 2

versuchen

.nav-logo img 
    { 
    max-width: 100px; //width of div 
    max-height: 100px;//height of div 
    } 

oder Sie können logo.png, Hintergrund der div

<div class="nav-logo"> 
</div> 

und

.nav-logo { 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-image: url("image/logo.png"); 
background-repeat: no-repeat; 
background-size: contain; 
} 

enthalten macht füllen Hintergrundbild das div verwenden machen und nicht größer werden.