dropdown mit download

PeterPlus hat gesagt.:
also Schwachsinn
Zum Vergrößern anklicken....
Schwachsinn? Wenn ich mir deinen ersten Versuch ansehe, der komplett auf Tabellen aufgebaut war, hättest du keine Chance gehabt, die Seite auf Smartphones vernünftig darzustellen. Und wenn man schreibt "alle Tabellen", dann muss da nicht zwingend damit zu tun haben, ist semantisch aber falsch. Aber wenn man Antworten ignoriert oder nur halb umsetzt, dann darfst du dich nicht wundern, wenn die Motivation zu helfen in den Keller geht. Also noch viel Erfolg mit deiner Seite.
 
Wollte Niemanden beleidigen, war nie meine Absicht.
Etwas "besser wissen" oder das auch noch "erklären können" sind eben zwei paar Schuhe.

Welche Hinweise von Dir ich ignoriert habe, kann ich noch jetzt nicht nachvollziehen- Du sprichst hier nicht mit gleichwertigen Programmierern und Deine sehr fachlich kurz gehaltenen Hinweise ohne detaillierte Erläuterungen wurden einfach nicht verstanden, dann kann ich auch nichts damit anfangen. Das meine ich mit dem Erklären.

Aber auch wenn es nur in kleinen Schritten vor sich geht - mit zwischendurch Suchmaschine mit KI und neuen html-Vorschlägen, die gleich eingebaut werden und dann auch nicht die Lösung sind - bin ich ja schon etwas weiter gekommen, auch Dank dem Forum.
 
Beim dropdown als table gelang es mir, das das Bild der runterzuladenden Datei und ihren Linknamen nicht überdeckend zu haben, sondern den Dateinamen unter dem Bild.
Mit CSS scheint das nicht möglich zu sein, besonders wenn es sich noch dazu an Bildschirmgrößen von Handys anpassen soll.
 
Etwas "besser wissen" oder das auch noch "erklären können" sind eben zwei paar Schuhe.
Zum Vergrößern anklicken....
Das trifft zu: Häufig geht die Fähigkeit, Dinge zu beherrschen, nicht einher mit der Fähigkeit, sie zu erklären und anderen zu vermitteln.

Mit CSS scheint das nicht möglich zu sein
Zum Vergrößern anklicken....
Generell hast Du mit CSS sehr viel mehr Möglichkeiten als mit Attributen. Was Du vorhast, kann man sicher auch mit CSS realisieren.
Ist dieser Link noch aktuell, d. h. ist das dein letzter Stand:
MF23-DOWNLOAD
?
 
Alles gut, Gesundheit geht natürlich vor.

Das ist ja in so fern schon mal positiv als die Selects von den Tabellen befreit sind.

Nächste Maßnahme: flex-wrap: wrap; beim Container hinzu fügen, damit bei schmalem Browserfenster die Selects untereinander angeordnet werden:
1702828479861.png

Weitere Maßnahme: Das CSS für die Selects wiederholt sich ständig und unterscheidet sich nur im Hintergrundbild. Und eine ID darf nur ein Mal im ganzen Dokument vor kommen, also dieses:
Code: 
<select class="image-dropdown5" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Streben/STL/3eck-STB-GelenkFortsetzung.stl" data-img-url="https://3d.peterplus.eu/MF23/download/Streben/3eck-STB-GelenkFortsetzung.png">
            3eck-STB-GelenkFortsetzung
        </option>
        usw.
Durch dieses ersetzen:
Code: 
<select id="image-dropdown5" class="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Streben/STL/3eck-STB-GelenkFortsetzung.stl" data-img-url="https://3d.peterplus.eu/MF23/download/Streben/3eck-STB-GelenkFortsetzung.png">
            3eck-STB-GelenkFortsetzung
        </option>
Dann wird das CSS wesentlich kompakter:
Code: 
  /* Dieses nur ein Mal: */
  .image-dropdown {
            appearance: none;
            border: none;
            background-repeat: no-repeat;
            background-position: center top;
            background-color: #FFF8DC;
            padding-top: 240px;
            padding-bottom: 10px;
            text-align: center;
            font-size: 35px;
            color: blue;
            background-size: auto 230px;
  }

  /* Und jetzt die Hintergrundbilder individuell fest legen */
  #image-dropdown1 {
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png');
  } 
                   
  .image-dropdown2 {
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-Norm.png');
  }
                    
  .image-dropdown3 {
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png');
  }

/* usw. */
 
Hallo,

habe jetzt 2h verbracht das einzuarbeiten, das mit dem wrap dürfte funktionieren, obwohl: wenn man´s am Handy anschaut, ist es noch nicht sehr zufriedenstellend, da nicht zentrisch sondern irgendwie links; und habe das aber jetzt nur im ersten Bereich zum Test gemacht, der Rest fehlt ja sowieso noch.

Das mit den image-dropdown habe ich auch gemacht, dann fehlen aber die Bilder.

Dann hab ich gesehen, die angegebene zu ersetzenden Zeile lautet:

<select id="image-dropdown5" class="image-dropdown">

und habe gedacht, viell. ein Tippfehler von Dir und habe es so verändert:

<select id="image-dropdown" class="image-dropdown5">

Da war dann was zu sehen, aber nicht als das gewünschte Bild zu erkennen, sondern nur ein Streifen.

Das habe ich dann nicht mehr lösen können. Diese letzte Version hat den Zusatz ----9.html:
MF23-DOWNLOAD

Danke für Deine Hilfe, sowas ist verständlich und lehrreich zugleich, auch wenn es aus irgendwelchen Gründen noch nicht so richtig klappt...
 
PeterPlus hat gesagt.:
habe jetzt 2h verbracht das einzuarbeiten
Zum Vergrößern anklicken....
Aber leider ungenügend die Änderungen von Sempervivum beachtet! :(:(

Sempervivum:
CSS: 
 #image-dropdown1 {
      background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png');
  }
Du:
CSS: 
.image-dropdown1 {
    background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png');
  }
Sempervivum:
HTML: 
<select id="image-dropdown1" class="image-dropdown">
Du:
HTML: 
<select id="image-dropdown" class="image-dropdown1">

Du solltest deutlich genauer die Antworten lesen.
 
Mir sind da leider selber zwei Fehler unterlaufen, möglicher Weise hat dich das verwirrt:
Code: 
  /* Und jetzt die Hintergrundbilder individuell fest legen */
  #image-dropdown1 {
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png');
  }
                  
  /* falsch .image-dropdown2 { */
  #image-dropdown2 { /* richtig */
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-Norm.png');
  }
                    
  /* falsch: .image-dropdown3 { */
  #image-dropdown3 { /* richtig */
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png');
  }

/* usw. */
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück