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

[ERLEDIGT] CSS Menü Background Image

bodyXY

Neues Mitglied
Hallo Gemeinde,

ich bin am verzweifeln!

Ich versuche die ganze Zeit einem Menü ein Image als Hintergrund zu geben, das aus drei Teilen besteht, da sich dass ganze nicht unter verschiedenen Auflösungen optisch verändern soll somit responsive ist. Das erste PNG ist als no-repeat markiert und das zweite als repeat-x und das dritte wieder als no-repeat. Das Problem ist dabei, dass das zweite PNG mit repeat-x das dritte PNG rauschiebt und somit nicht sichtbar ist.

Der CSS Code schaut wie folgt aus:


Code:
.menue
{
  overflow: hidden;
  background-image: url("menubg1.png"), url("menubg2.png"), url("menubg3.png");
  background-repeat: no-repeat, repeat-x, no-repeat;
}

und HTML:

HTML:
<div class="menue" id="mymenue">

  <a href="index.html">Home</a>  <a href="sides/tauchen.html">Tauchen</a>  <a href="sides/ocean.html">Ocean</a>  <a href="sides/aboutme.html">About me</a>  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>        // <---- für ein anderes Menue layout bei kleinerer Auflösung --->//  </div>

menubg1.png soll linksbündig sein, menu2.png soll die Mitte ausfüllen und sich responsive verhalten und menubg.png rechtsbündig im Menü-Hintergrund.

Freue mich über jede Hilfe
confused.png


Die Box-Größe wurde über den Body definiert im CSS:

Code:
body
{
    max-height: 1300px;
    max-width: 1750px;
    margin: 0px auto;
}

Danke im Vorraus!
 
Werbung:
Hallo Gemeinde,

ich bin am verzweifeln!

Ich versuche die ganze Zeit einem Menü ein Image als Hintergrund zu geben, das aus drei Teilen besteht, da sich dass ganze nicht unter verschiedenen Auflösungen optisch verändern soll somit responsive ist. Das erste PNG ist als no-repeat markiert und das zweite als repeat-x und das dritte wieder als no-repeat. Das Problem ist dabei, dass das zweite PNG mit repeat-x das dritte PNG rauschiebt und somit nicht sichtbar ist.

Der CSS Code schaut wie folgt aus:


Code:
.menue
{
  overflow: hidden;
  background-image: url("menubg1.png"), url("menubg2.png"), url("menubg3.png");
  background-repeat: no-repeat, repeat-x, no-repeat;
}

und HTML:

HTML:
<div class="menue" id="mymenue">

  <a href="index.html">Home</a>  <a href="sides/tauchen.html">Tauchen</a>  <a href="sides/ocean.html">Ocean</a>  <a href="sides/aboutme.html">About me</a>  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>        // <---- für ein anderes Menue layout bei kleinerer Auflösung --->//  </div>

menubg1.png soll linksbündig sein, menu2.png soll die Mitte ausfüllen und sich responsive verhalten und menubg.png rechtsbündig im Menü-Hintergrund.

Freue mich über jede Hilfe
confused.png


Die Box-Größe wurde über den Body definiert im CSS:

Code:
body
{
    max-height: 1300px;
    max-width: 1750px;
    margin: 0px auto;
}

Danke im Vorraus!

Code:
background-position: top left, top center, top right;

Oder so ;)
 
Werbung:
Hallo

Die Hintergrundbilder werden grundsätzlich gestapelt. Deshalb muss das vorderste zuerst im CSS stehen und das hinterste, teilweise überdeckte, als letztes. Bei dir also wahrscheinlich (da ich die Bilder nicht kenne):

Code:
background-image:
url("menubg1.png"),
url("menubg3.png"),
url("menubg2.png");

Das weitere CSS dann:

Code:
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top;

Gruss

MrMurphy
 
Danke!

Und ich beiße mir stundenlang die Zähne daran aus, dabei hätte ich nur die Reihenfolge ändern müssen.

Jetzt würde mich aber auch interessieren, wieso das nicht ging mit meiner Reihenfolge? Da das bg1 das erste ist was ganz links angezeigt werden soll, bg2 das in der Mitte und füllend sein soll und das bg3 rechts abschließt?

Hab die Bilder mal angefügt.

Danke noch mals :)
 

Anhänge

  • menubg1.png
    menubg1.png
    480 Bytes · Aufrufe: 61
  • menubg2.png
    menubg2.png
    411 Bytes · Aufrufe: 56
  • menubg3.png
    menubg3.png
    473 Bytes · Aufrufe: 61
Hallo

Das habe ich geschrieben: Die Bilder werden gestapelt.

Bei dir in der Reihenfolge menubg1.png, dann menubg2.png und als hinterstes menubg3.png.

Wenn alle drei Bilder gleich groß sind und du keins (oder alle) wiederholen läßt würdest du nur das oberste menubg1.png sehen können.

Deshalb ist dein Eindruck

Das Problem ist dabei, dass das zweite PNG mit repeat-x das dritte PNG rauschiebt

falsch. Das dritte PNG wird nicht rausgeschoben sondern von beiden ersten PNG überdeckt.

Gruss

MrMurphy
 
Werbung:
Ah ok, jetzt hab ich es auch verstanden :) Danke!

Jetzt hab ich nur das nächste Problem und zwar,

wenn ich jetzt die Handy Ansicht einstelle, schiebt sich das Menü zusammen unter einen Icon und wird dann zu einem ausklappbaren Menü mit Reitern, nur haben die jetzt keinen Hintergrund mehr.

Vorher hatte ich als Hintergrund vom Menü nur ein Background-color gesetzt und das wurde dann so auch für das 2te Menü so übernommen

Das ist der Code:

Code:
.menue .icon
{
  display: none;
}

@media screen and (max-width: 700px)
{
  .menue a:not(:first-child) {display: none;}
  .menue a.icon
  {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .menue.responsive {position: relative;}
  .menue.responsive .icon
  {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menue.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Ein Bild hab ich auch direkt angehangen.
 

Anhänge

  • secendmenue.png
    secendmenue.png
    38 KB · Aufrufe: 8
Ok habe es schon herausgefunden, jetzt würde ich gerne nur ab <a href="sides/tauchen.html"> den Hintergrund für das zweite Menü definieren und Home ausschließen. Da ich sonst eine Doppelung habe.

EDIT:

Habs hinbekommen in dem ich den gewünschten Reitern eine ID gegeben habe und dann noch mal den Background definiert habe.

Code:
  #secendBG {
  background-image:
  url("menubg1.png"),
  url("menubg3.png"),
  url("menubg2.png");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: top left, top right;
  max-width: 150px;
  }
 

Anhänge

  • secendmenueBG.png
    secendmenueBG.png
    22,3 KB · Aufrufe: 5
  • secendmenueBGnew.png
    secendmenueBGnew.png
    30,3 KB · Aufrufe: 3
Zuletzt bearbeitet:
jetzt würde ich gerne nur ab <a href="sides/tauchen.html"> den Hintergrund für das zweite Menü definieren und Home ausschließen. Da ich sonst eine Doppelung habe.
Selber schuld, wenn das hier zur Ausführung kommt:
HTML:
<a>        // <---- für ein anderes Menue layout bei kleinerer Auflösung --->//  </div>
Und ein drittes Menü für den Rest zwischem großen PC-Monitor u. kleinem Smartphone-Display? o_O

Nur zur Orientierung, was CSS mit einer einzigen HTML-Struktur so alles responsiv anstellen kann:
Btw, mein erster Gedanke zu Beginn des Themas als Alternative: Die Pseudoelemente ::before und ::after rahmen nav bildhaft ein.

Mein Zweiter: Das Menü als Flexbox garnieren, zwecks der mobilen Ansicht (vertikal = flex-direction:column) :cool:
 
Werbung:
Hey,

was meinst du mit selber Schuld wenn das hier zu Tragen kommt? Das ist ja das zweite Menü das wie gewünscht erscheint?

Bin dabei meine ITA Ausbildung zu machen und bringe mir den ganzen responsiv Stoff selber bei, da wir das noch überhaupt nicht hatten. Schreibe gerade das erste mal eine komplette Seite selber (erst mal nur HTML u CSS), somit ist das alles neu für mich. Ist eine Haus-Klausur.

Hier mein Menü über JSfiddle:

https://jsfiddle.net/n4dus0us/1/

Und danke für die Seite :) Kannte ich gar nicht
 
Das ist ja das zweite Menü das wie gewünscht erscheint?
Aber nicht mittels doppeltem HTML-Code.

Hast Du Dir nicht den Code der Bootstrap-Navbar angeschaut? Insbesondere den HTML-Part!

Da taucht nur einer auf. Und trotzdem responsiv!

Vielleicht nicht haargenau im Detail Deiner Vorlage entsprechend, aber responsiv in allen Facetten!
 
Werbung:
Bootstrap kenne ich noch gar nicht. Bin ich somit noch nicht vertraut. Eigentlich muss die Seite nicht mal responsiv sein, mache das nur aus eigenen Antrieb.

Hab mir das gerade trotzdem mal angeschaut die Erklärung dazu auf w3Schools. So direkt blicke ich da nicht durch.

Wenn ich jetzt das Menü von deinem letzten Post aufrufe, sieht das aber anders als meines und auch nur noch 1 Menü u keine 2 mehr?

Hab Nachsicht :) bin ambitioniert aber noch relative am Anfang.
 
Warum eigentlich background-images? Die Einrahmung lässt sich auch als border umsetzen, und selbst Farbverläufe stellt man heutzutage per CSS Gradienten dar.
http://www.colorzilla.com/gradient-editor

Nebenbei bemerkt ist es wichtig, CSS anwenden zu können. Aber sofern du kein hochtalentierter Künstler bist, wirst du bei UI-Komponenten wie der Navbar kaum etwas besseres zustande bringen als die Leute von Apple, Google & Co. Setze lieber ein gängiges Framework ein und tausche ggf. die Farben aus.
 
Werbung:
Hey,

das mit dem Editor schau ich mir mal an, danke.

Frameworks werde ich nicht benutzen, soll es selber schreiben und möchte es auch richtig lernen und nicht nur mir die Codes zusammen suchen.

Vielleicht nicht der einfachste Weg, aber denke der sinnvollste :)

PS:

Zu dem anwenden können, ich bin ja gerade mal am Anfang und hab mir das alles selbst beigebracht was ich bisher kann, kein Meister ist bisher vom Himmel gefallen :)
 
Zuletzt bearbeitet:
Bootstrap kenne ich noch gar nicht. Bin ich somit noch nicht vertraut.
Musst Du auch nicht, um zumindest anhand der verlinkten Beispiele zu erkennen, dass die (komplexere) Menüstruktur der Navbar nur einmal im HTML-Code enthalten ist.
Hab mir das gerade trotzdem mal angeschaut die Erklärung dazu auf w3Schools.
Und auch dort kommt das Menü im Markup nur einmal vor; für das responsive Verhalten sorgt CSS.

Einfach das Browserfenster in der Breite runterskalieren, um die kleineren Auflösungen nachzuempfinden.

Gilt auch für mein letztes Fiddle-Update von gestern Abend, das einen Breakpoint für @media (max-width:639px) vorsieht: bis 639px werden die Menüpunkte vertikal ausgerichtet, ab 640px horizontal (Breite wurde von mir frei gewählt, ist jederzeit austauschbar).
Wenn ich jetzt das Menü von deinem letzten Post aufrufe, sieht das aber anders als meines und auch nur noch 1 Menü u keine 2 mehr?
Abgesehen von den äußeren Hintergrundbildern, die alternativ mittels der Pseudoelemente ::before u. ::after eingebunden sind, habe ich ansonsten ein grundsätzliches Beispiel bereitgestellt, wie ein responsives Menü mittels CSS technisch umgesetzt werden könnte.

Aus diesem Grund erhebt es auch keinen Anspruch auf Deckungsgleichheit zu Deiner Arbeitsvorlage, und ist ebenso wenig als verbindlicher Lösungsvorschlag zu verstehen.

Die (Weiter)Entwicklung verbleibt somit vollkommen in Deinen Händen.
 
Guten Morgen,

@Spicelab,

also irgendwie steh ich auf dem Schlauch? Mein Menü ist doch auch nur einmal in meinem HTML Code?

Code:
<div class="menue" id="mymenue">
<a href="index.html">Home</a>
<a href="sides/tauchen.html">Tauchen</a>
<a href="sides/ocean.html">Ocean</a> 
<a href="sides/aboutme.html">About me</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>

mehr hab ich nicht im HTML Code dafür, rest ist alles CSS?

Den Rest schau ich mir gleich noch mal genauer an, war gestern schon zu platt, hing zu lange daran.

Gruß
 
Werbung:
also irgendwie steh ich auf dem Schlauch? Mein Menü ist doch auch nur einmal in meinem HTML Code?
Ich habe mich gestern lediglich darauf bezogen, was den Anschein erweckt, dass das Menü doppelt (mehrfach) im HTML auftaucht:
HTML:
</a>        // <---- für ein anderes Menue layout bei kleinerer Auflösung --->//  </div>
jetzt würde ich gerne nur ab <a href="sides/tauchen.html"> den Hintergrund für das zweite Menü definieren und Home ausschließen. Da ich sonst eine Doppelung habe.
Und ich Dich (etwas sarkastisch) gefragt hatte, ob Du ein weiteres (drittes) Duplikat einfügen willst, das alle übrigen Auflösungen berücksichtigt, die sich zwischen dem PC-Monitor und dem Smartphone-Display befinden (Notebooks, Tablets).

Oder was hast Du mit der Doppelung gemeint?
 
Der Kommentar sollte dazu dienen, damit man weiß was das Javascript macht, das ich nicht beigefügt hatte. Und zwar dass das Menü zu einem Reiter-Menü wird ab einer bestimmten Größe (unter 700px) und dann das Icon sichtbar wird was in dieser Zeile definiert ist:

Code:
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

Javascript:

Code:
<script>
function myFunction() {
    var x = document.getElementById("mymenue");
    if (x.className === "menue") {
        x.className += " responsive";
    } else {
        x.className = "menue";
    }
}
</script>

CSS Code fürs komplette Menü:

Code:
.menue
{
  overflow: hidden;
  background-image:
  url("menubg1.png"),
  url("menubg3.png"),
  url("menubg2.png");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: top left, top right;
}

.menue a
{
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-left: 15px;
}

.menue a:hover
{
  color: #008eff;
}

.menue .icon
{
  display: none;
}

@media screen and (max-width: 700px)
{
  .menue a:not(:first-child) {display: none;}
  .menue a.icon
  {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .menue.responsive {position: relative;}
  .menue.responsive .icon
  {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menue.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #secendBG {
  background-image:
  url("menubg1.png"),
  url("menubg3.png"),
  url("menubg2.png");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: top left, top right;
  max-width: 150px;
  }
}


Mit der Doppelung meinte ich nur den Hintergrund. Da ich diesen in der CSS zuerst ohne ID Zuweisung einfach im CSS unter {.menue.responsive a} rein geschrieben hatte und da kam es dann zu einer Hintergrund-Doppelung auf der Navbar. Welche ich dann per ID Zuweisung wieder richtig stellen konnte. Deswegen hatte ich extra die Bilder in dem Post beigefügt, vorher / nachher.

Aktuell das Menü mit ID:

Code:
  <a href="index.html">Home</a>
  <a id="secendBG" href="sides/tauchen.html">Tauchen</a>
  <a id="secendBG" href="sides/ocean.html">Ocean</a>
  <a id="secendBG" href="sides/aboutme.html">About me</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

Gruß
 

Anhänge

  • vorher mit Doppelung.png
    vorher mit Doppelung.png
    22,3 KB · Aufrufe: 1
  • nachher ohne Doppelung.png
    nachher ohne Doppelung.png
    23,7 KB · Aufrufe: 1
Zurück
Oben