Wie bekomme ich die Navigationsleiste auf dem Banner?

Ich möchte die Navigationsleiste auf dem Banner haben? Ist das möglich. Ich habe die folgenden css versucht zu erreichen und es funktioniert, aber es geht über den Rahmen des Wrappers. Hier sind die folgenden CSS:Wie bekomme ich die Navigationsleiste auf dem Banner?

.navbar-buttons{ 
    padding-top:10px; 
    padding-right:20px; 
    text-align:right; 
    list-style:none; 
    margin:0 auto; 
    overflow:hidden; 
    <!---I commented it out because like I mentioned above, goes out of scope---> 
    <!---background-image: url(./img/Intranet_Banner.jpg);---> 
    width:100%; 
} 

#wrapper { 
    width: 940px; 
    height:100%; 
    margin: 0 auto; 
}

folgende HTML-Seite navpage ist:

<div id="wrapper"> 

<!-- content-wrap starts here --> 
<div id="content-wrapper">  

    <img src="img/Banner.jpg" alt="Banner" class="no-border img-banner" /> 

      <!-- Menu Tabs --> 
     <ul> 
      <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:blue !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a></li> 

     </ul> 
</div>

Quelle

2016-06-21 Roberto Flores

sollte wirklich aus Ihrem Sprachführer eliminiert werden. Abgesehen davon, seien Sie bitte genauer, was Sie hier erreichen wollen. "Auf dem Banner" ist nicht sehr spezifisch. Außerdem sind CSS Kommentare '/ * Kommentar * /', nicht '' –

@Wes Foster: Was ich meine ist die Links der Navigationsleiste ist auf dem Bild. Das Bild ist also der Hintergrund der Navigationsleiste, die ich erreichen kann, aber das Problem ist, dass es den Rahmen sprengt. Und vielen Dank für Ihren Vorschlag –

@ Wes Foster: Ja, Sie sind richtig über die Kommentare für CSS, aber es ist in der HTML-Seite getan, weil ich nicht sicher bin, wie Coldfusion zu verwenden und die CSS-Dateien mit den cfm-Dateien noch verknüpfen –

Sie können die background-image Eigenschaft verwenden, setzen einen background-image auf #content-wrapper, anstatt zu versuchen, die Liste oben auf die bewegen .Bild.

machte ich ein paar Anpassungen an Ihrem Code: "Ist es möglich,"

.navbar-buttons { 
 
    padding-top: 10px; 
 
    padding-right: 20px; 
 
    list-style: none; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 
#content-wrapper { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/93/Long_sky_background_%2B_PAN.jpg'); 
 
} 
 
#wrapper { 
 
    width: 940px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
a { 
 
    color: white; 
 
}

<div id="wrapper"> 
 

 
    <!-- content-wrap starts here --> 
 
    <div id="content-wrapper"> 
 
    <!-- Menu Tabs --> 
 
    <ul> 
 
     <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a> 
 
     </li> 
 

 
    </ul> 
 
    </div> 
 

 
</div>

View on JSFiddle

Quelle

2016-06-21 16:24:38 Anthony

Danke @ Anthony, es hat geholfen. –

Kein Problem. Froh, dass es geholfen hat – Anthony

Wie bekomme ich die Navigationsleiste auf dem Banner?

Antwort

Verwandte Themen