Beiträge von lagraf

m.scatello: Stimmt, über das Wort Hintergrund habe ich drübergelesen

Ich habe mir grad mal eine kleine Testapp mit einem Warenkorb PNG gebaut, diesen absolut positioniert und die Zahl in einem <span> ebenfalls absolut in rot in den Warenkorb hineinverfrachtet. Mit 2 Buttons kann ich per JS den Zähler erhöhen und verringern. Beim Erreichen von 0 setze ich display: none ansonsten display: block per JS.

Das klappt alles, jetzt fehlt nur noch der Ajax Aufruf, der die Daten beim Klick an ein PHP Script übergibt. Sollte aber kein Problem sein, habe ich schon ein paar Mal gemacht (mit und ohne jQuery).

m.scatello: Wäre die Zahl dann nicht neben/unter dem Image?

Sempervirum: Anstelle von Fontawesome kann man auch ein eigenes png nehmen

Wichtig ist, dass die Zahl das Image überdeckt und nicht daneben steht

Es handelt sich nicht um ein Shopsystem sondern um eine Modelagentur, wo Anfragen zu ausgewählten Models geschickt werden.

Meine Vorgehensweise wäre folgende:

• Ich positioniere das Image fix mit top und right Positionsangaben
• Den Zähler positionieren ich ebenfalls fix mit kleinem Font, so dass er darüberliegt
• Beim Klick auf Auswahl eines Models setze ich einen Ajax Aufruf ab, der eine PHP Routine anwirft, welche die Modelid speichert und die Anzahl der insgesamt ausgewählten Models retouniert
• Diese Anzahl füge ich per JS per innerHtml beim Zähler ein, wenn er 0 ist zeige ich ihn nicht an

Sollte das so machbar sein oder habe ich was vergessen?

Hallo Leute,

ich möchte in einem Warenkorbsymbol (z.B. fa-heart aus fontawesome) die Anzahl der ausgewählten Artikel als Ziffer anzeigen. Wenn ich auf einen Button drücke, soll die Zahl im Warenkorbsymbol erhöht werden. Hat jemand sowas schon mal gemacht oder gesehen? Wie kann man das machen?

html-seminar.de/woltlab/attachment/2227/ oder html-seminar.de/woltlab/attachment/2228/

Ich bin jetzt aufgrund deiner Infos zu folgendem Ergebnis gekommen:

<style>
.content {display: flex; flex-wrap: wrap; padding: 0}
.col {display: flex; padding: 5px; flex-direction: column; width: 100%}
.col img {width: 100%; padding: 5px}

@media screen and (min-width: 480px) { .col {width: 50%}  }
@media screen and (min-width: 768px) { .col {width: 33.333%}  }
</style>

<div class="content">
    <div class="col">
        <img src="dummy/gallery-1.jpg">
        <img src="dummy/gallery-2.jpg">
        <img src="dummy/gallery-3-quer.jpg">
        <img src="dummy/gallery-4.jpg">
    </div>

    <div class="col">
        <img src="dummy/gallery-5.jpg">
        <img src="dummy/gallery-6.jpg">
        <img src="dummy/gallery-7.jpg">
        <img src="dummy/gallery-8.jpg">
    </div>

    <div class="col">
        <img src="dummy/gallery-9.jpg">
        <img src="dummy/gallery-10.jpg">
        <img src="dummy/gallery-11.jpg">
        <img src="dummy/gallery-12.jpg">
    </div>
</div>

Das funktioniert und springt von 3 Spalten über 2 Spalten auf 1 Spalte beim Reduzieren der Browserbreite um.

Danke für deine Hilfe!

LG

Jetzt noch eine letzte Frage:

Wenn man noch einen Zwischenschritt einlegen möchte: ab 600px 2 Columns nebeneinander (wäre sinnvoll bei einer 4-spaltigen Anzeige) und ab 400px dann 1-spaltig?

Hallo,

super, das ist ja einfacher als ich gedacht hatte!

Noch eine Frage dazu: wie macht man dieses Spaltendesign am Besten "responsive", damit bei abnehmender Bildschirmbreite die Fotos nicht immer kleiner werden? Bei einem Handdisplay soll dann in der Breite nur mehr eine Spalte gezeigt werden und die anderen beiden Spalten darunter?

LG

Hallo,

wenn ich ein 3-spaltiges Layout definieren möchte, wo sich die Spalten anhand der Bilderhöhen gegeneinander verschieben können, wie ist das zu definieren. Wenn ich meine <div> mit den Fotos der Reihe nach aufliste, dann sind die Köpfe der Fotos immer in einer Flucht angeordnet?

html-seminar.de/woltlab/attachment/2222/

Da die Beschreibung möglichst wenig vom Hintergrundfoto verdecken soll (schon gar nicht bis zum rechten Rand), habe ich es jetzt umgekehrt gelöst: Ich definiere ein zusätzliches <div> mit einer fixen width:

HTML
<div class="hero hero-slider">
    <ul class="slides">
        <li data-bg-image="fotos/test-1.jpg">
            <div class="container">
                <div class="container_text">
                    <h2 class="slider-title">Willkommen</h2>
                    <p>Text ...</p>
                    <p>Text ...</p>

CSS
.container_text { margin-right: auto; padding: 15px; *zoom: 1; background: rgba(21,18,21,0.7); position: sticky; left: -22em; width: 375px; box-shadow: 10px 10px 5px rgba(0, 0, 0, .5); }

Dieses <div> erhält einen durchscheinenden Hintergrund, damit man noch das Hintergrundfoto erkennt und einen Schatten, damit es etwas schwebend aussieht. Von der Größe her würde es auch auf Handybildschirme passen, ev. wäre es aber besser, das <div> dafür mit einer Media Abfrage zu verkleinern. Derzeit sieht es so aus:

html-seminar.de/woltlab/attachment/2221/

Die Beschreibung enthält übrigens auch eine Aufzählung, die ich aber künstlich mit <img src=..> gelöst habe.

Danke für euren Input!

LG Franz

Hallo Leute,

ich plage mich schon Stunden, die Breite eines <div> an dessen Inhalt anzupassen.

Ich habe einen Hintergrundslider, der mir bildschirmfüllende Fotos anzeigt. Zu jedem Foto möchte ich in einer darüberliegenden Box etwas Erklärung anzeigen. Damit die Box nicht die gesamte Breite füllt, soll sie nur so breit sein, wie der Inhalt Platz beansprucht.

HTML
<div class="hero hero-slider">
   <ul class="slides">
      <li data-bg-image="fotos/test-1.jpg">
         <div class="container" style="background:rgba(21,18,21,0.7)">
            <h2 class="slider-title">Willkommen</h2>
               <p>Text ...</p>
               <p>Text ...</p>
         </div>
      </li>

      <li data-bg-image="fotos/test-1.jpg">
      ...
      </li>
   </ul>
</div>

CSS
.container { margin-right:auto; margin-left:auto; padding-left:15px; padding-right:15px; *zoom:1; }

Ich habs schon beim .container mit display:table, display:table-cell, display:inline-block versucht, aber nichts passt die Breite an die Textlänge an!

Hat jemand dafür eine Lösung?

Auf der Suche nach einem Scroll Back Button habe ich ein JS Script gefunden, welches beim Scrollen einen Back Button anzeigt. Mit einer kleinen Adaptierung habe ich das Script so umgebaut, dass es die Transparenz beim Scrollen sanft ändert:

<div class="container" style="background:rgba(21,18,21,0.7); transition: background 1s">

<script>
window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            var overlay = document.querySelector (".container");
            if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
                    overlay.style.background = "rgba(64,0,0,0.7)";
                } else {
                    overlay.style.background = "rgba(21,18,21,0.7)";
                }
            }
</script>

Damit tut es, was ich wollte!

LG

Den durchscheinenden Hintergrund habe ich mit style="background: rgba(21,18,21,0.7);" gelöst.

Bleibt noch der Effekt, dass die Hintergrundfarbe sich langsam verändert, wenn man zu scrollen anfängt. Wie kann man das erreichen?

Ich habe die Seite jetzt hinbekommen, indem ich die bootstrap.css nicht mehr eingebunden habe, sondern nur mehr die CSS Anweisung

.affix {position: fixed} verwende.

Wenn der Seiteninhalt jetzt unter dem Menü durchscrollt, ist das Menü allerdings nicht mehr vernünftig lesbar, da es transparent ist. Kann man auf den Scrollvorgang reagieren und den Hintergrund des fixierten Menüs dann abdunkeln oder den Menübereich ev. auch verkleinern?

Hallo,

ich habe ein horizontales Menü im Seitenkopf, das ich so fixieren möchte, dass es beim Scrollen der Seite nicht mitscrollt. Wie läßt sich das am Besten bewerkstelligen? Ich habe schon mit affix herumprobiert, aber die Einbindung von bootstrap.css verändert mir immer diverse Schriften im fixed Block und dem Rest der Page, obwohl mein CSS File erst danach eingebunden wird.

LG

Hallo Lupus_III,

ja so ähnlich, es sollte aber ein klickbares Icon sein, das Hintergrundbild sollte etwas abdunkeln, damit die Icons besser sichtbar sind und die Icons sollten beim Überfahren mit der Maus invertieren.

html-seminar.de/woltlab/attachment/2183/

m.scatello: Sorry, wenn mein 2. Posting nicht OK ist, wollte nur die Erfolgschancen erhöhen. Wußte nicht, dass die beiden Foren zusammengehören!

Hallo,

ich hoffe, dass ich mit meiner Frage in diesem Forum richtig bin:

Ich möchte beim Hover über ein Image kleine anklickbare Icons über das Image anzeigen (siehe http://webdesign-finder.com/html/look/ bei den Modelbildern unter "Our beautiful works").

Geht das mit CSS und gibt es irgendwo ein Beispiel?

LG