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

Foto Banner mit Menü

T

TheSorm

Neues Mitglied
Ich bin dabei eine kleine Seite zu schreiben dafür habe ich bereits eine Menü leiste die halb Transperent ist und oben , links und recht mit dem Rand abschliest implementiert. Jetzt möchte ich das unter der halb durchsichtigen Menü leiste
ein Banner angezeigt wird, ca so:
Untitled-1.jpg

alle meine Versuche scheiterten weil entweder das Bild nicht angezeigt wurde, es repeazez wurde oder es eine komplett fixe größe hatte die sich auch beim raus und rein soomen nicht änderte. Ich würde mich über hilfe freuen :)
 
also eigentlich wollte ich das getrennt haben also den banner dann mit top: 0; nach oben ziehen dadurch das das Menü Transperent ist sieht man das Bild dann da halt auch hinter dem Menü.
 
TheSorm schrieb:
also eigentlich wollte ich das getrennt haben also den banner dann mit top: 0; nach oben ziehen dadurch das das Menü Transperent ist sieht man das Bild dann da halt auch hinter dem Menü.
Zum Vergrößern anklicken....

Soweit ich deiner Skizze entnehmen kann, könntest du den Banner(div) als Container für das Menü(nav) verwenden.
Und dieses dann innerhalb des Containers entsprechend oben positionieren :)

mfg Nita
 
wie sieht das denn konkret aus ? also ich weiß nicht wie das so aussieht was ihr meint aber es kann ja auch besser sein als was ich mir gedacht hatte. Ich dachte halt ich mache einen container div mit einem Hintergrund also dem Banner, und den verschiebt man nach oben unter das Tranzperente Menü, aber ich weiß bei beiden wegen nicht wie ich das Konkret schreiben kann ?
 
TheSorm schrieb:
wie sieht das denn konkret aus ? also ich weiß nicht wie das so aussieht was ihr meint aber es kann ja auch besser sein als was ich mir gedacht hatte. Ich dachte halt ich mache einen container div mit einem Hintergrund also dem Banner, und den verschiebt man nach oben unter das Tranzperente Menü, aber ich weiß bei beiden wegen nicht wie ich das Konkret schreiben kann ?
Zum Vergrößern anklicken....

Ich meinte eher das du den Banner als Container für die Navigation(Menü) nutzt.

In etwa so:

HTML: 
<!--Das ist der Container mit dem Banner als Hintergrundbild-->
<div id="wrapper>
    <!--- Hier kommt das Menü rein-->
    <nav>Menü</nav>
</div>

mfg Nita
 
Genau so hatte ich mir das auch vorgestellt eventuell könnte man auch den neuen Sektion Tag verwenden wie es dir besser gefällt
 
wenn ich das jetzt so amche wie ihr sagt ist der Hintergrund der Menü leiste das Hintergrundbild in x richtung wiederholt aber halt nur die ober kante davon der rest der unter dem Menü wäre wird nicht angezeigt?
 
Code: 
#wrapper {
background-image:  url("images/Bild1.jpg");
}

.menu {
background: #000000 url("images/Bild.png") no-repeat scroll  1% 0%;
background-size: 60px auto;
position: relative;
height: 100%;
opacity: 0.5;
clear: both;
z-index: 10;
width: 100%;
overflow: hidden;
font-family: Verdana;
font-size: 1.1em;
}

#navi {
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}

#navi li {
float: left;
position: relative;
right: 50%;
}

#navi a {
width: auto;
display: block;
padding:0 30px;
line-height: 3.5em;
color: #fff;
background: #000000;
text-decoration:none;
}

#navi a:hover {
color: #424242;
}

HTML: 
<div id="wrapper">
  <nav class="menu">
     <ul id="navi">
       <li>
         <a href="Home">Home</a>         </li>
       <li>
         <a href="Weiterer Link" onMouseOver="">Weiterer Link</a>         </li>
       <li>
         <a href="Weiterer Link" onMouseOver="" >Weiterer Link</a>         </li>
     </ul>
  </nav>
</div>
 
Nitamud schrieb:
Ich habe jetzt leider nicht ganz folgen können....

Welches Bild wiederholt sich denn jetzt?
Zum Vergrößern anklicken....

also ich möchte das wie auf der apple page haben und wenn ich das amche wie ihr sagt dann ist nur der hintergrund des Menüs verändert das heist da ist dann der obere streifen des banners zu sehen und der ist auch noch auf der x achse wiederholt und nicht wie gewünscht dsas der ganze banner unter dem Menü angezeigt wird. J
 
Und wie muss das dann aussehen ? Also mit hight : 100% bringt nichts und wenn ich das in px angebe ist das ja auch nicht gut
 
Hallo.

Ich glaube du hast da einen Denkfehler.

So wie du das haben möchtest gehört dein Hintergrundbild nicht ins Menü sondern in den Wrapper. Da du diesem aber keine Größe gegeben hast ist er genau so groß wie dein Menü. Das Bild im Wrapper wird dann natürlich durch das Bild im Menü verdeckt.

TheSorm schrieb:
also ich möchte das wie auf der apple page haben
Zum Vergrößern anklicken....

TheSorm schrieb:
wenn ich das in px angebe ist das ja auch nicht gut
Zum Vergrößern anklicken....

Genau so macht Apple das aber. Du solltest die Apple Seite mal mit einem Tool wie Firebug analysieren.

Gruss
Elroy
 
ja habs hinbekommen jetzt habe ich nurnoch ein Problem, das ist kleiner als der Hintergrund und wird somit wiederholt, wenn ich aber no-repeat benutze wirt es ganicht mehr angezeigt ? Wie kann ich das ändern bzw das Bild richtig strecken ? also kla mit Background size geht das aber wie mach ich das das zb alle bilder mit einer höhe von 600 angezeigt werden und wenn die breite dann nicht passt das bild nicht wiederholt wird sondern ein Rand entsteht bzw das Bild am rand über steht.
 
Hallo.

Die Antwort hst du dir doch schon gegeben, das machst du mit background-size.
Versuch es mal mit backgound-size: auto 600px:

Wenn das nicht passt musst du dich ein bischen in das Thema einlesen oder stell mal ein Beispiel online damit man das pobieren kann.
Wir haben leider nicht deine Bilder um das offline zu testen.

Gruss
Elroy
 
Oh hab mein fehler gefunden -.- hatte immer background-image: und hab da versucht was mit no-repeat reinzupacken und so das klappt natürlich nicht. Also nochmal danke für die ganze hilfe :)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben